【8ステップでがんばる】さくらレンタルサーバーでWordPressサイト立ち上げ

対象となる人

さくらレンタルサーバーのスタンダードプランの契約をしている人。FTPサーバーへアクセスが出来る人。

とりあえず独自ドメインの取得からWordPressサイトを解説まで、下記のステップで進めていきます。

  1. ドメイン取得
  2. FTPサーバで対象のドメインのフォルダを作成
  3. ドメインを管理画面に加する
  4. WordPress 用データベース作成
  5. WordPress インストール用フォルダを作成
  6. WordPress をインストール
  7. index.php と .htaccess の設定
  8. サイトアドレスの設定

8ステップもあって初めてだと少し大変かもしれませんがなるべく分かりやすい様に画像もたくさんつけているので1つずつやっていきましょう。

今回はみなさんが見ているこのサイト「notemite.com」の立ち上げを例として進めていきます。

1. ドメイン取得

まずはドメインを取得します。ドメインとは「〇〇.com」や「〇〇.co.jp」など、ウェブサイトの住所のようなものです。このステップで自分のウェブサイトの住所を取得しましょう。

さくらレンタルサーバー管理画面 > ドメイン/SSL > 独自ドメイン申し込みをクリック。遷移先のページで新規追加をクリックすると、下の画像の様にドメイン検索画面が表示されます。

もしくは下記リンクで直接ドメイン検索画面へ飛べます。

https://secure.sakura.ad.jp/order/domain/

この画面で自分が使いたいドメイン名を検索します。「notemite」で検索すると、notemite.jp や notemite.com、notemite.org など、検索した文字列が含まれるドメイン名が表示されます。好みのものがあったら「申し込む」をクリックして手続きを進めます。

支払い方法を選択して進みます。私はクレジットカードを選択しました。

「この内容で申し込む」をクリックすると申し込みが送信されます。

申し込みを送信したら下記リンクから管理画面へ戻ります。

https://secure.sakura.ad.jp/menu/top/

「ドメインの確認」をクリックすると契約しているドメインが表示されます。

ドメイン申請後、契約ドメイン画面で有効期限が「新規申込中」となりますが、私の場合は10分ぐらいで下の画像の様に有効期限が表示され使用可能になりました。

上記の様な表示になったらドメインの取得は完了です。次は FTP サーバ上でこのドメインのフォルダを作ります。

  1. ドメイン取得 - 完了!
  2. FTPサーバで対象のドメインのフォルダを作成 - Next!
  3. ドメインを管理画面に追加する
  4. WordPress 用データベース作成
  5. WordPress インストール用フォルダを作成
  6. WordPress をインストール
  7. index.php と .htaccess の設定
  8. サイトアドレスの設定

2. FTPサーバで対象のドメインのフォルダを作成

FTPサーバでドメインのディレクトリ(フォルダ)を作成します。FTPサーバーの「www」フォルダにアクセスします。

*今回は notemite.com のドメインを例として進めていきますので、既に取得している別のドメインのフォルダは黒塗りで隠しています。

使っているツールによって画面が違いますが、私が使っている Cyberduck ではこんな感じ。画面上部に /home/〇〇〇/www とある通り、FTP サーバーの「www」フォルダの中を表示している状態です。

今回はドメイン名そのままで「notemite」というフォルダを作成します。

「www」フォルダの中に「notemite」フォルダが作成されました。これでこのステップは完了です。

  1. ドメイン取得 - 完了!
  2. FTPサーバで対象のドメインのフォルダを作成 - 完了!
  3. ドメインを管理画面に追加する - Next!
  4. WordPress 用データベース作成
  5. WordPress インストール用フォルダを作成
  6. WordPress をインストール
  7. index.php と .htaccess の設定
  8. サイトアドレスの設定

3. ドメインを管理画面に追加する

このステップでは、取得したドメインをさくらレンタルサーバーの管理画面上で登録します。

さくらレンタルサーバー管理画面 > ドメイン/SSL > ドメイン新規追加クリック

「Step2.ドメインの追加」の部分で対象のドメインを選択します。

「追加」ボタンをクリックすると、ドメインリストの中に取得したドメイン名が表示されます。

追加したドメインの「設定」ボタンをクリックします。

「マルチドメインとして利用する」を選択し、「Web公開フォルダ」では先ほどFTPサーバー上で作ったフォルダのパスを入力します。

