WordPressでの開発をしていて、
本番環境でPHPの編集は怖いな、、、
サブドメイン作るのもレンタルサーバー圧迫するし、、、
ローカル（自分のパソコンのみ）で開発できる方法はないかな？
という壁にぶち当たりました。
過去に私は、運用中のWordPressでPHPのコードを間違ってしまい、WordPressのダッシュボードにすらアクセスできなくなり、サーバーのバックアップから復元するということも経験してきました。。。。
そこで「Local」というソフトを用いて、ローカル環境(自分のパソコン上)で開発する環境を整えましたので、その方法をご紹介します。
Localとは
「Local」はデータベースなどの専門的な知識不要で、誰でも簡単に自分のPC上でWordPressを扱えるソフトです。
※以前は「Local by Flywheel」という名称でしたが、変更されました。
これはWindowsでもMacでも使えます。
有料、無料の両方ありますが、基本的な使い方であれば無料版で十分です。
データベースの設定やPHPのバージョンも選択できるため、実際の環境に寄せた開発環境を模擬できます。
そして、HTTPS通信機能やメール送受信機能も使えるので、上級者の開発も行えます。
基本的な動作はデフォルトの設定で行うことができ、個人で細かな設定もできるので初心者から上級者までおすすめのツールとなっています。
そしてWordPressのエディタでなく、VSCodeで開発が出来るのです！！
もちろん、PHPのデバッガも使えるようになります！
類似ツール
ローカル環境でWordPressを開発できるツールとして、「XAMPP」や「MAMP」などもあります。
ここではWordPressに特化され、誰でも簡単に扱える「Local」のみの解説をしていきます。
興味ある方は公式サイトをご覧ください。
準備編
- ダウンロードからインストール
- ソフトを起動して環境構築
- ファイルの場所の確認
の３つに分けて解説をしていきます。
必要なところからご覧ください。
ダウンロードからインストール
無料版をインストールする場合は「DOWNLOAD FOR FREE」を選択してください。
お使いのPCに合わせて選択してください。
個人情報入力欄が出てきますが、メールアドレスさえ入力すればダウンロード可能です。
入力したらGet it Nowを押下してください。
お好きなところにダウンロードしてください。
先ほどダウンロードしたsetup.exeを実行します。
インストール先を決めます。
次へを選択します。
特にこだわりがない場合、インストール先は変更せずにインストールをしてください。
この画面が出ればインストール完了です。
お疲れさまでした😊
ソフトを起動して環境構築
初回起動時は利用規約同意を求められます。
同意する場合はチェックを入れてください。
エラーレポートを送信してもいい場合は上を、送信したくない場合は下を選択してください。
「CREATE A FREE ACCOUNT」を押下します。
ブラウザでアカウント作成画面が起動しますが、アカウント作成をしなくてもOKです。
※アカウントを作成すると使用できる機能が増えます。
開発するWebサイトを登録します。
「＋CREATE A NEW SITE」を選択してください。
サイト名を設定します。
「ADVANCED OPTIONS」で高度な設定をすることもできます。
左側でドメインの設定。
右側では作成されるファイルの場所を設定できます。
ただし、これらはサイト名を入力すると自動で設定されるので、気にしなくてもOKです。
入力が終わったらcontinueを押してください。
現在の設定を確認します。
実際にWordPressを運営している場合、現在のバージョンはダッシュボードで確認できます。
これらを参考にどちらを選択するか決めてください。
決めたら次へ進みます。
ユーザー名とパスワードを設定します。
※ADVANCED OPTIONSではマルチサイトにするかどうかを設定できます。
設定が終われば「ADD SITE」でサイトを作成します。
サイト作成には少し時間がかかります。
この画面までくれば完了です。
ローカルに作成したサイトにログインします。
「ADMIN」を押下するとブラウザが起動します。
いつものWordPressのようにログインします。
ユーザー名、パスワードは先ほど設定したものになります。
デフォルトでは英語になっているので、
Setting -> General -> Site Languageから日本語を設定します。
変更後はsave changesで設定を反映して保存することを忘れずに行ってください。
以上でLocalのWordPressの設定は完了です。
お疲れさまでした😊
ファイルの場所の確認
デフォルト設定でのファイルは
C:\Users\ユーザー名\Local Sites\サイト名
にあります。
app -> wp-contentの下にプラグインやテーマのフォルダがあります。
phpなどをいじる場合はここをいじってください。
使い方
「Local」を起動してからWordPressサイトの立ち上げについては、上記セクションの
準備->ソフトを起動して環境構築
をご覧ください。
ファイルについて
WordPressをインストールしたら、WordPressまわりのファイルがあるか確認します。
デフォルトでは
C:\Users\ユーザー名\Local Sites\サイト名\app\public
の下にWordPress周りのファイルがあります。
私の場合、実際に公開しているWordPressとLocalの構成を比較してみました。
構成自体は同じようです。
ファイルの中身はLocalに合わせて作ってありました。
ただし、wp-config.phpに記載してあるデータベースの場所が大きく異なるという点にご注意ください。
書き方については同じなので問題なく使えますが、自作プラグインなどで、直接データベースを操作するときにご注意ください。
以下プラグインなどをインストールする際、データベースの場所が異なることによってうまく動作しないことがありますので、直接ファイルをいじってうまくいかない場合は新規追加からインストールしてみてください。
テーマのインストール
普通のWordPressと同様に、WordPressの
ダッシュボード->外観->テーマ->新規追加
から追加できます。
また「Local」では、直接ファイルを追加することでもインストール可能です。
テーマファイルは
C:\Users\ユーザー名\Local Sites\サイト名\app\public\wp-content\themes
にあります。
今回は私が使っているテーマ「swell」をファイル移動で使えるようにしてみました。
ただし、注意事項が２つあります。
- ファイル形式はzipではなく、展開したもの
- 子テーマは直接おいても認識されないことがある
また、展開するだけではファイル名等も異なってしまう事があるので、
- テーマのアップロードはzipで
- テーマの編集はファイルを直接編集
とするのが良いかと思われます。
私が使っているテーマはこちら！
編集済みの子テーマのカスタマイズを移行する
Customizer Export/Importというプラグインを使います。
CSSやJavascriptなどの編集済みのファイルをzip化して出力したり、アップロードして適応させたりできます。
プラグインのインストール
普通のWordPressと同様に、WordPressの
ダッシュボード->プラグイン->新規追加
から追加できます。
また「Local」ではテーマと同じく、直接ファイルを追加することでもインストール可能です。
プラグインファイルは
C:\Users\ユーザー名\Local Sites\サイト名\app\public\wp-content\plugins
にあります。
ですがこちらも、
- プラグインのアップロードはzipで
- プラグインの編集はファイルを直接編集
とするのが良いかと思われます。
phpファイルの編集とデバッグ
私はVSCodeでフォルダごと開いて、デバッガを使いながらいじっています。
これはLocalの公式でも推奨されいている方法で、実際にいじりやすいのでお勧めです！
その際、編集の履歴等も保存したいので、Gitを使いながら管理をしています。
Gitの使い方についてはこちらの記事で解説をしています。
まとめ
以上、いかがでしたでしょうか！
ローカル環境で開発できるので、とっても安心感がありますね！
VSCodeで開発できるので、PHPデバッガはもちろん、Xdebugが使えるようになるので、１行１行止めながら開発が出来るので、本当におすすめです！
是非使ってみてください！
はく最後までお読みいただきありがとうございます！
