WordPress開発環境をPC内(ローカル)に構築する具体的方法【Web初学者必見】

WordPress

こんにちは、TERUです。
SEとして10年会社に勤め現在はフリーのWEBエンジニアとして活動しております。

フリーランスAさん

フリーランスAさん「自分のサイトで、新しいテーマやプラグインを試したいけど、公開済みのサイトを触るのは怖いな。。」

フリーランスBさん

フリーランスBさん「サイト修正を依頼されたけど、いきなり本番環境に対して作業するのはチョット。。何かあったらどうしよう。」

本記事では、こういった疑問に答えます。

制作案件を進めていく上でも、開発環境があるとかなり便利です。
ただ、自分でレンタルサーバ借りて開発環境を構築すると費用がかかってしまいます。

そこで今回はお金をかけずに自分のPC内(ローカル)でWordPress環境を簡単に作成する方法を紹介いたします。

目次

本記事の信頼性

  • フリーランスとしてWordPress案件を中心としたWeb制作を仕事にしている
  • WordPressを使ったWeb制作を数多く経験(2年で約60件)
  • Web制作会社にてディレクターの経験もあり

スポンサードサーチ

WordPress開発環境をPC内(ローカル)に構築するのは簡単

虹色のパソコン画面
自分のPC内にWordPress環境を作ることは簡単です。

なぜなら、誰でも簡単にWordPress環境を構築できるツールがあるからです。
わざわざレンタルサーバを契約して開発環境を構築する必要もありません。

それは、「Local」という無償で提供されている環境構築ツールです。
※以前は「Local by Flywheel」という名前でした。

このツールを使うことでPC内(ローカル)にWordPress環境を簡単に複数構築することが可能になります。
※有償版もありますが、プラグインやテーマの動作確認などで普通に開発環境として利用する分には無償版で問題ありません。

環境構築ツール(Local)の使い方【インストール〜設定まで】

環境構築ツール(Local)を使いこなすのは簡単です。
ノンプログラミング(プログラミング無し)で利用できます。

実際の画面を元にインストール+設定方法をご説明します。

インストール

(1)[FREE DOWNLOAD]をクリックし、Localをダウンロードします。

Localサイト画面

(2)確認画面が表示されたら、各項目を入力し、[GET IT NOW!]をクリックするとダウンロードが開始します。

Localサイト画面2

(3)ダウンロードをしたファイルを選択すると下記の画面が表示されるので、Applicationsにドラッグ&ドロップでインストール完了です。Localのインストール画面

以上で「Local」のインストールは完了です。

環境構築

次にWordPress環境の構築方法についてご説明します。

(1)初めてツールを開くと同意画面が表示されるので、チェックして[I AGREE]をクリックします。

Localの環境構築画面

(2)[+GREATE A NEW SITE]をクリックします。

Localの環境構築画面2

(3)任意のサイト名を入力し、[CONTINUE]をクリックします。

※ここではwp-testを入力しています。

Localの環境構築画面3

(4)[Custom]を選択し、PHPバージョン、WEBサーバの種類(Apache or Nginx)、MySQLバージョンを選択して[CONTINUE]をクリックします。

Localの環境構築画面4

(5)WordPressにログインするユーザ名、パスワードを入力して[ADD SITE]をクリックします。

Localの環境構築画面5

(6)Local Sitesにサイト名が表示されれば、環境構築は完了です。

Localの環境構築画面6

おまけ(日本語対応)

インストールしたWordPressにログインすると英語環境になっています。普段使用している日本語環境に変更する方法をご説明いたします。

(1)まずは、管理画面に設定したユーザ名、パスワードを入力してログインします。

Localの環境構築画面7

(2)[Settings]メニューを選択し、[Site Language]を「日本語」、[Timezone]を「Tokyo」に変更して[Save Changes]を選択します。

Localの環境構築画面8

これで日本語環境に変更完了です。

Localの環境構築画面9

スポンサードサーチ

WordPress開発環境のよくある質問

質問1:本番環境のデータを移行することも可能?

可能です。
いくつか方法はありますが、ここではプラグイン「All-in-One WP Migration」を使った移行方法をご説明いたします。
※事前に、[プラグイン]-[新規追加]から「All-in-One WP Migration」で検索し、インストール&有効化しておいて下さい。
今回はGrubAirを移行対象の本番環境として説明を続けます。

