MAMPでローカル環境にWordPressサイトを構築する方法【Mac編】

MAMPでローカル環境にWordPressサイトを構築する方法

WordPressでサイトを作成していくと、いろんなカスタマイズを試してみたくなることがある。そんなとき役に立つのが「ローカル環境」でサイトを作っておくことです。

ローカル環境を作っておくと、パソコン上にWordpressがインストールできるため、インターネット上にはサイトが公開されません。つまり、自分だけが閲覧できるサイトを構築することができます。

もしこんな悩みがあればとっても便利です。

  • WordPressサイトを作る練習がしたい(いきなり公開してくない)
  • 気になるプラグインを試しに使ってみたい
  • 新しいテーマの見え方・機能を事前に確認したい
  • 追加CSSを加えてみたいけど、どうなるかわからないので試す環境が欲しい
  • 好き勝手カスタマイズできる練習サイトがあると嬉しい

ここでは、MAMP(マンプ)というフリーソフトを使って、あなたのMacにローカル環境を作る方法をご紹介します。

とっても便利なので、ぜひ構築してください。WordPressでのサイト構築はより一層はかどるし、楽しくなると思います。

ローカル環境とは?

ローカル環境の専門的な定義は正直よくわかりませんが、ざっくり説明すると下図のようなイメージです。

ローカル環境とは
ローカル環境とは?

「誰にも見られることがない、自分だけの練習サイトを作ることができる」と思ってください。

ローカル環境という「WEBサイト構築の練習環境」が手に入るということです。

ではさっそく、あなたのMacの中にローカル環境を構築する方法を解説していきます。

内容を確認しながら手を動かして、ローカル環境を作ってみてくださいね。

MAMPを使ったローカル環境の作り方

MAMPを使うために必要なことは2つです。

  1. MAMPのインストール
  2. MAMPの初期設定

この2つの作業について解説していきます。

画面を見ながらあなたのペースで設定を進めてみてください。


MAMPをインストールしよう

最初にMAMPの公式サイトにアクセスして、Free Download(フリーダウンロード)をクリックしましょう。


Appleのロゴマークの下のボタンをクリックして、Mac用のローカル環境をダウンロードしましょう。

MAMPのmacバージョンをダウンロード
Mac用のローカル環境をダウンロードしよう

ダウンロードできたら、ダウンロードしたファイルを開きましょう。

ダウンロードしてMAMPのファイル
ダウンロードしてファイルを開こう

下図の画面が表示されるので「続ける」をクリック

MAMPのインストール(大切な情報)
続けるをクリック

使用許諾契約も「続ける」をクリック

MAMPのインストール(使用許諾契約)
続けるをクリック

インストール先も「続ける」をクリック

MAMPのインストール(インストール先)
続けるをクリック

「インストール」をクリック(※インストール先はそのままでOKです。)

MAMPのインストールをクリック
インストールをクリック

インストールの許可を出すためにパスワードを入力ましょう。パソコンにログインするときのパスワードと同じものを入力してください。

MAMPのインストール許可
パスワード入力して許可を出そう

インストール完了がでたらOKです。右下の「閉じる」をクリックしましょう。

MAMPインストール完了画面
この画面が表示されたらインストール完了

インストーラはゴミ箱に入れちゃってOKです。

MAMPインストーラはゴミ箱に捨てる
インストーラは捨ててOK

MAMPの初期設定方法

MAMPを探して起動しましょう。グレーのゾウさんが目印です。

MAMPアプリのアイコン
グレーの像のアイコンがMAMP

MAMPアプリの起動方法❶:Finderのアプリケーションから起動

Finderのアプリケーションから『MAMP』ファイルを選択し、その中にあるMAMPアプリを開く。

MAMPアプリの起動方法
「アプリケーション」→「MAMPフォルダ」
MAMPアプリの起動
グレーのゾウさんを起動しよう

MAMPアプリの起動方法❷:Launchpadを使って起動する

MAMPをLaunchpadから起動する
LaunchpadからMAMPを起動しよう

MAMPを起動後、下図のような画面が開いたら、左下のチェックマークを外して、左上の×ボタンをクリックしよう。

MAMP最初のガイドライン
左下のチェックは外しておこう!

この画面になったら、設定スタートです。

MAMPスタート画面
ここが初期設定のスタート画面

画面左上にある『MAMP』をクリックして、『Preference』をクリックしましょう。

MAMPのPreferenceをクリック
環境設定からPreferenceをクリック

すると、こんな画面が出てきます。

MAMPの環境設定画面
MAMPの環境設定画面
  • General
  • Ports
  • PHP
  • Web Server
  • MySQL
  • Cloud

これらを設定していきます。なんだか難しそうですが、実際には「General」を少しいじる程度です。とっても簡単なので、安心してください。


General

下図のような状態にしましょう。

