MAMPでWordPressローカル開発環境を作ろう

今回はMAMPでローカル仮想環境を作ってそこにWordPressを設置する方法を紹介いたします。

開発環境

デバイスMacBook Pro 14インチ 2021(M1 Pro)
OSMac OS Monterey(ver 12.6)
必要なアプリケーションMAMP、ターミナル、その他テキストエディター

開発用のディレクトリを作成

まずは開発用のディレクトリを作成しましょう。

私は「/Users/{username}/develop/」内にそれぞれのプロジェクトフォルダをまとめています。

/Users/{username}/develop/に以下のように「pino-magazineフォルダ」を作成しました。名前はお好きな名前をつけていただいても構いません。

wordpress.orgからWordPressフォルダをダウンロード

wordpress.orgへアクセスをし、「Get WordPress」をクリック

「Download WordPress」をクリック。今回は最新版6.0.2をダウンロードします。

クリックするとZIPファイルがダウンロードされるので、展開しておきましょう。

開発用のディレクトリ内にWordPress一式を入れる

ZIPファイルとしてダウンロードしたものを解凍し、wordpressフォルダの中身を全てプロジェクトフォルダに入れます。

/Users/{username}/develop/pino-magazine内はこのような形になります

いつものWordPressの構成です。

MAMPディレクトリ内の設定ファイル

次にMAMPの設定ファイルを編集します。

「/Applications/MAMP/conf/apache/extra/httpd-vhosts.conf」にドキュメントルートと任意のホスト名を記述することでブラウザでそのホスト名にアクセスできるようになります。

最後に以下を追加。

<VirtualHost *:80>
DocumentRoot "/Users/{username}/develop/pino-magazine/"
ServerName pino-magazine.local
</VirtualHost>

【注意】

.comなどパブリックドメインを設定してしまうとドメインが重複して正しく表示されないことがあります。

無難に.local、.locなどにしておきましょう。

/etc/hostsでホストを設定

ターミナルを開いて以下のコマンドを入力、Enterキーを押下。

sudo vi /etc/hosts

パスワードを求められるので入力してEnter。

/etc/hostsファイルの最後にhttpd-vhosts.confで記述したホストと揃えた形で記述します。

viで編集するので「I」キーを押してインサートモードにして入力。

127.0.0.1 pino-magazine.local
::1 pino-magazine.local

記述が終わり次第。「esc」キーを押して、「wq!」で保存して終了。

MAMPを再起動

MAMPを起動しているのであれば「Stop」して、再度「Start」しましょう。

MAMPのWebStartからMySQLにアクセスし、データベースを作成

MAMPのメニューに「WebStart」があるのでクリック。

ブラウザ上にページが表示されたらMySQL内の「phpMyAdmin」をクリック。

phpMyAdminで「新規追加」で任意のデータベース名を付けて完了です。

設定したホストにブラウザでアクセス

「httpd-vhosts.conf」や「hosts」ファイルで設定したホストにブラウザでアクセスするとWordPressのインストール画面が表示されます。

まずは言語を指定。

次にデータベースを指定するフォームが表示されるので、

  • データベース名:作成したデータベースの名前
  • ユーザー名:特に設定していなければroot
  • パスワード:特に設定していなければroot
  • 接頭辞はこだわりがなければwp_のままで良い

これで管理画面にログインできたら成功です。

WordPressのサイトが表示されないときはhostsファイルかhttpd-vhosts.confの記述を見直そう

サーバーを設定した後に、指定したホストにアクセスすると表示されないことがあるので、その時はhostsファイルかhttpd-vhosts.confの記述を見直してみてください。

修正したら保存とMAMPの再起動を忘れずに。