WordPressをローカル環境で構築する方法(MAMP編)

worodpressをローカル環境で構築する方法(MAMP編)

WordPressをローカル環境に構築

WordPressをローカル環境に構築するためには、パソコン内でサーバーを立ち上げる必要があります。サーバーを立ち上げるためにはMAMPやXAMPP、LOCAL、RaspberryPiなどを使用する方法がありますが、今回はMAMPを使用してサーバーを立ち上げる方法をご紹介します。

LOCALを使用する場合は下記の記事を参照してみてください。
WorodPressをローカル環境で構築する方法(Local編) 簡単すぎる!WordPressをローカル環境で構築する方法(Local編)

RaspberryPi ZERO Wを使用する場合は下記の記事を参照してみてください。
WordPressをローカル環境で構築する方法(RaspberryPi ZERO W編) WordPressをローカル環境で構築する方法(RaspberryPi ZERO W編)

MAMPとは

MAMPとはmacOSやWindowsパソコンにローカルサーバーを構築できるソフトウェアです。MAMPはMacintosh、Apache、 MySQL、 PHPの頭文字を取った略語ですが、Windowsでも使えるのでご安心ください。

今回はWindows10のパソコンにMAMPをインストールして、Wordpressが稼働するまでの手順の説明となります。

MAMPのインストール

MAMPサイト
https://www.mamp.info/en/
まずはMAMPをダウンロードするために公式ページを開いて、「Free MAMP Download」をクリックしてください。

MAMPダウンロード画面
https://www.mamp.info/en/downloads/
画面が遷移するとMacかWindowsか選べるので、ご利用のOSに合わせてリンクをクリックしてダウンロードします。

mampセットアップ画面
ダウンロードしたファイルをクリックして実行すると上記のようにデフォルトで有料の「MAMP PRO」にチェックが入っているので、チェックを外して、Nextをクリックします。

同意画面
I accept the agreement にチェックを入れて、Nextをクリックします。

フォルダー 選択画面
インストールするフォルダを聞かれるので、任意のフォルダを入力してNextをクリックします。

メニュー表示画面
メニューに表示するか聞かれるので、そのままNextをクリックします。

デスクトップアイコン確認
デスクトップにアイコンを作るか聞かれるので、そのままNextをクリックします。

インストール開始画面
Installをクリックするとしばらく時間が掛かりますので気長に待ちましょう。

インストール完了画面
上記の画面が表示されたら、Finishをクリックしてインストールは終了です。

MAMPの初期設定

mamp初期画面
インストールが終わったらMAMPを起動します。

警告画面
MAMPを起動してStartを押すと上記のように警告がApacheとMysqlで2回表示されるので、両方にチェックをいれて「アクセスを許可する」をクリックします。

mamp画面apache/mysql起動画面
上記のようにApacheServerとMySQLServerの両方にチェックが出ていればMAMPによって、ApacheサーバーとMySQLのデータベースを使えるようになります。

環境によってはMySQLServerに緑のチェックが付かず、phpAdminの画面でエラーが出る可能性があるので、ファイアーウォールの設定を規定値に戻したり、一度、セキュリティ関連の項目をオフにして起動してみましょう。

MAMPが起動したら、セキュリティを全てオンに戻して作業すれば特に心配はありません。注意点としてはMAMPが動いて嬉しくなって、セキュリティをオフにしたまま作業してしまうことです。

セキュリティをオフにしたら、必ずオンにしてから、作業を開始してください。オフにしてオンにした後にWindowsセキュリティの重要な警告が表示されますので、ApacheとMysqlの両方をアクセス許可するのを忘れないでくださいね。

次に各項目についてそれぞれ使い方をチェックしてみます。

MAMP画面Preferences表示
MAMPの左上にある「MAMP」をクリックして、「Preferences」を開いてみましょう。

1.General(Start/Stop)

MAMP画面Preferences-startstopタブ
Preferencesを開くと、最初にStart/Stopのタブが表示されます。

MAMPを起動するとき
□MAMP起動時にサーバを起動
□MAMP起動時にMAMP PROを確認する
□起動時オープン

MAMPを停止するとき
□MAMPを終了するときにSeversを停止する

それぞれの項目をGoogle翻訳で簡単に日本語化しました。

When starting MAMP
□Start Servers When starting MAMP
この項目にチェックを入れるとMAMPを起動したらサーバーも起動されます。

□Check for MAMP PRO when starting MAMP
この項目にチェックを入れると起動時にMAMPPROを勧められます。
チェックを外しておいて問題ないでしょう。

□At startup open
この項目にチェックを入れておくと、MAMPを起動したら、自動的にブラウザで
「 http://localhost/MAMP/ 」が開かれるようになります。
すぐに作業することを考えるとチェックを入れておいても良いと思います。

