「MAMP で WordPress の環境を作る」勉強会の記録です。

WordPress の環境を構築する方法はいろいろあります。今回は MAMP を利用してローカル（自分のパソコン）に作る方法を、以前参加した勉強会で教えていただいたことを書きながら、ご紹介したいと思います。

Window10での操作方法です。Macとは、画面や操作方法が違う場合があるようです。ご了承ください。

◆ 準備１　ダウンロード

・MAMP（5.0.4  2022/02/06 現在）のファイルをダウンロードします。

MAMP には、FREE版とPRO版があります。今回は、FREE版を利用して環境を構築します。現在ダウンロードしたファイルで利用出来る PHPのバージョンは Version:8.01 または Version:8.1.0 です。（2022/02/06 現在）

公式サイトにアクセスします。

MAMP & MAMP PRO - your local web development solution for PHP and WordPress development

トップ画面に【FREE Download】のボタンがありますので、そこから始めます。下記の画面になります。

Windows版を選びます。

ディスクトップなど、任意の場所に保存して下さい。

ダウンロード完了後に、こちらの画面が登場しました。これは MAMP とは別のアプリのようです。そのまま、ブラウザを閉じて大丈夫です。【Try Now】や【learn more】をクリックすると、ステキなクジラさんが登場するWebサイトを拝見してから閉じることも出来ます。

・WordPress（5.9　2022/02/06現在）のファイルをダウンロードします。

公式サイトにアクセスします。

こちらは、公式サイト内のデータをダウンロード出来るページへのリンクです。日本語サイトと英語サイトがありますが、今回は英語サイトでのご紹介です。

Download

【Download WordPress 5.9】ボタンをクリックします。

ディスクトップなど任意の場所に保存します。圧縮されたファイルなので、解凍しておきます。

◆ 準備２　MAMP をインストール

ダウンロードしたファイルをダブルクリックしてスタートします。

2箇所の項目はどちらもチェックをはずしてインストールします。
（このオプションに関するご説明は省略します。）

インストール先がよければ、そのまま

そのまま

そのまま

内容を確認してインストール

無事に終了

◆ 準備３　フォルダを作成・WordPress のファイルをコピー

データ保存用のフォルダをディスクトップ（わかりやすい場所ならどこでもOK）に作成します。フォルダ名は任意です。
今回は［wp-sample］にしました。この［wp-sample］フォルダの中に、wordpress.org からダウンロードして解凍した［wordpress-5.9-ja］フォルダの中の［wordpress］フォルダをコピーします。

［wordpress-5.9-ja］の中の［wordpress］を［wp-sample］の中にコピーします。

作成したフォルダの階層はこうなります。

このコピー作業の時に、［wordpress］のフォルダごとコピーするか、フォルダの中身だけコピーするか、迷うことがあります。どちらにしたかによって、後から出てくるローカルサーバーを指定するURLが変わります。それ以外は、環境構築に問題は無いようです。

◆ 準備４　MAMPを起動

ディスクトップに追加された MAMP（ショートカット）をダブルクリックして起動します。

右側の２つのServerの横のマルが緑になっていれば正常に起動されています。
左上の【MAMP】→【Preferences…】をクリックします。

上部メニューの中の【Server】をクリックします。
Document Root の右側の【Open】をクリックし、データが格納されているフォルダを開きます。

◆ 準備５　MAMP のフォルダにディスクトップに作ったフォルダをコピー

先ほど開いた［MAMP］>［htdocs］の中に、ディスクトップに作っておいた［wp-sample］フォルダを移動します。

フォルダの階層はこうなります。

◆ MAMP でデーターベースを作成

下の段、真ん中の【Open WebStart Page】をクリックします。

こちらの画面がブラウザに表示されます。
真ん中の列の［MySQL］の下の［PHPMyAdmin］をクリックします。

［Appearance settings］にて日本語表記に変更することも出来ます。

【新規作成】をクリックします。

データベース名を入力します。ディスクトップに作ったフォルダの名前と同じにします。
右側の文字コードは「utf8_general_ci」のまま、【作成】ボタンをクリックします。

左の画面の一番下に新しいデーターベース［例：wp-sample］が出来上がっていれば完了です。こちらのブラウザは閉じても大丈夫です。ゾウさん絵柄のある MAMP は、ローカルでサーバーを起動させておく役割がありますので、WordPress をインストールする前に【Stop Servers】ボタンをクリックしたり、画面を閉じてしまわないよう気をつけてください。

◆ WordPress をインストール

普段お使いのブラウザを立ち上げ、アドレスの部分に

http://localhost/wp-sample/wordpress/

と入力します。［wp-sample］の部分は、任意で付けたフォルダ名が入ります。

このアドレスは、パソコンの環境による違いがあるようです。
確認する点は、MAMP の Ports の設定で、
http://localhost:8888/～
http://localhost:3306/～
などの可能性もありますが、私の場合はどちらもエラーとなってしまいました。初めて MAMP を利用した時には、ここでつまづいてしまったので、WordPress の初期画面を表示出来た時は、ほんとーに嬉しかったことも思い出しました。

※ 2022/02/09追記　http://localhost:80/～　は、繫がりました！
このあたりの仕組みについては、もっと勉強しなければと思っていますが、今回この記事を書いたことで、少しだけ理解が深まった気がしています。

【さあ、始めましょう！】をクリックします。

この画面では、すべての項目にデフォルト値が入っています。変更するのは、データベース名のみです。データベース名は、MAMP の PHPMySQL で作成したデータベース名（任意で付けていただいたフォルダの名前）です。（※ ユーザー名とパスワードは、どちらも 「root」にすることが決まりごとのようです。私はここも変えてしまって失敗しました！）

サイトのタイトルは、後から変更可能です。ユーザー名は、任意で設定できます。
表示されているパスワードを保管しておいてください。（変更可）
［検索エンジンでの表示］は、チェックは入れても入れなくてもよいです。後から変更も出来ます。ローカルで作成したものをサーバーに移行して公開する際は、チェックを入れておくことをお勧めします。【WordPress をインストール】をクリックします。

「成功しました！」が表示されれば完了です。【ログイン】をクリックします。

ログインするための画面が現れます。

この時、ブラウザのURLを保存しておくことをお勧めします。次回から、WordPress の管理画面にログインするためのURLとなります。初めは、喜びでログイン→ログアウトしてしまい、再ログインする時にまぁまぁ手間取りました。サーバーやフォルダ階層の概念をちゃんと理解していれば、迷うことはなかったかなと思います。
もし、迷子状態になってしまったなら、こちらを参考にトライしてみてください。
http://localhost/wp-sample/wordpress/wp-login.php

先ほど決めた、ユーザー名とパスワードでログインしてください。

お馴染みの、または初めましての WordPress の「ようこそ！」画面が開けば、環境構築は成功です！おつかれさまでした。

私が参加したオンライン勉強会の講師のピヨ彦さんが 、「MAMP で WordPress の環境を構築する」方法についてご紹介してくださっている記事はこちらです。
WordPressに関する記事をまとめられたマガジンもお勧めです。

WordPress｜ピヨ彦｜note

2022/02/08　目次を追加しました。
2022/02/09　◆ WordPressをインストール 内に追記しました。