LocalはWordPressのローカル環境を構築できるツールで、多くのWordPress開発者に愛用されているツールになります。提供元は数多くの有名プラグインを排出しているWP Engine。
しかし、最初にWordPressの開発環境を整える際に、HTML/CSSとの違いから戸惑う方が多いのではと思います。
WordPressのテーマ開発って、どんな環境で行えばいいんだろう、MAMPとかは難しそうだし…
WorsPresslってローカル開発を用意する必要があるんですよね？調べるとLocalが一番有名っぽいから、それで開発してみたい！
WordPressのローカル環境は2024年時点では、Localが一番使われている印象で、これさえあれば、ほとんどどんなWordPress環境でも対応できます。
そこで今回は最強のWordPressローカル環境「Localの使い方を徹底解説」していきます。
今回の記事を見ていただくことで、「WordPressのローカル環境を5分で構築」できますので、ぱぱっと終わらせてしまいましょう！！
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
WordPressのローカル環境とは？なぜ必要？
ローカル環境というのは、自分のPCの開発環境のことを指します。
HTML.CSSだけの静的コーディングであればデータベースなどが無いしPHPも用いないので、VSCodeなどで完結します。
しかしWordPressというのは、「多種多様なPHPなどのソフトウェア＋データベース」で構成されているので、どうしても専用の環境が必要になります。
そこでLocalの出番というわけです。
- 様々なサイトを一括管理できる→MAMPなどだと難しい
- 5分で構築できる
- 動作が比較的軽い
- デザインカンプから静的コーディング
- Localで環境構築し、HTMLをWordPress化していく
- 本番環境に移行
Localの使い方
❶Localをダウンロードする
まずはhttps://localwp.com/にアクセスし、ソフトをダウンロードします。
自分の使用しているOSに合わせて選択してください。
その後、ダウンロードに必要な情報を入力して、「GET IT NOW!」をクリック。
そしたらアプリのダウンロードが開始されます。
ダウンロードできたファイルを展開します。
アプリのアイコンをクリック。
その後の諸々の会員登録などを終えると、以下の画面になります。これがLocalのホーム画面です。
❷ローカル環境を構築する
「Create a new site」をクリック。
サイト名を命名します。
ここは環境選択画面ですが、Preferredでいいです。
ここでは、ユーザー名とパスワードを入力します。
しばらく待つと、サイトが構築されます。
重要なのは以下６箇所になります。
| ❶サイトドメイン | ローカル環境のサイトドメイン |
| ❷PHPバージョン | PHPのバージョンを変更可能 |
| ❸WorsPressバージョン | インストールされているWordPressバージョン |
| ❹WP Admin | 管理画面へ |
| ❺Open site | サイトを開く |
| ❻＋マーク | 新たなサイトを制作 |
PHPのバージョンは、例えば本番環境のPHPとバージョンをあわせたい時などに、ローカル環境も近しいものにするなどの使い道があります。
Localを起動していると、CPU負荷でPCの動作が重くなりがちなので、開発から離れるたびに「Stop site」しておくことをおすすめします。
❸ローカル環境のWordPress初期設定
それでは早速構築したWordPress環境の初期設定を行います。
WordPressの設定は基本的に「管理画面」から行うものと覚えて下さい。
「WP Admin」をクリック。
その後、先程設定した「ユーザー名」「パスワード」を入力して管理画面にログインします。
これでWordPressの管理画面に入りました。
まずは日本対応していきます。「Setting→General」をクリック。
サイトの言語を日本語にして、タイムゾーンをTokyoにします。
ここからはテーマファイルを入れていきますが、既存テーマか自作(HTMLファイル群)かで変わります。
既存テーマとは「Snow Monkey」のような既にテーマとして完成しPHP化されたものです。
自作テーマとは、自分でコーディングして作るテーマのことで、Web制作の場合HTML,CSS,JSファイル群などです。
デザインカンプからコーディングしてる人は自作テーマです。
if：既存テーマを入れる場合
まずは「外観→テーマ」を選択。
その後、「新しいテーマを追加」をクリック。
「テーマのアップロード」をクリック。
ここからテーマファイル(ZIP形式)を入れればOKです。
if：自作テーマの場合
自分でコーディングしたファイル群をLocalの指定ディレクトリ内(themes内)に入れていく必要があります。
まずは「Go to site folder」をクリック。
「app」をクリック。
これがWordPressを構成するファイルたちです。ここから「wp-content」をクリック。
ここから「themes」をクリック。
ここがテーマファイルを入れる場所です。コーディングしたファイル一式が入ったフォルダをこの中に入れて下さい。
では、表示を確認してみます。「外観→テーマ」を選択。
すると、「壊れているテーマ」と表示されており、選択できません。
実はWordPressでは「テーマファイルのTopにindex.phpとstyle.cssが存在すればテーマとして成り立つ」という特性があります。
よって、その２つをテーマファイル群のトップに置きます。
よくやるのは、トップページであることが多いindex.htmlをindex.phpに変えることです。
また、style.cssには以下の呪文を入れます。「Theme Name」は自分のサイト名を入れて下さい。
/*
Theme Name: Sample Theme
*/すると、自作テーマが選択可能になっていると思います。
ただこのままだと、有効化してサイトを表示してみても表示が壊れていると思います。
ここからが本格的な「WordPress化」になります。
if：自作テーマの場合：静的ファイルHTMLをPHPにして動的にする
WordPress環境ではHTMLファイルではなく、PHPファイルにしなければなりません。
しかし、ここからはWordPressの自作テーマ開発の話になるので割愛します。
ローカル環境のテーマを本番環境に移行する方法
ローカル環境での開発が終わったら、本番環境にサイトを移行します。
「All-in-One WP Migration」を使用すれば数分で終わります。
まずは「プラグイン→新規追加」
「All-in-One WP Migration」をインストールし、有効化します。
その後、「All-in-One WP Migration→エクスポート」をクリック。
「ファイル」をクリック。
ファイルがダウンロードできるようになるので、ダウンロードします。
その後、本番環境でも「All-in-One WP Migration」をインストールしてください。
その後、本番環境側で「インポート」をクリックし、該当部分にローカル環境でエクスポートしたファイルをドラッグ・アンド・ドロップして終了。
本番環境→ローカル環境の場合は、ここと逆の操作を行えばいいですね！
LocalでWordPressローカル開発を快適に！！
今回は最強のWordPressローカル環境「Localの使い方を徹底解説」しました。
WordPressのローカル環境が構築できたら、本格的に自作テーマの開発に入ります。
WordPress自作テーマ開発の勉強ロードマップは「WordPressのおすすめ勉強方法のルートを徹底解説」で完全解説していますので、学習を進めていきましょう。
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
wp-content以外を触る機会はめったにありません。