WordPressテーマのカスタマイズなどをサーバーで動いているサイト上で行うと、失敗した時「ページが真っ白。頭も真っ白」な状況になりかねません…
そんなことにならないためにも、PC上で動くWordPressサイトを「MAMP」というソフトを使って構築するための手順を紹介します!
目次
MAMPでMacにWordPressの開発環境を準備する
WordPressテーマのカスタマイズをサーバー上で行うと、失敗した時にページを真っ白にしてしまい、管理画面にも入れない…といった大変な状況になることが時々あります…(僕は過去2度ほどやらかしました)
そんなことにならないためにも、PHPのコードなどはローカル環境でカスタマイズすることをおすすめしています。
…ということで、今回はWordPressなどのWebサイトの動作に必要なWebサーバーやデータベースなどをPC上に構築できるソフト「MAMP」を使って、Mac上でWordPressを動かすまでの手順をザクザクと説明します
2018年5月追記…
WordPressのローカル環境構築であればMAMPより使いやすいツールが公開されています。使い方は以下の記事をご参考にしてみて下さい▼
![簡単操作で初心者にもオススメ!WordPressのローカル開発環境を「Local by flywheel」で作る方法](https://yosiakatsuki.net/blog/wp-content/uploads/2018/05/wp-local-by-flywheel-0119-00-900x556.png)
MAMPのインストール
MAMPのダウンロード
![MAMPの公式ページからインストーラーをダウンロードする](https://yosiakatsuki.net/blog/wp-content/uploads/2017/04/local-dev-mamp-01.png)
まずはMAMPのサイトからインストーラーをダウンロードします。
上の写真の「Download」ボタンか、MAMP(灰色の像)の下にある「Download」ボタンからダウンロードページへ
![インストールするOSを選択してDownloadボタンを押します](https://yosiakatsuki.net/blog/wp-content/uploads/2017/04/local-dev-mamp-02.png)
インストールするOSを選んで「Download」!
今回はMacへのインストール方法で説明します。
インストール作業
![ダウンロードしたMAMPのインストーラーを実行してインストール作業を進めます](https://yosiakatsuki.net/blog/wp-content/uploads/2017/04/local-dev-mamp-03.png)
インストーラーを実行してインストールを進めます。
途中、利用規約の同意などありますが、基本的にはデフォルト設定でOKです。
![特に難しい設定もなく、インストールが完了しました!](https://yosiakatsuki.net/blog/wp-content/uploads/2017/04/local-dev-mamp-04.png)
インストール完了!
![アプリケーションフォルダにMAMPのフォルダが出来上がります](https://yosiakatsuki.net/blog/wp-content/uploads/2017/04/local-dev-mamp-05.png)
MAMPのインストールが完了すると、アプリケーションフォルダに上の画像のようなフォルダが出来上がります。
PROじゃない方を使いますので覚えておいて下さい。
MAMPの設定
MAMPを起動
さっそくMAMPを起動します
![起動時にPRO版を実行するか聞かれる…](https://yosiakatsuki.net/blog/wp-content/uploads/2017/04/local-dev-mamp-06.png)
最初に「PROを起動するか」聞かれた場合は、起動時の確認メッセージの設定をOFFにして、「Launch MAMP」でフリー版を起動します
![MAMPが起動しました!](https://yosiakatsuki.net/blog/wp-content/uploads/2017/04/local-dev-mamp-07.png)
MAMPが起動しました。
設定の確認
![設定を確認していきます](https://yosiakatsuki.net/blog/wp-content/uploads/2017/04/local-dev-mamp-08.png)
一番左の歯車アイコンから設定をしていきます。
起動時にサーバーを開始するように設定する
![MAMP起動時に自動でサーバー起動されるように設定しておくと便利](https://yosiakatsuki.net/blog/wp-content/uploads/2017/04/local-dev-mamp-09.png)
「Start/Stop」の設定で一番上の「Start servers」にチェックを入れておくと、MAMP起動時に自動でサーバー起動してくれるので便利です!
ポートの確認
![ポートの確認をしておきます](https://yosiakatsuki.net/blog/wp-content/uploads/2017/04/local-dev-mamp-10.png)
続いてポートの確認です。
特に変更しなくても問題ないですが、都合が悪いようであれば適宜変更して下さい。
ちなみに今回は変更せずに進めます。
PHPバージョンの確認
![PHPバージョンの確認・切り替えはコチラから](https://yosiakatsuki.net/blog/wp-content/uploads/2017/04/local-dev-mamp-11.png)
続いてPHPのバージョン確認。
もっと古いバージョンを選択する方法は別途紹介します。
サーバーの起動
![Webサーバーを起動します](https://yosiakatsuki.net/blog/wp-content/uploads/2017/04/local-dev-mamp-12.png)
それではWebサーバーを起動してみましょう!
一番右の電源アイコンを押してサーバーを起動!
![MySQLがネットワークの警告を受けることがありますが、OKします](https://yosiakatsuki.net/blog/wp-content/uploads/2017/04/local-dev-mamp-13.png)
ネットワークの警告が表示された場合は許可してあげて下さい。
![ようこそページが表示されてWebサーバーが実行されました](https://yosiakatsuki.net/blog/wp-content/uploads/2017/04/local-dev-mamp-15.png)
「ようこそ!」と書かれたページが表示されて起動完了です!
MAMPで実行中のサイトはブラウザにlocalhost:8888
と入力すれば確認出来ます。
(ポートは設定に応じて変えて下さい)
![ドキュメントルートはMAMPフォルダのhtdocsフォルダになります](https://yosiakatsuki.net/blog/wp-content/uploads/2017/04/local-dev-mamp-16.png)
ドキュメントルートは/Applications/MAMP/htdocs
です。
サーバーの停止
![サーバーの停止は電源ボタンをもう一度押します](https://yosiakatsuki.net/blog/wp-content/uploads/2017/04/local-dev-mamp-14.png)
サーバーをとめる場合は緑色になった電源アイコンをもう一度クリックしてあげて下さい。
MAMPにWordPressをインストール
WordPressのダウンロード・設置
MAMP環境が準備できたら続いてWordPressをインストールしていきます。
![WordPress本体をダウンロードします](https://yosiakatsuki.net/blog/wp-content/uploads/2017/04/local-dev-mamp-17.png)
まずはWordPress公式サイトからWordPress本体をダウンロードします。
![wordpressフォルダの中身をhtdocsフォルダに保存する](https://yosiakatsuki.net/blog/wp-content/uploads/2017/04/local-dev-mamp-18.png)
ダウンロードしたzipファイルを解凍して、出てきたwordpressフォルダの中身を/Applications/MAMP/htdocs
にコピーして下さい
ひとまずこれでWordPress本体の設置は完了です!
データベースの用意
続いてデータベースを準備します
データベースの作成はlocalhost:8888/phpmyadmin
へアクセスし、phpMyAdminの管理画面から行います
![データベースをphpMyAdminから作成する](https://yosiakatsuki.net/blog/wp-content/uploads/2017/04/local-dev-mamp-19.png)
左メニューの「New」をクリックして表示されたページの「データベースを作成する」の部分に作成するデータベース名を入力し「作成」!
データベースの準備はこれでOK
WordPressのインストール作業
最後にWordPressのインストール作業です。
ファイルの設置とデータベースの作成が出来たらlocalhost:8888
へアクセスします
![WordPressのインストール作業を開始します](https://yosiakatsuki.net/blog/wp-content/uploads/2017/04/local-dev-mamp-20.png)
インストール開始ページが表示されるので「さあ、始めましょう!」ボタンを押してインストールを開始します。
![作成したデータベースの情報を入力していきます](https://yosiakatsuki.net/blog/wp-content/uploads/2017/04/local-dev-mamp-21.png)
最初にデータベースの情報を入力します。
先程作ったデータベースの名前を入力し、ユーザー名とパスワードはroot
にします。
(MAMPの場合はMySQLのユーザー・パスワードがroot
になっています)
![データベースの情報に問題がなければ次に進みます](https://yosiakatsuki.net/blog/wp-content/uploads/2017/04/local-dev-mamp-22.png)
データベースの設定が完了したら次へ進みます
![WordPressサイトのタイトルやユーザー情報を入力してインストール作業は完了です!](https://yosiakatsuki.net/blog/wp-content/uploads/2017/04/local-dev-mamp-23.png)
サイトのタイトルや、ユーザー情報を入力して「WordPressをインストール」ボタンを押せばインストール完了です!!
![WordPressのインストールが完了して、管理画面が表示されました](https://yosiakatsuki.net/blog/wp-content/uploads/2017/04/local-dev-mamp-24.png)
インストールされたWordPressの管理画面が表示されます。
![自分のPC・Mac上にWordPressサイトが立ち上がりました!](https://yosiakatsuki.net/blog/wp-content/uploads/2017/04/local-dev-mamp-25.png)
localhost:8888
へアクセスするとこんな感じ。
自分のPC上にWordPressサイトが立ち上がりました!
お疲れ様です!
WordPressのカスタマイズし放題!
これでWordPressのローカル環境の完成です!サイトが止まる心配もなくガツガツとカスタマイズできますね!
ではまた。