「保存する」ボタンをクリックしてこのステップは完了です。

  1. ドメイン取得 - 完了!
  2. FTPサーバで対象のドメインのフォルダを作成 - 完了!
  3. ドメインを管理画面に追加する - 完了!
  4. WordPress 用データベース作成 - Next!
  5. WordPress インストール用フォルダを作成
  6. WordPress をインストール
  7. index.php と .htaccess の設定
  8. サイトアドレスの設定

4. WordPress 用データベース新規作成

WordPress サイト上で作成したブログ記事やコメント、その他様々な設定は全てデータベースに保存されます。このステップではそのデータベースを作成します。

さくらレンタルサーバのコントロールパネル > データベース > 新規追加

好みのデータベース名を入力し「作成」をクリックします。

表示されるデータベースホスト(データベースサーバ)、ユーザー名、接続先パスワード、データベース名を後で使うのでメモしておきます。

WordPress に使用するデータベースが作成されました。これでこのステップは完了です。

  1. ドメイン取得 - 完了!
  2. FTPサーバで対象のドメインのフォルダを作成 - 完了!
  3. ドメインを管理画面に追加する - 完了!
  4. WordPress 用データベース作成 - 完了!
  5. WordPress インストール用フォルダを作成 - Next!
  6. WordPress をインストール
  7. index.php と .htaccess の設定
  8. サイトアドレスの設定

5. WordPress インストール用のフォルダを作る

さて、もうすぐ WordPress のインストールですが、その前にまた FTP サーバに戻って、先ほど作成した「notemite」フォルダ(皆さんはそれぞれ任意のフォルダ)の中にさらに WordPress 用のフォルダを作成します。

ディレクトリ内にWordpress専用のディレクトリ(フォルダを作成)(/wp/)を作成

ここでは好きなフォルダ名を付けていただいて大丈夫ですが、わかりやすく「wp」としておきます。

これで「notemite」フォルダの中に「wp」フォルダが作成されました。次のステップでこのフォルダの中に WordPress の全てがインストールされます。

  1. ドメイン取得 - 完了!
  2. FTPサーバで対象のドメインのフォルダを作成 - 完了!
  3. ドメインを管理画面に追加する - 完了!
  4. WordPress 用データベース作成 - 完了!
  5. WordPress インストール用フォルダを作成 - 完了!
  6. WordPress をインストール - Next!
  7. index.php と .htaccess の設定
  8. サイトアドレスの設定

6. WordPressインストール

  • SAKURAのレンタルサーバコントロールパネル > WordPressインストール
  • インストールURL設定
  • 利用データベースで先ほど作ったデータベースを選択
  • テーブルの接続語は自動生成される物をそのまま使用
  • 同意して作成をクリック

「インストールURL」の部分で、WordPress をインストールする場所を指定します。今回、notemite.com の配下に「wp」フォルダを用意しています。なので下記の様に指定します。「インストール先ディレクトリ」が FTP サーバー上のフォルダと一致しています。

「テーブルの接頭語」は正直なんでも大丈夫ですが、立ち上げるサイトに関係ある言葉だとわかりやすいと思います。後でもう一度出てくるのでメモしておきましょう。

データベース名、ユーザー名、パスワード、ホスト名、テーブル接頭辞を入力します。

先ほどさくらレンタルサーバの管理画面でデータベースを作成した時のものを入力します。

次にサイトのタイトル、そしてユーザー名とパスワード、メールアドレスを入力します。「検索エンジンでの表示」のチェックマークは入れずに「WordPressをインストール」をクリックします。

おつかれさまでした。これでWordPressサイトの立ち上げは完了です。

  1. ドメイン取得 - 完了!
  2. FTPサーバで対象のドメインのフォルダを作成 - 完了!
  3. ドメインを管理画面に追加する - 完了!
  4. WordPress 用データベース作成 - 完了!
  5. WordPress インストール用フォルダを作成 - 完了!
  6. WordPress をインストール - 完了!
  7. index.php と .htaccess の設定 - Next!
  8. サイトアドレスの設定

7. index.php と .htaccess の設定

FTPサーバーの WordPress 用フォルダ(今回は「wp」フォルダ)にある index.php と .htaccess ファイルを、サイトのルートディレクトリ(「サイトのアドレス」)へコピーします。

移動ではなくあくまでコピーなので注意してください。

ファイルをコピーできたら、ドメインフォルダの index.php ファイルを開きます。

require から始まり '/wp-blog-header.php'; で終わる文があるので次の修正を行ないます。

