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