WordPressでローカル環境の作り方【macOS&MAMP】

  • PR
  • ローカル開発環境
WordPressでローカル環境の作り方【macOS&MAMP】

今回は、MacでWordpressのローカル環境をつくる方法について詳しく解説してゆきます。

この記事はMacBookPro(M1チップ搭載)の最新バージョンを使用して、2021年1月に行った作業に基づいて作成した内容です。

▼この記事を書いたひと

フリーランスのみやしも(@miyashimo_eng)です。プログラミングやWEB制作に関するIT情報を、幅広くお届けしてゆきます。

MacでWordpressのローカル環境を構築する方法を解説します

Apple

今回は、次のような方に向けて、MacでWordpressのローカル環境を構築する方法について解説してゆきます。



▼この記事はこんな方向け

  • Wordpressのオリジナルテーマを制作したい
  • Wordpressのテーマ・プラグインの動作検証を行いたい
  • プログラミング学習のためにローカル環境を作りたい



MacのパソコンでWordpressを動作させるには『ローカル環境』を用意する必要がある、ということを知っていても、実際の作り方がわからない・導入手順に心配があるという方も多いと思います。



そこで今回は、初心者でもスムーズに作業が進められるよう、構築手順について、画像付きのもとに徹底解説してゆきます。

開始から完了まで、およそ30分程度で完了できる内容です。

また、ローカル環境の構築には、MacOSでの利用に適している、『MAMP(マンプ)』というソフトを使用してゆきます。

これからWordpressのローカル環境を構築する方は必見の内容です!

ローカル環境とは

『ローカル環境』とは、自分のパソコン上でのみ動作するWEBサイトの仮想環境のことをいいます。



WEBサイトをインターネットに公開するには、通常はWEBサーバーやデータベースといった仕組みが必要ですが、ローカル環境は、これらWEBサイトの公開・動作に必要なツールをパソコンに導入して、インターネット上のWEBサイトと同じ環境を再現する形で実現します。

ローカルという言葉は、自分のパソコンのことを指すIT用語でもあります。
ローカル環境を構築すれば、例えばパソコン上に自分専用のWordpressサイトが作れたり、PHPやMySQLなどのプログラミング環境を得ることが出来ます。

対して実際のWEB上に公開されているサイトは『本番環境』とも呼ばれ、通常はレンタルサーバーを利用して構築されています。

ローカル環境の全体イメージ
ローカル開発環境・本番環境のイメージ図

ローカル環境・本番環境とでは、WEB上に公開されていない(ユーザーからアクセスが発生しない)点が大きく異なります。この上でも『ローカル環境』を導入すれば、次のようなメリットを得ることが出来ます。



▼ローカル環境のメリット

  • サーバーがなくてもWEBサイトの制作を始める事ができる
  • アップデートやプラグインの検証を本番環境に影響せず行える
  • インターネットに接続していなくても作業を進める事ができる
本番環境からリスクを伴う作業を切り離せるという意味では、安全にサイトを運用して行く上でも重要な役割があると言えます。

以上のようにローカル環境を利用すれば、プログラミング作業のみならず、Wordpressのサイト運営に関する多くのメリットが発生します。



このほかWEBサイトの制作では『ローカル環境⇒本番環境』の順番に作業をしていくことが一般的な手法でもあるため、WEBデザイナーやWEB制作系のエンジニアにとっては、ローカル環境は必須ともいえる存在です。

ローカル環境は、自分のパソコン上でのみ動作するWEBサイトの仮想環境のことを言います。エンジニアやWEBデザイナーといったサイト制作者のみならず、Wordpressを利用している全ての人にとって導入のメリットがあります。

MAMPについて

MAMP
MAMP(マンプ)

Macのパソコン上にローカル環境を作成するにはいくつか方法がありますが、今回は一般的にも広く利用されている『MAMP(マンプ)』というソフトウェアを使用してゆきます。



