【超便利】WordPressのローカル開発環境を構築するなら「Local」がおすすめ!

wordpress_local_main.png

新規サイトの場合、実際のサーバーにWordPressを設置して開発していくのが早いと思いますが、
リニューアルであったり、既存サイトのカスタマイズを行う場合は、公開中のままではトラブルが発生することがあります。

そのため、別環境で作業・検証を行う必要がありますが、
テスト用に別途サーバーを借りるのは費用もかかってしまうため、
ローカルに環境を作るのが一般的です。

ローカル環境を構築するにはWebサーバーの知識が必要になるため難しい作業ですが、
「Local(旧Local by Flywheel)」というソフトを使用することで、
とても簡単にローカル環境を用意することができます。

導入の手順

公式サイト よりファイルをダウンロードします。
wordpress_local_img01.jpg

「DOWNLOAD FOR FREE」のボタンより、自分の使用環境を選択し、
必須項目の組織の種類、メールアドレスを入力したら、ファイルが入手できます。
wordpress_local_img02.jpg

ダウンロードしたインストールファイルを開き、セットアップにて、インストール先などの設定後に
スタートさせればパソコンにLocalをインストールさせることができます。

新規環境の作り方

初回起動時は、Localの画面に表示されている「Create a new site」ボタンをクリックします。
左下の「+」ボタンからも設定画面に移動します。
続いて表示される画面の右下にある「Continue」をクリックします。 wordpress_local_img03.jpg

サイト名の入力画面が表示されます。
任意の識別しやすい名前を設定し、「Continue」をクリックします。 wordpress_local_img04.jpg

次にサーバーやデータベースの設定を行います。
特にこだわりがない場合、「Preferred」の設定を確認してそれで良ければそのまま次へ、
本番環境と合わせたい場合は、「Custom」をクリックし、
・PHPのバージョン
・サーバー(nginx か Apache)
・MySQLのバージョン
を設定します。
wordpress_local_img05.jpg

最後にWordPressにログインするための「ユーザー名」と「パスワード」を指定します。
ログイン時に必要となるので必ずメモを取っておきましょう。
WordPress Emailはデフォルトのままで問題ありません。
入力が完了したら「Add Site」をクリックします。
wordpress_local_img06.jpg

構築が完了すると以下のような画面が表示されます。
作成時は起動された状態になっています。右上の「Stop site」は起動中の表示です。
何か作業をする場合やサイトを閲覧したい時には起動し、必要ない場合は停止します。
「WP Admin」ボタンをクリックすると、WordPressの管理画面(ログイン画面)が開き、
「Open site」ボタンをクリックすると、立ち上げたサイトがブラウザで確認できます。
wordpress_local_img07.jpg

複数の環境を作ることができる

Localは、新規・複製などで複数の環境を持つことができます。

作成方法は、複製したいサイトを右クリック、「Clone Site」をクリックします。
wordpress_local_img08.jpg

重複しないサイト名を入力し、「Clone Site」をクリックすればサイトが作成されます。
wordpress_local_img09.jpg

サイトをそのまま複製するので、
WordPressの管理画面にログインするユーザー名とパスワードは複製元と同じになります。

コピーしたもので開発を進めていき、定期的にバックアップとして複製しておくと良いでしょう。
開発中になにか問題が起きたときに、データが壊れてしまっても簡単に復旧することができます。

「Live Link」機能で簡単にサイトを共有できる

開発した環境をお客様に共有したり、スマホなどのデバイスチェックを行いたい場合、
Localにログインすると「Live Link」機能が使えるようになります。

Localのアプリケーションを開き、下部にある「Live Link」の横「Enable」にカーソルを乗せると、以下のような吹き出しが表示します。 「Log in to your Local account」と書かれた緑色の部分をクリックします。
wordpress_local_img10.jpg

ログイン画面に遷移するため、アカウントをすでにお持ちの方はここでログインします。
アカウントが無い場合は、右上の「Create an account」をクリックします。
wordpress_local_img11.jpg

アカウント作成画面に遷移するため、「お名前(名・姓)」「メールアドレス」「パスワード」を入力し、
「Create your account」をクリック、アカウントを作成します。
GoogleやGitHubアカウントがあれば、「Continue with~」よりアカウント作成もできます。
wordpress_local_img12.jpg

ログインできたら、アプリケーションのアイコンも変わり、
グレーアウトしていた「Enable」がクリックできるようになります。
wordpress_local_img13.jpg

「Enable」をクリックし数秒経つと「Live Link」がクリックできるようになるので開くと、
「URL」「ユーザー名」「パスワード」が自動で発行されるので、
こちらの情報を共有したい相手にお伝えすることでサイトをご覧いただけます。
wordpress_local_img14.jpg

デメリットとしては、共有する側がLocalのアプリケーションを起動して、
Live Link機能を有効化している間でしか閲覧ができない点です。
共有する時間を相手とすり合わせておくなどの対応が必要になります。

それでも、ファイルのアップロードなどを別途行わなくても開発した内容そのままを手軽に共有できるのはとても便利ですね。

さいごに

今回はWordPressのローカル環境を構築する「Local」をご紹介しました。
無料で使えて導入も簡単、便利な機能も充実とあれば利用しない手はないですね。

弊社では、WordPressやMovable Typeを使用したCMS構築・サイト制作を行っております。
お困りごとや制作のご依頼など、ぜひお気軽にご相談ください。

お気軽にご依頼・ご相談ください

前へ

【学習例付き】PL-200 認定を取得しよう!【Microsoft Power Platform 業務コンサルタント認定試験】

次へ

【社内活動を紹介します】ランチトークで知識や技術を社内共有