Macのローカル環境にワードプレスをインストールする方法

ワードプレスローカル環境構築イメージ

ワードプレスでサイト運営になれてくるとより高度なカスタマイズなどにチャレンジしてみたくなるものです。そんな時に公開サイトのHTMLやCSSを直接編集してしまうのは少々リスクが高いです。

間違えて削除してはいけないコードを削除してしまった場合などに自分で戻そうとしても難しいことも多く、知らない内に不具合が起きてしまうと困ってしまいます。

そんなリスクを最小に留めるためにおすすめなのがローカル環境にワードプレスをインストールして、そこで事前にテストをしてから公開サイトにアップロードする方法です。

ただローカル環境を構築するのも知識のない方には難しい作業のはず。そんな方のために今回はローカル環境を簡単に構築することができる「MAMP」の使い方を解説します。

こちらの記事を参考に是非、ローカル環境の構築にチャレンジしてみてください。

スポンサーリンク

ローカルにMAMPをインストールする

MAMPのダウンロード〜インストール

まず、はじめにMAMPの公式サイト(https://www.mamp.info/en/)にアクセスして画面左側の「MAMP FREE」の下に表示されている「DOWNLOAD」をクリックしてダウンロードページに進みます。

MAMPダウンロードページ

画面右側の「MAMP PRO」は有料版でローカル環境に複数のサーバーを構築することができるようになります。サーバーごとに異なるバージョンのプログラムを使用できるようになるため、主に技術者の使用目的に合わせたプランになっています。

1つのサイトでローカル環境を構築するだけなら無料版で問題ありません。

画面の表示が切り替わりますので、下画像のようにMacかWindowsを選択して赤枠で囲んだ「Downloads」をクリックしてファイルをダウンロードしてください。

ダウンロードをクリック

例ではMac版で解説していますが基本的にはWindows版も同じ操作になっていますので、要点のみ解説していきます。

ダウンロードが完了したらファイルをクリックしてインストーラを開きます。

インストーラを開く

インストーラが開いたら指示に従って進んでいきます。「はじめに」が表示されたら「続ける」をクリックします。

続けるをクリック

次に「大切な情報」が表示されるので、ここでも「続ける」をクリックします。

続けるをクリック

使用許諾契約が表示されますので「続ける」をクリックします。

続けるをクリック

使用許諾契約の同意を求められますので「同意する」をクリックしましょう。

同意するをクリック

次に「インストールの種類」の画面で「カスタマイズ」をクリックします。

カスタマイズをクリック

ここではMAMP無料版に加えて有料版であるMAMP PROをインストールするか選択できます。

MAMP PROのチェックを外す

今回の使用目的の場合、有料版は不要ですので、デフォルト状態ではチェックの入っているMAMP PROのチェックを外して「インストール」をクリックします。

PCのパスワードが求められるのでパスワードを入力して「ソフトウェアをインストール」をクリックします。

ソフトウェアをインストール

作業が完了すると「インストールが完了しました。」と表示されますので「閉じる」をクリックします。

閉じるをクリック

インストーラは不要になりましたので「ゴミ箱に入れる」をクリックして完了です。

ゴミ箱へ入れる

インストールが完了したらMAMPアプリを起動しましょう。

MAMPを起動

MAMPが起動したら初期設定をするので画面左の設定マークをクリックします。

歯車(設定)をクリック

はじめに「Start/Stop」の設定をします。

ここで重要なのは「Check for MAMP PRO」のチェックを外すことです。今回は有料版は関係ないのチェックを外して次項の「Ports」をクリックします。

portsをクリック

ここではポート番号を変更することができますがデフォルトの状態のままで使用できるので問題ありません。次項のPHPに進みましょう。

phpタブをクリック

ここでPHPのバージョンを選択します。最新のMAMPではPHPのバージョンが7.0以上になっています。もしもPHPのバージョンを落として使いたい方は公式サイトよりダウンロード可能です。

ここでは「Standard Version」にチェックを入れます。チェックを入れたら「Web server」に進みます。

Web serverタブをクリック

ここではドキュメントルートの変更ができます。デフォルト状態で問題はありませんが、変更をしたい方は「→」印をクリックして任意の場所を設定しましょう。「MySQL」は設定項目ではないので最後に「OK」をクリックして設定を完了します。

OKをクリック

設定が完了したら「サーバを起動」をクリックします。

サーバーを起動

PC側から許可を求められると思いますので文章を一読して許可をクリックします。

問題なく設定が完了しサーバが起動すると以下の画像のようになります。Apache、MySQL共にチェックが入り「サーバを停止」の上のマークも緑色に変わります。

サーバー停止ボタンを確認

最後に「Open WebStart Page」をクリックします。

Open WebStart Pageをクリック

ブラウザが立ち上がりMAMPのページが表示されます。
以下の画像のように「ようこそ! MAMPのインストールに成功しました。」と表示されれば設定完了です。

ローカルサイト

ワードプレス用データベース作成

次にワードプレスをインストールするためのデータベースを作成します。

「Open WebStart Page」をクリックしてブラウザにMAMPのスタートページを表示させます。

Open WebStart Page

スタートページが表示されたら画面左中央あたりにある「phpMyAdmin」をクリックしてください。

PHP My adminをクリック

PHPの管理ページが表示されるので「データベース」をクリックします。

データベース作成をクリック

ここでデータベースを作成します。

下画像の赤枠で囲んだ部分を入力します。

今回は分かりやすいように「wp-01」と入力しました。「照合順序」をクリックするとプルダウンで一覧が表示されるので「utf8_general_ci」を選択します。最後に「作成」をクリックして完了です。

作成が完了すると管理画面左側のリストに表示されます。

データベース作成画面

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

ワードプレスのインストール

まずワードプレスの公式サイトにアクセスして最新のワードプレスをダウンロードします。

日本語公式サイト(https://ja.wordpress.org/)を表示させて画面右側にある「WordPress 4.x.x をダウンロード」をクリックして最新版のワードプレスをダウンロードしてください。

ダウンロードしたzipファイルをダブルクリックして解凍させます。

WordPressモジュール

解凍させたファイルをMAMPの初期設定で設定したApacheタブに全て移動させます。

場所が分からない方はMAMPの設定画面を開いて「Web server」をクリックして下画像の赤枠部分をクリックしてください。

矢印をクリック

フォルダが表示されます。

こちらのフォルダに解凍したファイルを全て移動しましょう。解凍したフォルダのまま、まるごと移動してOKです。

移動が完了したらブラウザに「http://localhost:8888/」と入力して「Enter」をクリックします。

以下の画像のような画面が表示されるので「wordpress/」をクリックします。

WordPress/をクリック

ワードプレスの画面が表示されますので「さぁ、始めましょう!」をクリックしてデータベースの情報を入力していきましょう。

さあ始めましょうをクリック

データベースの情報を入力する画面が表示されます。

1つ1つ設定していきましょう。

WordPressインストール設定画面

データベース名:ここには先ほど作成した際に設定した「wp-01」を入力します。

  • ユーザー名:MySQLのユーザー名
  • パスワード:MySQLのパスワード
  • データベースのホスト名:MySQLのホスト名
  • テーブル接頭辞:デフォルトのままでOK

MySQLの各情報はMAMPのスタートページに表示されています。

設定内容確認画面

入力が完了したら「送信」をクリックします。

送信をクリック

送信をクリックすると以下のような確認画面が表示されるので「インストールの実行」をクリックします。

インストールの実行をクリック

ワードプレスのサイト情報を入力する画面が表示されますので通常のサイトと同じように情報を入力していきましょう。

入力が完了したら「wordpressをインストール」をクリックします。

WordPressをインストール

インストールが完了すると以下のような画面が表示されるので「ログイン」をクリックしてください。

ログインをクリック

ローカル環境ワードプレスの動作確認

ワードプレスのログイン画面が表示されるので情報を入力して「ログイン」をクリックします。

WordPressログイン画面

ログインが成功するとワードプレスの管理画面が表示されます。

管理画面

次にサイトが問題なく表示されるかを確認してみましょう。

ワードプレス管理画面の左上部のサイト名にカーソルを合わせると「サイトを表示」がありますので、こちらをクリックします。

サイトを表示

サイトが表示されました。

Twenty Seventeen

これで全ての設定が完了し、ローカル環境にワードプレスを構築することができました。
お疲れ様でした。

ローカルのMAMPを停止する方法

MAMPを停止したい場合は「サーバを停止」をクリックします。

サーバーを停止

サーバが停止すると下画像のようにサーバのマークが緑色からグレーに変わり「サーバを起動」に変わります。

グレーに変わる

MAMPを終了すると先ほどまで表示されていたローカルのワードプレスサイトもエラーになります。

接続エラー画面

MAMPを起動すれば正常に表示されますので安心してください。

これでMAMPを停止することができました。

ローカル環境の注意点

MAMPはローカル環境でワードプレスサイトを動かせるようになるので非常に便利ですがデフォルトの状態ではバックアップが取れないので作業中にデータが消えた場合などは復元することができません。

データベースのバックアップやワードプレスのバックアップは手動で行う必要があるので心配な方は手動バックアップをすることをおすすめします。

有料版ではバックアップも簡単にできますが、テスト環境として使いたい方にはそこまで必要ないと思います。大事なデータは編集前と後をしっかりとバックアップしておくことが大切です。

Macでのローカル環境の作り方まとめ

MAMPを使ってローカル環境のワードプレスをインストールする方法を解説しました。そこまで難しい作業もなく設定できるので、一度時間を作ってローカル環境を構築しておくと良いでしょう。

テストサイトやPHPやCSSの勉強をしたい方にはとても便利で活用のしがいがある方法なので、是非ローカル環境を構築してテストや勉強に役立ててください。

スポンサーリンク