こんにちは。fsです。
僕はWordpress愛好家の一人です。
当ブログもWordpressで運営しています。
当サイトは既存のテーマのCocoonを使っていますが、自作でテーマを開発したこともあります。
※自作テーマはこちら
初めてWordpressのオリジナルテーマ開発をしたときは
「ローカル開発環境作るのめんどくさい😓」
「やり方わからない😅」
という悩みを抱えていて、何度か挫折しかけました。
そんなわけで今回は『簡単なWordpressのローカル開発環境設定のやり方』をシェアしていきたいと思います。
プログラミング初心者にとってはローカル開発環境構築も一つのハードルになるので、そんな方々に向けて書いています。
それではご覧ください。
WordPressの環境構築とは
ローカル環境とは、自分のパソコンの上記に構築する仮想環境をいいます。
これを構築すれば、自分のパソコンにWebサーバーと同様の機能ができ、自分専用のWordPressサイトを作成することも可能になります。
ローカル環境ならWeb上に公開されないので、テーマを好きなだけ変更できます。
また、コードを書き間違えてエラーが出ても誰にも見られることはありません。
なので、開発の段階ではまずローカル環境で表示や動作を確認する必要があります。
LOCAL(ソフトウェア)でローカル環境構築
WordPressのローカル環境構築では、PHP(プログラミング言語)MySQL(データベース)、Apacheウェブサーバーが必要になります。
通常、これらのセットアップをするときはMAMPという環境構築ソフトを使います。
ですが、こちらは初期設定でデータベースを扱わなければならないため、設定がより複雑になりつまづく可能性があります。
そこで初心者にオススメしたいのが、フリーソフトのLocalです。
簡単かつ直感的に設定ができるので、誰にでも使えます。
それではLocalで環境構築をしていきましょう。
ソフトのダウンロード&インストール
まずはソフトのダウンロードとインストールです。
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/29e60f839227813f6fd895cbfc9f43cd.png?resize=1024%2C402&ssl=1)
新規サイトを作成
インストールが完了したら、次はローカル環境で新規サイトを作っていきます。
トップ画面の右下のプラスマークをクリックします。
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/c3bc4d89ca585d16511c6a28d9bc7f69.png?resize=1024%2C678&ssl=1)
その次に作りたいサイト名(仮でOKです)を記入します。
ここではMySiteとしました。
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/c6519f81d1b02af34c3db109d5247cbe.png?resize=1024%2C679&ssl=1)
続いて、環境設定です。
ここではCustom選び、PHP、Webサーバー、データベースを最新のものを選べばOKです。
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/b79a4ede45dbb42d49117bba6fb0f8f4.png?resize=1024%2C682&ssl=1)
次はWordpressの管理画面用のセッティングです。
お好きなEメールとパスワードを記入して、サイト作成完了です。
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/6a35f6ce269916e350c789a30c117aac.png?resize=1024%2C680&ssl=1)
そうするとローカル環境でのサイトが完成です。
OPEN SITE(一般のウェブサイト画面)とADMIN(管理画面)それぞれをクリックしてどうなっているか確認しましょう。
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/bbe2378020d49c2854063c4c4092c426-1-1024x635-1.png?resize=1024%2C635&ssl=1)
OPEN SITEはWordpressのデフォルトページになっています。
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/006cb7097c7e7570338922e04e8da62e.png?resize=872%2C523&ssl=1)
ADMIN画面はEメールとパスワードを入力したら、ダッシュボードに移ります。
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/f03bdc3da6a0429ccca6a0da14f509d2.png?resize=683%2C563&ssl=1)
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/a216fe1979f736586733fcb6958faffb.png?resize=989%2C665&ssl=1)
英語から日本語に変更
Localでサイト構築までできましたが、ダッシュボードの言語は英語がデフォルトになっています。
これを日本語に変えていきます。
左側のSettings→Generalとクリックします。
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/a216fe1979f736586733fcb6958faffb-1.png?resize=989%2C665&ssl=1)
次にSite Languageを日本語に変更すれば完了です。
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/0ab8d92d2ee9afe9e7036ab02a140b9d.png?resize=823%2C480&ssl=1)
初期のプラグインを導入
Localでは英語がデフォルトになっているため、日本語の文字列でエラーを起こす可能性があります。
開発段階ではそれを防止する追加機能(プラグイン)を入れておくと良いです。
このプラグイン導入もダッシュボードで行います。
左側のプラグイン→新規追加の順に選択していきます。
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/0ea55d5cadd2afe12b368af9746b3388.png?resize=811%2C650&ssl=1)
次に検索画面にWP Multibyte Patchと入力し、今すぐインストールをクリック。
これで初期プラグインの導入は完了です。
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/6f10bf7c0fe1ceea1cb2b7ce08b10eca.png?resize=718%2C573&ssl=1)
コードエディターと連動
Localでのセッティングが終わったら、次はコードエディターと連動させていきます。
オリジナルのテーマを作るので、自分でコードを書いていく必要があります。
Localのホーム画面から開発中のサイトにカーソルを合わせ右クリックし、Reveal in Finderを選択します。
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/e569b614deffcab08bd125a8630bd4c9-1.png?resize=1024%2C553&ssl=1)
次に対象となるフォルダをクリックします。今回はmysite。
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/dc23b8da92f5c3d5462abd35596313a3.png?resize=1024%2C613&ssl=1)
フォルダーはapp→public→wp-content→themesの順に進んでいきます。
themeフォルダーに進んだら、新規のフォルダーを作成します。今回はmythemeにしています。
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/9124e94943eb64eb6a6f9818d660d18e.png?resize=1024%2C348&ssl=1)
ここでADMIN(管理画面)で新しいテーマができているか見てみましょう。
ダッシュボードの外観→テーマの順にクリックします。
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/b33984d1be8068aa7691b6f1c0d1c0fb.png?resize=698%2C531&ssl=1)
テーマ自体は読み込まれていましたが、index.phpとスタイルシート(css)がない旨の説明がありましたので付け加えていきます。
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/8fae6e47ffe3828863c56d6dce079b62.png?resize=919%2C631&ssl=1)
ここでindex.phpとcssをコードエディターで作っていきます。
なお、コードエディターはVisual Studio Codeがオススメです。
(ほとんどのプログラマーが使っています😌)
まずはmythemeのフォルダーをそのままVisual Studio Codeにドラッグ&ドロップします。
そうするとエディター上にフォルダが勝手に読み込まれます。
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/83b6c11b89deb883210f13a4c6e29b06.png?resize=1024%2C669&ssl=1)
この時点ではまだファイルがないので、右側の新規ファイル作成ボタンを押し、index.phpとstyle.cssのファイルを作ります。
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/475893d366a72864c1ebf70ff0dc1cda.png?resize=845%2C353&ssl=1)
これで再びダッシュボードを更新してみると、mythemeというテーマができました。
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/4e6371bdfbe4e4da8c1e31f0787d89d3.png?resize=977%2C490&ssl=1)
こちらでWordpress制作の環境構築は完了です。
まとめ Localでサクサクとローカル環境構築
いかがだったでしょうか。
めんどくさいWordpressのローカル環境構築も、Localを使えばたった数分で済んでしまいます。
環境構築に頭を悩ませることなくコード記入に集中できるのがメリットですね。
なお、Wordpressテーマを作りたい方は、Udemyの講座を受講してみると良いです。
検索画面で「Wordpress」と打てば、レベル別に講座を選べます。
※セールの時を狙ってみましょう
以上、初心者プログラマーの方の参考になれば幸いです。
最後までお読みいただきありがとうございました。
UdemyでWordpressを学んでみる!
コメント