24
23

More than 3 years have passed since last update.

WordPress のローカル開発環境を簡単に構築する全手順(Mac版)

Posted at

概要

WordPress (以降、WP) のローカル開発環境を簡単に構築する際の手順の備忘録。

Web ページの管理サイトから直接テーマの「独自カスタマイズ」を行うと、実際に公開されているページを編集することになり、誤った状態で保存し「サイトが見れない」「動作がおかしい」などの支障が出てしまう可能性がある。

なので、スタイル/テーマのカスタマイズを行う可能性がある場合には、ローカル開発環境が必要になる。そのための手順を以降に記載する。

今回は、「Local (by flywheel)」というツールを利用する。

Local (by flywheel) とは

Local (by flywheel)」は WP のローカル開発環境を簡単に構築できるデスクトップ ネイティブ ツール。
WPローカル環境_01.png

公式サイトからインストールして利用すれば、個人 PC 内に「Webサーバ」「PHP」「DB」の構築を自動で行ってくれて、更に、WordPress 管理ツールのインストールやサイトビュー機能も提供してくれる、便利な開発支援ツール。

前提

ローカル開発環境は以下

  • OS: MacOSX

導入手順

以下の手順で導入できる。

ダウンロード

Local (by flywheel) の公式サイト にアクセス。
右上の「DOWNLOAD」ボタンをクリック。
対象のローカル環境を選択(今回は Mac で開発するので、Mac を選択)
WPローカル環境_02.png

個人情報の入力(First Name、Last Name、Work Mail、Phone Number)を求められるが、ツール自体がβ版だし、ダウンロードさえできれば良いので、営業メールを回避したければ存在しないテキトーなメアドを打ち込んで「GET IT NOW!」ボタンを押下。すると、ダウンロード開始する。
WPローカル環境_04.png

インストール

「local-{バージョン名}-mac.dmg」をダブルクリックしてインストールする。
WPローカル環境_06.png

インストールは、開いたウィンドウでアプリを指定のフォルダにそのまま移動すればOK。
WPローカル環境_07.png

インストール完了したら、アプリ一覧から「Local」を選んで起動。
(起動の際、開発元が不明で大丈夫か確認される場合があるが、そのまま「開く」を押せばOK)
WPローカル環境_08.png

アプリ起動でエラー報告をしていいか聞かれるがどちらでも良い(私は「No」にした)
WPローカル環境_09.png

以下の画面までくれば導入は導入は完了。
WPローカル環境_10.png

初期設定手順

以下の手順で初期設定を行う

Web サイト生成

先ほどのツール画面の「CREATE A NEW PAGE」ボタンを押下。

サイト名入力

任意のサイト名を入力して「CONTINUE」ボタンを押下。(オプションは特にいじる必要なし)
WPローカル開発_03_2.png

アカウント入力

ローカルに構築する WP の任意のアカウントを入力して「CONTINUE」ボタンを押下。
(アカウント情報は忘れないように注意。メモなどに残しておくこと)
WPローカル開発_04.png

その後、ダウンロードやインストールなどの構築作業が始まる(要インターネット環境)
WPローカル開発_05.png

下記の画面になれば、無事に初期設定完了。
WPローカル開発_06.png

おまけ: 管理画面を日本語にしておく

ローカルに WP が構築できたので、Local アプリを起動してアプリケーションが起動状態である限り、Web 操作時と同様、Web ブラウザから管理画面にアクセスできる。
管理画面がデフォルトでは英語になっているはずなので、日本語標準に設定をしておく。

下記の「ADMIN」が管理ページへのリンクボタン、「VIEW SITE」は現在のサイトをプレビューするためのリンクボタン。
まず、「ADMIN」を押下してローカルの管理ページへアクセスする。
WPローカル開発_06_2.png

初期設定時に入力したアカウントを入力するとログインできる。
WPローカル開発_07.png

ログインしたら、「Setting」の「General」をクリック。
WPローカル開発_08_2.png

画面遷移したら下部にある、Site Language で、言語設定を「日本語」に変更する。
(日本語は、Italiano とかの近く、真ん中らへんにある)
WPローカル開発_10.png

画面最下部の「Save Changes」で保存・更新して日本語化は完了。
WPローカル開発_12.png

24
23
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
24
23