WordPressのローカル環境構築方法を簡単解説【Local編】

WordPress
まるこ
まるこ

WordPressを導入した新規サイトの立ち上げや、既存サイトの修正を行うときなど、気軽にテーマをいじったり、プラグインの仕様を試せる「ローカル環境」があると、とても便利です。

本記事では、簡単にローカル環境を構築できる【Local】というツールをご紹介します。

ローカル環境とは

まずローカル環境とは、「自身のPC上だけで動くサーバー機能を持った開発環境」のことです。「自身のPC上だけで動く」という点からもわかるように、ローカル環境内で制作している内容は、世の中に公開される心配はありません。また、インターネットの接続がなくても作業できます。

ローカル環境を構築する主な理由

  • レンタルサーバーなどを使用せずにWeb制作ができる
  • 本番環境にアップロードする前にプラグインなどの動作確認ができる
  • インターネット上に制作内容が公開されないため、エラーなどが起こっても慌てる必要がない
  • 既存サイトの修正などの場合、公開中のサイトに影響を及ぼさずに作業できる

Web制作を行うときは、本番環境とほぼ同じローカル環境を構築して作業します。
そして、ローカル環境で制作した内容をテストし、問題がなければ本番環境にファイルをアップロードして、Webサイトに反映していきます。

WordPressのローカル環境を構築するツール

WordPressは、PHPというプログラミング言語を使用しており、ローカル環境を構築するには、PHPが動く環境が必要です。WordPressのローカル環境を構築するツールはいくつかあり、どのツールを使用しても、WordPressで行える内容は基本的に変わりません。

主なローカル環境ツール

  • wp-env
  • MAMP
  • Docker
  • Local

ツールの中でもLocalは、ダウンロードからローカルサイトへのログインまでが簡単にできます。「ローカル環境の構築に不安がある」「サーバーなどの知識がないので、難しい設定はしたくない」と思っている方にオススメです。

Localを使ってローカル環境を構築しよう

それでは、Localでローカル環境を構築してみましょう。作業ステップは次の通りです。

  1. ダウンロード
  2. インストール
  3. 新規ローカル環境の作成
  4. 作成したWordPressサイトの管理画面へログイン

※Localのアップデートにより、ダウンロード手順や方法が異なる場合がございますので、ご了承ください。本記事は2021/10/14時点での手順をご紹介しております。

① ダウンロード

まずは、公式ページよりLocalをダウンロードしましょう。
https://localwp.com/

トップページの[OR DOWNLOAD FOR FREE]または[DOWNLOAD]をクリックします。

Localトップページ

次に、ご自身が使用しているPCに合わせて、OSを選択します。

OS選択画面

OS選択後、「名前」「メールアドレス」「電話番号」の入力画面に切り替わりますので、情報を入力します。(メールアドレスのみ入力必須です。)
入力完了後[GET IT NOW!]ボタンをクリックすると、Localのダウンロードが始まります。

メールアドレス等入力画面

※ダウンロードが開始されないときは、[click here]からダウンロードを行います。

② インストール

ダウンロードが完了したら、LocalをPCにインストールします。(画像はMacへのインストールです。)

インストールを進めていくと、利用規約への同意画面が表示されます。規約の内容を確認後、同意欄にチェックを付け[I AGREE]ボタンをクリックします。

利用規約

「Welcome to Local!」ページが表示されれば、無事にLocalのインストール完了です。(このページは、右上の[✕]ボタンで閉じてしまって問題ありません。)

③ 新規ローカル環境の作成

ここからは、新しいWordPressサイトのローカル環境を作成する手順を解説します。
※WordPressは、最新バージョンで設定されます。

Localを起動して[+ CREATE A NEW SITE]ボタンをクリックします。

はじめに、「サイト名」を入力します。サイト名は、わかりやすい名前で大丈夫です。入力が完了したら、[CONTINUE]ボタンをクリックします。
※サイト名の下にあるオプション(ADVANCED OPTIONS内)で、ドメインやローカル環境を保存する場所の指定できます。必要に応じて入力してください。

サイト名入力画面

次に、使用するPHP/Webサーバー/MySQLの選択画面が表示されます。基本は、本番環境に近いバージョンを選択するようにしてください。

バージョンの指定がなければ[Preferred]を選択し、[CONTINUE]ボタンをクリックします。

PHP等のバージョン選択画面

PHP等のバージョンを指定する場合は、[Custom]を選択し、各項目の設定をします。設定が完了したら、[CONTINUE]ボタンをクリックします。

PHP等のバージョン選択画面(カスタム)

