WordPressのローカル環境を構築してテーマを安全にカスタマイズしよう!【 MAMP 】

WordPressのローカル環境を構築してみよう♪ WordPress
さくらもち
ブログのデザインをカスタマイズしたい時、本番環境だと大胆にいじれなくない?
ウサギさん
うん……カスタマイズ中に表示がくずれたらこまっちゃうの……
モチ
メンテナンス状態にしてもいいけど、テスト環境でカスタマイズできたら安全だよね

今回はこんなお悩みを解決します!

本記事は下記のような状況の時にお役に立てる内容となっています。

  • ・WordPressのデザインをローカル環境で安全にカスタマイズしたい
  • ・レンタルサーバーを契約する前にローカル環境でWordPressを体験してみたい

どちらの場合も、ローカル環境を構築してWordPressをインストールすることで解決できます!

この記事では、ローカル環境構築 ⇒ WordPressをインストール ⇒ ブログテーマのインストール、までを画像多めでご説明しますので、手順通りに進めてもらえれば誰でも簡単にローカル環境を構築することができますよ♪

 記事でわかること

  • ・ローカル環境の構築方法
  • ・WordPressのインストール方法
  • ・テーマのインストール方法

WordPressのローカル環境を構築しよう!

はじめに、今回ご紹介する構築は下記環境で行います
その他の環境で行いたい場合、若干手順が異なる可能性がありますので、予めご了承ください。

  • OS:Windows10
  • ソフトウェア:MAMP
  • ブラウザ:Google Chrome

MAMPをダウンロードする

ローカル環境の構築には、無料ソフトウェア『MAMP』を使います
下記リンク先のFree DownloadからMAMPをダウンロードしましょう。

・MAMP公式サイト https://www.mamp.info/en/windows/

MAMP公式サイトのFree Downloadをクリック

Windows版は右側の「MAMP&MAMP PRO 4.1.1」をクリックしてダウンロードしてください。

Windows版MAMPをダウンロード

ダウンロードできたら、下のアイコンをダブルクリックしてインストールに進みます

MAMPのアイコン

MAMPをインストールする

インストールのウィンドウが表示されたら、下記のように進めてください

  • 1:MAMP PRO、Install Apple Bonjourのチェックを外して、Nextをクリック
  • 2:I accept the agreementにチェックを入れて、Nextをクリック
さくらもち
MAMP PROは有料版だからチェックを外すのね♪
MAMPインストール手順1、手順2

次は、MAMPをインストールする場所を変更したりできますが、特に問題なければそのままNextをクリックします。

MAMPインストール手順3、手順4

最後にデスクトップにショートカットアイコンを作りたい場合はチェックを入れて、Installをクリックしてください。
インストールが始まります。

MAMPインストール手順5、手順6

「Finish」を押してインストールが完了したら、デスクトップにショートカットアイコンを作成した場合は下のアイコンが作られるので、これでMAMPがインストールされました!

MAMPのデスクトップアイコン

MAMPを起動する

では、MAMPを起動してみましょう
アイコンをダブルクリックすると、下のようなMAMPのウィンドウが表示されます。

通常問題なければ、Apache ServerとMySQL Serverが緑色に点灯して接続できます

MAMPを起動したところ
ウサギさん
わたしの環境だと、緑色に点灯しなかったの……

稀に「Apacheのport:80が使われていて起動できない」とエラーが表示されることがあります
この場合は、下の画像のようにクリックして「port:81」を割り当ててください

Apacheのportを変更する
モチ
「port:81」を割り当てても接続できなかったよ……

なるほど……では下の方法もお試しください。これでほとんどの方は接続できるはずです。

  • MAMP ⇒ Preferences ⇒ PHPタブを選び、PHPのStandard Versionを7.2.14に変更する
PHPのStandard Versionを7.2.14に変更する

ブラウザで表示できるか確認する

無事Apacheサーバーに接続されたら、一回ブラウザでローカル環境の表示確認をしてみましょう!
下記のように、ブラウザのURL欄に入力してみてください。

  • localhost と入力。または
  • localhost:81 と入力 ※port:81に変更した方

