【初心者向け】簡単なWordPressのローカル開発環境構築のやり方

プログラミング

こんにちは。fsです。
僕はWordpress愛好家の一人です。
当ブログもWordpressで運営しています。

当サイトは既存のテーマのCocoonを使っていますが、自作でテーマを開発したこともあります。
※自作テーマはこちら

初めてWordpressのオリジナルテーマ開発をしたときは

「ローカル開発環境作るのめんどくさい😓」
「やり方わからない😅」

という悩みを抱えていて、何度か挫折しかけました。

そんなわけで今回は『簡単なWordpressのローカル開発環境設定のやり方』をシェアしていきたいと思います。

プログラミング初心者にとってはローカル開発環境構築も一つのハードルになるので、そんな方々に向けて書いています。

それではご覧ください。

WordPressの環境構築とは

ローカル環境とは、自分のパソコンの上記に構築する仮想環境をいいます。
これを構築すれば、自分のパソコンにWebサーバーと同様の機能ができ、自分専用のWordPressサイトを作成することも可能になります。

ローカル環境ならWeb上に公開されないので、テーマを好きなだけ変更できます。
また、コードを書き間違えてエラーが出ても誰にも見られることはありません。

なので、開発の段階ではまずローカル環境で表示や動作を確認する必要があります。

LOCAL(ソフトウェア)でローカル環境構築

WordPressのローカル環境構築では、PHP(プログラミング言語)MySQL(データベース)、Apacheウェブサーバーが必要になります。

通常、これらのセットアップをするときはMAMPという環境構築ソフトを使います。

ですが、こちらは初期設定でデータベースを扱わなければならないため、設定がより複雑になりつまづく可能性があります。

そこで初心者にオススメしたいのが、フリーソフトのLocalです。
簡単かつ直感的に設定ができるので、誰にでも使えます。

それではLocalで環境構築をしていきましょう。

ソフトのダウンロード&インストール

まずはソフトのダウンロードとインストールです。

DOWNLOADをクリックしてダウンロードとインストールを行います。

新規サイトを作成

インストールが完了したら、次はローカル環境で新規サイトを作っていきます。
トップ画面の右下のプラスマークをクリックします。

プラスマークをクリック

その次に作りたいサイト名(仮でOKです)を記入します。
ここではMySiteとしました。

サイト名を記入し、CONTINUEをクリック

続いて、環境設定です。
ここではCustom選び、PHP、Webサーバー、データベースを最新のものを選べばOKです。

それぞれ最新版を選択し、CONTINUEをクリック

次はWordpressの管理画面用のセッティングです。
お好きなEメールとパスワードを記入して、サイト作成完了です。

Eメール、パスワードを記入してADD SITEへ

そうするとローカル環境でのサイトが完成です。
OPEN SITE(一般のウェブサイト画面)とADMIN(管理画面)それぞれをクリックしてどうなっているか確認しましょう。

右上のADMINとOPEN SITEで確認

OPEN SITEはWordpressのデフォルトページになっています。

ADMIN画面はEメールとパスワードを入力したら、ダッシュボードに移ります。

ADMIN画面
ダッシュボード

英語から日本語に変更

Localでサイト構築までできましたが、ダッシュボードの言語は英語がデフォルトになっています。
これを日本語に変えていきます。

左側のSettings→Generalとクリックします。

Settings→Generalを選択

次にSite Languageを日本語に変更すれば完了です。

Site Languageを日本語に変更

初期のプラグインを導入

Localでは英語がデフォルトになっているため、日本語の文字列でエラーを起こす可能性があります。
開発段階ではそれを防止する追加機能(プラグイン)を入れておくと良いです。

このプラグイン導入もダッシュボードで行います。
左側のプラグイン→新規追加の順に選択していきます。

プラグイン→新規追加を選択

次に検索画面にWP Multibyte Patchと入力し、今すぐインストールをクリック。
これで初期プラグインの導入は完了です。

コードエディターと連動

Localでのセッティングが終わったら、次はコードエディターと連動させていきます。
オリジナルのテーマを作るので、自分でコードを書いていく必要があります。

Localのホーム画面から開発中のサイトにカーソルを合わせ右クリックし、Reveal in Finderを選択します。

開発中のサイトを右クリックして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にドラッグ&ドロップします。
そうするとエディター上にフォルダが勝手に読み込まれます。

mythemeが読み込まれました

この時点ではまだファイルがないので、右側の新規ファイル作成ボタンを押し、index.phpとstyle.cssのファイルを作ります。

このようにファイルを作っていきます。

これで再びダッシュボードを更新してみると、mythemeというテーマができました。

新しくテーマができています

こちらでWordpress制作の環境構築は完了です。

まとめ Localでサクサクとローカル環境構築

いかがだったでしょうか。
めんどくさいWordpressのローカル環境構築も、Localを使えばたった数分で済んでしまいます。
環境構築に頭を悩ませることなくコード記入に集中できるのがメリットですね。

なお、Wordpressテーマを作りたい方は、Udemyの講座を受講してみると良いです。
検索画面で「Wordpress」と打てば、レベル別に講座を選べます。
※セールの時を狙ってみましょう

以上、初心者プログラマーの方の参考になれば幸いです。
最後までお読みいただきありがとうございました。

UdemyでWordpressを学んでみる!

ウェブ開発の人気オンラインコース

Is this 投稿 useful? Useful Useless 7 of 7 people say this 投稿 is useful.

コメント

海外ブログバナー

にほんブログ村 海外生活ブログへ

海外ブログバナー

にほんブログ村 海外生活ブログへ

シンガポールの古本屋さん

タイトルとURLをコピーしました