WordPressのローカル開発環境「Local」の使い方

WordPressのテーマのcssやHTML、PHPのコードを書き換えるなどカスタマイズする際、いきなり本番サーバーで直接作業するのはよくありません。

もしエラーや不具合が発生したら、訪問者さん全員にまともに表示されないあなたのサイトを見せてしまい、ガッカリすることでしょう。

そこで登場するのが「ローカル開発環境」です。

「ローカル開発環境」とは、自分のPC上に本番環境と同じ開発環境を構築することです。ローカル開発環境なら、どんなに大きな変更でもリスクゼロで心ゆくまでテストと調整が可能です。

ローカル開発環境で無事に動くのを確認してから、本番サーバーにそれをアップロードすればいいわけです。

以前は、ローカル環境の構築は、

のインストールと設定を個別に行う必要があり、特に初心者にとって高いハードルでした。しかし、今は違います。

現在、ローカル開発環境ツールは主に3つあります。

本記事では、その中でもWordPressの開発に特化した「Local」（旧 Local by Flywheel）を実際に私が使用して、開発環境を構築する手順を解説しました。

千切伝助

元水産養殖業従事者

1994年、水産養殖会社の所長をしていた当時、まだ珍しかったパソコン(DOS/V)を自費で購入し、九州の養殖場で育てていたブリ、カンパチ、ヒラメの在庫管理をエクセル化したのが、プログラミング的なことへの最初の挑戦でした。手作業での管理から解放された時の感動は忘れられません。

以来、私は一人でもくもくと(ある意味ぼっちで)パソコンに向かう時間が大好きで、このブログを「ぼっち工房PC部」と名付けました。

培ってきた知識やスキルを、困っている多くの方と共有したいという気持ちから、このブログを立ち上げました。

一つ一つ、丁寧に、誰かの「できた！」を増やすお手伝いができれば幸いです。

私が感じたLocalのメリットは、作成・カスタマイズしたWordPressをスマホ実機のブラウザでリアルタイムに確認できる点だと思いました。

今どきのウェブサイトは、モバイルファースト、レスポンシブデザインなどスマホでの見た目が重要視されますが、Chromeなどブラウザの開発ツールにはスマホでの見た目を確認できるシミュレーターが搭載されていますが、実機と異なる振る舞いをすることがまれにあるので、やはり実機での動作確認に優るものはありません。

しかもLocalなら数回のクリックで自分のスマホのブラウザで確認できます。

Localをインストールして起動するまでの5ステップ

STEP.1 Localのインストーラーをダウンロードする

LocalツールはWP Engine社が開発していて、Localツールの専用サイトがあります。

公式ページ：Local - Local WordPress development made simple

公式ページにアクセスしてトップページのダウンロードボタンを押すと、自分のパソコンのOSや所属のタイプ、メルアドの入力画面に移動します。

OSは「Windows」を選択、名前の入力は任意のようなのでパスして、所属のタイプは「other」を選択して、

最後にメルアドを入力します。「えっ？メルアド必要なの？」って一瞬思いましたが、とりあえずあまり使っていないGoogleアカウントのGmailメルアドを入力しました。後日メールボックスを確認しましたが特にメールが送られてきてはいませんでした。

入力が終わったらGET IT NOW!ボタンを押します。

しばらくするとダウンロードされます。このインストーラー、容量が700MBあります。結構なサイズです。

STEP.2 インストールする

ダウンロードされたexeファイルをダブルクリックして起動します。

最初に表示されるこれは「現在のユーザーのみにインストールする」を選択しました。

インストール先のフォルダはそのまま。最終的な容量は2.1GBあるようです。サーバーまるごと1台分と考えるとやむを得ないかと。

インストールボタンを押すとインストールが開始されます。5分間くらいかかります。

その途中で、何度かこのような画面が出るので、全部「はい」をクリックして進みます。

完了画面になるので「完了」ボタンを押します。

以上でLocalのインストールは完了しました。

STEP.3 Localの利用規約の同意

Localを起動すると、最初に利用規約の同意画面が出るので、チェックボックスにチェックを入れてから「I agree」ボタンを押して同意します。

