ワードプレスでサイト運営になれてくるとより高度なカスタマイズなどにチャレンジしてみたくなるものです。そんな時に公開サイトのHTMLやCSSを直接編集してしまうのは少々リスクが高いです。
間違えて削除してはいけないコードを削除してしまった場合などに自分で戻そうとしても難しいことも多く、知らない内に不具合が起きてしまうと困ってしまいます。
そんなリスクを最小に留めるためにおすすめなのがローカル環境にワードプレスをインストールして、そこで事前にテストをしてから公開サイトにアップロードする方法です。
ただローカル環境を構築するのも知識のない方には難しい作業のはず。そんな方のために今回はローカル環境を簡単に構築することができる「MAMP」の使い方を解説します。
こちらの記事を参考に是非、ローカル環境の構築にチャレンジしてみてください。
目次
ローカルにMAMPをインストールする
MAMPのダウンロード〜インストール
まず、はじめにMAMPの公式サイト(https://www.mamp.info/en/)にアクセスして画面左側の「MAMP FREE」の下に表示されている「DOWNLOAD」をクリックしてダウンロードページに進みます。
画面右側の「MAMP PRO」は有料版でローカル環境に複数のサーバーを構築することができるようになります。サーバーごとに異なるバージョンのプログラムを使用できるようになるため、主に技術者の使用目的に合わせたプランになっています。
1つのサイトでローカル環境を構築するだけなら無料版で問題ありません。
画面の表示が切り替わりますので、下画像のようにMacかWindowsを選択して赤枠で囲んだ「Downloads」をクリックしてファイルをダウンロードしてください。
例ではMac版で解説していますが基本的にはWindows版も同じ操作になっていますので、要点のみ解説していきます。
ダウンロードが完了したらファイルをクリックしてインストーラを開きます。
インストーラが開いたら指示に従って進んでいきます。「はじめに」が表示されたら「続ける」をクリックします。
次に「大切な情報」が表示されるので、ここでも「続ける」をクリックします。
使用許諾契約が表示されますので「続ける」をクリックします。
使用許諾契約の同意を求められますので「同意する」をクリックしましょう。
次に「インストールの種類」の画面で「カスタマイズ」をクリックします。
ここではMAMP無料版に加えて有料版であるMAMP PROをインストールするか選択できます。
今回の使用目的の場合、有料版は不要ですので、デフォルト状態ではチェックの入っているMAMP PROのチェックを外して「インストール」をクリックします。
PCのパスワードが求められるのでパスワードを入力して「ソフトウェアをインストール」をクリックします。
作業が完了すると「インストールが完了しました。」と表示されますので「閉じる」をクリックします。
インストーラは不要になりましたので「ゴミ箱に入れる」をクリックして完了です。
インストールが完了したらMAMPアプリを起動しましょう。
MAMPが起動したら初期設定をするので画面左の設定マークをクリックします。
はじめに「Start/Stop」の設定をします。
ここで重要なのは「Check for MAMP PRO」のチェックを外すことです。今回は有料版は関係ないのチェックを外して次項の「Ports」をクリックします。
ここではポート番号を変更することができますがデフォルトの状態のままで使用できるので問題ありません。次項のPHPに進みましょう。
ここでPHPのバージョンを選択します。最新のMAMPではPHPのバージョンが7.0以上になっています。もしもPHPのバージョンを落として使いたい方は公式サイトよりダウンロード可能です。
ここでは「Standard Version」にチェックを入れます。チェックを入れたら「Web server」に進みます。
ここではドキュメントルートの変更ができます。デフォルト状態で問題はありませんが、変更をしたい方は「→」印をクリックして任意の場所を設定しましょう。「MySQL」は設定項目ではないので最後に「OK」をクリックして設定を完了します。
設定が完了したら「サーバを起動」をクリックします。
PC側から許可を求められると思いますので文章を一読して許可をクリックします。
問題なく設定が完了しサーバが起動すると以下の画像のようになります。Apache、MySQL共にチェックが入り「サーバを停止」の上のマークも緑色に変わります。
最後に「Open WebStart Page」をクリックします。
ブラウザが立ち上がりMAMPのページが表示されます。
以下の画像のように「ようこそ! MAMPのインストールに成功しました。」と表示されれば設定完了です。
ワードプレス用データベース作成
次にワードプレスをインストールするためのデータベースを作成します。
「Open WebStart Page」をクリックしてブラウザにMAMPのスタートページを表示させます。
スタートページが表示されたら画面左中央あたりにある「phpMyAdmin」をクリックしてください。
PHPの管理ページが表示されるので「データベース」をクリックします。
ここでデータベースを作成します。
下画像の赤枠で囲んだ部分を入力します。
今回は分かりやすいように「wp-01」と入力しました。「照合順序」をクリックするとプルダウンで一覧が表示されるので「utf8_general_ci」を選択します。最後に「作成」をクリックして完了です。
作成が完了すると管理画面左側のリストに表示されます。
これでデータベースの作成は完了です。
ワードプレスのインストール
まずワードプレスの公式サイトにアクセスして最新のワードプレスをダウンロードします。
日本語公式サイト(https://ja.wordpress.org/)を表示させて画面右側にある「WordPress 4.x.x をダウンロード」をクリックして最新版のワードプレスをダウンロードしてください。
ダウンロードしたzipファイルをダブルクリックして解凍させます。
解凍させたファイルをMAMPの初期設定で設定したApacheタブに全て移動させます。
場所が分からない方はMAMPの設定画面を開いて「Web server」をクリックして下画像の赤枠部分をクリックしてください。
フォルダが表示されます。
こちらのフォルダに解凍したファイルを全て移動しましょう。解凍したフォルダのまま、まるごと移動してOKです。
移動が完了したらブラウザに「http://localhost:8888/」と入力して「Enter」をクリックします。
以下の画像のような画面が表示されるので「wordpress/」をクリックします。
ワードプレスの画面が表示されますので「さぁ、始めましょう!」をクリックしてデータベースの情報を入力していきましょう。
データベースの情報を入力する画面が表示されます。
1つ1つ設定していきましょう。
データベース名:ここには先ほど作成した際に設定した「wp-01」を入力します。
- ユーザー名:MySQLのユーザー名
- パスワード:MySQLのパスワード
- データベースのホスト名:MySQLのホスト名
- テーブル接頭辞:デフォルトのままでOK
MySQLの各情報はMAMPのスタートページに表示されています。
入力が完了したら「送信」をクリックします。
送信をクリックすると以下のような確認画面が表示されるので「インストールの実行」をクリックします。
ワードプレスのサイト情報を入力する画面が表示されますので通常のサイトと同じように情報を入力していきましょう。
入力が完了したら「wordpressをインストール」をクリックします。
インストールが完了すると以下のような画面が表示されるので「ログイン」をクリックしてください。
ローカル環境ワードプレスの動作確認
ワードプレスのログイン画面が表示されるので情報を入力して「ログイン」をクリックします。
ログインが成功するとワードプレスの管理画面が表示されます。
次にサイトが問題なく表示されるかを確認してみましょう。
ワードプレス管理画面の左上部のサイト名にカーソルを合わせると「サイトを表示」がありますので、こちらをクリックします。
サイトが表示されました。
これで全ての設定が完了し、ローカル環境にワードプレスを構築することができました。
お疲れ様でした。
ローカルのMAMPを停止する方法
MAMPを停止したい場合は「サーバを停止」をクリックします。
サーバが停止すると下画像のようにサーバのマークが緑色からグレーに変わり「サーバを起動」に変わります。
MAMPを終了すると先ほどまで表示されていたローカルのワードプレスサイトもエラーになります。
MAMPを起動すれば正常に表示されますので安心してください。
これでMAMPを停止することができました。
ローカル環境の注意点
MAMPはローカル環境でワードプレスサイトを動かせるようになるので非常に便利ですがデフォルトの状態ではバックアップが取れないので作業中にデータが消えた場合などは復元することができません。
データベースのバックアップやワードプレスのバックアップは手動で行う必要があるので心配な方は手動バックアップをすることをおすすめします。
有料版ではバックアップも簡単にできますが、テスト環境として使いたい方にはそこまで必要ないと思います。大事なデータは編集前と後をしっかりとバックアップしておくことが大切です。
Macでのローカル環境の作り方まとめ
MAMPを使ってローカル環境のワードプレスをインストールする方法を解説しました。そこまで難しい作業もなく設定できるので、一度時間を作ってローカル環境を構築しておくと良いでしょう。
テストサイトやPHPやCSSの勉強をしたい方にはとても便利で活用のしがいがある方法なので、是非ローカル環境を構築してテストや勉強に役立ててください。