今回は、「MAMPでWordPressの開発環境を構築」を行っていきたいと思います。
以下の環境で作業を進めています
OS:macOS Mojave
- 職業訓練校のWEB関連のコースに通っている人
- 職業訓練校のWEB関連のコースに興味のある人
- Webデザイナーになりたい人
- 駆け出しWebデザイナー
MAMPのインストール
MAMPを使えば、Webサーバーをレンタルしなくてもローカル環境でWordPressが使えるということで、まずはMAMPのインストールから始めました。
(以下のブログ記事を参考にしました。)
![](https://daeuwordpress.com/wp-content/uploads/2019/03/mamp_3.png)
先日、自宅で使用するPCがmacOSに変わったので、以下からmac用のMAMPをインストール。
![](https://www.mamp.info/images/icons/mamp-pro.png)
macOSのPCの場合は、MacintoshHDにインストールすることになります。
「MAMP」と「MAMP PRO」がインストールされますが、MAMP PROの方は有料のものらしいので、最初はMAMPの方だけで事足りるっぽいです。
![](https://satoimo.blog/wp-content/uploads/2023/03/4dccb104c591026647f6cce0efbd855b.png)
MAMPディレクトリを開くと、以下のような構成が見られます。
![](https://satoimo.blog/wp-content/uploads/2023/03/60551922cca6d26a8ebc977058721041.png)
そのうちのMAMPアプリケーションを選んでクリック。
![](https://satoimo.blog/wp-content/uploads/2023/03/fe22ee1e564642f473b4bd16b55d5f83.png)
すると、MAMPのホーム画面のようなものが出てきました。
![](https://satoimo.blog/wp-content/uploads/2023/03/67297302f96a30456e24150b7023ef23-1024x821.png)
ドキュメントルートは「applications/MAMP/htdocs」、使用するWebサーバーは「Apache」に設定されています。
右上のStartボタンを押すと、Apacheが起動され、使用しているブラウザ上でMAMPのwelcomeページが開かれます。
![MAMPのwelcomeページ](https://satoimo.blog/wp-content/uploads/2023/03/49716adc70b35217bba7e86188ebad47-1024x471.jpg)
また、初期の状態でURLをhttp://localhost:8888/に変えると、以下のようなページが表示されました。
![](https://satoimo.blog/wp-content/uploads/2023/03/0e1068707a576ca5f4ac932952cde23b-1-1024x608.png)
↓最初3行をDeepLに翻訳してもらいました。
このページが表示されれば、MAMPは正しく設定され、起動し、あなたのウェブコンテンツを提供するためのすべての準備が整ったことになります。このプレースホルダーページ1は、置き換えるか削除してください。
(DeepLで翻訳)
とりあえず、MAMPのインストールは無事完了したようです。
Portの設定確認
先ほど、http://localhost:8888/で初期ページが無事に表示されました。なぜ、そのURLなのかというと、それはApacheのport番号が8888に設定されているからです。
実際にMAMPの「Preferences」ボタンから設定画面に移って、ポート番号の設定を確認してみます。
![](https://satoimo.blog/wp-content/uploads/2023/03/4cbce9d5ca3ce1207e4d84c19ba724e0-1024x795.jpg)
Apacheのポート番号が8888になっていることが確認できました。
現状、変更の必要性に迫られていないので、8888のままにしておきます。
WordPressのダウンロード
MAMPの用意が終わったあと、WordPressのダウンロードを行いました。
![](https://s.w.org/images/home/wordpress-default-ogimage.png)
zipファイルでダウンロードされたので、それを解凍。
![](https://satoimo.blog/wp-content/uploads/2023/03/40f922865978eda0457bc419dd98ed2a-1.png)
wordpressディレクトリの中身をMAMPで設定したドキュメントルート以下にコピペします。
僕の場合は、/Applications/MAMP/htdocsにペースト。
![](https://satoimo.blog/wp-content/uploads/2023/03/9bd19de9d68096ec5360f821c63709c3-1.png)
データベースの作成
MAMPと WordPressの用意が終わったので、次にデータベースを作成していきます。
Apacheのポート番号が8888のままなので、以下のURLへアクセスすると、phpMyAdminのページが開きます。
http://localhost:8888/phpmyadmin/
![](https://i.gyazo.com/1466f15c71fe74bf9810270bdbf8f0e6.png)
データベースタブを選択。
![](https://satoimo.blog/wp-content/uploads/2023/03/phpmyadmin_db-1024x433.jpg)
「データベースを作成する」のところで、任意のデータベース名を入力。
![](https://satoimo.blog/wp-content/uploads/2023/03/446089196d4c94e9c761a3f16e572659-2-1024x433.jpg)
すると、データベースが新規作成されました。
![](https://satoimo.blog/wp-content/uploads/2023/03/a6288c1f76aa142a701cb80996d038d5-1024x203.jpg)
![ぼく](https://satoimo.blog/wp-content/uploads/2022/09/850c7612116999490846136e772ab7fd-150x150.jpg)
作ったデータベースは、どういった形でwordpressに関わってくるのだろう?今の段階では全く分からんなぁ
WordPressの起動
ここからは、実際にWordPressを動かしていきます。
MAMPでApacheを起動させて、以下のURLにアクセスします。
http://localhost:8888/
![](https://satoimo.blog/wp-content/uploads/2023/03/wordpress_startpage-1024x478.jpg)
WordPressへようこそ。始める前に、以下の項目を知っておく必要があります。
- データベース名
- データベースのユーザー名
- データベースのパスワード
- データベースホスト
- テーブル接頭辞 (1つのデータベースに複数の WordPress を作動させる場合)
この情報は
wp-config.php
ファイルの作成に使用されます。 もし何かが原因で自動ファイル生成が動作しなくても心配しないでください。この機能は設定ファイルにデータベース情報を記入するだけです。テキストエディターでwp-config-sample.php
を開き、データベース情報を記入し、wp-config.php
として保存することもできます。 さらにヘルプが必要な場合は、wp-config.php
についてのサポート記事をご覧ください。おそらく、これらの項目はホスティング先から提供されています。この情報がわからない場合は作業を続行する前にホスティング先と連絡を取ってください。準備ができているなら…
http://localhost:8888/wp-admin/setup-config.php
5つの項目についての情報が必要になりました。また、それら情報はwp-config.phpファイルの作成に使用されるようです。
![ぼく](https://satoimo.blog/wp-content/uploads/2022/09/850c7612116999490846136e772ab7fd-150x150.jpg)
5つの項目についての情報を先に知っといた方がええのか、、、
![](https://satoimo.blog/wp-content/uploads/2022/09/850c7612116999490846136e772ab7fd-150x150.jpg)
データベース名はさっき任意で入れた名前を使う。他の4つは分からんなぁ
ここで必要な情報はMAMPの「WebStart」ボタンを押すと見られるようです。
![](https://satoimo.blog/wp-content/uploads/2023/03/2c6f720da60ff2bd070314ce0e0ad39c-1024x832.png)
「WebStart」ボタンを押して開かれたページに、PHP,MySQL,SQLiteの設定に関する情報がアコーディオン内で掲載されています。
![](https://satoimo.blog/wp-content/uploads/2023/03/326e346da0519ced489a004b819cb87a-1-1024x298.png)
今回はデータベース関連の情報が欲しいので、MySQLのところを押します。
![](https://satoimo.blog/wp-content/uploads/2023/03/980462553430b8ad673ea269d6c09b05-1-1024x650.png)
英文には「mySQLデータベースをphpmyAdminで管理できます。独自のスクリプトからMySQLサーバーに接続するには、次の接続パラメーターを使用します。」ということが書かれています。
そして、その英文の下にある表の情報が探していたものです。
表の情報からデータベース関連の情報が揃いました。
- データベース名→(任意で入力したもの)
- データベースホスト名→Host
- ユーザー名→User
- パスワード→Pasword
- テーブル接頭辞→(デフォルトでOK)
必要な情報を揃えられたので、WordPress画面の方で「さあ、始めましょう!」を押します。
すると、 wp-config.php
ファイルの作成に使用するための情報を入れるフォームが表示されました。
![](https://satoimo.blog/wp-content/uploads/2023/03/wordpress_setuppage-1-1024x478.jpg)
ここで、先ほどの情報をフォームに入力していきます。
5項目全てを埋めて、送信。
WordPressのインストール
送信後、「この部分のインストールは無事完了しました。」という表示が出てきます。
![](https://satoimo.blog/wp-content/uploads/2023/03/wordpress_install-1024x433.png)
インストールを実行していきます。
すると、以下の必要情報を入力するフォームが表示されました。
- サイトのタイトル
- ユーザー名
- パスワード
- メールアドレス
これらの情報は後々変更できるようなので、タイトル等は一旦テキトーなものを入力して大丈夫なようです。
![](https://satoimo.blog/wp-content/uploads/2023/03/wordpress_install_welcomepage-1024x747.jpg)
必要情報を入力し、「WordPressをインストール」を押します。
「成功しました!」が出ればオッケー。
![](https://satoimo.blog/wp-content/uploads/2023/03/wordpress_install_complete-1-1024x433.png)
管理画面へのログインページが表示されます。
先ほど入力した必要情報を入力。
![](https://satoimo.blog/wp-content/uploads/2023/03/wordpress_loginpage-1024x478.png)
ログインすると、管理画面が無事開かれました。
![](https://satoimo.blog/wp-content/uploads/2023/03/wordpress_adminpage-2-930x1024.jpg)
これで、MAMPを使ったWordPress開発環境を構築することができました。
今回は、「MAMPでWordPressの開発環境を構築」ということを行いました。
ちなみに本ブログはWordPressで作られているのですが、MAMPなどは使っておらず、基本的に本番環境の管理画面でしか編集や更新を行なっていない状態です。
そのため、ぼく自身、WordPressのPHPカスタマイズは全くしたことがありません。今回、MAMPでローカルでの開発環境を構築できたので、今後はWordPressのそういったところにも手を出していきたいと思います。