STEP.4 Localのアカウントの作成

アカウント作成画面に移行するために、Create a free accountボタンを押します。

このLocalツールって、結局最終的にはLocalのアカウントを作らないとスマホ実機での動作確認(Live Link)機能などが動かないのでぜひ作りましょう。

ブラウザが開いて、アカウント作成を促されます。私はGoogleアカウントで作成しました。名前やパスワードを打たなくて済みました。

STEP.5 Localの起動

道なりに進むと、このような画面になりますので緑の「Open Local to continue」をクリックします。

次に、ブラウザでこのような画面が自動で開くので、「Localを開く」を選択しました。

すると、ログインした状態でのLocalのウィンドウが立ち上がります。

テスト用のローカルWordPressサイトの作成

Localを起動したら、早速、WordPressサイトを作りましょう。

〇〇.localという架空のドメインが作られ、お使いのパソコンでのみブラウザで閲覧できるWordPressで動くサイトを作成します。

Create a new siteボタンを押します。

次の画面でCreate a new siteを選択してから右下のContinueボタンを押します。

次の画面でお好みのサイトの名前を入力します。なんでも良いのでここではtestsiteにしました。

Advanced optionsは最初閉じていますが、クリックして開いてみると、この入力したサイト名がそのままテスト用のドメイン名(この場合はtestsite.localというドメイン名)になるようです。

次の画面ではPHPのバージョンなどの設定です。Preferred(推奨)を選択したままContinueボタンを押しました。

もし、もう一方の「Custom」に進めば、PHPのバージョンやサーバーをApache, Nginxのどっちにするかとか、データベースはMySQLかMaria DBにするかとか、細かく設定できるようです。

次の画面では、WordPressのログインユーザーとパスワード、WordPressの言語、マルチサイトにするかどうかの設定になります。「WordPress e-mail」の項目はそのままにして、以下のように設定してから右下の「Add Site」ボタンを押しました。

すると次の画面に遷移します。いよいよWordPressをインストールしているようです。

途中、2回くらい、許可を促すダイアログが表示されましたがすべて「はい」で進みました。

最終的にこのような画面になればWordPressのインストールは完了しています。

右上にある「WP Admin」ボタンを押すと、ブラウザが開いてWordPress管理画面が表示されます。
最初はログイン画面になりますので、設定したユーザー名とパスワードを入力して進んでください。もし、忘れた場合はイチから作り直すのが一番早いです。LocalはWordPressのインストールがあきれるくらい簡単なので、作り直しも苦にはならないです。

はい、おなじみのWPの管理画面が表示されました。

〇〇.localという架空のドメインでもパソコン内のブラウザで閲覧できるわけ

Windowsのhostsファイルを確認すると、作ったテスト用のドメイン(testsite.local)が追記されていました。

hostsファイルはブラウザがネットに行くときに真っ先に参照するファイルです。その場所はWindowsの場合はC:\Windows\System32\drivers\etc\hostsです。

hostsファイルとブラウザの関係ですが、例えば、Yahooのサイト(www.yahoo.co.jp)にブラウザでアクセスする時に、何よりも真っ先にこのhostsファイルに登録されていないか確認して、無ければ外部のDNSというサーバーに問い合わせます。

なので、このhostsファイルにこのようにyahooを登録して、

ブラウザでwww.yahoo.co.jpにアクセスすると、私のパソコン内の127.0.0.1(もしくは::1)を待ち受けているページ(WSL2のUbuntuのApache2サーバーのデフォルトページ)が開きます。このように。

この仕組みを巧みに利用して、testsite.localという架空のドメインでもパソコン内のブラウザで閲覧できるわけです。

普段、イチからLocalのWordPressサイトを開くには？

上記はインストールの流れでWordPressサイトを開きました。普段使いでの開き方は、

まずはLocalを起動して、Localアカウントにログインしていない状態なら「Log in to Local」をクリックしてログインします。

このようなページがブラウザで自動で開くので、「Log in」をクリックします。

すると、このような画面に変わりますので「Open Local to continue」をクリックします。

