WordPress開発環境

レンタルサーバーを契約せずにWordPressを試す簡単な方法

WordPressはWebサーバーがなければ動作しません。普通はレンタルサーバーを借りて動作させることになりますが、効率の良い制作や開発には、手元のパソコンで作業ができる、ローカル開発環境があると便利です。

フリーランスのWebエンジニアだけではなく、WordPressを扱うHTML/CSSコーダーやWebデザイナーも、ローカルのWordPress環境を有効活用できます。

  • WordPressを試してみたいが、レンタルサーバーと契約しなければならない
  • 自分のパソコンでWordPressを動かしたいが、方法がわからない
  • レンタルサーバーで作業をしているが、もっと効率のよい方法があれば採用したい

といった人におすすめです。

なぜローカル開発環境が必要か?

EコマースWebサイト、ネットショップ、オンラインストアを運営している場合でも、フリーランスのポートフォリオなど、他の種類のWebサイトを運営している場合でも、Webサイトのリニューアルや修正に取り掛かるには、直接公開Webサイトで作業するのではなく、ローカル環境にコピーして変更を加えていくのが最善です。

なぜなら、WordPressやプラグインの更新で各所に不具合が出る可能性もありますし、誤ってWebサイトを破損させることもあるからです。

ちなみに、「ローカル」は、自分が今使っているコンピューターで、「リモート」は、ネットワーク経由でつながっているコンピューターのことを意味します。例えば、「ローカル」が自分のパソコンで、「リモート」がレンタルサーバー、ということです。

現代のエンジニアのための最新のツール Local

Webエンジニアのローカル開発環境としては、XAMPP、MAMP、DesktopServer、Vagrantなど様々なツールがあります。

ここでは、簡単にWordPress開発環境をつくることができる、Localを紹介します。

WordPress開発環境 Local
WordPressローカル開発環境「Local」ホームページ

Localは無料で使えます

LocalはWebエンジニアによく使われるAtomと同じく、デスクトップアプリケーション開発のフレームワークElectronで構築されたアプリケーションです。LocalはAtomのようにオープンソースではありませんが、基本機能を無料で使えます。

Localはアドオンを開発してその機能を追加することができますが、WordPressサイトを制作する程度であれば、高度な機能を使わず、パソコン(Windows、Mac、Linux)にインストールしたそのままで使うことができます。

Localの特徴

Localには以下の特徴があります。

  • ワンクリックでWordPressをインストールし、使うことができます。
  • WordPressサイトはいくつも追加でき、すぐに削除できます。
  • ローカルでもSSLに対応しています。
  • PHPのバージョン変更や、SSHアクセスなどの、開発機能が付属しています。
  • WordPressサイトにユーザー名やパスワードを入力せずにログインできます。

有料のPro版では、チームで開発する時に便利なライブリンクや、ファイルの変更を検出して自動でWebブラウザをリロードするインスタントリロード機能などが追加されます。

※以下2021年6月30日追記

2021年6月29日から、Pro版が無料になりました。無料版から通常のアップデートを行うだけで、バージョン6のProになります。これで、MagicSync、Instant Reload、Live Links、Link Checkerが使えるようになり、より制作や開発が便利になっています。特に、CSSファイルを更新したときに、ファイル変更を検知してWebブラウザが自動リロードされるInstant Reloadは便利です(ただし、すべてのファイル変更を監視するわけではありません)。

より詳細については、Local Proを参照してください。

「Local by Flywheel」の呼称について

今でも「Local by Flywheel」とよく紹介されていますが、その名称だったのは2019年8月11日リリースのバージョン3.3.1までです。そしてこれは、仮想環境としてVirtualBoxを利用していた「Local Classic」の最後のバージョンです。

バージョン5.0.x以降のバージョンは、「Local Lightning」と呼ばれ、2020年1月23日リリースのバージョン5.2.1安定版では、名称が「Local」に変更されています。

