WordPress

【Web制作】LocalでWordPressのローカル環境を構築する全手順を公開!

【Web制作】LocalでWordPressのローカル環境を構築する全手順を公開!

ぶたっち

大学生時代にプログラミング学習を始め、Web業界に興味を持つ。
スクールでプログラミングを勉強し、プログラミングのインターンに参加する。
プログラミングスクールに通ったこと、未経験からプログラミングを学んだこと、徹底的にプログラミングスクールを比較した経験をもとに、プログラミングについての記事を執筆中。

WordPressのローカル環境はどうやって作れば良いんだ?
リモート環境で操作はしたくない!
XAMPPやMAMPを使わないといけないのか?



などと考えたことがあるのではないでしょうか?


ですが、WordPressには「Local」という独自のローカル環境を構築するものが用意されています。


手軽に利用することができますので、早速Localを準備していきましょう。


「Local」は以前「Local by Flywheel」という名称でした。同じものですので特に心配する必要はありません。



WordPressのローカル環境について


「Local」の構築方法を知りたい方はこちらから飛ばしてください。

そもそもローカル環境とは何か?


まず始めにローカル環境について解説していこうと思います。



ローカル環境とは、個人のコンピューター内に構築された環境のことを指します。



Localという英語が「地元・現地」などを意味しますので文字通りの意味となります。




つまり、ローカル環境はサーバーに接続されていませんので、自分のパソコン内だけで使える環境ということになります。


逆に、サーバーを利用してサイトを公開している一般的な環境のことを本番環境(リモート環境)のように言います。


「何かプログラミングで作りたいな」と思ったときにまず作るべきなのがローカル環境と思っておくと良いでしょう。


ローカル環境を使う理由とは?


ではなぜローカル環境を使うのでしょうか?


それは、いきなり本番環境でサイトを作ってしまうと、サーバーにつながっているため制作中のサイトであっても一般公開されてしまうからです。


サイトを作っている最中でもユーザーはアクセスしてきますし、重大なミスがあった場合は最悪です。


そのような事態を防ぐために、自分にしか確認することのできない環境(ローカル環境)を作るのです。


ローカル環境ならどれだけ問題を起こしても問題はありませんので、練習する際にもローカル環境は役に立ちます。


クライアントが確認したい場合はどうすれば良いの?



ここで問題になってくるのが、ローカル環境だと自分しか確認することができず、クライアントが確認したいときに困ってしまいます。


そのため、確認するための環境としてテストサーバーを用意する必要があります。



テストサーバーというのはクライアントのサーバー(本番環境)ではなく、自分で習得したサーバーです。


つまり、自分でサーバーを用意する必要があります。


テストサーバーを用意することによって、一度確認するというワンステップを挟むことができるようになり、問題がなければクライアントのサーバー(本番環境)にアップします。



まとめると以下のようになります。

ポイント

ローカル環境:自分しか使うことができない。基本は何をしても問題はないため、練習にも使える。
テストサーバー:自分で取得したサーバー。クライアントと確認するために一時的に使える。(一般公開される)
本番環境:クライアントのサーバー。(一般公開される)



サーバーを契約していない人はまずはサーバーを契約するのが良いでしょう。


ポートフォリオの公開にもサーバーは使います。


https://haru-butacchi-blog.com/xserver-wordpress/
合わせて読みたい


WordPressのローカル環境を作る方法

WordPressに限らず、ローカル環境を作る方法はいくつかあります。


特に有名なのが、

  • XAMPP
  • MAMP


となります。


「XAMPP」はWindows向け、「MAMP」はMac向けのツールとなります。


WordPress以外の場合ですとこれらを使うことが一般的ですが、WordPressを使うなら「Local」が良いでしょう。


というのも、「XAMPP」や「MAMP」は少々ややこしいところがあります。


一方で「Local」なら簡単な操作ですぐに使えるようになりますので、環境構築に慣れていない人でも気楽に利用することができます。

Localでの環境構築の全手順


ではここから実際に「Local」をダウンロードし、ローカル環境でのWordPressの設置まで行っていきたいと思います。


ステップ1:Localをダウンロード


では早速「Local」をダウンロードしていきましょう。


Localから移動することができます。


移動するとこのような画面が表示されますので、ダウンロードのボタンをクリックしてダウンロードしましょう。


そうすると今度はWindowsやMacを選択する必要がありますので、自分の環境に合わせてクリックしてください。

次に名前などの基本情報を入力する必要がありますので、必要事項を入力したら「get it now」をクリックして次に進みましょう。


この時にメールアドレスのみが必須項目となっています。


するとダウンロードが開始されますので、ダウンロードが完了したらファイルを開いてみましょう。


するとインストールの選択をする必要がありますが、もともと「現在のユーザーのみにインストールする」となっているので気にせずに次に進めていきましょう。



そして、この流れで進めていきますと、Windowsセキュリティの警告が表示されると思いますので、


ポイント

1:「プライベートネットワーク」にチェック
2:「パブリックネットワーク」のチェックを外す
3:「アクセスを許可する」にチェック



の順番で進めていきましょう。




この後に利用規約への同意などの項目が表示されますが、チェックを入れて進めていくとすぐに設定は終わります。