すると、「Localを開きますか？」というダイアログが表示されるので「Localを開く」をクリックします。

すると、ログインした状態でLocalが再起動します。

このLocalウィンドウの左下を見ることで、今現在稼働しているサイトの数がわかります。

「0 site running」。サイトはひとつも稼働させていないので当然０です。

ウィンドウの左上にある、作成したサイト名(ここではtestsite)をクリックします。

すると、ウィンドウの右にサイトの設定の詳細が表示されます。その右上の「Start site」をクリックします。

testsite.localが稼働中になりました。左下が「1 site running」に変わりました。

サーバー、PHPのバージョンの切り替え

WordPressサイトを作ったあとでサーバーやPHPを簡単に変更できます。
先程はPreferred(推奨)でインストールしました。サーバーがnginxでPHPのバージョンが8.2.27でした。

これをApacheサーバーとPHP8.3に切り替えてみます。プルダウンメニューで切り替えた後Applyをクリックするだけです。

できました。

画像の右下に映っているDetailsをクリックするとphpinfo画面が表示されます。

PHPのバージョンやサーバーがApacheであることを確認できます。

サイト全体をコピーできます

コピーしたいサイトを右クリックしてClone siteを実行します。

新たなサイト名を入力します(ここではcocoon)

しばらくすると、できました。

Blueprint機能

ローカル開発をやっていると、同じことを何度もやることがあります。

Localの「Blueprint」機能とは、ある時点のローカルWordPressサイトを丸ごと「ひな形(テンプレート)」として保存し、次回以降のローカルWordPressサイトをそれをもとに一瞬で作成する仕組みです。

Blueprintという言葉は、本来は昔よく使われた青い設計図のことで、Localのblueprintはそれをもじって命名されています。

Blueprintの作成

ローカルのcocoonというサイトには私が毎回手作業でインストールしている

これらがすでにインストールされています。

私にとってblueprintを試すのにピッタリです。

cocoonサイトを稼働中にしてから右クリックして、Save as Blueprintを実行します。

blueprintの名前を入力します(ここではcocoon-base)。

しばらくすると、できています。Localウィンドウの左のサイドバーのBlueprintsアイコンをクリックすると確認できます。

Blueprintから新たなサイトを作成

Localウィンドウの左下にあるプラスアイコンをクリックして新しいサイトを作成するところからはじめます。

Create from a Blueprintを選択して次に進みます。

先程作成したcocoon-baseというblueprintを選択して次に進みます。

サイト名を入力して(ここではcocoon2)次に進みます。

しばらくすると作成されています。

当然ですが、Cocoonテーマとプラグインが2つインストール済みの状態です。便利ですよね。

WordPressのコアファイルの場所

Site folderをクリックするとエクスプローラーが開くので、

そのappフォルダの中のpublicフォルダ内に格納されています。

VSCodeで開く

VSCodeがパソコンにインストールされていれば、先程クリックした右にある「{ } VS Code」をクリックすることで、

上記publicフォルダをワークスペースにしたVSCodeが起動します。

wp-cliも実行できる

Site shellをクリックすると

ターミナルが起動します。見るとWP-CLIの文字が・・・。

WP-CLIのプラグインの状態を調べるコマンド(wp plugin statsu)を打ってみると、見事に動作しました。

すごーい。WP-CLIも最初から入っているなんて、至れり尽くせり。

phpmyadminのようなAdminNeoもついている

DatabaseをクリックしてOpen AdminNeoをクリックすると、

phpmyadminをシンプルにしたようなAdminNeoというデータベースアプリがブラウザに開かれます。

操作方法はphpmyadminと多少異なりますがデータの編集などができました。

httpをhttpsにしよう！(SSL化)

SSLとは、「サーバーとブラウザの間の通信を暗号化する仕組みであり、その際のURLの先頭がhttpsで始まるもの」のことです。つまりSSL ≒ httpsであり、ページを表示するすべての情報(HTMLやcss、パスワードやクレジットカード番号など)が暗号化されて送受信されます。
一方、sのつかないhttpは暗号化されない素の文字列(平文という)で送受信されます。昔はみんな平文で送受信していたんですよね。

