MAMPでローカル開発環境にWordPressをインストールする手順

WordPressの開発を行う際は、基本的にローカル開発環境を利用します。今回はMacでローカル開発環境の構築が簡単にできるアプリケーションのMAMP(マンプ)にWordPressを導入する手順についてまとめてみます。

ただ、WordPressのローカル開発環境を作るのであればLocal by Flywheelというもっと便利で、WordPressに特化したアプリケーションもあるのでそちらも検討してみてください。

Local by FlywheelでWordPressのローカル開発環境構築のハードルが一気に下がる

WordPress()のローカル開発環境を構築するツールは世の中にたくさんあります。しかしどれもサーバーの知識が無い方からするとローカル開発環境の構築は敷居が高く、「ちょっとWordPress触ってみたいなー」と思ってもなかなか手が出せなかったりします。今回紹介するLocal by Flywheel(ローカルバイフライホイール)は比較的簡単にWordPressのローカル開発環境を無料で構築する事ができます。この手のアプリは他にもたくさんありますが、その中でも断然簡単でUIも綺麗で使いやすいので、これからWordPressを勉強したい初心者の方の取っ掛...

ローカル開発環境ってなに？

WordPressで主に使用されている言語はPHPという言語ですが、ブラウザはHTML・CSS・JavaScriptの3種類しか読み込むことができません。ですから、ブラウザで読み込む前にサーバーで処理をしてPHPからHTMLに変換してからブラウザに読み込んでもらう必要があります。

サーバーを用意してそこでWordPressの開発を行っても良いのですが、サーバーを借りるためにはお金もかかりますし、ネット環境が必要になります。そこで、自分のパソコン内にサーバーと同じ環境を擬似的に構築して、PHPからHTMLに変換して自分のパソコン内で閲覧する仕組みが作られました。それがローカル開発環境(ローカルサーバー・ローカル環境)です。

色々方法はありますが、今回は代表的なアプリケーション「MAMP」を利用してWordPressのローカル開発環境を構築してみましょう。

MAMPって何？

MAMPはMacでローカル開発環境を構築するための代表的なアプリケーションです。ちなみに名前の由来はMacintosh Apache(アパッチ) MySQL(マイエスキューエル) PHPの略です。Macで使用するアプリなのでMac、Apacheは世界的に普及しているWebサーバーの事で、MySQLはデータベース、PHPはプログラミング言語、Macでそれらを利用する事ができるのでそれぞれの頭文字を取ってMAMPという名前になっています。

ちなみにWindowsであればXAMPP(ザンプ)、LinuxであればLAMP(ランプ)というアプリケーションが存在するので、OSが変わっても似たようなローカル開発環境構築アプリが存在するんだなと覚えておくと良いと思います(正確にはXAMPPとLAMPはMacでも使用しようと思えばできますし、MAMPはWindowsでも利用できるのですが、一般的にMacはMAMP、WindowsはXAMPP、LinuxではLAMPという風にそれぞれに特価して作られています)。

PHPやMySQLを利用したWebサイトやWebアプリケーションの開発や、テストにはもってこいのアプリになっています。

ちなみに、MAMPには機能が制限された無料版と、より細かい機能まで利用できるMAMP Proという有料版の2種類がありますが今回は無料版での利用を前提とします。

MAMPのインストール手順

では次にMAMPのインストール方法について見ていきましょう。

MAMPのダウンロード

公式サイトトップのMAMPアイコンの下にあるダウンロードボタンをクリックします。

バージョンに関するページに切り替わるのでここで「Download」ボタンをクリックしてインストーラーをダウンロードします。

MAMPのインストール

インストーラーのダウンロードが完了したら、そのインストーラーをダブルクリックして起動してMAMPのインストールを行います。
インストーラーはまず「はじめに」があって、その次の「大切な情報」では『MAMPとMAMP PROをインストールするので、そのフォルダの名前を変更したり削除しないようにしてください』といった内容のことが書かれています。

「使用許諾契約」を読んで「インストール先」でインストール先を選択します。

