これからWordPressを学んでいく方へ、Local（ Local by Flywheel）を使用したWordPressの環境構築方法について解説します。
環境構築と聞いて難しいイメージを抱く方も多いと思いますが、ローカル（自身のPC内）にWordPressの環境を構築するだけであれば、とても簡単です。記事を見ながら手を動かしてみてください！
- Localを使ってWordPressのローカル環境を構築する
- WordPressの管理画面を少し触ってみる
案件が取れなくて悩んでいるあなたへ
プログラミング案件獲得のために必要なスキルは、単に技術力だけではありません。営業力、コミュニケーション力、人脈などの幅広いスキルや要素が求められてきます。
営業からライティング、SEOまで学べるフリーランス特化型プログラミングスクールZeroPlusで、フリーランスエンジニアに必要なすべてを手に入れませんか？
- またゼロからやり直さないといけないの？
- 本当にフリーランスになれるの？
といった不安にも、超フレンドリーな相談員が親切に相談にのります。スクール以外のご質問もOK！
＼お申し込みは30秒で終わります。／
新しい一歩を、今踏み出してみませんか？
目次
Localをダウンロードしよう
環境構築のやり方にはMAMPやXAMPPを利用するなど様々な方法が存在しますが、今回は「Local（Local by Flywheel）」を利用します。
はじめに、Local のサイトにアクセスしてください。
上記のようなページが表示されたら、右上の「DOWNLOAD」クリックしてください。
Macをお使いの方は「Mac」、Windowsをお使いの方は「Windows」を選択してください。
Local をダウンロードするにあたっての情報を入力します。
ご自身の名前、メールアドレス、電話番号を入力し、「GET IT NOW!」をクリックしてください。
「click here」をクリックするとダウンロードが開始します。
Macの場合、Finderの「ダウンロード」に、Local がダウンロードされます。左の「Local.app」をドラッグして、右の「Applications」上に移動してください。
上記を実行するとLocal.appがFinderの「アプリケーション」に入ります。ダブルクリックしてアプリケーションを開いてください。
「開く」をクリックしてください。
以上で、Local のダウンロードは完了です。
プロジェクトを作成しよう
Local のダウンロードが完了したら、続いてプロジェクトの作成を行います。
Local.appを開くと、上記の画面が表示されますので、「CREATE A NEW SITE」をクリックしてください。
プロジェクト名を入力します。
プロジェクト名は任意ですが、今回は「project」という名前でプロジェクトを作成します。プロジェクト名を入力したら右下の「CONTINUE」をクリックしてください。
環境を選択します。
「Preferred」を選択し、「CONTINUE」をクリックしてください。
「Custom」を選択すると、PHPのバージョン、Webサーバー、MySQLのバージョンを指定することができます。
プロジェクトで使用するアカウントのユーザーネーム、パスワード、メールアドレスを設定します。こちらの情報はログインする際に必要となりますので、忘れないようにしましょう。
入力し終わったら、右下の「ADD SITE」をクリックしてください。
Macをお使いの方で、こちらのポップアップが出てきた場合は、ご自身のPCのユーザー名とパスワードを入力し、「OK」をクリックしてください。
WordPressのダウンロードが開始されます。終了するまでお待ちください。
WordPressのダウンロードが終了するとこちらの画面が表示されます。上記の画面が表示されれば、問題なくプロジェクトの作成ができています。
サイト画面を確認しよう
作成したプロジェクトのサイト画面を確認します。
右上の「VIEW SITE」をクリックするとサイト画面に遷移します。
プロジェクトを作成しただけで、「なぜサイトが表示されるの？」と思った方も多いかと思います。
WordPressは、デフォルトで何らかのサイト（正確には「テーマ」）が設定された状態でダウンロードされます。2023年1月時点では、デフォルトのテーマとして「Twenty Twenty-One」というテーマが設定されています。
テーマとはテンプレートのようなもので、このテーマを切り替えることで、デザインや機能を変更することが可能になります。「テーマの変更」は、全く別のサイトに切り替えるといったイメージです。
WordPressを利用してのブログやサイト制作は、このテーマをオリジナルで制作することを指します。
管理画面を確認しよう
作成したプロジェクトの管理画面を確認してみましょう。
右上の「ADMIN」をクリックするとログイン画面に遷移します。
プロジェクト作成時に設定したユーザー名とパスワードを入力し、ログインしてください。
こちらが作成したプロジェクトの管理画面です。
管理画面では、表示設定やテーマの切り替え、プラグインのインストールなど様々な設定ができます。また、ブログのような記事の投稿もこちらの管理画面から行います。
試しに、いくつか設定を変更してみましょう。
言語設定
デフォルトでは英語に設定されていますので、日本語に変更します。
左のメニューの「Settings」→「General」へ移動してください。
「Site Language」を日本語に変更し、ページ下部の「Save Changes」をクリックし、変更を保存してください。
サイトのツールバーを非表示にする
デフォルトでは、サイト上部にツールバーが表示されるようになっています。
制作の邪魔になってしまうので、非表示にしましょう。
左のメニューの「ユーザー」へ移動してください。
「ツールバー」のチェックを外し、ページ下部の「プロフィールを更新」をクリックし、変更を保存してください。
プロジェクトファイルを確認しよう
ローカル（自分のパソコンの中）に保存されている「プロジェクトファイル」がどこに保存されているのかを知っておきましょう。開発では、ファイルを直接修正することもあります。
プロジェクトファイルの確認
プロジェクトの置き場所を確認します。
上記の赤枠内がパス(~/Local Sites/project)になっています。ここにプロジェクトが保存されています。
アイコンをクリックするとfinderまたはエクスプローラーが自動で開き、プロジェクトファイルが表示されますので確認してみましょう。
ディレクトリ構成を知る
WordPressのディレクトリ構成について簡単に解説します。
制作を行ううえで直接変更やカスタマイズをしていくファイルは、次の2つです。
- wp-config.php
→データベースの情報などを記載するファイルです。 - wp-contentフォルダ内のファイル
→制作していくサイトの情報のファイルです。
基本的に、上記のファイル以外をいじることはありません。wp-content以外のファイルは「コアファイル」と言われ、WordPress本体を構築しているファイルとなりますので、変更しないようにしましょう。
wp-content内の3つの重要なフォルダ
以下の3つのフォルダは、制作で頻繁に開きます。それぞれの役割を押さえておきましょう。
- pluginsフォルダ
→インストールしたプラグインが入ります。
- themesフォルダ
→テーマが入ります。デフォルトで反映されている「twentytwenty」もこちらに入っていますので、確認してみてください。
- uploadsフォルダ
→管理画面からアップロードした画像や動画などのメディアが入ります。
以上で、環境構築とプロジェクトの作成は終了です。お疲れさまでした。
手を動かして身に付けよう
今回は、Local を使用してWordPressの開発環境を構築しました。
プロジェクトの作成方法などを暗記する必要はありません。分からなくなった際も都度調べればOKです。
手を動かしながら、少しずつ身に付けていきましょう。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