MAMPのGneralの設定
2つのチェックを入れておこう
  • Start servers
  • Stop servers

この2つにチェックが入った状態にしておきましょう。


Ports

デフォルトのまま(そのまま)でOKです。

MAMPのPortsの設定
画面のようにデフォルトのままでOK

PHP

デフォルトのまま(そのまま)でOKです。

MAMPのPHPの設定
画面のようにデフォルトのままでOK

Web Server

デフォルトのまま(そのまま)でOKです。

MAMPのWeb seversの設定
画面のようにデフォルトのままでOK

MySQLとCloud

残り2つもデフォルトのままでOKです。特にいじる必要はありません。

MAMPのMySQLの設定
現在のバージョンが表示されるだけ
MAMPのCloudの設定
設定しなくてOK

設定ができたら、右下の「OK」をクリックして、次の設定に進んでいきましょう。

MAMP設定のOKをクリック
設定ができたら「OK」をクリック

MAMPにWordPressをインストールする準備方法

ここからはローカル環境にWordPressをインストールする方法を解説していきます。

はじめにStart serversをクリックしましょう。

MAMPのスタートボタンをクリック
Start Serversをクリック!

クリックして電源アイコンが緑色になったら、真ん中の「Open WebStart page」をクリックします。

MAMPのスタートボタンを押した後
電源アイコンが緑色になればOK
Open WebStart page」をクリック
「Open WebStart page」をクリック!

するとこのような画面が自然と開きます。

MAMPのスタートページ
自動でこのようなページが開く

このページの中にある、「phpMyAdmin」をクリックしましょう。(下の画像を参照してください。)

「phpMyAdmin」をクリック
「phpMyAdmin」をクリックしよう!

クリックすると、このような画面が開きます。

MAMPのデータベースの作成画面
このような画面が表示される

「Databases(データベース)」をクリックします。

「Databases(データベース)」をクリック
「Databases(データベース)」をクリック

下図のようなデータベースの画面が表示されます。

MAMPデータベース作成画面
このような画面が表示されればOK

この画面で、次の通りに入力&選択して「作成」をクリックしてください。

mampのデータベース設定
赤枠の部分を設定しよう!

Database name(データベース名)はわかりやすい任意のもので入力してあげてください。

ここでは「wordpress」と名付けました。

Collation(照合)の部分は、デフォルトの「utf8_general_ci」のままで大丈夫です。

万が一、別のものになっている場合は、「utf8_general_ci」を見つけて、選択してください。

最終的には下記のようになっています。

wordpress+「utf8_general_ci」 

MAMPのデータベースの作成画面の入力後
画面のように入力してみよう

入力ができたら「Create」をクリックしましょう。

Createをクリック
Createをクリック

今作成したデータフォルダが左に表示されていればOKです。

データベースの完成
左に作成したデータベース(wordpress)が表示されていればOK

ここまで作業ができたら、一旦別のタブを開いて、次の作業に移っていきましょう。

今度はWordPressのインストールです。


WordPressをインストールしてサイトを構築する

WordPress の公式サイトにアクセスして、WordPressをインストールしましょう。


画面右上の「Wordpress」を入手をクリックして、画面中央のボタンからWordPressをダウンロードしましょう。

WordPressをダウンロード
WordPressをダウンロードしよう

ダウンロードできたら、ダウンロードしたWordpressのzipファイルを開きましょう。ファイルをクリックして、zipファイルを展開してあげてください。

こんな感じになります。

WordPressのzipファイルを開いた状態
WordPressのzipファイルを展開した状態にする

そうしたらFinderを開いた状態で、『コマンド(⌘)+N』を押して、新しいFinderのウィンドウを開きましょう。

こんな感じ。

Finderで2つのウィンドウを並べる
Finderで2つのウィンドウを並べる

新しいウィンドウを開いたら、次の手順で、フォルダを見つけてください。

「アプリケーション」→「MAMP(フォルダ)」をクリック

MAMPアプリの起動方法
「アプリケーション」→「MAMPフォルダ」

「MAMP(フォルダ)」の中の「htdocs」をクリック

「htdocs」フォルダをクリック
「htdocs」フォルダをクリック

空っぽの「htdocs」フォルダを開く。

空っぽの「htdocs」フォルダを開く
「htdocs」フォルダを開くと中身は空っぽの状態

この空っぽの「htdocs」フォルダに、先ほどダウンロードして展開しておいたWordpressの中身をすべて移行します。

全てのファイルを移動させる
「Wordpress」から「htdocs」へ全てのファイルを移動させる

移行するとこうなります。

ファイルの移動完了
「Wordpress」から「htdocs」へ全てのファイルの移動完了

ここまでできたらブラウザに戻って、次のアドレスにアクセスしてください。

http://localhost:8888/

※ブラウザはGoogle Chromeがおすすめです。