次の「インストールの種類」の下にあるカスタマイズボタンをクリックすると、MAMP PROをインストールするかどうかの選択ができます。MAMP PROが必要ない方はここでチェックを外しておくとMAMP PROがそもそもインストールされないので要らない方はチェックを外しておきましょう。

あとはインストールが始まって、数分待てばMAMPのインストールは完了です。

MAMPの使い方

WordPressをMAMPに入れる前に、軽くMAMPを触ってみましょう。アプリケーションフォルダに新しくMAMPフォルダが追加されていると思うので、その中のMAMP.appをダブルクリックしてMAMPを起動します。

MAMPを起動すると下の画像のような起動画面が表示されます。ここで「サーバーを起動」ボタンを押すとサーバーが起動して、右上の「Apache サーバー」と「MySQL Server」の横のチェックボックスが緑色になればサーバーの起動成功です。停止したい時は「サーバーを停止」ボタンを押せば停止ができます。

サーバーの起動をすると同時にブラウザが立ち上がってMAMPのスタートページが出て来ると思います(出てこない場合はMAMPアプリの真ん中にある「Open WebStart page」をクリックすれば表示されます)。

このページでMAMPに関しての情報を得ることができたり、phpMyAdmin(ピーエイチピーマイアドミン)というツールにアクセスしてデータベース(サイトの情報等)の管理を行う事が可能です。

実際に自分のPHPファイルを表示させるためには上のメニューバーにある「私のウェブサイト」というボタンをクリックすると、ローカルサーバーのドキュメントルート(一番上のファイル)が表示されます。

MAMPのドキュメントルートはデフォルトの設定だとアプリケーションフォルダにあるMAMPフォルダのhtdocsというフォルダに設定されています。このhtdocs内にPHPのファイルやフォルダを入れて先程と同様に「私のウェブサイト」のリンクからアクセスするときちんとPHPがHTMLに変換されて表示されていると思います。

ちなみに、このドキュメントルートの場所はPHP.appの一番左の「Preferences…」をクリックして「Web Server」の項目の「Document Root」から変更する事が可能ですが、何か特別な理由がない場合、特に最初のうちは変更しない方が混乱を避けられると思います。

これで基本的なMAMPの使い方はOKです。一旦MAMPアプリの方から「サーバー停止」ボタンをクリックしてサーバーの停止をしておきましょう。

MAMPにWordPressを導入する

ようやくですがWordPressを入れて設定してみましょう。まずはWordPressの公式サイトへ行きます。

WordPressのダウンロード

「ダウンロード」という見出しの右の方に「WordPress ○.○.○をダウンロード」というボタンがあるのでそれをクリックしてWordPressをダウンロードします。

ダウンロードしたWordPressファイルは、ZIPファイルになっているのでクリックして展開して先程のMAMPフォルダ内にあるhtdocs(ドキュメントルート)の中に展開したWordPressファイルを移動します。

あとはMAMPを起動して、先程説明した方法でMAMPのスタートページから「私のウェブサイト」をクリックしてみましょう。下の画像のような表示がされていますか？されていればここまでOKです。

データベースの作成

WordPressを作成するにあたって、データベースというものを作成しておく必要があります。例えばWordPressを利用する事で記事を書いて公開する事が可能になるのですが、その際に書いた記事の内容であったり、タイトルや書いた著者の情報、またそれらを管理しやすいようにIDでまとめておいたりと、ブログシステムにはあらゆる情報が必要になってきます。

それらをまとめて保存しておくのがデータベースです。用意したテンプレート(PHPファイル)に合わせて、適切な情報を送ってHTMLに変換する事でコンテンツが表示されるわけです。

WordPressを設定する際には、そのデータベースを選択しないといけないので、先にそのデータベースを作ってしまいましょう。

データベースの作成には「phpMyAdmin」というツールを利用するのですが、このツールはMAMP内に既に組み込まれています。新しくMAMPアプリから「Open WebStart page」をクリックしてMAMPのスタートページを開きます。

