WordPressのローカル開発環境をMAMPでMacに構築する方法

WordPressのローカル開発環境をMAMPでMacに構築する方法

WordPressテーマのカスタマイズなどをサーバーで動いているサイト上で行うと、失敗した時「ページが真っ白。頭も真っ白」な状況になりかねません…

そんなことにならないためにも、PC上で動くWordPressサイトを「MAMP」というソフトを使って構築するための手順です。

MAMPでMacにWordPressの開発環境を準備する

よっひー(@yosiakatsuki)です。

WordPressテーマのカスタマイズをサーバー上で行うと、失敗した時にページを真っ白にしてしまい、管理画面にも入れない…といった大変な状況になることが時々ありますね。

(僕は過去2度ほどやらかしました)

そんなことにならないためにも、PHP部分などはローカル環境でカスタマイズすることをおすすめしてます。

…ということで、今回はWordPressなどのWEBサイトの動作に必要なWEBサーバーやデータベースなどをPC上に構築できるソフト「MAMP」を使って、ローカルでWordPressを動かすまでの手順をザクザクと説明します

MAMPのインストール

MAMPのダウンロード

MAMPの公式ページからインストーラーをダウンロードする

まずはMAMPのサイトからインストーラーをダウンロードします。

上の写真の「Download」ボタンか、MAMP(灰色の像)の下にある「Download」ボタンからダウンロードページへ

インストールするOSを選択してDownloadボタンを押します

インストールするOSを選んで「Download」!

今回はMacへのインストール方法で説明します。

インストール作業

ダウンロードしたMAMPのインストーラーを実行してインストール作業を進めます

インストーラーを実行してインストールを進めます。

途中、利用規約の同意などありますが、基本的にはデフォルト設定でOKです。

特に難しい設定もなく、インストールが完了しました!

インストール完了!

アプリケーションフォルダにMAMPのフォルダが出来上がります

MAMPのインストールが完了すると、アプリケーションフォルダに上の画像のようなフォルダが出来上がります。

PROじゃない方を使いますので覚えておいて下さい。

MAMPの設定

MAMPを起動

さっそくMAMPを起動します

起動時にPRO版を実行するか聞かれる…

最初に「PROを起動するか」聞かれた場合は、起動時の確認メッセージの設定をOFFにして、「Launch MAMP」でフリー版を起動します

MAMPが起動しました!

MAMPが起動しました。

設定の確認

設定を確認していきます

一番左の歯車アイコンから設定をしていきます。

起動時にサーバーを開始するように設定する

MAMP起動時に自動でサーバー起動されるように設定しておくと便利

「Start/Stop」の設定で一番上の「Start servers」にチェックを入れておくと、MAMP起動時に自動でサーバー起動してくれるので便利です!

ポートの確認

ポートの確認をしておきます

続いてポートの確認です。

別に変更しなくても問題ないですが、都合が悪いようであれば適宜変更して下さい。

ちなみに今回は変更せずに進めます。

PHPバージョンの確認

PHPバージョンの確認・切り替えはコチラから

続いてPHPのバージョン確認。

もっと古いバージョンを選択する方法は別途紹介します。

サーバーの起動

WEBサーバーを起動します

それではWEBサーバーを起動してみましょう!

一番右の電源アイコンを押してサーバーを起動!

MySQLがネットワークの警告を受けることがありますが、OKします

ネットワークの警告が表示された場合は許可してあげて下さい。

ようこそページが表示されてWEBサーバーが実行されました

「ようこそ!」と書かれたページが表示されて起動完了です!

MAMPで実行中のサイトはブラウザにlocalhost:8888と入力すれば確認出来ます。
(ポートは設定に応じて変えて下さい)

ドキュメントルートはMAMPフォルダのhtdocsフォルダになります

ドキュメントルートは/Applications/MAMP/htdocsです。

サーバーの停止

サーバーの停止は電源ボタンをもう一度押します

サーバーをとめる場合は緑色になった電源アイコンをもう一度クリックしてあげて下さい。

MAMPにWordPressをインストール

WordPressのダウンロード・設置

MAMP環境が準備できたら続いてWordPressをインストールしていきます。

WordPress本体をダウンロードします

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

wordpressフォルダの中身をhtdocsフォルダに保存する

ダウンロードしたzipファイルを解凍して、出てきたwordpressフォルダの中身を/Applications/MAMP/htdocsにコピーして下さい

ひとまずこれでWordPress本体の設置は完了です!

データベースの用意

続いてデータベースを準備します

データベースの作成はlocalhost:8888/phpmyadminへアクセスし、phpMyAdminの管理画面から行います

データベースをphpMyAdminから作成する

左メニューの「New」をクリックして表示されたページの「データベースを作成する」の部分に作成するデータベース名を入力し「作成」!

データベースの準備はこれでOK

WordPressのインストール作業

最後にWordPressのインストール作業です。

ファイルの設置とデータベースの作成が出来たらlocalhost:8888へアクセスします

WordPressのインストール作業を開始します

インストール開始ページが表示されるので「さあ、始めましょう!」ボタンを押してインストールを開始します。

作成したデータベースの情報を入力していきます

最初にデータベースの情報を入力します。

先程作ったデータベースの名前を入力し、ユーザー名とパスワードはrootにします。
(MAMPの場合はMySQLのユーザー・パスワードがrootになっています)

データベースの情報に問題がなければ次に進みます

データベースの設定が完了したら次へ進みます

WordPressサイトのタイトルやユーザー情報を入力してインストール作業は完了です!

サイトのタイトルや、ユーザー情報を入力して「WordPressをインストール」ボタンを押せばインストール完了です!!

WordPressのインストールが完了して、管理画面が表示されました

インストールされたWordPressの管理画面が表示されます。

自分のPC・Mac上にWordPressサイトが立ち上がりました!

localhost:8888へアクセスするとこんな感じ。

自分のPC上にWordPressサイトが立ち上がりました!

お疲れ様です!

WordPressのカスタマイズし放題!

これでWordPressのローカル環境の完成です!

サイトが止まる心配もなくカスタマイズできますね!

あとは記事データや画像をローカルにコピーして本番サイトとほぼ同じような状態で動かしたいところですが…

それはそれでいろいろな手順があるので別途記事にしたいと思います。

ではまた。