MAMPはWEBサイトの動作に必要なツールが利用できる無料のソフトウェアです。MAMPを利用すれば、ソフトウェアの名前の由来にもなっている、Apache・MySQL・PHPの3つのツールをパソコンに一括して導入することが出来ます。



▼MAMPのソフトウェア名の由来

  • M:Mac
  • A:Apache(WEBサーバー)
  • M:MySQL(データベース)
  • P:PHP(プログラミング言語)
MacのパソコンでWordpressのローカル環境を構築するなら、無くてはならないソフトと言えます!
MAMP利用イメージ
MAMPの利用イメージ
作業に対して難しいイメージを持たれるかたも多いと思いますが、いずれもMAMPの『コントロールパネル』というツールを利用してほとんどクリック操作で進めることができます。

作業の流れについて

Wordpressのローカル開発環境を構築するために、今回は次のような手順で作業をすすめてゆきます。



▼今回の作業内容

  1. MAMPをインストールする
  2. Wordpressをインストールする
すべて画像付きで詳しく解説してゆきますので、初心者の方でも安心してついてきてくださいね。

前置きが長くなってしまいましたが、それではスタートします。

STEP1. MAMPのインストール

MAMP
MAMP(マンプ)

まずはローカル環境用のソフトウェアであるMAMPのインストールから行います。

インストーラーを取得する

公式サイトのダウンロードと書かれた所から、MAMPのインストーラーをダウンロードします。



▼MAMP公式サイト

MAMP

※クリックすると別ウィンドウで開きます

MAMPをダウンロードする
MAMP公式サイト

この際には、自分のパソコンのOSの種類に合ったバージョンを選択する様にします。

MAMPのインストーラーを選択する
MAMPのインストーラーを選択する

ちなみにWindowsのパソコンでもMAMPを利用できますが、Windowsの場合はMAMPではなく『XAMPP(ザンプ)』というソフトウェアを使用するのがおすすめです。



XAMPPを使用したローカル環境の構築手順については、つぎの記事が参考になります。

MAMPをインストールする

続けてインストーラーを実行して、MAMPのインストールを行います。

MAMPのインストーラー
MAMPのインストーラー
特別な設定は必要ありませんので、ここでは他のアプリと同様に、インストーラーにしたがって作業を進めてゆけば大丈夫です。
mac install 1
MAMPのインストール①
mac install 2
MAMPのインストール②
mac install 3
MAMPのインストール③
mac install 4
MAMPのインストール④
mac install 5
MAMPのインストール⑤
mac install 6
MAMPのインストール⑥
mac install 7
MAMPのインストール⑦

インストールの完了後にFinderでアプリケーションの一覧を開くと、MAMPが追加されていることが確認できます。

インストールが完了したMAMP
MAMPのインストール⑧

また、この内の『MAMP PRO』と書かれたアプリは有料版のみ使用できますが、MAMP PROは今回は使用しないため、アンインストールしてしまっても問題ありません。

▼MAMP PRO のアインインストール方法
MAMP PROのアイコンメニューから『パッケージの内容を表示』を選択した後、開いたディレクトリを『Contents ⇒ MacOS』とたどり、中に含まれている『MAMP PRO Uninstaller』のファイルを実行する。

以上でMAMPのインストール作業は終わりです。

MAMPのコントロールパネル

続けてMAMPのコントロールパネルを起動させます。MAMPのコントロールパネルは次の場所にあります。

MAMPのコントロールパネル①
MAMPコントロールパネルの場所
例)MAMPコントロールパネルの場所
/Application/MAMP/MAMP.app

MAMPコントロールパネルの起動時には次のようなウィンドウも表示されますが、左下のチェックボックスを外しておけば、次回以降表示されることはありません。

MAMPのコントロールパネル②

MAMPのコントロールパネルを開いたら、続けてサーバーを起動させておきましょう。