(1)[All-in-One WP Migration]-[エクスポート]を選択します。【本番環境側】

Localの環境移行画面

(2)「本番環境のURL」、「Local環境のURL」を入力して-[ファイル]を選択します。【本番環境側】

Localの環境移行画面2

(3)ポップアップ画面を選択するとファイルのダウンロードが開始されます。【本番環境側】

Localの環境移行画面3

(4)[All-in-One WP Migration]-[インポート]を選択し、(3)でダウンロードしたファイルをドラッグ&ドロップします。【Local環境側】

Localの環境移行画面4

(5)ポップ画面が表示されるので[開始]を選択します。【Local環境側】

Localの環境移行画面5

(6)移行完了のポップ画面が表示されるので[完了]を選択し、移行作業完了です。【Local環境側】

Localの環境移行画面6
Localの環境移行画面7
「Local」で構築した開発環境のデータを本番環境に移行する際も手順は同じです。
【本番環境側】と【Local環境側】を読み替えて実施してみてください。

質問2:他にも便利な機能はないの?

ここでは、僕が実際に使ってみて便利だと感じた「Local」の便利機能を4つ紹介させていただきます。

  • 環境ツールの設定変更が簡単
  • 携帯からもLocal環境にアクセスしてサイト確認できる。
  • お問い合わせフォームの送信テストも可能
  • SSL化対応も簡単に設定可能

便利機能1:環境ツールの設定変更が簡単

「Local」では、環境構築後にPHPのバージョンやwebサーバ機能(Apache or Nginx)の変更が画面上で簡単にできます。

PHPのバージョンについては、移行案件などで特に気をつけておかないといけない点なので。
自分のPC内(開発環境)で簡単にバージョン変更して動作可否を確認することができるのは、オススメです。

PHPのバージョン変更を例に説明させていただきます。

(1)変更したいPHPのバージョンを選択します。

Localの環境設定画面

(2)右横に出てくる[APPLY]を選択します。

Localの環境設定画面2

(3)ポップ画面が表示されるので[APPLY CHANGE]を選択して変更完了です。

Localの環境設定画面3

便利機能2:携帯からもLocal環境にアクセスしてサイト確認できる。

「Live Link」機能を使うことでPC内の開発環境を一時的に外部からアクセスすることが可能です。

僕の利用シーンとしては、構築したWEBサイトのモバイル端末を使った動作確認です。
※携帯でアクセスしてコーディングを確認するとPC上で確認するときと見た目に誤差がある場合があるので事前に確認できるのは助かります。

(1)Live Linkの横にある[ENABLE]を選択します。

Localの環境設定画面4

(2)Live Linkの横に表示されるURLにアクセスすることで携帯からもサイト確認が可能になります。

Localの環境設定画面5

便利機能3:お問い合わせフォームの送信テストも可能

自分のPC内(開発環境)でお問い合わせフォームの送信テストも可能です。

[contact form7]や[MWForm]などで設定したお問い合わせフォームの機能も開発環境で確認することができます。

(1)[UTILITIES]タブを選択し、[OPEN MAILHOG]を選択します。

Localの環境設定画面6

(2)開発者向けのメールテストツール(MAILHOG)が起動されますので、画面上で開発環境から送信されたメールの確認が可能です。

MAILHOGの確認画面

便利機能4:SSL化対応も簡単に設定可能

最近のWEBサイトはほぼSSL化(http→https)されていますので
開発環境で修正する際も、SSL化に対応できると移行時に余計な手順が発生しないので
楽になります。

(1)[SSL]タブを選択し、[TRUST]選択するだけでSSL化対応完了です。

Localの環境設定画面7

以上が「WordPress開発環境をPC内(ローカル)に構築する具体的方法」についてです。

WEB制作を行う方にとって、開発環境の構築・管理は必須の作業になると思います。

今は環境構築ツールが充実しているので、お金を掛けなくても簡単に作れる時代です。
この記事が、少しでもお役に立てれば幸いです。
何か聞いてみたいことがありましたら、気軽にご連絡ください。

スポンサードサーチ