ワードプレス、ローカル環境構築覚え書き

これまでワードプレスのローカル環境は何が良いのか色々試しましたが、今後はこの構築で行こうと思うので覚え書きにしました。

今回、サーバーの引っ越しをし、ワードプレスのサーバー移行方法とローカル環境構築とはやり方が重なるので今回整理して覚え書きにしました。

もともとサクラのレンタルサーバーを使っていたのですが、古い契約だったので一度他のサーバーも試したいとロリポープに引越しし、今回もとのサクラのレンタルサーバーに戻ったかたちです。

私は簡単なブログを書く程度ですが、テーマは自作のものを作っています。
記事を追加するだけなら本番環境に書いていけば良いのですが、テーマを弄るのはやはりローカル環境で行うのが良いでしょうから今回のサーバーの引っ越しを機会にWordPressのサーバー移転やローカル環境の設定を整理してみました。

これまでWordPressのローカル環境は「Local(local by flywheel）」やwslで環境構築してみたりしましたが、本番もphpMyAdminなのでXAMPPがやはり使いやすいかなと思いXAMPPとVisual Studio Codeでの環境を調べてみました。

サーバーがサクラなのでステージングサーバーをつかえるのですが、結構ステップが多いのと管理画面のテーマファイルエディタを使うことになるのでこれは辛い。
ステージングサーバーは投稿もステージングサーバーで書いた記事を本番環境にアップロードできるのでその点は惹かれるのですが。XAMPPのローカル環境の記事を本番と同じ状態に保っていくのは難しいので。

サクラのステージングサーバーの手順の覚え書きはこちらをご覧ください。

これまで色々ローカル環境を使ってみましたが、今後はXAMPPとVisual Studio Codeに決めようと思います。

ローカル環境構築の手順

ここでは新たにワードプレスをインストールして新規に構築していくのではなく、既存の本番環境のワードプレスをローカル環境に複製していきます。

本番ワードプレスのダウンロード

XAMPPのhtdocsフォルダのwpフォルダの中に「photo-ac」フォルダを作って本番環境から丸々ダウンロードしたワードプレス一式を入れます。
ダウンロードはuploads、plugins、のwp-contentだけでも良いと思うのですが、wp-adminやwp-includesはダウンロードにそれほど時間もかかりませんし、新たにワードプレスをインストールする必要もなくなるので私は丸々ダウンロードしています。

CドライブにXAMPPをインストールし、XAMPPのhtdocsフォルダにwpフォルダを作ってその中にワードプレスのサイトごとのフォルダを入れています。このサイトのフォルダ名は「photo-ac」です。この中にWordPressのフォルダやファイル一式が入っています。
urlは
http://localhost/wp/photo-ac/となります。

直接管理画面を表示するには
http://localhost/wp/photo-ac/wp-admin/　（ログインが効いていない場合はログイン画面に飛ぶ）
ログイン画面を表示するには
http://localhost/wp/photo-ac/wp-login.php　（ログインが効いている場合は管理画面に飛ぶ）

データベースをエクスポート、インポート

次にphpMyAdminでデータベースをエクスポートします。

エクスポートしたsqlファイルを念のためにコピーを取っておいてテキストエディタで開いて古いドメイン名をすべて新しいドメイン名に置き換え。

ローカル環境に新たに空のデータベースを作成し先にエクスポートしたファイルをインポート
エラーなくインポート成功すればOK。
utf8mb4_0900_ai_ciでエラーが出たのでエクスポートしたsqlファイルをエディタでutf8mb4_0900_ai_ciをutf8mb4_general_ciに変更でインポート成功。

ワードプレスのルートにあるwp-config.phpを書き換えます。
これを正しく設定しないとデータベース接続エラーが表示されます。
ただ、データベース接続エラーはwp-config.phpに不備があるだけでワードプレスはインストールできていると思いますのでwp-config.phpだけ訂正すれば大丈夫だと思います。

次にワードプレスのインストール画面が表示される場合はテーブルの接頭辞がインポートしたデータベースと違っているのが原因だと思いますのでwp-config.phpの接頭辞を間違って記載していないか確認します。新たにWordPressをインストールする場合は好きな接頭辞を付ければよいのですが、移行の場合はもともと設定されているデータベーステーブル接頭辞に合わせないといけません。

config.phpの内容

/** WordPress のためのデータベース名 */
define(‘DB_NAME’, ‘データベース名’);

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

/** MySQL データベースのパスワード */　（パスワードなし）
define(‘DB_PASSWORD’, ”);

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

WordPress データベーステーブルの接頭辞
$table_prefix = ‘*****’;　　(エクスポートしたままにする)

phpMyAdminでデータベースを修正
optionテーブルのsiteurlとhomeのurlをローカルに変更
http://localhost/wp/フォルダ名
この際、http://とつけないと正しく表示されない。

パスワードを本番環境とは別のものにしたい場合はphpMyAdminで変更する
usersテーブルのuser_passを設定したいパスワードをMD5のハッシュ値に変換したものを入力。ログインは変換していない文字で。
MD5のハッシュ値に変換　md5変換ツール　https://dev.digitra.net/tools/md5encode.php

上のurlをブラウザのブックマークに登録しておく。

Visual Studio Code設定

拡張機能

Project Manager
SFTP

あとはWordPress Snippetsなど

これでVSCodeでXAMPPのローカルで編集したテーマをブラウザで確認し、VSCodeで捜査してサーバーにアップロードできます。

SFTP

VSCodeで編集するワードプレステーマを開いて「表示」「コマンドパレット」SFTP:Configを実行。
設定画面が表示されるので各項目入力しても良いし、空のままSaveして後からファイルを書き換えても良い。
その場合Saveすると.vscodeというフォルダが追加されsftp.jsonというファイルができるのでその内容を変更する。
設定したのは下記ぐらい。

“name”: “何でもいい”,
“host”: “ホスト名”,
“protocol”: “ftp”,　　(私はftpを使用)
“uploadOnSave”: false,　　（falseにしておかないと即座にアップロードさてしまう。）
“port”: 21,　 (21に変更)
“context”: “C:/xampp/htdocs/wp/サイトフォルダ/wp-content/themes/originalテーマ名/”,　　(ローカルのテーマがあるフォルダ)
“remotePath”: “~/www/ドメイン/フォルダ/wp-content/themes/originalテーマ名”,　　(本番のフォルダ)
“password”: “サーバーパスワード”,

設定できればVSCodeに左側に表示されているSFTPのアイコンをクリックすると設定した”name”のフォルダが表示されるのでそれをクリックしてその下にファイルが表示されれば成功。
不備があればファイルが表示されない。
ここに表示されるファイルは読み取り専用で編集できない。
右クリック等でローカルにダウンロードできる。

編集したファイルは右クリックメニューでアップロードできる。

編集したらブラウザにブックマークしたローカルサイトで確認し、OKならアップロード