WordPress制作入門①LOCAL BY FLYWHEELで開発環境の準備 - はじめてのWebデザイン【図解たっぷり】
Web制作、特にフリーランスでWebデザインのお仕事を探すとよく出てくるのがWordPress。htmlを全くかけなくても更新ができるので、WordPressを希望されているクライアント様が多くいらっしゃいます。
ですが、WordPressでイチからサイトを作るとなると難易度は高め。
自分のパソコンでWordPressを動かす準備が必要だったり、WordPressの仕組みを把握したりする必要があり、入門書を読んで心が折れてしまう人も珍しくありません。
そこで「はじめてWordPressを触る方が、自作デザインを適用する」ところまで出来るようミニマムな構成でお届けします。一緒に手を動かしていくと、WordPressの基本操作から制作までの基礎が自然と身につきますよ！
WordPress（ワードプレス）とは
WordPressは、ブログ機能を簡単に作ることが出来るソフトウェアです。
CMS（Contents Management System/コンテンツマネジメントシステム）とも呼ばれます。
CMSはweb制作に必要な専門的な知識が無くても、webサイトやコンテンツを構築・管理・更新できるシステムの総称。
本来、Webサイトを作る・Webページを更新するには、HTMLやCSSのような専門的な知識が必要です。“アメブロ”や“はてなブログ”、Twitterに投稿するように、入力欄に文字を打てば更新出来るというものではありません。
だからこそ、ブログやSNSが人気になったわけですね。
WordPressもインストールさえしてしまえば、簡単にブログを更新したり、ページを編集することが出来ます。
このため「HTMLは書けないけれど、ブログなどで手軽に更新できるようにして!」というクライアント様が多く、WordPress制作のご要望が多くあるのです。
上図のように、HTMLを書けたとしても、毎日HTMLページでブログを更新しようと思うと大変。やることが多く、面倒になって更新頻度が落ちてしまいそうですよね。
自動でWebページを生成したり、新着記事にリンクを作ったりしてくれるWordPressはとても便利なのです。
まずは無料の7講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする
WordPressのローカル開発環境とは?
今まで「はじめてのWebデザイン」シリーズで作ってきたHTMLやCSSは、エディタとブラウザだけあれば動作確認が出来ました。
ですが、WordPressはダウンロードしてきたファイルをブラウザで開いても、全く機能してくれません。これはページを生成・表示するために、下図のような仕組みになっているため。
WordPressの動作に必要なPHPやデータベース（MySQL）を動かす用意は、初期状態のパソコンにはありません。そこで、自分のパソコンの中に、こうした機能を使えるようにインターネット上のサーバーと同じような環境を作るわけです。
これをローカル開発環境と言います。
Local by Flywheelを使ってみよう
画像元：WordPresのテーマ開発環境を整えるツールとして、近年人気があるのが「local by flywheel」というアプリケーションです。
無料で使用でき、Windows/Macの両方に対応しています。
Dockerベースで軽量。
データベースとWordPressの紐付けも自動で行ってくれます。
ローカル環境で開発途中の段階でも、Live Link機能を使って第三者に進捗を見せられるなどの便利な機能も搭載されていますよ！
今回は「local by flywheel」を使って、ローカル環境でWordPressを動かしてみましょう。
1.Local by Flywheelをダウンロード
まずはLocalの公式サイトから、Localをダウンロードしましょう。
https://localwp.com/を開きます。
オレンジの線で囲った「 OR DOWNLOAD FOR FREE 」をクリック。
ポップアップが表示され、プラットフォーム（OS）を聞かれます。
ご自分の環境にあったものを選択して下さい。
プラットフォーム選択すると、下に登録フォームのようなものが出現します。
このフォームのうち、必須項目はメールアドレスのみです。
メールアドレスを入力して、「GET IT NOW!」ボタンをクリックしましょう。
すると、自動的にダウンロードが始まります。
始まらない場合は「click here」をクリックしてください。
これでLocalのダウンロードは完了です。
2.Local by Flywheelをインストール
ダウンロードした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 by Flywheelで、WordPressを開いてみましょう。
右上にある「ADMIN」をクリックしてみてください。
ブラウザで、ログイン画面が開きます。
②Setup Environmentnで入力したusernameとpasswordを入力してください。
右下の青い「Log In」ボタンをクリック。
下図のような画面が表示されれば、WordPressの管理画面にログインできています。WordPressサイト制作をスタートしましょう！
Local by Flywheelがエラーになる時は…
使用されているパソコンによって、Local by Flywheelがうまく動かない場合もあります。
上にWorning! と表示されていたり。
こんなウィンドウが出てきたり。
こうした場合の対処法はいくつかありますが、どれも完璧ではありません。
1.FIX ITボタンをクリックしてみる
2.ウイルス対策ソフトを一時的に無効にする
3.hostsファイルを調整(難易度高めのためおすすめしません)
1.2を試してみて動きそうもなかったら、XAMPP/MANPを導入するのがおすすめです（３の方法を試してみたい方は調べてみて下さい）。
無料講座
WORDPRESS基礎講座【前編】
（※ Macでよく使われるMAMPを使った環境構築）
無料講座
XAMPPで作るWordPress開発環境講座
（※ Windows 向け）
また、あまり推奨は出来ませんが、localhostモードに切り替えると動く場合があります。最初は練習として、手軽にWordPressを動かしたい方は試してみても良いでしょう。
localhostモードへの切り替え
左上のメニューアイコンからPreferenceを開きます。
左のメニューからADVANCEDをクリック。
Router modeの項目でlocalhostを選択して、APPLYボタンをクリック。
既存のサイトはうまく動かないので、一旦削除します。
サイト名を右クリックして、Daleteを選択。
もう一度、「3.WordPressサイトを作成」の流れでサイトを作って下さい。
ADMINをクリックすると、開けるようになっている可能性があります。
次回はWordPressにログインした後、WordPressの管理画面と基本操作を見てみましょう！
まずは無料で14講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
11月24日まで