When stopping MAMP
□Stop Severs when quitting MAMP
この項目にチェックを入れておくとMAMP終了時にサーバーも終了されます。
常時起動しておきたい場合はチェックを外しておいて、作業する時だけサーバー
を起動しておきたい場合はチェックを入れておきましょう。 

2.Ports

MAMP画面Preference-Portsタブ
次にPortsのタブを開いてみます。

この項目ではApacheやNginx、MySQLのポートを指定することができます。
他にサーバーを起動していて、別のポートを設定する時に利用する項目ですね。
特に他にサーバーを起動していなければ、デフォルトのままで大丈夫です。

3.PHP

MAMP画面Preference-phpタブ
次にPHPのタブを開いてみます。

このタブではPHPのバージョンを選択することができます。
ここもデフォルトのままでOKです。

4.Web Server

MAMP画面Preference-WebServerタブ
次にWeb Serverのタブを開いてみます。

このタブではWebServerをApacheかNginxのどちらを使うか選択できます。
Document Rootの項目はどのフォルダをRootフォルダにするか選ぶことが可能です。
この項目もデフォルトのままでOKです。

5.MySQL

MAMP画面Preference-Mysqlタブ
次にMySQLのタブを開いてみます。

このタブはMySQLのバージョンが表示されるだけですね。

データベースの作成

MAMPの設定項目について一通りチェックしたら、次にデータベースの作成に入ります。

MAMPの「Open WebStart Page」をクリックするか、「 http://localhost/MAMP/ 」をブラウザのアドレスバーにコピペしてみましょう。

MAMP管理画面
上記のようにMAMPの管理画面がブラウザに表示されるので、赤い矢印のリンク「 phpMyAdmin 」をクリックします。

phpMyAdmin管理画面
phpMyAdminの管理画面が開かれますので、Languageの右側のEnglishをクリックして、日本語に変更します。

phpMyAdmin管理画面datebaseクリック
日本語に変更されたら、データベースをクリックします。

phpMyAdmin管理画面データベース名入力
データベース名の部分に任意の文字列を入力します。

今回はバーチャルホストの機能を使って複数のWordpressサイトを構築する方法をご紹介するために「wp_test_81」と「wp_test_82」を作成しました。

複数サイトの設置や構築の練習になりますので、任意の名前のデータベースをいくつか作ってメモしておいてください。

phpMyAdmin管理画面データベース名表示
入力した任意の文字列が表示されたらデータベースの作成は終了です。

WordPressのダウンロード

次はWordpress公式サイトからのWordpressの本体をダウンロードします。

日本語 – WordPress
https://ja.wordpress.org/

Wordpressサイト画面
サイトを開いたら、WordPressを入手をクリックします。

Wordpressサイトダウンロード画面
ページが移動したら、真ん中のWordPressをダウンロードをクリックして、WordPress本体をダウンロードします。

ダウンロードしたら、zipファイルを展開しておきましょう。

バーチャルホストの設定

MAMPはバーチャルホストの機能を有効にすることで、WordPressを複数設置することができます。

データベースを作成し、それぞれのフォルダに展開したWordPressのファイルを設置することで簡単に複数サイトを構築可能であり、設定もテキストファイルを編集するだけですので、ぜひ覚えておきましょう。

1.httpd.confの設定

MAMPをCドライブにインストールした前提でご説明します。

C:\MAMP\conf\apache\のフォルダを開いて、httpd.confというファイルをまずはコピーしてすぐに張り付けしてバックアップのための複製を作りましょう。

バックアップを作成しておけば、後で名前を変更するだけで元に戻すことができます。

バックアップを作ったら、httpd.confをテキストエディタで開きます。

httpdconfファイルvirtualhostコメントアウト削除
次に「 # Virtual hosts 」で検索をして、上記の箇所を表示します。

# Virtual hosts
#Include conf/extra/httpd-vhosts.conf

上記の部分の #Include conf/extra/httpd-vhosts.conf の # を削除します。

httpdconfファイルvirtualhost有効

# Virtual hosts
Include conf/extra/httpd-vhosts.conf

#を一つ消したら、一度保存して下さい。これでバーチャルホストが有効になりました。

次に使用するポートを増やします。httpd.confで「 Listen 80 」を検索します。

見つけたらすぐその下に増やしたいだけポートを追加しましょう。

# START MAMP: Please do not change next line
Listen 80
Listen 81
Listen 82

httpdconfフィアルポート追加
今回は81と82の2つを増やして、2つのポートでWordPressを作成してみます。

ポートを増やす記述をしたら、保存してhttpd.confは閉じてOKです。