ちなみに僕は、port:81に変更したので、localhost:81と入力しています。
そして、下のような画像のページが表示されたら成功です!

ブラウザで表示確認

いま表示されているページはMAMPの下記ディレクトリのindex.phpを表示しています

  • C:\MAMP\htdocs

上記がルートディレクトリで、その下層にディレクトリを作成すればサブディレクトリとして表示することができます。

  • 例えば、C:\MAMP\htdocsにwpというディレクトリを作成したら、ブラウザのURL欄にlocalhost/wpと入力すると、wpディレクトリ内のページが表示される

ここまでがMAMPによるローカル環境の構築方法でした。
次の章では、ローカル環境にWordPressをインストールしていきます。

さくらもち
一気にやって疲れたー! コーヒーでも淹れましょ♪
ウサギさん
さくらもちちゃん♥ パンケーキ焼こうかなぁ♪
モチ
モチもおもち焼くっ

WordPressをインストールしよう!

この章では、ローカル環境に、WordPressをインストールする方法をご紹介します

WordPressをダウンロードする

下記リンク先からWordPress本体をダウンロードしましょう。

・WordPress.org 日本語 https://ja.wordpress.org/

WordPressを入手

WordPress 5.3.2 をダウンロードをクリックしてダウンロード開始。

WordPressをダウンロード

WordPressのファイルを解凍する

ダウンロードしたらzip形式で圧縮されているので解凍してください

WordPressを解凍

MAMPのルートディレクトリ「C:\MAMP\htdocs」に、WordPressをインストールする用のサブディレクトリを作成します。 下の画像の例では、「wp」ディレクトリを作成しました

MAMPのルートディレクトリにサブディレクトリを新規作成

先ほどダウンロードして解凍したWordPress本体の中身をすべて選択し、コピーしてください

WordPress本体の中身をすべて選択してコピー

「C:\MAMP\htdocs\wp」に、WordPress本体の中身をペーストしてファイルの準備は完了です。

WordPress本体の中身をペースト

データベースを新規作成する

WordPressをインストールするにはデータベース(MySQL)が必要です。
MAMPからphpMyAdminを開いて、データベースを新規作成しましょう

MAMPのウィンドウを開いて、「Open WebStart page」をクリックしてください
ブラウザにMAMPのStartページが表示されます。

MAMPのOpen WebStart pageをクリック

Startページが表示されたら、Tools ⇒ phpMyAdminを選択してください

また、MySQLの箇所に書いてある、UserとPasswordをメモしておきます。デフォルトではどちらも「root」になっているはずです。

Tools ⇒ phpMyAdminを選択

phpMyAdminを開いたら、次の手順でデータベースを作成してください

  • データベースタブをクリック ⇒ 任意のデータベース名を入力 ⇒ 作成するボタンをクリック ⇒ 左サイドに作成したデータベース名が表示されているか確認
データベースを新規作成する

データベースを作成できたら、WordPressのインストール準備は完了です!
早速インストールに移りましょう。

さくらもち
やっとここまできたぁー!
ウサギさん
あともう少しだね……♪

WordPressをインストールする

ブラウザで先ほど作成したwpディレクトリにアクセスします

  • localhost/wp と入力。または
  • localhost:81/wp と入力 ※port:81に変更した方

下のような画面が表示されるので、「さぁ、始めましょう!」をクリックしてください。

WordPressにようこそ画面

次の画面で、データベース名、ユーザー名、パスワードを入力して、送信ボタンをクリック

データベース名phpMyAdminで作成したデータベース名を入力
ユーザー名MAMPのStartページで確認したUserを入力
パスワードMAMPのStartページで確認したPasswordを入力
データベース接続のための詳細入力画面

インストール実行ボタンをクリックします。

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

「ようこそ」画面が表示されます。
下記の通りに必要項目を入力し、最後に「WordPressをインストール」をクリックしてください。
※ちなみにローカル環境なのでメアドは適当でも大丈夫です笑

サイトのタイトルサイトのタイトルを入力
ユーザー名任意のユーザー名を入力
パスワード任意のパスワードを入力
メールアドレス任意のメールアドレスを入力
ようこそ画面

