Localを使ってWordPressのローカル開発環境を用意する【WordPress制作入門講座】

WordPressの学習を始めようと思い立って、最初の難所が開発環境の用意。
うまくWordPressをインストールできず、嫌になってしまう方も珍しくありません。

ローカル開発環境が必要な理由、簡単に作れる方法をご紹介します。
今日からあなたのパソコンの中で、WordPressを動かしましょう。

• WordPressのローカル開発環境とは?
• Local(Local by Flywheel)を使ってみよう
• 1.Localをダウンロード
• 2.Localをインストール
• 3.WordPressサイトを作成
• 4.WordPressにログインしてみる
• Localがエラーになる時は…

WordPressのローカル開発環境とは?

今まで「はじめてのWebデザイン」シリーズで作ってきたHTMLやCSSは、エディタとブラウザだけあれば動作確認が出来ました。

しかし、WordPressの場合は、ダウンロードしたファイルをブラウザで開いても、全く機能してくれません。記事ページのファイルがどれかも分かりませんね。
これはページを生成・表示するために、下図のような仕組みになっているため。

WordPressの動作に必要なPHPやデータベース（MySQL）は、初期状態のパソコンに入っていません。そこで、自分のパソコンの中に、こうした機能を使えるようにインターネット上のサーバーと同じような環境を作るわけです。
これをローカル開発環境と言います。

Local(Local by Flywheel)を使ってみよう

画像元：https://localwp.com/

WordPresのテーマ開発環境を整えるツールとして、近年人気があるのが「Local(Local by Flywheel)」というアプリケーションです。
無料で使用でき、Windows/Macの両方に対応しています。

Dockerベースで軽量。
データベースとWordPressの紐付けも自動で行ってくれます。
ローカル環境で開発途中の段階でも、Live Link機能を使って第三者に進捗を見せられるなどの便利な機能も搭載されていますよ！

今回は「local by flywheel」を使ってWordPressを動かしてみましょう。

1.Localをダウンロード

まずはLocalの公式サイトから、Localをダウンロードしましょう。

https://localwp.com/を開きます。
オレンジの線で囲った「 OR DOWNLOAD FOR FREE 」をクリック。

ポップアップが表示され、プラットフォーム（OS）を聞かれます。
ご自分の環境にあったものを選択して下さい。

プラットフォーム選択すると、下に登録フォームのようなものが出現します。
このフォームのうち、必須項目はメールアドレスのみです。
メールアドレスを入力して、「GET IT NOW!」ボタンをクリックしましょう。

すると、自動的にダウンロードが始まります。
始まらない場合は「click here」をクリックしてください。

これでLocalのダウンロードは完了です。

2.Localをインストール

ダウンロードしたLocalをインストールしましょう。
Localのアイコンをダブルクリックするとインストーラーが起動します。

基本的には初期状態のまま「次へ」進めて問題ありません。
（設定したい方は変更して下さい）
　↓

「インストール」をクリックして、インストールを実行します。

インストールが完了したら、
「Localを実行」にチェックが付いている状態で完了をクリック。

Localが起動しました。

利用規約に同意するというチェックを入れ「I AGREE」ボタンをクリック。
すると、使い方のスライドが何枚か表示されます。

気になる方は切り替えて内容を見て下さい。
見終わったら、右上の×をクリックして閉じましょう。

下図のような画面が表示出来たらインストールは完了です。

3.WordPressサイトを作成

Localウィンドウの真ん中、緑色の「+ CREATE A NEW SITE」ボタンをクリックしてください。

これから作成するWordPressサイトの名前を入力します。
サイト名入力が完了したら、右下の「CONTINEU」ボタンで次に進みましょう。

②Setup Environmentnに切り替わります。
ここはローカル環境の内容(PHP、Webサーバー、MySQL)を選択する画面です。

基本的にはデフォルトで選択されている“Preferred”のまま「CONTINUE」をクリックしてOK。独自設定を行いたい場合は“Custom”に切り替えて設定してください。

③Setup Wordpressに切り替わります。
ここでは、WordPressで使用するユーザー名、パスワード、メールアドレスを登録します。設定したユーザー名とパスワードはWordPress管理画面にログインする際に必要になりますので、忘れないようにしてください。

Setup Wordpress画面の“ADVANCED OPTIONS ”ではWordPressをマルチサイト化するか否かを設定できます。今回はデフォルトの「No」のままで良いので、触れずに進めてください。

「ADD SITE」をクリック。
WordPressを使うための環境作成がスタートします。
少し時間がかかることもあるので、そのまま待ちましょう。

下記のような画面が表示されれば、WordPressのセッティングは完了です。

4.WordPressにログインしてみる

早速、LocalでWordPressを開いてみましょう。
右上にある「ADMIN」をクリックしてみてください。

ブラウザで、ログイン画面が開きます。
②Setup Environmentnで入力したusernameとpasswordを入力してください。

右下の青い「Log In」ボタンをクリック。

上図のような画面が表示されれば、WordPressの管理画面にログインできています。
次回のWordPressの管理画面と基本操作に進んでください。

Localがエラーになる時は…

使用されているパソコンによって、Localがうまく動かない場合もあります。

上にWorning! と表示されていたり。

こんなウィンドウが出てきたり。

こうした場合の対処法はいくつかありますが、どれも完璧ではありません。

1.FIX ITボタンをクリックしてみる
2.ウイルス対策ソフトを一時的に無効にする
3.hostsファイルを調整 (難易度高め)

1と2を試してみて動きそうになかったら、XAMPPもしくはMANPを使ってローカル環境を用意する方法がおすすめです。
（３の方法を試したい方は自己責任でお願いします）

無料講座

Mac-MAMP導入方法はこちら
WORDPRESS基礎講座【前編】

無料講座

windows-XAMPP導入方法はこちら
XAMPPで作るWORDPRESS開発環境講座

また、あまり推奨は出来ませんが、localhostモードに切り替えると動く場合があります。最初は練習として、手軽にWordPressを動かしたい方は下記の方法を試してみても良いでしょう。

localhostモードへの切り替え

左上のメニューアイコンからPreferenceを開きます。

左のメニューからADVANCEDをクリック。
Router modeの項目でlocalhostを選択して、APPLYボタンをクリック。

既存のサイトはうまく動かないので、一旦削除します。
サイト名を右クリックして、Daleteを選択。

もう一度、「3.WordPressサイトを作成」の流れでサイトを作って下さい。
ADMINをクリックすると、開けるようになっている可能性があります。