2.httpd-vhosts.confの設定

次は指定したポートにアクセスできるように設定します。

C:\MAMP\bin\apache\conf\extra\httpd-vhosts.confのファイルを編集します。

<VirtualHost *:81>
  DocumentRoot "C:\MAMP\htdocs\wp_test_81"
</VirtualHost>
<VirtualHost *:82>
  DocumentRoot "C:\MAMP\htdocs\wp_test_82"
</VirtualHost>

httpd-vhosts.confの末尾に上記を追記して保存します。

httpdvhostconfファイルvirtualHost追加

次はwp_test_81とwp_test_82のフォルダにそれぞれのポートからアクセスできるWordPressをインストールします。

WordPressのインストール

C:\MAMP\htdocsのフォルダにwp_test_81とwp_test_82という形でフォルダを作り、WordPressのファイルをコピーしましょう。

Wordpressフォルダ
コピーが終わったら、まずはlocalhost:81にアクセスしてみます。

localhost:81
localhost:81画面

localhost:82
localhost:82画面
localhost:81とlocalhost:82の両方でそれぞれのWordPressにアクセスすることができました。

次はWordPressのインストール設定をしてみます。

Wordpressインストール画面
データベース名 wp_test_81
ユーザー名 root
パスワード root
データベースのパスワード root
データベースのホスト名 localhost
テーブル接頭辞 wp_

上記を入力して送信を押します。

Wordpressインストール画面-実行クリック
画面が移動したら、そのままインストール実行をクリックします。

Wordpressインストール完了画面
サイトのタイトル、ユーザー名、パスワード、メールアドレスを入力して「WordPressをインストール」をクリックします。

Wordpressインストール完了
無事にWordPressをインストールすることができました。

次にWordPressが実際に動くのかチェックしてみます。

表示・動作確認

Wordpressログイン画面
先ほどの画面でログインをクリックして、ログイン画面でユーザー名、パスワードを入力してログインします。

Wordpress管理画面
WordPressの管理画面にログインできました。次にサイトを表示でトップページを見てみます。

Wordpressデフォルトテーマ
デフォルトのテーマでデザインされた初期ページが表示されました。次はlocalhost:82、wp_test_82の方もログインできるか試してみます。

Wordpress管理画面ダッシュボード
localhost:82の方も無事にWordPressの管理画面にログインすることができました。

これでローカル環境でWordPressを好きなようにカスタマイズしたり、デザインの勉強やPHPやHTMLタグ、CSSなども自由に試すことが可能になります。

お気づきかと思われますが、MAMPもWordPressも無料で使えるので、有料のレンタルサーバーなどを契約しなくても、自分のパソコン内で無料で自由に構築できるようになりました。

本番環境と同じテーマやプラグインを導入して、記事やコンテンツもエクスポートしたものをインポートすることでローカル環境でテストすることもできます。

ローカル環境のWordPressを削除して再構築する方法

ローカル環境のWordPressが不要になった、または再構築するための手順を学びたい時があったとします。

今回であれば「wp_test_81」のフォルダにインストールしたWordPressを削除するのであれば、まずはフォルダ内のファイルとフォルダを全て削除します。

次にデータベースも削除すれば、wp_test_81のフォルダに作成したWordPressは削除されます。

再度、データベースを作成して、wp_test_81のフォルダ内にWordPressをコピー、ブラウザでlocalhost:81にアクセスすれば、WordPressを再構築することができます。

さらにローカル環境のWordPressを増やしたい場合

  1. httpd.confのListenポートを増やす
  2. httpd-vhosts.confのVirtualHostのポートとフォルダの指定を記述する
  3. データベースを新しく作成する
  4. フォルダを作成してWordPressの本体をコピーする
  5. localhost:の後に指定したポート番号を付け加えてブラウザで開く

上記の手順でさらに複数のWordPressを構築、設置することができます。

まとめ

WordPressについては、自分のパソコン内でローカル環境を構築できない場合、レンタルサーバーや広告の表示されるWordPress、または制限のあるWordPressでなければ無料では触ることが難しいです。

こうしてMAMPを利用して、自分のパソコンでローカル環境を構築できるようになればより深くWordPressを学べるようになります。

また、WordPressが何かの拍子に壊れてしまったり、動かなくなるという不安や悩みついても、ローカル環境で再構築やバックアップの手順をしっかりと学ぶことで、必ず解消されます。

普段なら試せないようなテーマ、プラグインの組み合わせなどもローカル環境で試してみることで、新しいデザインや機能についても詳しくなれますので、テスト環境、ローカル環境でWordPressを構築したいと考えたら、ぜひともMAMPを利用してみてください。