すると表示されている内容は違いますが、このような緑色の画面が表示されるはずですので、これでダウンロードは完了です。






ステップ2:LocalでWordPressを表示させよう


ここからはダウンロードした「Local」を使ってローカル環境でWordPressを表示させていきます。



サイトが一つもない初期の場合ですと、画面中央に「+Create a new site」と表示があるはずですので、そのボタンか画面左下の「+」をクリックしてサイトを作っていきましょう。



すると以下のような画面が表示されます。


「Create a new site」を選択し、「Continue」をクリックします。



すると、今度はサイト名を入力していきます。


サイト名は英語のみとなっているので注意してください。




サイト名を入力したら「Continue」をクリックして次に進みましょう。


すると、今度はサイトの開発環境を決めていきます。

練習用に一度ローカル環境を作ってみる場合は、ここでは特に気にすることなく「Preferred」を選択すれば問題ありません。





しかし、サーバーにアップする場合など、本格的に使用する場合ですと、ローカル環境で設定したPHPのバージョンとサーバーで設定したPHPのバージョンを一致させる必要があります。





完璧に一致させる必要はありませんが、できるだけ近い設定にした方が良いです。


データーベース以外は後からでも簡単に変更することができます。




問題がなければ「Continue」をクリックして次に進めていきましょう。



サーバーでのPHPなどのバージョンはサーバーパネルから確認することができます。


次の画面に移動すると、ユーザー名とパスワードを入力していきます。


後でWordPressへのログインに使用しますので、覚えておくようにしましょう。



入力が完了したら「Add Site」をクリックして次に進めます。




これでサイトが完了しました。


次にWordPressへログインします。



右上が「Stop Site」という赤文字になっていれば問題ありませんし、上図のように「Start Site」となっていればクリックするようにしましょう。


次に「WP Admin」をクリックしてスタートです。



するとこのような画面が表示されますので、先ほど入力したユーザー名とパスワードを順に入力し、終わったらログインしましょう。


このような画面が表示されたらWordPressへのログインは完了です。


ステップ3:WordPressを日本語化


WordPressへのログインは完了しましたが、デフォルトの状態ですと英語表記になっています。


これを日本語にするためには、「Settings」にある「General」をクリックするようにしましょう。





表示されたページをスクロールして下の方に行くと、「Site Language」と「Timezone」がありますので、それぞれ

  • Site Language:日本語
  • Timezone:UTC+9


に設定するようにしましょう。


設定が完了したらページ下部にある「Save Changes」をクリックして保存完了です。


するとWordPressが日本語表記に変更されたはずです。


これ以降のWordPress内の操作は普段と変わりませんので、自分好みにカスタマイズするようにしましょう。


WordPressのファイルを確認しよう


WordPressの設置は完了しましたので、今度はファイルの位置を確認していきましょう。


というのも、これからWordPressでのWeb制作を始める場合などに必要になるからです。

というわけで、一度「Local」を開いて「Go to site folder」をクリックしてみましょう。


すると以下のようなフォルダが開かれるはずです。




ですので、ここから「app→public→wp-content→themes」と進めていきます。


するとテーマフォルダが開きます。


後はこの中にオリジナルテーマのフォルダを作成していきます。(試しにtestsiteフォルダを作りました)



WordPressでオリジナルテーマを作成する場合は基本この場所から行いますので、themesフォルダより前は触りません。



WordPressでのオリジナルテーマの作成方法は以下から紹介しているので参考にしてみてください。


サイトを削除する方法


では最後にサイトを削除する方法を紹介しようと思います。


というのも、「Local」を使えば簡単にサイトを作ることができますが、削除したいときも出てくるはずです。

ここでサイトを削除する方法なのですが、これは非常に簡単です。


「Local」の画面を表示させると右側に今までに作ったサイトがあるので、消したいサイトの上で右クリックし「Delete」を押せば終了です。



また、今までに紹介した「Local」での作業は真ん中上にある3つの点をクリックると確認することができますので、一度見てみてください。



「Local」での基本的な操作は以上になります。


お疲れさまでした。


操作自体はクリックがほとんどですので、環境を構築するのに慣れていない人でも問題なくできると思います。


また、「XAMPP」や「MAMP」を使った経験がある人にとっては「Local」の使い勝手の良さがわかったと思います。


まとめ


今回は「Local」でWordPressのローカル環境を構築する方法を紹介しました。



「Local」はWordPress専用の環境構築ツールではありますが、感覚的な操作で扱うことができますので、これからWordPressでのWeb制作を考えている方なら使えるようにしておきましょう。



また、Web制作やプログラミングの経験が浅い人にとってもWordPressでの学習は良い経験になりますし、内容自体も扱いやすいのでぜひチャレンジしてみてください。

  • この記事を書いた人
  • 最新記事

ぶたっち

大学生時代にプログラミング学習を始め、Web業界に興味を持つ。
スクールでプログラミングを勉強し、プログラミングのインターンに参加する。
プログラミングスクールに通ったこと、未経験からプログラミングを学んだこと、徹底的にプログラミングスクールを比較した経験をもとに、プログラミングについての記事を執筆中。

-WordPress