MENU

【WordPress×PHP】Localでローカル環境を作る手順

【WordPress×PHP】Localでローカル環境を作る手順
目次

はじめに

【WordPress×PHP】子テーマの導入とバックアップを解説では、SWELLの子テーマを導入し、本番サイトのバックアップと、エラーが出たときの戻し方を確認しました。

今回は、PHPを書き換えて試すためのローカル環境を作ります。無料のアプリLocalを使って、自分のパソコンの中にWordPressのサイトを作り、SWELLと子テーマを入れるところまで進めます。次回からは、このローカル環境でPHPを書いていきます。

このシリーズの全15回の構成は、第1回の記事の冒頭にまとめています。

ローカル環境とは?

ローカル環境とは、自分のパソコンの中だけで動くWordPressのことです。インターネット上に公開している本番サイトとは完全に切り離されています。

本番サイトローカル環境
動いている場所レンタルサーバー(エックスサーバーなど)自分のパソコンの中
見られる人誰でも自分だけ
PHPを書き間違えたときサイトが「重大なエラー」になり、読者にも見える自分のパソコンの中で表示が崩れるだけ

PHPを書き換えるときは、まずローカル環境で試し、正しく動くことを確かめてから本番サイトに反映します。前回の記事で解説した「重大なエラー」も、ローカル環境で起きる分には誰にも迷惑がかかりません。

本番サイトとローカル環境の関係。ローカル環境でPHPを書き換えて動作を確認し、問題がなければ本番サイトの子テーマに反映する

Localとは?

Localは、WordPressのローカル環境をかんたんに作れる無料のアプリです。WordPressのホスティング会社であるWP Engineが開発しています。

  • 画面の案内に沿って進めるだけで、WordPressのインストールまで自動で終わる
  • PHPのバージョンを選べるので、本番サイトと同じ条件で試せる
  • 複数のサイトを作って、使い分けられる

WindowsとMacのどちらでも使えます。この記事では、Windowsの画面で解説します。

Step 1:Localをインストールする