次に、WordPressにログインするための、「ユーザー名」「パスワード」「メールアドレス」を入力します。入力が完了したら、[CONTINUE]ボタンをクリックします。
※入力欄下にあるオプション(ADVANCED OPTIONS内)は、WordPressのマルチサイト化についての選択項目です。

WordPressログイン用ユーザー登録画面

④ 作成したWordPressサイトの管理画面へログイン

ローカル環境の設定が完了すると、各設定項目が書かれている画面が表示されます。(画面右上の文字が「STOP SITE」になっていれば、サーバーが起動している証拠です。)

ローカル環境の保存場所

作成したローカル環境は、次のディレクトリ内に保存されています。(サイト名下の[>]ボタンからディレクトリに遷移できます。)
【ユーザー/ユーザー名/Local Sites/※設定したサイト名※】
テーマフォルダは、上記ディレクトリ内の【/app/public/wp-content/themes/】にあります。

それでは、さっそくWordPressの管理画面にアクセスしてみましょう。[ADMIN]ボタンをクリックすると、WordPressのログインページが開きます。

ローカル環境作成時に設定した、ユーザー名またはメールアドレスと、パスワードを入力して、管理画面へログインします。

WordPress管理画面へのログインページ

無事に管理画面にログインできたら、サイトの表示を「日本語表示」に変更しましょう。設定の変更は、「Settings」→「General」内にある「Site Language」から行えます。日本語を選択したら[Save Changes]ボタンをクリックして、内容を保存します。

WordPress設定画面

以上で、ローカル環境の構築は完了です。WordPressを使用する準備は整いましたので、テーマの編集やプラグインの動作確認など、お好きに作業していただけます。

【便利機能】Localで作成したサイトを外部共有する方法

ローカル環境は、ご自身のPC上でしか見られません。しかし、制作中のサイトの仕様を確認してもらいたいなど、一時的にサイトを共有したいときがあります。そんなときは、Localの外部共有機能を使いましょう。

サイトを共有するには、Localアカウントでログインする必要があります。(アカウントが未登録の場合は、登録ページで設定できます。)

ログインページで、アカウント登録した方法(Googleアカウント連携など)を選択し、[Log in]ボタンをクリックします。

Localアカウントログインページ

ログインが正常にできると、Local画面下の[Enable]が緑色に変わり、クリックすると外部共有が有効になります。※有効化されると、Live Link横の[●]も緑色に変わります。

ローカルサイトの外部共有

共有するサイトのリンクをコピーするには、[COPY]をクリックします。
また、共有するサイトにはベーシック認証がかかっていますので、Live Link内の「Username」「Password」入力が必要になります。こちらも忘れずに共有しましょう。

Live Linkが有効な間は、外部端末からローカルサイトを閲覧できます。(共有を無効にする場合は[Disable Link]をクリックします。)

外部共有リンクで開いたローカルサイト

まとめ

今回はLocalを使用した、WordPressのローカル環境の構築について解説しました。

ローカル環境は、本番環境に影響を与えることはありませんので、エラーが起こっても、慌てずに対処できます。

またLocalは、ダウンロードからローカルサイトへのログインまで、難しい設定を行う必要がありません。「新規サイト制作」「既存サイトのテーマ変更」「プラグイン追加」のときなど、ぜひ使用してみてください。

※既存のサイトをLocalにコピーする方法は少し複雑なので、別の記事でご紹介できればと思います。

Wepotは、ディレクション、デザイン、イラスト、動画編集、コーディングなど、幅広い分野を担えるメンバーで構成されており、お客様の目的に則した制作物のご提供が可能です。
Webサイトの制作等を検討している・相談してみたいなどございましたら、お気軽にお問い合わせください。

ご依頼・ご相談はこちら

お客様の課題解決に最適なメンバーアサインでスムーズなプロジェクト進行をいたします。制作して終わりではなく、お客様が求める成果に結びつくご提案をさせていただきます。

この記事がシェアできます

この記事を書いた人
まるこ

まるこ
コーダー

まるこ
コーダー

想いの詰まったWebデザインを“カタチ”にするコーダーとして、Webサイト制作の一端を担っています。「誰が見てもわかるコード」を念頭に置き、品質・保守性を重視して制作しています。趣味はサッカー観戦。好きな色はトリコロール!

  • Wepotについて

    アイコン

    Wepotはデジタルクリエイティブで課題を抱えるすべての人への解決策を提示できます。

  • 実績一覧

    アイコン

    Wepotには多種多様な実績があります。メンバーの強みが生きた実績をご覧ください。

  • 制作のご相談

    アイコン

    現在の課題やお悩みをお聞かせください。あなただけのクリエイティブチームを編成し解決へと導きます。