コントロールパネルの右上にある『Start』をクリックするとサーバーが起動します。また、この状態でMAMPに含まれるApacheやMySQLといったツールが利用できる様になります。



反対に、サーバーが起動した状態で『Stop』をクリックするとサーバーが停止します。

MAMPサーバーの起動と終了
MAMPのコントロールパネル
サーバーの起動・終了はMAMPでもっとも行う操作のひとつです。やり方を覚えておきましょう!

以上でMAMPのインストールやコントロールパネルの準備は完了です。

STEP2. Wordpressのインストール

Wordpress(ワードプレス)
Wordpress(ワードプレス)

MAMPのインストール作業が終わったら、今度はWordpressをインストールする作業を進めてゆきます。

Wordpressをダウンロードする

ローカル環境にWordpressをインストールするために、まずは本体のファイルを入手します。以下のサイトから『Wordpress日本語版』のファイルをダウンロードしましょう。



▼Wordpress日本語サイト

Wordpress日本語版のサイトを開く※クリックすると別ウィンドウで開きます

Wordpress日本語版のダウンロード
Wordpress(ワードプレス)の日本語サイト

上記サイトを開いたら、トップページの『Wordpressをダウンロード』のボタンを押して、zipファイルをダウンロードします。zipファイルをPC上で解凍すると、次のようなWordpressのファイル一式が取得できます。

wordpressファイル
Wordpress(ワードプレス)のファイル一式
上記はいずれもWordpressを構成をするファイルであり、プログラミング言語の『PHP』で記述されています。

Wordpressを設置する

取得したWordpressのファイル一式を、MAMPに含まれる次のディレクトリに移動させます。

例)Wordpressの移動先
/Application/MAMP/htdocs

MAMPのディレクトリに移動させた実際の状態は次のようになります。

MAMPに設置したWordpress
MAMPに設置したWordpress

また、設置したWordpressのディレクトリのパスは、次の作業で使用するため控えておく様にしましょう。今回の作業例だとパスは次のようになります。

例)Wordpressのディレクトリ
/Application/MAMP/htdocs/wordpress
上記以外のディレクトリに設置しても後の作業を進めることも出来ますが、パスに日本語が含まれているとApache・Wordpressの動作に不具合が発生する恐れがあります。パスの内容には注意する様にしましょう。

WEBサーバーを設定する

設置したWordpressにブラウザからアクセスできる様にするために、WEBサーバーである『Apache』の設定ファイルを変更します。



Apacheの設定ファイルは次の場所にあります。

例)Apacheの設定ファイル
/Application/MAMP/conf/apache/httpd.conf

Apacheの設定ファイルを開いたら、ファイルの末尾に次の設定内容を追記します。



# wordpress
Listen 50000
<VirtualHost localhost:50000>
  ServerName localhost:50000
  DocumentRoot "/Application/MAMP/htdocs/wordpress"
  <Directory "/Application/MAMP/htdocs/wordpress">
      Options Indexes FollowSymLinks Includes ExecCGI
      AllowOverride All
      Require all granted
  </Directory>
</VirtualHost>
この際のDocumentRoot、Directoryの部分に書かれているパスは、さきほど自分のPC上に設置したWordpressフォルダのパスに置きかえる様にします。

追記した内容を端的に説明すると『http://localhost:50000』という自分のパソコンでのみ使用できるURLを使用して、設置したWordpressにアクセスできる様にする。といった意味合いになります。



このほか、ポート番号の部分を50001、50002、50003・・・といった風にずらしつつ設定を追記してゆけば、ローカル開発環境に複数のWordpressサイトを設置する事もできます。

設定ファイルを保存したら必ずApacheの再起動を行うようにしましょう。Apacheの再起動を行うには、MAMPコントロールパネルで『Stop⇒Start』の順にボタンを押します。
Apacheの再起動をしないと設定内容が反映されないので、この作業をお忘れなく。

Wordpressにアクセスする

