こんにちは。fsです。
僕はWordpress愛好家の一人です。
当ブログもWordpressで運営しています。
当サイトは既存のテーマのCocoonを使っていますが、自作でテーマを開発したこともあります。
※自作テーマはこちら
初めてWordpressのオリジナルテーマ開発をしたときは
「ローカル開発環境作るのめんどくさい😓」
「やり方わからない😅」
という悩みを抱えていて、何度か挫折しかけました。
そんなわけで今回は『簡単なWordpressのローカル開発環境設定のやり方』をシェアしていきたいと思います。
プログラミング初心者にとってはローカル開発環境構築も一つのハードルになるので、そんな方々に向けて書いています。
それではご覧ください。
WordPressの環境構築とは
ローカル環境とは、自分のパソコンの上記に構築する仮想環境をいいます。
これを構築すれば、自分のパソコンにWebサーバーと同様の機能ができ、自分専用のWordPressサイトを作成することも可能になります。
ローカル環境ならWeb上に公開されないので、テーマを好きなだけ変更できます。
また、コードを書き間違えてエラーが出ても誰にも見られることはありません。
なので、開発の段階ではまずローカル環境で表示や動作を確認する必要があります。
LOCAL（ソフトウェア）でローカル環境構築
WordPressのローカル環境構築では、PHP（プログラミング言語）MySQL（データベース）、Apacheウェブサーバーが必要になります。
通常、これらのセットアップをするときはMAMPという環境構築ソフトを使います。
ですが、こちらは初期設定でデータベースを扱わなければならないため、設定がより複雑になりつまづく可能性があります。
そこで初心者にオススメしたいのが、フリーソフトのLocalです。
簡単かつ直感的に設定ができるので、誰にでも使えます。
それではLocalで環境構築をしていきましょう。
ソフトのダウンロード＆インストール
まずはソフトのダウンロードとインストールです。
新規サイトを作成
インストールが完了したら、次はローカル環境で新規サイトを作っていきます。
トップ画面の右下のプラスマークをクリックします。
その次に作りたいサイト名（仮でOKです）を記入します。
ここではMySiteとしました。
続いて、環境設定です。
ここではCustom選び、PHP、Webサーバー、データベースを最新のものを選べばOKです。
次はWordpressの管理画面用のセッティングです。
お好きなEメールとパスワードを記入して、サイト作成完了です。
そうするとローカル環境でのサイトが完成です。
OPEN SITE（一般のウェブサイト画面）とADMIN（管理画面）それぞれをクリックしてどうなっているか確認しましょう。
OPEN SITEはWordpressのデフォルトページになっています。
ADMIN画面はEメールとパスワードを入力したら、ダッシュボードに移ります。
英語から日本語に変更
Localでサイト構築までできましたが、ダッシュボードの言語は英語がデフォルトになっています。
これを日本語に変えていきます。
左側のSettings→Generalとクリックします。
次にSite Languageを日本語に変更すれば完了です。
初期のプラグインを導入
Localでは英語がデフォルトになっているため、日本語の文字列でエラーを起こす可能性があります。
開発段階ではそれを防止する追加機能（プラグイン）を入れておくと良いです。
このプラグイン導入もダッシュボードで行います。
左側のプラグイン→新規追加の順に選択していきます。
次に検索画面にWP Multibyte Patchと入力し、今すぐインストールをクリック。
これで初期プラグインの導入は完了です。
コードエディターと連動
Localでのセッティングが終わったら、次はコードエディターと連動させていきます。
オリジナルのテーマを作るので、自分でコードを書いていく必要があります。
Localのホーム画面から開発中のサイトにカーソルを合わせ右クリックし、Reveal in Finderを選択します。
次に対象となるフォルダをクリックします。今回はmysite。
フォルダーはapp→public→wp-content→themesの順に進んでいきます。
themeフォルダーに進んだら、新規のフォルダーを作成します。今回はmythemeにしています。
ここでADMIN（管理画面）で新しいテーマができているか見てみましょう。
ダッシュボードの外観→テーマの順にクリックします。
テーマ自体は読み込まれていましたが、index.phpとスタイルシート（css）がない旨の説明がありましたので付け加えていきます。
ここでindex.phpとcssをコードエディターで作っていきます。
なお、コードエディターはVisual Studio Codeがオススメです。
（ほとんどのプログラマーが使っています😌）
まずはmythemeのフォルダーをそのままVisual Studio Codeにドラッグ＆ドロップします。
そうするとエディター上にフォルダが勝手に読み込まれます。
この時点ではまだファイルがないので、右側の新規ファイル作成ボタンを押し、index.phpとstyle.cssのファイルを作ります。
これで再びダッシュボードを更新してみると、mythemeというテーマができました。
こちらでWordpress制作の環境構築は完了です。
まとめ Localでサクサクとローカル環境構築
いかがだったでしょうか。
めんどくさいWordpressのローカル環境構築も、Localを使えばたった数分で済んでしまいます。
環境構築に頭を悩ませることなくコード記入に集中できるのがメリットですね。
なお、Wordpressテーマを作りたい方は、Udemyの講座を受講してみると良いです。
検索画面で「Wordpress」と打てば、レベル別に講座を選べます。
※セールの時を狙ってみましょう
以上、初心者プログラマーの方の参考になれば幸いです。
最後までお読みいただきありがとうございました。
UdemyでWordpressを学んでみる！
コメント