「WordPressを学習したい。無料で安全にWordPressを触る環境を作る方法ないかな...」という方向けの記事です。
本来、WordPressでサイトを作るためには主に以下の2つが必要です。
サーバー
ドメイン
上記の2つを用意するにはお金がかかります。
それに、サイトが一般に公開されてしまいます。
初学者には、なかなかハードルが高いです。
そこでおすすめなのが「自分のパソコンの中にWordPress環境を作る」という方法です。
この方法なら、一般公開されることもなく、失敗しようが何しようが好き勝手にWordPressを触ることができ、学習に役立ちます。
上記の方法を「WordPressのローカル環境を構築する」と表現します。
「WordPressのローカル環境を構築する」ために、おすすめなのが「LocalbyFlyWheel(ローカルバイフライホイール)」というツールです。
この記事では以下について解説します。
LocalbyFlyWheelとは
LocalbyFlyWheelをインストールする
LocalbyFlyWheelでWordPressの環境を構築する
最低限やるべき初期設定
LocalbyFlyWheelとは
簡単に言えば、「ローカル環境でWordPressサイトを作るためのツール」です。
「ローカル環境でWordPressサイトを作るためのツール」は他にもたくさんあります。
僕が使ったことあるのは以下の3つです。
xampp
mamp
LocalbyFlyWheel
断言しますが、LocalbyFlyWheelが一番簡単で扱いやすいです。
すでに、xamppやmampをインストールしている場合でもLocalbyFlyWheelは使えます。
無料ですし、WindowsでもMacでも使えます。
LocalbyFlyWheelをインストールする
まず、以下のリンクをクリックして「ダウンロードページ」にアクセスしてください。
![Local home](https://images.ctfassets.net/o1bgnefm7hbe/1Oh3doDjxYgPI0wZyvqPxA/7a11c6a2422f4dc4f3231c503176122e/local_home.png?w=760&h=475&q=50&fm=png)
上記の画像のようなページが開きます。
右上の「DOWNLOAD」というボタンをクリックします。
![choose OS fill name](https://images.ctfassets.net/o1bgnefm7hbe/1XAOkqJyckqHKKUKrxKjXq/facd3307529de998a92f73ae89e6a0b3/choose_os_fill_name.png?w=760&h=507&q=50&fm=png)
OSを選択します。
名前とか電話番号などの入力を求められますが、メールアドレスさえ入力すれば先に進めます。
メールアドレスを入力して、「GET IT NOW!」をクリックするとダウンロードが始まります。
ダウンロードされたファイルを実行するとLocalbyFlyWheelがインストールされます。
ここから、「Windowsの場合」と「Macの場合」に分けてインストールの手順を解説していきます。
Windowsの場合
![select_user](https://images.ctfassets.net/o1bgnefm7hbe/7FwzVyaAHypatQqaZ7E3ZS/aaa85e7e531f24b0d705ab6af42175f7/select_user.png?w=760&h=471&q=50&fm=png)
ダウンロードされたファイルを実行すると、上の画像のようなウインドウが表示されます。
どちらかを選択します。
どっちでも問題ないですが、迷ったら「現在のユーザーのみにインストールする」が無難かもです。
「次へ」をクリックします。
![start_install_local](https://images.ctfassets.net/o1bgnefm7hbe/1Wr33RDzr0en09rzvZeCou/d52f5209eeb2fbd1e8ca23643c10c50c/install_place.png?w=760&h=471&q=50&fm=png)
インストール先を設定します。
特にこだわりがなければ、そのまま「インストール」をクリックしてください。
![finish_install_local](https://images.ctfassets.net/o1bgnefm7hbe/3du5MwDOhSrUb4LF8sJptP/2cc5f735d6055df2c251e55ebfe89887/finish_install_local.png?w=760&h=471&q=50&fm=png)
LocalbyFlyWheelのインストールが完了しました。
「Localを実行」にチェックを入れた状態で、「完了」をクリックしてください。
![i_agree](https://images.ctfassets.net/o1bgnefm7hbe/530X6JNOlK6hgqRKU5pTcS/2080f58172b607d179299cd25760c3d6/i_agree.png?w=760&h=673&q=50&fm=png)
上の画像のようなウインドウが開きます。
内容を読んで「I have read and agree ...」にチェックを入れて「I AGREE」をクリックします。
![spin up headless site](https://images.ctfassets.net/o1bgnefm7hbe/5zWfFqiasXxPeRt3l2RZJI/a602826ae2326fda9ecf6a216436da44/spinup_headless_site.png?w=760&h=431&q=50&fm=png)
LocalbyFlyWheelが起動し、上の画像のような表示が出ます。
これは右上の「✗ボタン」で閉じて大丈夫です。
Macの場合
![dorug and drop local](https://images.ctfassets.net/o1bgnefm7hbe/2hCjPNe1SRoxy2h4carKRK/7ced3940d6830b566f35a604afbcd93d/install_local.png?w=760&h=531&q=50&fm=png)
ダウンロードされたファイルを実行すると、上の画像のようなウインドウが開きます。
「Application」フォルダにドラッグ&ドロップするだけでインストール完了です。
![boot local](https://images.ctfassets.net/o1bgnefm7hbe/1c3NYgUd33T0ALgzGWk8xi/2d9c057ecba9ee6d51ddd15032abf9c7/boot_local.png?w=760&h=475&q=50&fm=png)
アプリケーション一覧から「Local」を起動してください。
![i_agree](https://images.ctfassets.net/o1bgnefm7hbe/530X6JNOlK6hgqRKU5pTcS/2080f58172b607d179299cd25760c3d6/i_agree.png?w=760&h=673&q=50&fm=png)
上の画像のようなウインドウが開きます。
内容を読んで「I have read and agree ...」にチェックを入れて「I AGREE」をクリックします。
![spin up headless site](https://images.ctfassets.net/o1bgnefm7hbe/5zWfFqiasXxPeRt3l2RZJI/a602826ae2326fda9ecf6a216436da44/spinup_headless_site.png?w=760&h=431&q=50&fm=png)
上の画像のような表示が出ます。
これは右上の「✗ボタン」で閉じて大丈夫です。
LocalbyFlyWheelでWordPressの環境を構築する
![create a new site](https://images.ctfassets.net/o1bgnefm7hbe/5BvJHm9AATtGZoFCkq5O07/6f73ee1089a07a3d503eeacdde426071/create_a_new_site.png?w=760&h=507&q=50&fm=png)
「CREATE A NEW SITE」をクリックしてください。
![site name](https://images.ctfassets.net/o1bgnefm7hbe/5Gy0EJpT5FziSYkiu7wXkF/f4ed63e50d4de75801a7e47156db83cd/site_name.png?w=760&h=508&q=50&fm=png)
サイトの名前を決めます。
何でもいいですが、ここでは「test wordpress」としました。
サイトの名前を入力したら、「CONTINUE」をクリックします。
![choose your environment](https://images.ctfassets.net/o1bgnefm7hbe/4U6top1Aa2xXs8rvQQof0v/c3fbf86fa10eb58b1a33958d53b9d18b/choose_your_environment.png?w=760&h=507&q=50&fm=png)
環境設定の画面です。
「Preferred」は「おまかせ設定」、「Custom」は「手動で設定」の意味です。
「Preferred」を選択で問題ありません。
「CONTINUE」をクリックします。
![setup wordpress](https://images.ctfassets.net/o1bgnefm7hbe/Q0AGFk7wLML8XvI6ocfaK/5b0f05b77b90a88984239e701faca730/setup_wordpress.png?w=760&h=507&q=50&fm=png)
後に「WordPress管理画面」にログインする場面が出てきます。
そのログインに使う「ユーザーネーム」と「パスワード」をここで決めます。
決めたら、「ADD SITE」をクリックします。
![complete local site](https://images.ctfassets.net/o1bgnefm7hbe/6jKzyYKSIISZiQgC6NZtDl/0108b96a5a3ac326d6cf2d53795a5396/complete_local_site.png?w=760&h=506&q=50&fm=png)
これで、WordPress環境構築は完了です。
右上の「OPEN SITE」クリックします。
![opened site is no ssl](https://images.ctfassets.net/o1bgnefm7hbe/2fAXIsrOtWCw7VXubKqPE/6b28f57d04a1148dd3cd0737af62cc74/opened_site_no_ssl.png?w=760&h=461&q=50&fm=png)
WordPressで作られたサイトが開きます。
ただ、URL欄に「保護されていない通信」と書かれており、サイトとして不十分な状態です。
LocalbyFlyWheelでWordPressのローカル環境構築ができましたが、最低限やるべき初期設定がいくつかあります。
最低限やるべき初期設定
最低限やるべき初期設定として、以下を解説します。
サイトのSSL化
WordPress管理画面の日本語化
サイトのSSL化
Webサイトを見ていると、URL欄に「保護されていない通信」と書かれていることがたまにあります。
そういうWebサイトに訪問した人が、例えば名前や住所などを入力してしまうと、第三者にそれらの情報を盗まれる可能性があります。
それを防ぐためには、サイトを「SSL化」する必要があります。
SSL化すれば、サイトURL欄の「保護されていない通信」という表示はなくなります。
では、LocalbyFlyWheelでローカルに構築したWordPressサイトをSSL化していきます。
![trusted and admin](https://images.ctfassets.net/o1bgnefm7hbe/5Iojv7dsHrCtamYamVWtqm/607c49cb19fa236b4510e215ea464dff/click_trust.png?w=760&h=507&q=50&fm=png)
LocalbyFlyWheelのホーム画面で、「SSL」のところに「TRUST」と表示されています。
「TRUST」をクリックすると「TRUSTED」に変わります。
ユーザー制御画面が表示されたら、「はい」をクリックします。
次に、「ADMIN」をクリックしてください。
![login admin page](https://images.ctfassets.net/o1bgnefm7hbe/4GtbDDffvli6QhjtCO2ts5/d90ee6e8e2d71f4ccad9e9419b5e6c78/login_admin.png?w=760&h=570&q=50&fm=png)
WordPressの管理画面のログインページが開きます。
先ほど決めた、「ユーザーネーム」と「パスワード」を入力して「Log in」をクリックします。
すると、WordPressの管理画面が開きます。
このページはブックマークしておくのがおすすめです。
慣れないうちは、ついつい閉じてしまいがちです。
![settings https](https://images.ctfassets.net/o1bgnefm7hbe/76ImcsIGscTwxZTpZXmQM8/a3bd0b12284ae9cc4244eb0b37ecd661/settings_https.png?w=760&h=570&q=50&fm=png)
WordPressの管理画面で、左側の「Settings」をクリックします。
「WordPress Address (URL)」と「Site Address (URL)」はデフォルトで「http://〜」と入力されています。
これを「https://〜」に書き換えてください。
下にスクロールすると、「Save Changes」という水色のボタンがあるのでクリックします。
すると、もういちどログインページが開くのでユーザーネームとパスワードを入力してログインします。
![visit site](https://images.ctfassets.net/o1bgnefm7hbe/3gDyEmw06CzyUJmfuQjJOo/f07f55920fc7bd85bda22a3283b97884/visit_site.png?w=760&h=570&q=50&fm=png)
これで「SSL化」が完了です。本当にSSL化されたか確認します。
上の画像のように左上のサイト名をクリックするとサイトが開きます。
![complete ssl](https://images.ctfassets.net/o1bgnefm7hbe/7lfF3OjTJo8VrKUE4Mhunk/d4a2ae43caf88faa39296a4aad1bd876/complete_ssl.png?w=760&h=462&q=50&fm=png)
先ほどはサイトのURL欄に「保護されていない通信」と表示されていましたが、今回は消えており「鍵マーク」がついています。
SSL化されたサイトである証拠です。
ちなみに、今作っているこのサイトに誰かがアクセスしてくることはありません。
ローカルで構築したサイトなので、一般公開されません。
そのため、今回このサイトをSSL化する意味はあまりありません。
ただ、Webサイトを作る上でSSL化は必須とされています。
WordPressサイトを立ち上げる上で、やは りSSL化は最低限やるべき初期設定と考え、ご紹介しました。
WordPress管理画面の日本語化
管理画面は日本語化した方がわかりやすいので、おすすめです。
![settings language](https://images.ctfassets.net/o1bgnefm7hbe/6a5zDRwOPLuXAs26gyruxo/da23928f98ebad8409c7b1837d21a53f/settings_language.png?w=760&h=570&q=50&fm=png)
管理画面の左側の「Settings」をクリックします。
「Site Language」で「日本語」を選択します。
「Timezone」で「Tokyo」を選択します。
下にスクロールして「Save Changes」をクリックします。
管理画面が日本語化されます。
![【ほぼゼロから】WordPressとGatsbyJSでサイトを作る手順を解説](https://images.ctfassets.net/o1bgnefm7hbe/19xOBKaUiSTOLGSdQTQKew/79a7ce4ff03f7da6cf280fba416e7767/wordpress_gatsby_eyecatch.png?w=260&h=146&q=50&fm=png)
最後に
以上で、LocalbyFlyWheelを使ったWordPressのローカル環境構築と最低限の初期設定が完了です。
ただ、「環境構築はしたものの、WordPressに関して何を学習していけばいいかわからない...」という方もいらっしゃるかと思います。
僕のおすすめは「WordPressテーマ制作」を学ぶことです。
WordPressテーマ制作を学べば、「WordPressでサイトを作るとはどういうことか」を理解できるかと思います。
以下がおすすめの書籍です。
上記の書籍では以下のことが学べます。
WordPress管理画面の操作方法
投稿ページや固定ページの追加方法
オリジナルのWordPressテーマを作る方法
この書籍で学習する上で必要なものは以下です。
エディタ
WordPressのローカル環境
「エディタをまだインストールしていない...」という方は、以下の記事を参考にしてみてください。
「VS Code」というおすすめのエディタのインストール方法と、初期設定を解説しています。
![【初心者向け】Visual Studio Codeの使い方【図解あり】](https://images.ctfassets.net/o1bgnefm7hbe/3Dq7OGpTNSaTa0e5YyjJ2w/81f8a8104ab39f3a7508018dd75ae133/install_vscode.png?w=260&h=146&q=50&fm=png)
WordPressのローカル環境構築は、この記事で行いました。
さらに、上記の書籍では「WordPressテーマを作るためのフォルダを作ってください」と指示される部分があります。
「フォルダってどの場所に作ればいいの?」っていう状況になると思うので解説しておきます。
LocalbyFlyWheelでWordPressのローカル環境を構築した場合、「WordPressテーマを作るためのフォルダ」は以下の場所に作ってください。
/Users/(名前)/Local Sites/(サイト名)/app/public/wp-content/themes
「WordPressテーマを作るためのフォルダ」の中に以下のようなファイルを作っていくことになります。
index.php
functions.php
home.php
...
上記の書籍なら、この記事で紹介した内容の延長線としてWordPressを学習していただけると思います。
記事は以上です。
![【ほぼゼロから】WordPressとGatsbyJSでサイトを作る手順を解説](https://images.ctfassets.net/o1bgnefm7hbe/19xOBKaUiSTOLGSdQTQKew/79a7ce4ff03f7da6cf280fba416e7767/wordpress_gatsby_eyecatch.png?w=260&h=146&q=50&fm=png)