Before

After

WordPress 用に作ったフォルダ名「wp」を記述しました。

次は同じドメインフォルダの .htaccess ファイルを開きます。

「RewriteBase」と「RewriteRule」のところに「wp」フォルダの記述があるので削除します。

Before

↑の赤線の部分を削除します。

After

「wp」フォルダの部分を削除して保存したら .htaccess の設定も完了です。

  1. ドメイン取得 - 完了!
  2. FTPサーバで対象のドメインのフォルダを作成 - 完了!
  3. ドメインを管理画面に追加する - 完了!
  4. WordPress 用データベース作成 - 完了!
  5. WordPress インストール用フォルダを作成 - 完了!
  6. WordPress をインストール - 完了!
  7. index.php と .htaccess の設定 - 完了!
  8. サイトアドレスの設定 - Next!

8. サイトアドレスの設定

WordPress > 設定 > 一般設定 > サイトアドレス(URL)をから専用ディレクトリの箇所を消す

上の画像の様に「サイトアドレス(URL)」の部分が WordPress 用フォルダを含んだURLになっていると思いますが、これを削除します。

これでOK。「WordPress アドレス(URL)」の方は触らなくて大丈夫です。

「変更を保存」をクリックでこのステップも完了。お疲れ様でした!

この作業の後で必ず一度 WordPress からログアウトし再度ログインしてください。
私はこれをしなかったせいで設定が完全に反映されず、記事の投稿が上手くできない状態が半日続きました。。。

  1. ドメイン取得 - 完了!
  2. FTPサーバで対象のドメインのフォルダを作成 - 完了!
  3. ドメインを管理画面に追加する - 完了!
  4. WordPress 用データベース作成 - 完了!
  5. WordPress インストール用フォルダを作成 - 完了!
  6. WordPress をインストール - 完了!
  7. index.php と .htaccess の設定 - 完了!
  8. サイトアドレスの設定 - 完了!

【WordPress】確かに「--」と書いたのに「–」と表示される件

問題:「--」が勝手に「–」に変わってしまっていた

シェルスクリプトの記事を書く中で、投稿ページには「--」と書いていたのに公開された記事を確認したら「–」と表示されてしまっていた。

確かに「--」と入力していた

WordPress の投稿ページではきちんと「--」になっていました。

公開された記事には「–」と反映

ところが、実際に公開されたページをみてみると下記の通り。

なぜか変わってしまっている。

原因:wptexturize

調べてみると、WordPress の「wp-includes」フォルダ内「formatting.php」というファイルに記述されている関数「wptexturize()」が原因でした。

この関数はテキストを自動的に変換する機能で、例えばふつうの引用符をスマート引用符へ変えたり、特定の記号の並びをアポストロフィ、ダッシュ、省略符号(…)、商標記号、乗算記号などへ変えたり等、通常便利であろう変換を行うものです。

下の表はその自動変換がされる一例です。

元のテキスト変換されたテキストシンボル名
"---""—"em ダッシュ
" -- ""—"em ダッシュ
"--""–"en ダッシュ
" - ""–"en ダッシュ
"...""…"省略記号
``開始引用符
"hello“hello開始引用符
'hello‘hello開始引用符
''終了引用符
world."world.”終了引用符
world.'world.’終了引用符
" (tm)"" ™"商標記号
1234"1234″ダブルプライム記号
1234'1234′プライム記号
'99’99西暦の省略表現前のアポストロフィ
Webster'sWebster’sアポストロフィ
1234x12341234×1234乗算記号

解決法:remove_filter()

ということですが、remove_filter() 関数を使ってこの自動変換(wptexturize)を止めることができる様なので、早速 function.php の一番下に下記コードを貼り付けます。

/*wptexturize 無効化*/
remove_filter( 'the_content', 'wptexturize' );

すると下の画像の通り、投稿ページで入力した通りの表記(--)が反映されました。

さらにもう一行

この時点で投稿内容では自動変換が止まりましたが、記事タイトル等に関してはまだ変換が行われる状態なので、もう一行追加します。

/*wptexturize 無効化*/
remove_filter( 'the_content', 'wptexturize' );
remove_filter( 'the_title', 'wptexturize' );

一行目の「the_content」の部分を「the_title」に変えただけです。これで記事タイトルに対しても自動変換がされなくなりました。

【WordPress】ショートコードの表示・非表示を一発で切り替えたい