上記アドレスにアクセスすると、このような画面が開くので、「さあ、始めましょう!」をクリックしてください。

ローカル環境でのワードプレスの設定画面
「さあ、始めましょう!」をクリックして最後の設定開始

下図のような画面が開くので、必要項目を入力していきます。

WordPressとMAMPの接続
「ユーザー名」と「パスワード」を入力しよう

「データベース名」には、先述の作業で作成したデータベースの「wordpress」が自動的に入っています。

「データベースのホスト名」には「localhost」と自動で入力されているのでそのままでOKです。もし入力されていなければ、「localhost」と入力してください。

  • ユーザー名
  • パスワード

この2つに入力する内容はMAMPのスタートページから確認できます。

MAMPのMySQLの確認
スタート画面からMySQL情報を確認しよう
ローカル環境のMySQL情報を入力する
MySQL情報を入力しよう

入力が完了したら「送信」をクリックしましょう。するとインストール実行の画面が表示されます。

データベース接続情報の入力
ユーザー名&パスワードを入力後は「送信」をクリック

「インストール実行」をクリックしてください。

ワードプレスのインストールを実行する
インストール実行をクリック

インストール実行をクリックすると、「WordPressへようこそ」の画面になります。ここであなたがこれから利用していくローカル環境の『サイト名』や『ログイン情報』を入力してあげてください。

すべて入力したら「WordPress をインストール」をクリックしましょう。

「検索エンジンがサイトをインデックスしないようにする」にもチェックを入れておきましょう。

WordPressの必要情報を入力
必要情報をすべて入力して「WordPressをインストール」をクリック

「成功しました!」と表示されれれば、ローカル環境の構築は成功です。

「ログイン」をクリックして、管理画面にログインしてみてください。

ログインをクリック
この画面が出たらログインしてみよう

ログインをクリックするとローカル環境へのログイン画面が表示されます。この画面は、いつでもアクセスできるようにブックマークしておきましょう。

ローカル環境へのログイン画面
ログイン画面はブックマークしておこう!

こんな感じで管理画面が表示されれば、ローカル環境の構築成功です。

WordPressのローカル環境の管理画面
ローカル環境の管理画面

ローカル環境でゼロからサイトを構築していく場合は、これでOKです。この状態からWordPressのサイトを構築していきましょう。

もしあなたがすでにWordPressのサイトを持っているなら、そのデータをエクスポートして、ローカル環境にインポートしてあげましょう。

その方法を次に解説していきます。


既存のWordPressサイトのデータをインポートしよう

▼最初は「既存のWordPressサイト」での作業

あなたの既存サイト(実際にWEB上で公開されているWordPressのサイト)の管理画面にログインしてください。

管理画面の左のメニューの中から、「ツール」→「エクスポート」を選択してください。

エクスポートをクリック
「ツール」→「エクスポート」をクリック

エクスポートの画面に来たら、「すべてのコンテンツ」を選択して、エクスポートファイルをダウンロードしてください。

「すべてのコンテンツ」を選択して、エクスポートファイルをダウンロード
「エクスポートファイル」をダウンロードしよう

ここからは「ローカル環境」での作業

ダウンロードができたら、ローカル環境の管理画面に戻ります。

ローカル環境の管理画面の左のメニューの中から、「ツール」→「インポート」を選択してください。

「ツール」→「インポート」を選択
「ツール」→「インポート」を選択してクリック

WordPressから「今すぐインストール」をクリックします。

WordPressから「今すぐインストール」をクリック
「今すぐインストール」をクリックしよう

その後、「インポーターの実行」をクリックしてください。

WordPressインポーターの実行
「インポーターの実行」をクリック

下図のような画面が開いたら、先ほどWordPressからエクスポートしたファイルを選択してあげましょう。

「ファイルを選択」をクリック
ファイルを選択をクリック
エクスポートしたファイルを選択
エクスポートした本サイトのファイルを選択
ファイルをアップロードしてインポート
ファイルを選択したら「インポートボタン」をクリック

「ファイルをアップロードしてインポート」のボタンをクリックしてから、下図のような確認画面が出てきたら、あなたの都合に合わせて設定をしましょう。設定ができたら、「実行」を押してください。

WordPressのインポート画面
必要な設定をして「実行」をクリック

インポートが完了すると下図のような画面になります。

この画面が表示されたら「ではお楽しみください!」をクリックして、実際のローカル環境のサイトを確認してみてください。

WordPressのインポート完了画面
「ではお楽しみください!」をクリック

いくつかのファイルはエラーとなりダウンロードできないこともありますが、これであなたの既存サイトのコピーサイトが完成した状態です。


さいごに

ローカル環境の設定と構築は以上になります。

あとは実際にローカル環境を生かしてどんどんサイトを構築していきましょう!


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です