MySQLの見出しのすぐ下に「phpMyAdmin」と書かれたリンクがあるのでそれをクリックします。するとphpMyAdminが開きます。今回行いたい事は、WordPress用のデータベースを作成する事なので、まずはphpMyAdminの1番左の「データベース」タブを開きます。

「データベースを作成する」という項目があり、名前を入力する欄があるので後から見て分かりやすいようにwordpressという名前をつけて「作成」ボタンをクリックします。ここで付けたデータベース名は後で入力する必要があるのでちゃんと覚えておくようにしましょう。(忘れてもこのphpMyAdminを見に来ればいい話ですが…)

これでデータベースの作成は完了です。

WordPressのデータベース設定

データベースの作成が終わったら先程のドキュメントルートが表示されているページに戻って「wordpress/」と書かれたリンクをクリックしましょう。下の画像のように表示されるので「さあ、始めましょう！」をクリックしてWordPressに先程作成したデータベースの情報を登録していきます。

次のページでデータベースに関する情報を入力していきます。

データベース名	phpMyAdminで登録したデータベースの名前
ユーザー名	データベースのユーザー名を入力しますが、MAMPの場合は「root」と入力
パスワード	データベースのパスワードを入力しますが、MAMPの場合は「root」と入力
データベースのホスト名	localhostでOK
テーブル接頭辞	1つのデータベース内に複数WordPress情報を保存しておきたい場合は接頭辞を変える必要がありますが、今回はデフォルトの「wp_」のままでいきましょう(デフォルトのままだとセキュリティ状問題があるのですがローカル環境ですし、良しとします)。

入力できたら「送信」ボタンをクリックします。

ちなみにデータベースのホスト名やユーザー名とそのパスワードはMAMPのスタートページのphpMyAdminへのリンクがあった場所のすぐ下に表示されているので、何かしらエラーが起きた場合はチェックしてみてください。

データベースとの接続ができる状態なら下のようなページになるので、「インストール実行」をクリックしましょう。

WordPressの設定

いよいよこれで最後です。WordPress本体に関する情報を入力していきます。

サイトのタイトル	今から作成するWordPressサイトのタイトルを入力します(後から変更可能)。
ユーザー名	WordPressにログインする際のユーザー名を入力します。今回僕はテストでWordPressを導入するのでユーザー名は「test」にしておきます。
パスワード	WordPressにログインする際に必要になるパスワードです。
パスワード確認	文字数が少ない等、あまりに無防備なパスワードを設定している場合はパスワードの下に「非常に脆弱」と表示されるのですが、そのようなパスワードを設定する際にはここでチェックを入れる必要があります。
メールアドレス	ここで入力したメールアドレス宛に、WordPressを構築した通知メールが送られてきたりします。
検索エンジンでの表示	ローカル開発環境なので関係ありませんが、ここにチェックを入れておくとGoogleにインデックスされなくなります。

入力ができたら「WordPressをインストール」ボタンをクリックします。これでWordPressの設定は完了です。お疲れ様でした。「ログイン」ボタンを押すとWordPressのログイン画面へ移動します。試しにログインしてみましょう。

WordPressへのログイン

WordPressのログイン画面で、先程設定したユーザー名とパスワードを入力して「ログイン」ボタンをクリックします。ちなみに「ログイン状態を保存する」にチェックを入れておくと次回以降入力する手間が省けます。

ちゃんとダッシュボードが表示されていればこれにてWordPressのローカル開発環境構築は完了です。

ちなみに、次回以降WordPressを立ち上げる手順としては

MAMPアプリを起動して「サーバーを起動」する
サイト自体に行きたい場合は「http://localhost/wordpress/」にアクセスする(もしくはMAMPのスタートページから「私のウェブサイト」をクリックした後「wordpress」リンクをクリック)
管理画面に行きたい場合は「http://localhost/wordpress/wp-admin/」にアクセスする
終了したい場合はMAMPアプリから「サーバーを停止」をクリックで停止

といった流れになります。後は思う存分WordPressをいじってみましょう。