MAMPを導入してPCのローカル環境にワードプレスをインストールする方法

ウェブサイトを公開するときは、htmlやcssなどで作成したファイル群をサーバーにアップロードする必要があるのですが、サーバーにアップロードされたファイルはアクセス制限などをかけない限りは基本的に誰でも閲覧できる状態になります。

新規公開やリニューアル予定のウェブサイトなどが構築段階のところで見られてしまうと良くないので、対策の一つとしては公開前はサーバーにファイル群をアップロードせずにローカル環境でブラウザチェックをするというのが簡単なのですが、ワードプレスのようにphpファイルで構成されていてなおかつデータベースも必要となると、デフォルトのPC環境ではローカルでチェックすることができません。

自分も初めてワードプレスでウェブサイトを構築したときには、ローカルで表示を確認したいんだけどどうすればいいんだろうと悩んだものでしたｗ
htmlと同じ要領でphpファイルをブラウザで開こうとしても白い画面しか表示されなくて、なぜだぁーって焦りました。

今回は、MAMPというアプリケーションをインストール導入して、ローカルでワードプレスサイトをブラウザチェックできる環境を構築する為の初期設定をメモしておきます。

使用PC:Mac

1.MAMPのインストール

MAMPの公式サイトでダウンロードページから最新バージョンを落とします。

https://www.mamp.info/en/downloads/

記事を書いている現時点では3.5が最新バージョンです。

ダウンロードすると、ダウンロードフォルダにパッケージが追加されるので、こちらをクリックしてインストールを開始します。

アプリケーションフォルダにMAMPというフォルダが追加されます。

メモ：MAMPをインストールすると、一緒にMAMPProのフォルダもインストールされていますが、これは自動的にくっついてくるので、Proの方を利用しない場合はそのまま放置で問題ないです！

2.MAMPの初期設定

MAMPを起動したら初めに設定を確認しす。

「Web　サーバ」のタブを開くとデフォルトのドキュメントルートの設定がみられます。
デフォルトではMAMPのフォルダの中のhtdocsというフォルダが設定されており、このフォルダにphpファイルを保存すとローカル上での動作確認ができます。
ドキュメントルートを変更したい場合にはフォルダアイコンをクリックして参照するフォルダを変更することも可能です。

次に「ポート」タブで「WebとMySQLのポートを80と3306に設定」をクリックしてポートの設定を変更します。
私の場合にはこれをやらないとmysqlのサーバーが正常に開けなかったり、トップの「オープンWebStartの」メニューがグレーアウトしていたのですが、こちらの設定にしたらうまくいきました。

トップ画面のApacheサーバーとMySQLサーバーの両方にチェックが入り、「オープンWebStartの」ボタンが有効にになったら準備完了です。

「オープンWebStartの」をクリックすると、MAMPのスタートページが開きます。
URLはlocalhost/MAMP/?language=Japaneseでも表示さるはずです。

こんな感じ

スタートページではphpの設定やmysqlのユーザー名・パスワードの設定なども確認できます。

メニュー上の「私のウェブサイト」をクリックすると、デフォルトで設定してあるドキュメントルートにアクセスします。

最初は何もファイルを作成していないので、試しにサンプルのファイルを作成して確認してみます。

試しに以下のコードをindex.phpとしてhtdocs内に保存してみます。

<?php
echo 'hello mamp in my new folder!';
?>

次に動作確認をしてみましょう。
ちゃんとphpで書いたコードが動いてくれるのか。。
スタートページの「私のウェブサイト」をクリックして、作成したファイルのページにアクセスします。

どうでしょう？画面上にhello mamp in my new folder!と表示されていれば先ほどのindex.phpが表示されているということですね！
まずはこれでローカル上でphpが動作することは確認できました。ふぅ

3．mysqlの動作確認

ワードプレスを導入するにはphpの他にmysqlが必要になるので、mysqlの動作確認もします。
MAMPの初期画面でMySQLサーバーにチェックが入っていれば大丈夫です。

✳︎チェックが入っていないときは、phpMyAdminのユーザー名やパスワードが違っていることがあるので、コンフィグファイルで直接設定を書き換えます。
参照：http://pk-brothers.com/458/

MAMPのスタートページメニューにあるツール＞phpMyAdminをクリックすると、phpMyAdminのページが開きます。ちゃんとデータベースが表示されていればmysqlの動作もオッケーですね。

mysqlが正常に動作していないと、エラーページとエラーの原因が記載されているページが表示されて、軽く焦りますが、これを乗り越えればmysqlは無事に使えます。
エラーに関しては色々ケースがあると思いますがここでは詳しくは記載しません。

4.phpMyAdminでワードプレス用のテーブルを準備

mysqlの設定が完了したら、phpMyAdminを開いてデータベースの中身をチェックすることができるようになります。
スタートページのMySQLのセクションにphpMyAdminのリンクがあるのでこちらをクリックするとphpMyAdminのページが開きます。

「データベース」タブをクリックしてデータベースが表示されたら、「データベースを作成する」の下にワードプレスに使う用のデータベース名を入力してデータベースを作成します。
ここではひとまず「wordpress」というデータベースを作成します。

するとデータベースにwordpressが追加されているのが確認できますね。これでワードプレすを導入するためのデータベースが準備できました。

5.ワードプレスのインストールと初期設定

phpとmysqlが動作することが分かったので、いよいよワードプレスをローカル上で表示して見たいと思います。
まずはワードプレスのファイル群を公式サイトよりダウンロードしましょう。

ワードプレスのサイトhttps://ja.wordpress.org/

ダウンロードしたフォルダを解凍して「wordpress」のフォルダごとhtdocsにコピーします。

htdocsフォルダにwordpressというフォルダを追加したので、ローカル上でワードプレスのトップにアクセスするには以下のURLでアクセスします。
【http://localhost/wordpress】

ブラウザで確認すると、ワードプレスの初期設定画面が表示されます。
ここからは通常のワードプレスインストール時と同じ手順で初期設定をしていきます。

「さあ、始めましょう！」をクリックすると
データベース接続のための詳細を入力する画面が表示されるので必要事項を入力します。
ここでは先ほど作成したデータベースを使用するので「wordpress」をデータベース、ユーザー名とパスワードはデフォルトのままなので「root」、データベースのホストは「localhost」で設定。

「送信」をクリックして無事にデータベースが接続されると。。

インストール無事完了の画面が出たらいよいよ「インストール実行」で。。。