Apacheの再起動が終わったら、この時点で一度、MAMPに設置したWordpressにアクセスが出来るかを確認してみます。



Wordpressにアクセスするには、先ほどの設定ファイルにも追記した次のURLを使用します。

▼WordpressにアクセスするURL
http://localhost:50000/

設定が上手くいっていると、WEBブラウザでは次のような画面にアクセスできます。

Wordpressへのアクセスを確認する
Wordpressのインストール画面

上記は、MAMP環境に設置したWordpressのインストール画面になります。

この画面が表示出来ていれば、今までの作業が上手くいっている事の確認となります。また、MAMPを使用したローカル環境の構築作業が成功している事にもなります。

ただしこの時点では、Wordpressの画面にもある通り、つづけて作業する必要があることが分かります。

WordPress へようこそ。作業を始める前にデータベースに関するいくつかの情報が必要となります。以下の項目を準備してください。

データベース名
データベースのユーザー名
データベースのパスワード
データベースホスト
テーブル接頭辞 (1つのデータベースに複数の WordPress を作動させる場合)
続けてWordpressのインストール作業を進めてゆきましょう!

データベースを作成する

ここからは、Wordpressで使用するためのデータベースを準備してゆきます。

データベースとは情報を蓄積するためソフトウェアのことを言います。Wordpressでは『MySQL』という種類のデータベースを、記事などの文章データを保存するために使用してゆきます。

MySQLのデータベースを作成するために、先ずはMAMPコントロールパネルの『WebStart』を押して、MAMPのスタート画面を開きます。

phpMyAdminの開き方①
MAMPコントロールパネル

MAMPのスタート画面を開いたら、続けて画面左上のメニューから『Tools⇒phpMyAdmin』を選択します。

phpMyAdminの開き方②
MAMPのスタート画面

するとブラウザ上に『phpMyAdmin』と書かれた画面が表示されます。

phpMyAdmin
phpMyAdmin
phpMyAdmin(ピーエッチピー・マイアドミン)は、MySQLをWEBブラウザから管理することが出来るデータベースの管理ツールです。MAMPでは、このソフトウェアを通してMySQLデータベースの各種操作を行います。

多くはWEBサービス・システム開発におけるプログラミング作業の過程で使用されるツールですが、とはいえ、今回のWordpressの利用では、難しい作業が発生することは基本的にはありません

初心者の方も安心して作業をすすめて下さいね。
今回はWordpressで利用するデータベースの作成をするために、3ステップで済むかんたんな作業のみを行います。

▼データベースを作る3つの手順

  1. 画面左上にある『新規作成』のメニューを選択する
  2. データベース名のところに『wordpress』を、その右の選択肢で『utf8_general_ci』を選択する
  3. 『作成』ボタンを押してデータベースの作成を完了させる



上記の順番にしたがって作業を進めてゆきましょう。

MySQLデータベースの作成②
phpMyAdminでデータベースを作成する方法

以上の操作を行うと、MySQL上に新しいデータベースが作成されます。作成したデータベースについて、phpMyAdminでは次のように確認ができます。

MySQLデータベースの作成③
phpMyAdminで作成したデータベース
今回は『wordpress』という名前でデータベースを作成しましたが、データベースの名前は任意の内容に変えることも出来ます。

また、作成時点のデータベースは中に何も入っていない空の状態ですが、データベースに対するデータ挿入などの作業はすべてWordpressから自動的に行われます。よって、ここでのこれ以上の作業は必要ありません。



今回Wordpress用に作成したデータベースの情報をまとめると、次のような内容になります。



▼データベースの情報

データベース名

wordpress

ユーザー名

root

パスワード

root

ホスト名

localhost



また、この際のデータベース名以外の情報は、MAMPスタートページの真ん中あたりにある『MySQL』の項目を開くことで確認できます。