使用していたショートコードの処理結果を記事上で非表示にしたい場合、一番基本的なやり方は投稿の編集画面でショートコードの […] の部分を削除する方法。

ただ、複数のページで使用しているショートコードを全て非表示にしたい場合等では、一つ一つのコードを全記事で削除していくわけにはいきません。

関数のコメントアウトでは非表示にはならない

(通常)function.php に記載しているショートコードの関数をいじれば一括で管理できますが、関数部分を丸ごとコメントアウトして関数の呼び出しを無効化すると、記事上にshortcodeが残ってしまいます。

上の画像の様にショートコード関連のコード全体をコメントアウトすると確かに処理は行われませんが下の画像の様、投稿の編集画面で記載している hello shortcode が表出されてしまいます。

ショートコードの関数から null を返せばOK

ではどうすれば良いのかですが、ショートコード関数の return 文で null を返してあげると綺麗さっぱり無くなります。

【基本編】元の return 文をコメントアウト + return null; を記述

一番直感的なのは元の return 文をコメントアウトし、新たに「return null;」をそのまま記述してしまう方法。

上記の様に null を返してあげると、記事上でも綺麗さっぱりショートコードが無かったことになります。

【応用編】if 条件で表示・非表示の切り替えをシンプルに

関数のコードが長かったりすると return 文を探すのが大変だったりするので、関数の頭に表示・非表示を切り替えるフラグの様な変数を入れても良いと思います。

上記のコードの場合は、変数 $visible に true を入れれば "hello shortcode" のストリングが返され、false を渡せば null が返されて記事ページ上で非表示となります。

【WordPress】ショートコードを別ファイル管理でリスク低減

ショートコードとは

ショートコードは wordpress の投稿や固定ページに自分で定義した処理を呼び出せる便利な機能です。

上記の様にショートコードを設定すると、下記の様に表出されます。

hello shortcode


一般的に処理内容は function.php に記述しますが、function.php には他の重要な処理が書かれている為リスクを伴います。より安全で管理もシンプルになる方法がありますので紹介します。

Contents

function.php に直接追記していくのはリスクが高い

function.php には既に WordPress にとって重要なコードが記述されており、誤った部分を削除、編集してしまったり、追記したコード自体にエラーがあるとサイトが真っ白に表示されてしまったりとリスクを伴います。さらにショートコードが増えてくるとファイルの中身自体が煩雑になりさらにリスクが高くなります。

ショートコード用の別ファイルを作成すればOK

もちろんバックアップを取りながら慎重にすすめていくこともできますが、少し煩わしい。そういった場合はショートコード管理専用の別ファイルを作ってしまうことをおすすめします。function.php には一行だけ追記で済み、shortcode自体は別ファイルで管理できます。

具体的な方法:

function.php の一番下に include 文で別ファイルのパスを記述しておけば、あとは別ファイルの方で管理したものがそのまま function.php に読み込まれるようになります。簡単にいうと、shortcode.php の内容も function.php の一部として認識される感じです。

ショートコード用 PHP ファイルの作成

まず、ショートコード用に新規の php ファイルを作成し、その中にショートコードの内容を記載します。この場では shortcode.php としましたが、ファイル名に特に決まりはありません。

function.php の編集

そして、function.php には下記の様に include 分で先ほど作ったショートコード用ファイルのパスを記述します。

この方法でコードを編集すると、下記のような状態になります。

変更前

function.php の中にショートコード関連の定義が記載されています。

変更後

ショートコード関連のサイトのコードを別ファイルにまとめる事で、根幹を担う function.php への変更は最低限に留め、ショートコードの管理も専用ファイルでよりシンプルに行うことができます。

メリットが多い

こうしておくと、WordPress テーマを変えたりした時も新しい function.php に include 分の一行を書くだけで済むので管理が断然楽になります。

リスクが完全に無くなるわけではない

別ファイルに分けると function.php 上でエラーを起こすリスクは下げられますが、ショートコード用ファイルで間違ったコードを書いてしまうとやはりサイト自体に影響が出てしまいます。

よりリスクを減らすために

そんな時すぐさま問題を解決出来れば良いのですが、とりあえず function.php の include 文を一旦コメントアウトしてしまうのも一つの方法です。

そうするとショートコードは機能していない状態になりますが、すぐに問題の影響を断ち切ることができます。サイトを稼働させながらショートコード用ファイルの方でじっくり分析、修正を行った後で include 文のコメントアウトを外せば、影響を少なく抑えることができます。