WordPressをローカル環境で動かそう(複数サイト対応)【Mac】

ブログを開設すると、自分でテーマをカスタマイズしたり、いろいろなプラグインを利用してみたくなりますよね。でもいきなり本番環境のサーバー上で作業すると危険です。もしエラーが起きてしまうと、サイトが表示されず、もとに戻せない。。といった事態にもなりかねません。

ローカル環境の整備を整えておくと、普段の作業効率が格段によくなります。最初だけちょっと面倒ですが、Web開発者ならやってみる価値はあると思います。

ローカル環境で開発するメリット

  • わざわざサーバーにファイルをアップして表示確認する手間を省ける。いちばんはこれです。
  • phpのエラーを表示させる事ができるので、解決が早くなる。
    WordPressには、もしエラーがある場合にWebブラウザ上にエラー箇所を表示して教えてくれるデバッグモードがあります。Webサーバー上でこれをオンにしていると、サイトを訪問したユーザーに見られてしまうし、セキュリティ的にもレイアウト的にも厳しいのでオフにする必要があります。ローカルではオンにしても問題ないのでデバッグしやすい。

用意するもの

  • MAMP
    ローカル環境でphpを使えるようにするパッケージソフトウェア。わたしは無料版を使ってます。
    こちらからダウンロードして、インストールしておきます。
  • WordPress
    サーバーで使ってるものをローカルにコピーしてきます。格納場所は任意ですが、わたしはわかりやすいように以下にしてます。
    /Applications/MAMP/htdocs/サイト名
    ローカルでサイトを複数作りたいので、htdocs配下にサイト名のフォルダを作り、そこにサーバー上の「public_html」内のファイルをまるっとコピーしてきます。別に複数作る必要ないよって方はhtdocs直下に。

MAMPのファイルを修正

ローカルで複数のワードプレスを、ルートパスで使えるようにします。

/ Applications / MAMP / conf / apache / httpd.conf
574行目あたりにある、Includeの前の#を外してバーチャルホストの設定ファイルを読み込めるようにします。

# Virtual hosts
Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

続いて下記ファイルを開きます。
/ Applications / MAMP / conf / apache / extra / httpd-vhosts.conf

Listen 8001
<VirtualHost *:8001>
    DocumentRoot "/Applications/MAMP/htdocs/サイト1"
    <Directory "/Applications/MAMP/htdocs/サイト1">
        AllowOverride All
    </Directory>
</VirtualHost>

Listen 8002
<VirtualHost *:8002>
    DocumentRoot "/Applications/MAMP/htdocs/サイト2"
    <Directory "/Applications/MAMP/htdocs/サイト2">
        AllowOverride All
    </Directory>
</VirtualHost>

ファイルの末尾に、8001と8002というポート番号を追記し各サイトを振り分けました。

データベースを同期・修正する

投稿した記事や固定ページなどもローカルに反映させたいので、データベースも同期させます。

サーバー上のデータベースをバックアップ

エックスサーバーを利用している場合の手順は以下です。

サーバーパネルにアクセスし、データベース > MySQLバックアップから「現在のMySQLをダウンロード」をクリック。任意の場所に保存しておきます。

PHPMYADMINから必要なデータだけエクスポートもできますが、不慣れな方はデータ消してしまっても怖いので、安全なこの方法がいいかと思います。

MAMPのデータベースを作成する

MAMPの「Open WebStart page」をクリックして、TOOLS > PHPMYADMINを開きます。

左のナビゲーションから「New」をクリックし、任意のデータベース名を入力して「Create」を押しデータベースを作成します。例で「test1」としました。

ローカルにデータベースをインポートする

作成したデータベースに、サーバー上のMySQLをインポートします。
左ナビで作成したデータベース名を選択した状態で「Import」タブを押し、先程保存したバックアップデータを選択し「Go」をクリック。エラーが出る場合はこちら

インポートができたら、左ナビから該当のデータベース名>wp_opsionsを選択し、「siteurl」と「home」のURLを先程MAMPに追加したポート番号に変更します。これを変更しないとサイトにリダイレクトされてしまい、ローカルのWordPressにアクセスできません。例では「http://localhost:8001/」とします。

WordPressのファイルを修正

最後にWordPressの設定ファイルを修正します。サーバーから落としてきただけではWordPressは動きません。ローカル環境に合わせて以下のファイルを修正する必要があります。

/ Applications / MAMP / htdocs / サイト1 / wp-config.php
27〜38行目の情報を書き換えます。

// ** MySQL 設定 - この情報はホスティング先から入手してください。 ** //
/** WordPress のためのデータベース名 */
define( 'DB_NAME', 'test1' );

/** MySQL データベースのユーザー名 */
define( 'DB_USER', 'root' );

/** MySQL データベースのパスワード */
define( 'DB_PASSWORD', 'root' );

/** MySQL のホスト名 */
define( 'DB_HOST', 'localhost' );

データベース名は先程の作成した名前を入力。(例ではtest1。)ユーザー名、パスワード、ホスト名はMAMPの「Open WebStart page」をクリックして、

ここに書いてある情報を入力しましょう。

また、同じwp-config.phpの84行目あたりはfalse → trueにする事をお勧めします。これでローカルに置くWordPressのデバッグモードがONになり、エラー内容がブラウザに表示されるので対処方法がすぐわかるようになります。

/**
 * 開発者へ: WordPress デバッグモード
 *
 * この値を true にすると、開発中に注意 (notice) を表示します。
 * テーマおよびプラグインの開発者には、その開発環境においてこの WP_DEBUG を使用することを強く推奨します。
 *
 * その他のデバッグに利用できる定数についてはドキュメンテーションをご覧ください。
 *
 * @link https://ja.wordpress.org/support/article/debugging-in-wordpress/
 */
define( 'WP_DEBUG', true );

例えばこんな感じで、関数が古いから新しいの使ってねって事を教えてくれてます。

エラーが出る場合

Incorrect format parameter

PHPMYADMINでインポートする時、アップロード可能サイズを上回った為起こるエラーです。

下記ファイルを修正します。
/ Applications / MAMP / bin / php / php7.3.9 / conf / php.ini
php7.3.9は最新バージョンのフォルダを選択)
665行目あたりのpost_max_size = 8Mを32Mに変更。

; Maximum size of POST data that PHP will accept.
; Its value may be 0 to disable the limit. It is ignored if POST data reading
; is disabled through enable_post_data_reading.
; http://php.net/post-max-size
post_max_size = 32M

MAMPのサーバーを再起動すると、下記のようにファイルサイズの上限が大きくなりました。これで再度ファイルのインポートを行ってください。

表示確認

http://localhost:8001にアクセスして、サイトが問題なく表示される事を確認します。もしうまく表示されない場合は設定内容をもう一度見直してみてください。

もしもパーマリンクで404エラーが出る場合

.htaccessの記述がサーバーにある状態のままだと、設定によってはローカルではうまく行かない可能性があります。その場合一度ローカルにある.htaccessを削除し、ローカルのWordPress管理画面(url末尾に/wp-adminでログイン画面にアクセスできます)の 設定 > パーマリンク > 変更を保存 の操作で空更新を行います。そうすると新しく.htaccessが生成されていると思います。ブラウザの履歴を削除して、再度アクセスしてみてください。

ページトップへ