本記事では、MAMPでWordPressの開発環境を作る手順について解説しています。
![](https://web-engineer-wiki.com/wp-content/uploads/2023/07/wordpress-book.jpg)
- サイト運営に必須のことが学べる
- 基本的な使い方~オリジナルテーマ開発まで学べる
![](https://web-engineer-wiki.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/woman-icon.jpeg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/woman-icon.jpeg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/woman-icon.jpeg)
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!
- PHPの基本構文からクラス・データベース連携・セキュリティまで学べる
- PHPによるWebアプリ開発の基礎・基本テクニックを学べる
![](https://web-engineer-wiki.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
![](https://web-engineer-wiki.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
MAMPのインストーラーをダウンロード
![MAMPのインストーラーダウンロードページ](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp01.jpg)
![MAMPのインストーラーダウンロードページ](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp01.jpg)
MAMPのインストーラーをダウンロードするページにアクセスします。自分の端末に合った、インストーラーをダウンロードしてください。
![MAMP and MAMP PRO](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp02.jpg)
![MAMP and MAMP PRO](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp02.jpg)
ダウンロードが終了したら、インストーラーを起動します。MAMP PROとApple Bonjourは不要なのでチェックを外し次に進みます。
![License Agreement](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp03.jpg)
![License Agreement](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp03.jpg)
使用許諾契約に同意する必要があるため「I accept the agreement」にチェックを入れ次に進みます。
![Select Destination Location](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp04.jpg)
![Select Destination Location](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp04.jpg)
MAMPをインストールするディレクトリを指定します。デフォルトのままで問題ないので次に進みます。
![Select Start Menu Folder](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp05.jpg)
![Select Start Menu Folder](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp05.jpg)
スタートメニューにMAMPのショートカットを追加するかの確認です。デフォルトのままで問題ないので次に進みます。
![Select Additional Tasks](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp06.jpg)
![Select Additional Tasks](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp06.jpg)
デスクトップアイコンにMAMPのショートカットを追加するかの確認です。不必要な人はチェックを外して次に進みます。
![Ready to Install](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp07.jpg)
![Ready to Install](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp07.jpg)
インストールをクリックして次に進みます。
![Completing the MAMP & MAMP PRO Setup Wizard](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp08.jpg)
![Completing the MAMP & MAMP PRO Setup Wizard](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp08.jpg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
これでMAMPのインストールが完了だよ。
WordPressのインストール
MAMPのインストールが完了したら、WordPressをダウンロードします。
![WordPressダウンロードページ](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp14-1024x357.jpg)
![WordPressダウンロードページ](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp14-1024x357.jpg)
WordPressをダウンロードするページにアクセスします。ページ中央部付近にダウンロードボタンがあるので、それをクリックするとダウンロードされます。
![MAMPディレクトリ](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp15.jpg)
![MAMPディレクトリ](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp15.jpg)
ダウンロードされたフォルダは、圧縮されているため解凍しMAMPディレクトリのhtdocs配下に配置します。
![htdocsディレクトリ](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp16-1024x212.jpg)
![htdocsディレクトリ](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp16-1024x212.jpg)
htdocsの中がこのようになっていればOKです。index.phpとMAMP-PRO-Logo.pngは、MAMPをインストールしたタイミングで自動生成されるファイルです。
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
これでWordPressのダウンロード~配置までが完了だよ。
MAMPの起動
![MAMPの起動](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp11.jpg)
![MAMPの起動](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp11.jpg)
最初にインストールしたMAMPを開き、Start Serversをクリックします。
![Apache ServerとMySQL Serverの起動確認](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp17.jpg)
![Apache ServerとMySQL Serverの起動確認](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp17.jpg)
「Apache Server」「MySQL Server」の2つが立ち上がったことを確認し、Open WebStart pageをクリックします。
![PHP MYADMINページ](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp12.jpg)
![PHP MYADMINページ](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp12.jpg)
「http://localhost/MAMP/」のページが開かれます。ナビゲーションメニューのTOOLSを選択し、PHPMYADMINをクリックします。
![データベースの作成](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp13.jpg)
![データベースの作成](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp13.jpg)
このページでは空のデータベースを1つ作成します。任意のデータベース名を付けCreateをクリックします。
![WordPressのインストール](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp18.jpg)
![WordPressのインストール](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp18.jpg)
続いて「http://localhost/wordpress」のページアクセスします。WordPressへようこそ。と画面が表示されるので「さあ、始めましょう!」をクリックします。
![WordPressの設定項目](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp19.jpg)
![WordPressの設定項目](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp19.jpg)
入力内容は以下を参考にしてください。
- データベース名:先ほど作成したデータベース名を指定。
- ユーザー名:デフォルトのユーザー名は「root」です。
- パスワード:デフォルトのパスワードは「root」です。
- データベースのホスト名:そのまま
- テーブル接頭辞:そのまま
![WordPressのインストール実行](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp20.jpg)
![WordPressのインストール実行](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp20.jpg)
データベースとの接続が完了したら、インストール実行をクリックします。
![WordPressのサイト情報を入力](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp21.jpg)
![WordPressのサイト情報を入力](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp21.jpg)
サイトのタイトルやユーザー名を各自設定し、WordPressをインストールをクリックします。
![WordPressのログインページ](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp23-01.jpg)
![WordPressのログインページ](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp23-01.jpg)
先ほど設定したユーザー名とパスワードを使用してログインします。
![WordPressのダッシュボード](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp23-02-1024x320.jpg)
![WordPressのダッシュボード](https://web-engineer-wiki.com/wp-content/uploads/2023/07/mamp23-02-1024x320.jpg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
WordPressの管理画面にアクセスできればWordPressの開発環境の設定は完了だよ。お疲れ様でした。