2020年3月13日リリースのバージョン5.2.6では、コードベースでも「by Flywheel」を削除していますので、2021年の現在では、「Local」が正式名称となります。

Local Lightningは、VirtualBoxに依存せずに再構築した、言うなればLocal by Flywheelとは別のアプリケーションです。(※参考

日本語での解説によくある「Local by Flywheel」の記述は、Local Classicを使うものと誤解を招きます。そして、 Local Classicは現在サポートされていません。ですので、Lightningと比較する際にあえて称する必要がない限り、「Local by Flywheel」ではなく、「Local Ligntning」もしくは「Local」と記載すべきです。

Localの使い方 4ステップ

それではLocalを早速インストールしていきますが、何も難しいことはありません。以下ではWindows 10を例に説明します。

1. Localをダウンロードする

LocalのWebサイトにアクセスし、ヘッダー右上の「DOWNLOAD」から、任意のプラットフォームを選んで、ダウンロードします。Macの場合は、macOS 10.13以降、Windowsは7, 8, 8.1, 10に対応しており、いずれも最低4GBのメモリと、1GBの空きディスクが必要です。

1.1. プラットフォームの選択

プラットフォームを選択します。

Localのダウンロード:プラットフォーム選択

1.2. メールアドレスの入力

メールアドレスを入力し、「GET IT NOW!」をクリックします。メールアドレス以外は任意入力です。

Localのダウンロード:メールアドレス入力

ダウンロードが始まり、Windowsの場合は拡張子exeの実行ファイルがダウンロードできます。

Localのダウンロード:ダウンロード開始

2. Localをインストールする

ダウンロードした実行ファイルをダブルクリックし、インストールを始めます。

2.1. インストールオプションの選択

「現在のユーザーのみにインストールする」を選択し、「次へ」をクリックします。

Local:インストールオプションの選択

2.2. インストール先の選択

インストール先を任意の場所に指定し、インストールします。インストール先は、デフォルトのままでもよいですが、ここでは管理しやすいようにC:\Localとしています。

Local:インストール先の選択

2.3. インストール中

インストールが完了するまでしばらく待ちます。

Local:インストール中

2.4. インストール完了

インストールが完了したら、「Localを実行する」にチェックを入れて、「完了」をクリックして次に進むか、チェックを外して「完了」をクリックします。

Local:インストール完了

3. Localを起動する

Localを起動します。

3.1. 規約への同意

初めての起動では、規約への同意確認がありますので、規約を読み、規約に同意する場合は「I have read and agree to LOCAL’S TERMS OF SERVICE」にチェックを入れて、「I AGREE」をクリックします(規約に同意しない場合はLocalを使えません)。

Local:規約への同意

3.2. エラーレポートの送信選択

エラーの際、Local開発元にエラーレポートを送信してもよい場合は「Turn on Error Reporting」を選択し、送信しない場合は「いいえ」をクリックし、次に進みます。

Local:エラーレポートの送信

3.3. アドオンの選択

アドオンのひとつ、Atlasはどう?と勧められます。node.jsを用いてヘッドレス化したWordPress開発を行うのであれば必要ですが、ここでは通常のWordPressサイトを試しますので、モーダルを消して進みます。

Local:アドオンの選択

3.4. 新規サイトを作成する

「CREATE A NEW SITE」をクリックして、新規サイトを作成します。

Local:新規サイトの作成

3.5. サイト名を入力する

サイト名を入力し、任意でその他各項目を変更して、「CONTINUE」をクリックします。管理しやすいように、ADVANCED OPTIONSの「Local site path」を変更しておくことをお勧めします。

Local:サイト名の入力

3.6. 環境を選択する

環境を選択して「CONTINUE」をクリックします。「Preferred」で問題ありません。

Local:環境の選択(推奨)

ここでは「Custom」から、PHP 7.4.1、Apache 2.4.43、MariaDB 10.4.10を選択して進めます。

Local:環境の選択(カスタム)

3.7. WordPressのログイン設定をする

WordPressの「ユーザー名」「パスワード」「メールアドレス」を入力し、「ADD SITE」をクリックします。「ユーザー名」と「パスワード」は任意の文字列、できれば本番でも使えるセキュリティ的に問題のない強力な文字列にし、「メールアドレス」は仕事や制作・開発で使うメールアドレスを入力します。

マルチサイトにはしませんので、ADVANCED OPTIONSの「Is this a WordPress multisite?」は「No」とします。

すべて入力したら、「ADD SITE」をクリックします。

Local:WordPressログイン情報の入力

Windows Defenderを利用している場合は、以下のように、セットアップ中にいくつかファイアウォールの警告ウィンドウが出ますが、すべて許可して進めます(他のファイアウォールやウィルス対策ソフトを利用している場合は、それぞれのアプリケーションのマニュアルをご確認ください)。

Local:local.exeのアクセス許可
Local:nginx.exeのアクセス許可
Local:maihog.exeのアクセス許可

3.8. トラブルシューティング

「No input file specified.」と表示される

セットアップの完了後、「OPEN SITE」をクリックするなどしてWebサイトにアクセスすると、「No input file specified.」と表示されることがあります。

同じ問題を抱えたコミュニティの投稿を見ると、特定の構成でWordPressをCドライブ以外にインストールすると問題が出るようです。

問題が出た構成は以下です。

  • Localのインストール先:C:\Local
  • Apache 2.4.43、PHP 7.4.1、MariaDB 10.4.10
  • WordPressのインストール先:D:\www\site01

問題の解消方法は、以下になります。

  • WebサーバーがApacheの場合には、WordPressをCドライブ以外にインストールするのは避けたほうがよいです。
  • WebサーバーをApacheではなくNGINXにすると、Cドライブ以外のドライブにWordPressをインストールした場合でも正常に動作します。

※WebサーバーをApacheにしてインストールを進めましたが、ここでApacheからNGINXに変更しています。

3.9. Webサイトにアクセスする

「ADMIN」をクリックで、Webサイトの管理画面にアクセスでき、「OPEN SITE」をクリックすると、Webサイトのフロントページ(ホームページ)にアクセスできます。

また、「One-click Admin」で登録したユーザー名を指定すると、管理画面に自動ログインできます。

Local:Webサイト概要

4. WordPressの最低限の設定をする

「ADMIN」をクリックしてWordPress管理画面のダッシュボードを開くと、英語で表示されているのがわかります。

WordPress管理画面ダッシュボード

「Settings」→「General」から「Site Language」を「日本語」に、「Timezone」を「Tokyo」に変更します。

WordPress管理画面 Settings - General

日本語になったことを確認します。

WordPress管理画面 一般設定

この先は、初心者向けWordPressの使い方の「テーマを選ぶ」から先の説明を参考にしてください。

ローカルのWordPressでWebサイトを構築する

たとえテスト用のサイトでも、リモートのレンタルサーバーを使うのと、このようにローカルサーバーを使うのとでは、作業効率にかなりの差が出てきます。一度ローカル環境を構築してしまえば、その先ずっと、効率よくWordPressの制作や開発を進められます。

特にフリーランスなど自分一人で事業を営んでいる人は、対クライアントの案件作業ばかりをしているわけにはいかず、新規顧客開拓などビジネス構築のための活動や、財務管理など管理業務にも力を入れなければなりません。そのため、生産性向上タイムマネジメントなどで業務効率を追求していくことも重要です。

LocalによるWordPress環境の構築と活用もまた、フリーランスの業務に大いに役立つはずです。

芦屋 ときお

芦屋 ときお 記事一覧

ソフトウェアエンジニア(フルスタック、主にWeb系)。HTML, CSS, JavaScript, TypeScript, PHP, Python, Go, Vue.js, Express, Node.js, Nuxt, Next.js, Laravelなど。C#, ActionScriptも。デザイン、デジタルマーケティング。