この記事の概要
この記事では、Macを買い替え時やハードディスクを初期化した時などにWordPressのローカル開発環境を移行（引っ越し）・復元する方法を紹介します。ここではVS-CODEにおけるFLOCCSやgulpシステムの復元方法も合わせて紹介します。
引っ越し手順の概要は次のとおりです。
- MacOSへのPHPインストール
- WordPressサイトの引っ越し（All-in-one wp migrationで移行）
- 移行先のHDDに、MAMPで空のWordPressサイト（ローカル開発環境）をつくる
- WordPressサイトをAll-in-one wp migrationのバックアップデータから復元
- ネット上からの移行の場合にはサイト内リンク等の張替えが必要
- VSCodeの開発環境の復元
- 拡張機能インストール
- 上記のWordPressの引っ越しを先に済ませておく
- 上記のWordPressローカル開発環境のフォルダー構造にFLOCCSを復元
- 上記のWordPressローカル開発環境にgulpシステムを復元
MacOSへのPHPインストール
PHP は macOS バージョン10 および 11 に標準添付されていましたが、 macOS Monterey (12.0.0) 以降には含まれていません。 最近のバージョンをインストールするには、サードパーティーのパッケージを使用するか、 ソースコードからコンパイルする必要があります。
macOS に PHP をインストールするには、 » Homebrew パッケージマネージャを使用すると簡単です。方法は下記のとおりです。
この操作でHomebrewのインストールが完了します。
しばし待って、最終的に下記が表示されたらインストール完了
==> Next steps:
- Run these commands in your terminal to add Homebrew to your PATH:
echo >> /Users/sim/.zprofile
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/sim/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"
- Run brew help to get started
- Further documentation:
https://docs.brew.shターミナルの％の後に下記を入力・リターン
brew -v下記が表示されたらHomebrewインストールが成功している。
Homebrew 4.4.4ターミナルで％の後に下記コマンドを入力・リターンで最新版のPHPがインストールされる。
brew install php下記コマンドでインストールされたPHPバージョンが確認できる。
php -vMAMPなどのローカル開発環境アプリでPHPバージョンが選べない時は、Macを再起動してください。
WordPressのPHP推奨バージョンは下記のとおりで、2024年11月現在ではエックスサーバーではPHP8.2、WordPress公式で100%対応しているのがPHP7.4となっていて、それ以外のバージョンは例外的に未対応な部分があると表示されている。私個人はエックスサーバーをいつも参考にしている。
WordPressサイトの引っ越し方法
移行先のHDDにMAMPで空のWordPressサイト（ローカル開発環境）をつくる
macOS Monterey (12.0.0) 以降のMacにはPHPが標準搭載されていないのでPHPを入れ忘れるとWordPressのローカル開発環境が作れないので注意。
MAMP PRO ver7では、メニューバーのMAMP PRO＞Setting>Languges＞PHP＞Default versionでver7.4以上を選択しておかないとWordPressインストールが失敗するので注意！ちなみに初期状態ではver7.1になっている。私はver8.2.20を指定している。
MAMPなどのWordPress用のローカル開発環境用アプリを使って、新規に空のWordPressサイトを作っておきます。ただし、作る際にはWordPress関連ファイルの保管フォルダは後から変更の必要がないようにしっかり指定する必要があります。
WordPressサイトをAll-in-one wp migrationのバックアップデータから復元
WordPressバックアップ用有料プラグインの「All-in-one wp migration」を使います。
最も簡単な方法は、旧MacのHDDに作ったローカル開発環境用のWordPressから「All-in-one wp migration」でバックアップファイルを作っておき、それを新MacのHDDに作ったローカル開発環境用のWordPressサイトで読み込み・復元するのが手間が少ないです。
ただし、最新のバックアップを取り忘れた場合などは、ネット上に公開したWordPressサイトから最新バックアップファイルを作成して、それを元に復元することもできます。ただし、ネット上のWordPressサイトからの移行の場合にはサイト内リンク等の張替えが必要になります。
VSCodeの拡張機能インストール
VS-CODEを移行先のHDDにインストールしたら、次に拡張機能をインストールしていきます。
WEB制作にオススメの拡張機能一覧
- Japanese Language Pack for Visual Studio Code：VSCodeを日本語化
- Live Server：ブラウザを自動的に再読込（gulp使用なら不要）
- Live Sass Compiler：SCSSをCSSにコンパイル（gulp使用なら不要）
- Auto Rename Tag：開始タグ変更時に閉じタグを自動変換（VSCode v1.44以降は標準搭載のため不要）
- Autoprefixer：CSSのベンダープレフィックスを自動化（gulp使用なら不要）
- Code Spell Checker：コードのスペルミスを教える
- Color Highlight：色コード（#ffffffなど）が実際の色で表示される
- CSSTree validator：CSSのエラーを教える
- HTML CSS Support：HTMLでclass名やid名を入力する際に補完
- indent-rainbow：コードのインデントスペースに色をつけてくれる
- Prettier – Code formatter：コードを自動整形
- Trailing Spaces：行末の不要なスペースを教えてくれる
- vscode-icons：ファイルを種類別にアイコン表示
- WordPress Snippet：WordPressで使われる関数等の候補を表示
- PHP Intelephense：コード補完やuse文の自動挿入など
- PHP DocBlocker：Docコメント入力を補完
VSCodeにFLOCCSシステムを復元する方法
インターネット上のWordPressサイトには開発用のファイルが含まれないため、そのバックアップファイルからローカル開発環境を復元する場合には開発用ファイルをVSCode上に手動でコピペして復元する必要があります。
VSCodeにgulpシステムを復元する方法
WordPressローカル開発環境のVSCodeファイルについてもFLOCCSと同様に開発用ファイルは含まれないため、開発用ファイルは手動で復元していく必要があります。gulpシステムについて新規Macには新規で一からインストール・設定していく必要があります。
gulpシステム復元の流れ
Node.jsを公式サイトからダウンロード・インストール
出荷時のMacOSと同様にクリーンインストール後もNode.jsを新たにインストールする必要がある。
下記コマンドを入力して、Node.jsのバージョンが表示されれば正常。
node -vバージョンが情報が表示されてばOK。
npm -v通常はネット上のサーバーには開発用ファイル（gulpを含むdevフォルダー）はアップロードせず、必要最小限のCSSやJSファイル等のみをアップロードするため、ネットサーバーのサイトのバックアップファイルには開発用ファイルは含まれない。ローカル開発環境のバックアップであれば、開発用ファイルが含まれているため、この操作は不要。
エラーが発生したディレクトリに下記コマンドを入力します。
- sudo chmod 777 /以下、「Permission denied」エラーが表示されたディレクトリをそのままコピペ
例：sudo chmod 777 //Users/ユーザー名/フォルダ名/フォルダ名/wp-content/themes/テーマ名/フォルダ名/node_modules/.bin/gulp
sudo chmod 777 //Users/ユーザー名/フォルダ名/フォルダ名/wp-content/themes/テーマ名/フォルダ名/node_modules/.bin/gulp成功すると、「Password:」と表示されるので…
- そのコンピューターのログインパスワードをキーボードで打ち込み、リターンキーを押します
注）パスワードをターミナルにそのまま入力しても表示されませんが気にせず打ち込んでリターンキーを押せば大丈夫です。
その他のgulpトラブルシューティング
トラブルケース１
上記操作でもgulpが正常に動作しない時は、WordPress管理画面のサイトアドレス（WordPressアドレス）とgulpファイル内のブラウザ立ち上げ「function browserReload(done){}」内のproxyアドレスが一致していないケースが考えられるので修正してください。
上記以外でブラウザーのリロードがされない時
まず、VScodeを再起動し、さらに下記コマンドでnode.js等のバージョンを確認後にgulpを起動すると、正常に動作するようになったケースもあった。
node -vnpm -v