昔と違って現在は、レンタルサーバーなど本番サイトはほぼ必ずHTTPS化されています。
なので、ローカルでも同じhttpsに設定にしておくことで、移行時の不具合を防げます。一部のプラグインや外部APIはHTTPS環境でないと正常に動作しません。

ローカルでHTTPSを有効化しておけば、開発段階から正しくテストできるというわけです。

それでは、SSLの列にあるTrustedボタンを押してSSLを有効にします。薄い文字になって押せない時はもうすでに有効です。

WPの管理画面の設定▶一般、を開いてWordPressアドレスとサイトアドレスのURLのhttpを

httpsに書き換えます。sを追記するだけです。

「変更を保存」すると一旦ログイン画面に移動するので、ログインすればhttps化に成功しています。

Chromeだとアドレスバーを数回クリックするとhttpsの文字を確認できます。

Live Link (スマホ実機での動作確認)

Localで作ったWordPressサイトはトンネリングという仕組みを使って、自分のパソコンの中にあるWebサイトを、インターネット上で一時的に閲覧できます。

トンネリングによって本物のドメインlocalsite.ioのサブドメインが、自分の作ったLocalのWordPressサイトに付与されるので、そのURLにスマホのブラウザでアクセスすればスマホ実機で閲覧でき動作確認できるというわけです。

この機能をLocalでは「Live Link」と呼んでいます。

百聞は一見にしかず、やってみましょう。

Localウィンドウの下にある、Live Linkの横のEnableボタンを押します。

Localアカウントにログインしていないと、このEnableボタンが薄くて無効な状態です。クリックすると「ログインしてください」のメッセージが表示されます。

表示された緑のリンクをクリックして道なりに進んでください。

すると、このように変化しますので、「逆への字」をクリックして開きます。

このようなのが表示されます。

• shiny-party.localsite.ioというサブドメイン
• Username：expansion
• Password：determined

が表示されています。
後で、このサブドメインにスマホのブラウザでアクセスして、ユーザー名とパスワードを入力する際に使用するものです。

その下にある「Edit details」をクリックしてみると、Live Linkの設定画面が表示されます。どうやらユーザー名やパスワードを自分の好みに変えることができるようです。

あとでUsernameとPasswordをスマホのブラウザで手入力することを考えると、ここを自分の好みに変えておいたほうがいいと思います。

Live Linkが有効になっていると変更できないので、画像の右上に映っている「On」のスイッチを「Off」に切り替え、名前とパスワードを自分のわかりやすい(私はdensukeにした)のに変えてSave Changesボタンをクリックします。

サブドメインもドメイン名の右にある更新マークを押すたびにいくつか用意されているものに順次変更できます。複数のWordPressサイトを同時に稼働させる時に利用価値がありそうです。

では、スマホのブラウザでサブドメインのURLにアクセスして、ユーザー名とパスワードを入力すると無事に表示されました。設定したサブドメインでアクセス出来ています。

ちなみに、私はAndroidスマホで、Kiwi BrowserというChrome系のブラウザを使ってスマホでも開発者ツール(DevTools)を利用しています。

まとめ

この記事では、WordPressのローカル開発環境を簡単に構築できるツール「Local」の導入手順から、SSL化、そして特筆すべき機能である「Live Link」を使ったスマートフォンでの実機確認まで、具体的なステップを追いながら解説しました。

ウェブサイトのカスタマイズや修正を行う際、本番環境で直接作業するのは予期せぬエラーを招くリスクが伴います。しかし、「Local」を使えば、ご自身のPC内に安全なテスト環境を構築でき、心ゆくまでサイトの調整を行うことが可能です。

特に、スマートフォンでの表示が重要視される現在、数クリックで実機確認ができる「Live Link」機能は、開発効率を飛躍的に向上させてくれる強力なツールです。

本記事で紹介した手順を参考に、ぜひ「Local」を導入し、失敗を恐れることなく、あなたのWordPressサイトの改善やカスタマイズに挑戦してみてください。