MySQLデータベースの情報
MAMPスタートページ
後に続くWordpressのインストール作業をすすめる上でも上記のデータベースの情報が必要となりますので、作業をおこなったらメモなどに控えておくと後の作業がスムーズになります。
以上でデータベース作成の作業は終わりになります。

インストール作業を完了させる

MySQLのデータベースの作成が終わったら、再び『Wordpressの画面(http://localhost:50000)』を開いて、残りの インストールの作業を進めてゆきます。



Wordpressの画面を開いたら『さあ、始めましょう!』のボタンを押して、次のページに進みます。

Wordpressのインストール①
Wordpressのインストール作業①

するとWordpressで使用するデータベースの情報を入力を行うページが開きますので、先ほど作成したデータベースの情報を入力してゆきます。

Wordpressのインストール作業②
Wordpressのインストール作業②

ここで控えておいたデータベースの情報を使います。



画面に対して『データベース名』『ユーザー名』『パスワード』『データベースのホスト名』の情報を入力してゆきましょう。 (※テーブル接頭辞はデフォルトの”wp_”のままでOKです)



以上の入力が終わったら『送信』をクリックして次に進みます。データベースの設定が正しく通ると次の画面に進みますので、続けて『インストール実行』ボタンを押します。

Wordpressのインストール作業③
Wordpressのインストール作業③

続く画面では、Wordpressで使うサイト名や、管理画面にログインするユーザーの情報を入力します。

Wordpressのインストール作業④
Wordpressのインストール作業④

順番に『サイトのタイトル』『ユーザー名』『パスワード』『メールアドレス』を入力してゆきましょう。 (※後から変える事も出来るので仮の内容でもOKです)

ただし、この時に登録するユーザーの情報は管理画面にログインするために必要なので、必ず控えておくようにします。

入力が終わったら、最後に『Wordpressをインストール』ボタンを押します。インストールが無事に終わったら次の画面に移動します。

Wordpressのインストール作業⑤
Wordpressのインストール作業⑤

続く画面で『ログイン』ボタンを押すと、Wordpressのログイン画面に移動できます。

Wordpressのインストール作業⑥
Wordpressのインストール作業⑥

最後に情報を入力して『ログイン』をクリックすると、Wordpressにログインできます。

ログインするには先ほど入力した『ユーザー名(メールアドレス)』と『パスワード』を使用します。
Wordpressのインストール作業⑦
Wordpressのインストール作業⑦

Wordpressを利用したことがある方にとってはお馴染みとも思いますが、上記がWordpressの管理画面になります。



今回の作業目的のとおり、あくまでパソコン上に構築したWordpressのローカル開発環境ですので、この画面にはインターネットを通して外部からアクセスすることは出来ません。



とはいえそれ以外の記事投稿、テーマ・プラグインの導入、各種カスタマイズといったWordpressの基本機能は、レンタルサーバーなどに設置したWordpressと同じように利用することが可能です。

以上でMacのパソコンにWordpressのローカル環境を作る作業はすべて完了になります。

以降はローカル環境をWordpressにおける各種作業に役立てることが出来ます。



▼Wordpressローカル環境の活用例

  • Wordpressオリジナルテーマの制作
  • Wordpressの各種カスタマイズ作業
  • アップデート・テーマ・プラグインの動作検証
ここまでの作業、本当にお疲れ様でした!

この記事のまとめ

今回は、Wordpressのローカル環境を作成する方法について詳しく解説しました。



Wordpressのローカル環境には、オリジナルテーマの制作やアップデート・プラグインの検証など、WEBサイトの制作者や運営者を問わず、さまざまな使い道があります。



このほか、サイトの改修や検証といったリスクを伴う作業を本番間環境から切り離すことができるため、安全なサイト運営が出来るという意味でも大きなメリットが生まれます。



Wordpressのローカル環境をお持ちでない方は、今回の作業手順を参考にぜひ構築にトライしてみて頂ければと思います。

今回は以上となります。最後までお読みいただき、ありがとうございました!

関連記事

最新記事