Localの公式サイト(https://localwp.com/)を開き、「Download」から使っているパソコンの種類(Windows)を選んでダウンロードします。

ダウンロードしたインストーラーを実行し、画面の案内に従ってインストールします。インストールが終わってLocalを初めて起動すると、利用規約(Terms of Service)への同意を求められるので、内容を確認して同意します。

次の画面が表示されれば、準備は完了です。

Localを起動した直後の画面。サイトがまだないことを示すメッセージと「Create a new site」ボタンが表示されている

Localの画面は英語ですが、操作するボタンは限られています。この記事で出てくるボタンの意味を確認しながら進めれば大丈夫です。

Step 2:Localでサイトを作る

「Create a new site」をクリックすると、サイト作成の画面が始まります。次の3つの画面で設定します。

Localでサイトを作る3つの手順。1.サイト名を決める、2.PHPなどの環境を選ぶ、3.WordPressの管理者を決める

最初に「Create a new site(新しいサイトを作る)」が選ばれた画面が表示されるので、そのまま右下の「Continue」をクリックします。

サイト名を決める

サイト名を入力して「Continue」をクリックします。ここではkurumico-localとしました。サイト名は、あとから区別しやすい名前なら何でも構いません。

Localのサイト名を入力する画面。「What's your site's name?」の入力欄にkurumico-localと入力している

PHPのバージョンを選ぶ

次は、サイトを動かす環境を選ぶ画面です。「Preferred(おすすめ)」と「Custom(自分で選ぶ)」の2つがあります。

「Preferred」を選ぶと、Localのおすすめの組み合わせ(このときはPHP 8.2)になります。ここでは本番サイトとPHPのバージョンを合わせるため、「Custom」を選びます。

本番サイトのPHPのバージョンは、WordPressの管理画面の「ツール」→「サイトヘルス」→「情報」タブにある「サーバー」で確認できます。エックスサーバーの場合は、サーバーパネルの「PHPバージョン切替」でも確認できます。当サイトはPHP 8.3だったので、「PHP version」の一覧から8.3を選びました。

LocalのPHP version一覧。8.5.1から順にバージョンが並び、8.3.29を選んでいる

「Web server」と「Database」も選んで、「Continue」をクリックします。

Localの環境設定でCustomを選び、PHP version 8.3.29、Web server nginx、Database MariaDB 10.11.18を選んだ画面

本番サイトと、PHPの3つ目の数字(8.3.29と8.3.33など)まで一致させる必要はありません。3つ目の数字は細かい修正の番号なので、8.3同士のように2つ目の数字まで合っていれば十分です。Web serverとDatabaseは、Localで最初に選ばれているものでも、この記事の内容を試すうえで違いはありません。

一覧の中で、下向きの矢印のアイコンが付いているバージョンは、まだパソコンに入っていないものです。選ぶと「Heads up!」というメッセージで追加のダウンロードが必要なことが表示され、次に進むと自動でダウンロードされます。

WordPressの管理者を決める

最後に、WordPressの管理画面にログインするためのユーザー名とパスワードを決めます。

LocalのWordPress設定画面。WordPress username・WordPress password・WordPress e-mailの3つの入力欄がある
項目入力する内容
WordPress username管理画面のユーザー名
WordPress password管理画面のパスワード
WordPress e-mail最初から入っているもののままでよい

入力したら「Add Site」をクリックします。しばらく待つと、サイトの作成が終わります。

ローカル環境のパスワードは、本番サイトのパスワードとは別のものにしてください。ローカル環境は自分のパソコンの中だけで使うものですが、本番サイトと同じパスワードを使い回すのは避けましょう。

Step 3:作ったサイトを開く

サイトの作成が終わると、Localにサイトの詳細画面が表示されます。

Localのサイト詳細画面。PHP version 8.3.29、WordPress version 7.1.2などの情報と、WP Admin・Open siteのボタンが表示されている

よく使うボタンは次のとおりです。

ボタンできること
Open site作ったサイトをブラウザで開く
WP AdminWordPressの管理画面を開く(Step 2で決めたユーザー名とパスワードでログイン)
Site folderサイトのファイルが入っているフォルダを開く
Stop site / Start siteサイトを停止する・起動する

画面の「PHP version」に、選んだバージョン(ここでは8.3.29)が表示されていることを確認しておきましょう。

また、「One-click admin」をOnにして管理者のユーザー名を選んでおくと、「WP Admin」を押したときに、ユーザー名とパスワードを入力せずに管理画面に入れます。

ローカル環境のサイトは、kurumico-local.localのように、末尾が.localのアドレスで開きます。このアドレスは自分のパソコンの中でだけ使えるもので、ほかの人がアクセスすることはできません。

日本語版のWindowsで作ったところ、WordPressは最初から日本語になっていました。管理画面が英語で表示される場合は、「Settings(設定)」→「General(一般)」の「Site Language(サイトの言語)」で「日本語」を選んで保存してください。

Step 4:SWELLと子テーマを入れる

ローカル環境のWordPressにも、本番サイトと同じSWELLと子テーマを入れます。手順は前回の記事で解説した子テーマの導入と同じです。

  1. 「WP Admin」から管理画面にログインする
  2. 「外観」→「テーマ」→「テーマを追加」→「テーマのアップロード」で、SWELL本体のZIPファイルをインストールする
  3. 同じ手順で子テーマのZIPファイル(swell_child.zip)をインストールする
  4. 子テーマ(SWELL CHILD)を有効化する

親テーマを先にインストールしておくのがポイントです。子テーマは親テーマがないと動かないため、SWELL本体 → 子テーマの順にインストールします。

SWELLは、自分で運営するサイトであれば複数のサイトで利用できます。ローカル環境で使う場合も、追加の購入は必要ありません。

テーマのファイルがある場所

Localの「Site folder」をクリックすると、サイトのフォルダが開きます。子テーマのファイルは、次の場所にあります。

Localで作ったサイトのフォルダ構成。Local Sites/kurumico-local/app/public/wp-content/themes の中に swell と swell_child がある

次回からは、このswell_childフォルダのfunctions.phpを、テキストエディターで開いて書き換えていきます。ファイルを保存してブラウザを再読み込みすれば、すぐに結果を確認できます。

本番サイトの記事や設定を、まるごとローカル環境にコピーする方法もあります。移行用のプラグインを使うのが一般的ですが、手順が多くなるため、このシリーズでは扱いません。PHPの書き方を試すだけなら、記事のないまっさらなサイトで十分です。

よくある質問・エラー対処

Q. 「Open site」を押してもサイトが表示されません

→ サイトが停止している可能性があります。Localの左側の一覧で、サイト名の左の丸が緑色になっているか確認してください。緑色でない場合は、サイトを選んで「Start site」をクリックすると起動します。


Q. 作ったローカル環境のサイトは、ほかの人にも見えますか?

→ 見えません。ローカル環境は自分のパソコンの中だけで動いているため、インターネットからはアクセスできません。安心してPHPを書き換えて試せます。


Q. 使い終わったら、Localはどうすればいいですか?

→ 作業が終わったら、詳細画面の右上にある「Stop site」でサイトを停止しておきましょう。次に使うときは「Start site」で起動すれば、続きから作業できます。サイトを停止しても、作ったサイトやファイルは消えません。

おわりに(まとめ)

まとめ

Localを使えば、自分のパソコンの中に、本番サイトと同じPHPのバージョンでWordPressの検証用サイトを作れます。

  • ✅ ローカル環境は自分のパソコンの中だけで動き、本番サイトには影響しない
  • ✅ Localは無料で、画面の案内どおりに進めるだけでWordPressを作れる
  • ✅ 「Custom」を選ぶと、PHPのバージョンを本番サイトに合わせられる
  • ✅ PHPのバージョンは、本番サイトの「サイトヘルス」などで確認できる
  • ✅ ローカル環境にもSWELL本体→子テーマの順にインストールする
  • ✅ 子テーマのファイルは「Site folder」の app/public/wp-content/themes/swell_child にある

次回は、いよいよ子テーマのfunctions.phpにPHPを書いていきます。

次回は、SWELLの子テーマのfunctions.phpの基本について解説予定です。

この記事が、少しでも誰かのお役に立てれば幸いです。

関連記事

当サイトの記事で使用したVBAなどのサンプルをDLできます

この記事のサンプルはありません!

ダウンロードページへは下のカードをクリックすればジャンプできます。
よろしければご利用ください!


【CSS】テキスト関連プロパティについて基本解説|Webの基礎


よかったらシェアしてね!
  • URLをコピーしました!
目次