無事WordPressがインストールされました!
「ログイン」を押してログイン画面に移ります

成功しました!画面

ログイン画面が表示されるので、先ほど決めた「ユーザー名」と「パスワード」を入力して管理画面にログインしてください

ログイン画面

管理画面が表示されましたね! ここからはすでにレンタルサーバーを借りてブログを運営されている方なら同じように操作して大丈夫です笑

試しに一回トップページも表示してみましょう。

管理画面
トップページ

以上が、ローカル環境にWordPressをインストールするまでの全手順でした。
長かったですが、ここまでお疲れ様でした♪

この後は、テーマをインストールしてカスタマイズしたり、下書き代わりにブログの記事を書いてみたりと、ローカル環境なのでお好きなようにいろいろお試しください^^

さくらもち
やったぁ♪ これで本番環境にアップする前にテーマをカスタマイズできるね!
モチ
おもち焼けたよっ
ウサギさん
まだ焼いてたの……

テーマをインストールしよう!

無事ローカル環境にWordPressをインストールできたところで、テーマのインストール方法をご紹介しますね。
今回は無料テーマ「Cocoon」を使ってご説明しますが、有料テーマでも基本的に手順は同じです。

Cocoonをダウンロードする

下記リンク先からCocoonをダウンロードしましょう。

・Cocoon | WordPress無料テーマ https://wp-cocoon.com/

Cocoonをダウンロード

「ダウンロード」をクリックして、ダウンロードページに移動します。
通常は、CocoonテーマとCocoon子テーマをセットでダウンロードすれば問題ないです

ただ環境によっては、親テーマをインストールする際にエラーがでてしまうことがあるので、その時はCocoon 低サイズ版(要自動アップデート)をダウンロードしてください

Cocoonテーマをダウンロード

ダウンロードしたら、親テーマ、子テーマ共にzipで圧縮された状態のままでOKです。

Cocoonのzipファイル

Cocoonをインストールする

WordPressの管理画面から、下記手順でテーマのアップロード画面に遷移してください。

  • 外観 ⇒ テーマ ⇒ 新規追加 ⇒ テーマのアップロード
テーマのアップロード画面までの手順

「ファイルを選択」ボタンをクリックし、親テーマのzipファイルを選択します。

親テーマのzipファイルをアップロード

「今すぐインストール」をクリックで、アップロードした親テーマがインストールされます。

親テーマをインストール

再度テーマのアップロード画面に行き、「ファイルを選択」ボタンを押して子テーマのzipファイルを選択し、「今すぐインストール」をクリックします

子テーマのzipファイルをアップロード

これで子テーマもインストールされますので、最後に「有効化」ボタンを押して子テーマを有効化しましょう

子テーマをインストール

テーマ一覧画面で、「Cocoon Child」が有効化されていればOKです。
「Cocoon 低サイズ版(要自動アップデート)」を選んだ方は、親テーマの「今すぐ更新」をクリックして最新版にアップデートしてくださいね。

子テーマが有効化されているか確認

念のため、ブログのトップページを確認。
ちゃんとCocoonが適用されていますね♪

Cocoonが適用されているか確認

最後に:WordPressのローカル環境を構築しよう!

今回はMAMPによるローカル環境の構築、WordPressのインストール、Cocoonテーマのインストール方法までをご紹介しました!

記事冒頭でも書きましたが、下記のような悩みをこの記事で解決できていたら幸いです。

  • ・WordPressのデザインをローカル環境で安全にカスタマイズしたい
  • ・レンタルサーバーを契約する前にローカル環境でWordPressを体験してみたい

あ、最後に念のため……ローカル環境の作業が終わったら、MAMPの「Stop Servers」を押して、接続を解除しましょう。
そのままPCを落としても問題なさそうですが、気になる方はしっかり終了させておいてください笑

MAMPの接続を解除

それでは、今回はこの辺で!

さくらもち
♪~ このボタンは光らせてみようかな~、ルンルン
ウサギさん
さくらもちちゃん、カスタマイズ楽しそう……♪
モチ
最後までご覧いただき、ありがとうございましたっ