CommentWordPressでサイトを作成していくと、いろんなカスタマイズを試してみたくなることがある。そんなとき役に立つのが「ローカル環境」でサイトを作っておくことです。ローカル環境を作っておくと、パソコン上にWordpressがインストールできるため、インターネット上にはサイトが公開されません。自分だけが閲覧できるサイトを構築することができます。こんな悩みがあればとっても便利です。WordPressサイトを作る練習がしたい(いきなり公開してくない)気になるプラグインを試しに使ってみたい新しいテーマの見え方・機能を事前に確認したい追加CSSを加えてみたいけど、どうなるかわからないので試す環境が欲しい好き勝手カスタマイズできる練習サイトがあると嬉しいここでは、MAMP(マンプ)というフリーソフトを使って、あなたのMacにローカル環境を作る方法をご紹介します。便利なので、ぜひ構築してください。WordPressでのサイト構築はより一層はかどるし、楽しくなると思います。さいごにローカル環境とは?ローカル環境の専門的な定義は正直よくわかりませんが、ざっくり説明すると下図のようなイメージです。ローカル環境とは?「誰にも見られることがない、自分だけの練習サイトを作ることができる」と思ってください。ローカル環境という「WEBサイト構築の練習環境」が手に入るということです。あなたのMacの中にローカル環境を構築する方法を解説していきます。内容を確認しながら手を動かして、ローカル環境を作ってみてくださいね。MAMPを使ったローカル環境の作り方MAMPを使うために必要なことは2つです。MAMPのインストールMAMPの初期設定この2つの作業について解説していきます。画面を見ながらあなたのペースで設定を進めてみてください。Download(フリーダウンロード)をクリックしましょう。MAMP公式サイトAppleのロゴマークの下のボタンをクリックして、Mac用のローカル環境をダウンロードしましょう。Mac用のローカル環境をダウンロードしようダウンロードできたら、ダウンロードしたファイルを開きましょう。ダウンロードしてファイルを開こう下図の画面が表示されるので「続ける」をクリック続けるをクリック使用許諾契約も「続ける」をクリック続けるをクリックインストール先も「続ける」をクリック続けるをクリック「インストール」をクリック(※インストール先はそのままでOKです。)インストールをクリックインストールの許可を出すためにパスワードを入力ましょう。パソコンにログインするときのパスワードと同じものを入力してください。パスワード入力して許可を出そうインストール完了がでたらOKです。右下の「閉じる」をクリックしましょう。この画面が表示されたらインストール完了インストーラはゴミ箱に入れちゃってOKです。インストーラは捨ててOKMAMPの初期設定方法MAMPを探して起動しましょう。グレーのゾウさんが目印です。グレーの像のアイコンがMAMPMAMPアプリの起動方法❶:Finderのアプリケーションから起動Finderのアプリケーションから『MAMP』ファイルを選択し、その中にあるMAMPアプリを開く。「アプリケーション」→「MAMPフォルダ」グレーのゾウさんを起動しようMAMPアプリの起動方法❷:Launchpadを使って起動するLaunchpadからMAMPを起動しようMAMPを起動後、下図のような画面が開いたら、左下のチェックマークを外して、左上の×ボタンをクリックしよう。左下のチェックは外しておこう!この画面になったら、設定スタートです。画面左上にある『MAMP』をクリックして、『Preference』をクリックしましょう。環境設定からPreferenceをクリックすると、こんな画面が出てきます。ServerMySQLCloudこれらを設定していきます。なんだか難しそうですが、実際には「General」を少しいじる程度です。簡単なので、安心してください。General下図のような状態にしましょう。serversこの2つにチェックが入った状態にしておきましょう。Portsデフォルトのまま(そのまま)でOKです。画面のようにデフォルトのままでOKPHPデフォルトのまま(そのまま)でOKです。Serverデフォルトのまま(そのまま)でOKです。画面のようにデフォルトのままでOKMySQLとCloud残り2つもデフォルトのままでOKです。いじる必要はありません。現在のバージョンが表示されるだけ設定しなくてOK設定ができたら、右下の「OK」をクリックして、次の設定に進んでいきましょう。設定ができたら「OK」をクリックMAMPにWordPressをインストールする準備方法ここからはローカル環境にWordPressをインストールする方法を解説していきます。serversをクリックしましょう。page」をクリックします。page」をクリック!するとこのような画面が自然と開きます。自動でこのようなページが開くこのページの中にある、「phpMyAdmin」をクリックしましょう。(下の画像を参照してください。)「phpMyAdmin」をクリックしよう!クリックすると、このような画面が開きます。このような画面が表示される「Databases(データベース)」をクリックします。「Databases(データベース)」をクリック下図のようなデータベースの画面が表示されます。このような画面が表示されればOKこの画面で、次の通りに入力&選択して「作成」をクリックしてください。name(データベース名)はわかりやすい任意のもので入力してあげてください。ここでは「wordpress」と名付けました。Collation(照合)の部分は、デフォルトの「utf8_general_ci」のままで大丈夫です。万が一、別のものになっている場合は、「utf8_general_ci」を見つけて、選択してください。最終的には下記のようになっています。画面のように入力してみよう入力ができたら「Create」をクリックしましょう。Createをクリック今作成したデータフォルダが左に表示されていればOKです。左に作成したデータベース(wordpress)が表示されていればOKここまで作業ができたら、一旦別のタブを開いて、次の作業に移っていきましょう。今度はWordPressのインストールです。公式サイトにアクセスして、WordPressをインストールしましょう。公式サイト画面右上の「Wordpress」を入手をクリックして、画面中央のボタンからWordPressをダウンロードしましょう。WordPressをダウンロードしようダウンロードできたら、ダウンロードしたWordpressのzipファイルを開きましょう。ファイルをクリックして、zipファイルを展開してあげてください。こんな感じになります。WordPressのzipファイルを展開した状態にするそうしたらFinderを開いた状態で、『コマンド(⌘)+N』を押して、新しいFinderのウィンドウを開きましょう。Finderで2つのウィンドウを並べる新しいウィンドウを開いたら、次の手順で、フォルダを見つけてください。「MAMP(フォルダ)」の中の「htdocs」をクリック「htdocs」フォルダをクリック空っぽの「htdocs」フォルダを開く。「htdocs」フォルダを開くと中身は空っぽの状態この空っぽの「htdocs」フォルダに、先ほどダウンロードして展開しておいたWordpressの中身をすべて移行します。「Wordpress」から「htdocs」へ全てのファイルを移動させる移行するとこうなります。「Wordpress」から「htdocs」へ全てのファイルの移動完了ここまでできたらブラウザに戻って、次のアドレスにアクセスしてください。Chromeがおすすめです。上記アドレスにアクセスすると、このような画面が開くので、「さあ、始めましょう!」をクリックしてください。下図のような画面が開くので、必要項目を入力していきます。「ユーザー名」と「パスワード」を入力しよう「データベース名」には、先述の作業で作成したデータベースの「wordpress」が自動的に入っています。「データベースのホスト名」には「localhost」と自動で入力されているのでそのままでOKです。入力されていなければ、「localhost」と入力してください。ユーザー名パスワードこの2つに入力する内容はMAMPのスタートページから確認できます。スタート画面からMySQL情報を確認しようMySQL情報を入力しよう入力が完了したら「送信」をクリックしましょう。するとインストール実行の画面が表示されます。ユーザー名&パスワードを入力後は「送信」をクリック「インストール実行」をクリックしてください。インストール実行をクリックインストール実行をクリックすると、「WordPressへようこそ」の画面になります。ここであなたがこれから利用していくローカル環境の『サイト名』や『ログイン情報』を入力してあげてください。インストール」をクリックしましょう。「検索エンジンがサイトをインデックスしないようにする」にもチェックを入れておきましょう。必要情報をすべて入力して「WordPressをインストール」をクリック「成功しました!」と表示されれれば、ローカル環境の構築は成功です。「ログイン」をクリックして、管理画面にログインしてみてください。この画面が出たらログインしてみようログインをクリックするとローカル環境へのログイン画面が表示されます。この画面は、いつでもアクセスできるようにブックマークしておきましょう。ログイン画面はブックマークしておこう!こんな感じで管理画面が表示されれば、ローカル環境の構築成功です。ローカル環境の管理画面ローカル環境でゼロからサイトを構築していく場合は、これでOKです。この状態からWordPressのサイトを構築していきましょう。あなたがすでにWordPressのサイトを持っているなら、そのデータをエクスポートして、ローカル環境にインポートしてあげましょう。その方法を次に解説していきます。既存のWordPressサイトのデータをインポートしよう▼最初は「既存のWordPressサイト」での作業あなたの既存サイト(実際にWEB上で公開されているWordPressのサイト)の管理画面にログインしてください。管理画面の左のメニューの中から、「ツール」→「エクスポート」を選択してください。「ツール」→「エクスポート」をクリックエクスポートの画面に来たら、「すべてのコンテンツ」を選択して、エクスポートファイルをダウンロードしてください。「エクスポートファイル」をダウンロードしよう▼ここからは「ローカル環境」での作業ダウンロードができたら、ローカル環境の管理画面に戻ります。ローカル環境の管理画面の左のメニューの中から、「ツール」→「インポート」を選択してください。「ツール」→「インポート」を選択してクリックWordPressから「今すぐインストール」をクリックします。「今すぐインストール」をクリックしようその後、「インポーターの実行」をクリックしてください。「インポーターの実行」をクリック下図のような画面が開いたら、先ほどWordPressからエクスポートしたファイルを選択してあげましょう。ファイルを選択をクリックエクスポートした本サイトのファイルを選択ファイルを選択したら「インポートボタン」をクリック「ファイルをアップロードしてインポート」のボタンをクリックしてから、下図のような確認画面が出てきたら、あなたの都合に合わせて設定をしましょう。設定ができたら、「実行」を押してください。必要な設定をして「実行」をクリックインポートが完了すると下図のような画面になります。この画面が表示されたら「ではお楽しみください!」をクリックして、実際のローカル環境のサイトを確認してみてください。「ではお楽しみください!」をクリックいくつかのファイルはエラーとなりダウンロードできないこともありますが、これであなたの既存サイトのコピーサイトが完成した状態です。さいごにローカル環境の設定と構築は以上になります。長嶋雄二コンテンツライター/DRMマーケター。柔道整復師として働く中で、整骨院のマーケティングを実践。1ヶ月間に交通事故の患者が72人通院するなど、大きな実績を残す。WEBマーケティング活動を裏で支え、集客〜売上獲得までの仕組みづくりに携わり、年間の売上が3億を超える起業家もいる。WordPressを軸にしたマーケティングの仕組みづくりが得意。自らコピーを書いたり、ディレクションを取ることで、3〜6ヶ月以内に売上につながる仕組みを完成させている。愛知出身、2児のパパ。オンラインスクール運営。いろんなマーケティングツールをいじること、試すことが大好き。