今回はこんなお悩みを解決します！
本記事は下記のような状況の時にお役に立てる内容となっています。
- ・WordPressのデザインをローカル環境で安全にカスタマイズしたい
- ・レンタルサーバーを契約する前にローカル環境でWordPressを体験してみたい
どちらの場合も、ローカル環境を構築してWordPressをインストールすることで解決できます！
この記事では、ローカル環境構築 ⇒ WordPressをインストール ⇒ ブログテーマのインストール、までを画像多めでご説明しますので、手順通りに進めてもらえれば誰でも簡単にローカル環境を構築することができますよ♪
記事でわかること
- ・ローカル環境の構築方法
- ・WordPressのインストール方法
- ・テーマのインストール方法
CONTENTS［ hide ］
WordPressのローカル環境を構築しよう！
はじめに、今回ご紹介する構築は下記環境で行います。
その他の環境で行いたい場合、若干手順が異なる可能性がありますので、予めご了承ください。
- OS：Windows10
- ソフトウェア：MAMP
- ブラウザ：Google Chrome
MAMPをダウンロードする
ローカル環境の構築には、無料ソフトウェア『MAMP』を使います。
下記リンク先のFree DownloadからMAMPをダウンロードしましょう。
・MAMP公式サイト https://www.mamp.info/en/windows/
Windows版は右側の「MAMP＆MAMP PRO 4.1.1」をクリックしてダウンロードしてください。
ダウンロードできたら、下のアイコンをダブルクリックしてインストールに進みます。
MAMPをインストールする
インストールのウィンドウが表示されたら、下記のように進めてください。
- 1：MAMP PRO、Install Apple Bonjourのチェックを外して、Nextをクリック
- 2：I accept the agreementにチェックを入れて、Nextをクリック
次は、MAMPをインストールする場所を変更したりできますが、特に問題なければそのままNextをクリックします。
最後にデスクトップにショートカットアイコンを作りたい場合はチェックを入れて、Installをクリックしてください。
インストールが始まります。
「Finish」を押してインストールが完了したら、デスクトップにショートカットアイコンを作成した場合は下のアイコンが作られるので、これでMAMPがインストールされました！
MAMPを起動する
では、MAMPを起動してみましょう。
アイコンをダブルクリックすると、下のようなMAMPのウィンドウが表示されます。
通常問題なければ、Apache ServerとMySQL Serverが緑色に点灯して接続できます。
稀に「Apacheのport:80が使われていて起動できない」とエラーが表示されることがあります。
この場合は、下の画像のようにクリックして「port:81」を割り当ててください。
なるほど……では下の方法もお試しください。これでほとんどの方は接続できるはずです。
- MAMP ⇒ Preferences ⇒ PHPタブを選び、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 5.3.2 をダウンロードをクリックしてダウンロード開始。
WordPressのファイルを解凍する
ダウンロードしたらzip形式で圧縮されているので解凍してください。
MAMPのルートディレクトリ「C:\MAMP\htdocs」に、WordPressをインストールする用のサブディレクトリを作成します。 下の画像の例では、「wp」ディレクトリを作成しました。
先ほどダウンロードして解凍したWordPress本体の中身をすべて選択し、コピーしてください。
「C:\MAMP\htdocs\wp」に、WordPress本体の中身をペーストしてファイルの準備は完了です。
データベースを新規作成する
WordPressをインストールするにはデータベース（MySQL）が必要です。
MAMPからphpMyAdminを開いて、データベースを新規作成しましょう。
MAMPのウィンドウを開いて、「Open WebStart page」をクリックしてください。
ブラウザにMAMPのStartページが表示されます。
Startページが表示されたら、Tools ⇒ phpMyAdminを選択してください。
また、MySQLの箇所に書いてある、UserとPasswordをメモしておきます。デフォルトではどちらも「root」になっているはずです。
phpMyAdminを開いたら、次の手順でデータベースを作成してください。
- データベースタブをクリック ⇒ 任意のデータベース名を入力 ⇒ 作成するボタンをクリック ⇒ 左サイドに作成したデータベース名が表示されているか確認
データベースを作成できたら、WordPressのインストール準備は完了です！
早速インストールに移りましょう。
WordPressをインストールする
ブラウザで先ほど作成したwpディレクトリにアクセスします。
- localhost/wp と入力。または
- localhost:81/wp と入力 ※port:81に変更した方
下のような画面が表示されるので、「さぁ、始めましょう！」をクリックしてください。
次の画面で、データベース名、ユーザー名、パスワードを入力して、送信ボタンをクリック。
| データベース名 | phpMyAdminで作成したデータベース名を入力 |
| ユーザー名 | MAMPのStartページで確認したUserを入力 |
| パスワード | MAMPのStartページで確認したPasswordを入力 |
インストール実行ボタンをクリックします。
「ようこそ」画面が表示されます。
下記の通りに必要項目を入力し、最後に「WordPressをインストール」をクリックしてください。
※ちなみにローカル環境なのでメアドは適当でも大丈夫です笑
| サイトのタイトル | サイトのタイトルを入力 |
| ユーザー名 | 任意のユーザー名を入力 |
| パスワード | 任意のパスワードを入力 |
| メールアドレス | 任意のメールアドレスを入力 |
無事WordPressがインストールされました！
「ログイン」を押してログイン画面に移ります。
ログイン画面が表示されるので、先ほど決めた「ユーザー名」と「パスワード」を入力して管理画面にログインしてください。
管理画面が表示されましたね！ ここからはすでにレンタルサーバーを借りてブログを運営されている方なら同じように操作して大丈夫です笑
試しに一回トップページも表示してみましょう。
以上が、ローカル環境にWordPressをインストールするまでの全手順でした。
長かったですが、ここまでお疲れ様でした♪
この後は、テーマをインストールしてカスタマイズしたり、下書き代わりにブログの記事を書いてみたりと、ローカル環境なのでお好きなようにいろいろお試しください＾＾
テーマをインストールしよう！
無事ローカル環境にWordPressをインストールできたところで、テーマのインストール方法をご紹介しますね。
今回は無料テーマ「Cocoon」を使ってご説明しますが、有料テーマでも基本的に手順は同じです。
Cocoonをダウンロードする
下記リンク先からCocoonをダウンロードしましょう。
・Cocoon | WordPress無料テーマ https://wp-cocoon.com/
「ダウンロード」をクリックして、ダウンロードページに移動します。
通常は、CocoonテーマとCocoon子テーマをセットでダウンロードすれば問題ないです。
ただ環境によっては、親テーマをインストールする際にエラーがでてしまうことがあるので、その時はCocoon 低サイズ版（要自動アップデート）をダウンロードしてください。
ダウンロードしたら、親テーマ、子テーマ共にzipで圧縮された状態のままでOKです。
Cocoonをインストールする
WordPressの管理画面から、下記手順でテーマのアップロード画面に遷移してください。
- 外観 ⇒ テーマ ⇒ 新規追加 ⇒ テーマのアップロード
「ファイルを選択」ボタンをクリックし、親テーマのzipファイルを選択します。
「今すぐインストール」をクリックで、アップロードした親テーマがインストールされます。
再度テーマのアップロード画面に行き、「ファイルを選択」ボタンを押して子テーマのzipファイルを選択し、「今すぐインストール」をクリックします。
これで子テーマもインストールされますので、最後に「有効化」ボタンを押して子テーマを有効化しましょう。
テーマ一覧画面で、「Cocoon Child」が有効化されていればOKです。
「Cocoon 低サイズ版（要自動アップデート）」を選んだ方は、親テーマの「今すぐ更新」をクリックして最新版にアップデートしてくださいね。
念のため、ブログのトップページを確認。
ちゃんとCocoonが適用されていますね♪
最後に：WordPressのローカル環境を構築しよう！
今回はMAMPによるローカル環境の構築、WordPressのインストール、Cocoonテーマのインストール方法までをご紹介しました！
記事冒頭でも書きましたが、下記のような悩みをこの記事で解決できていたら幸いです。
- ・WordPressのデザインをローカル環境で安全にカスタマイズしたい
- ・レンタルサーバーを契約する前にローカル環境でWordPressを体験してみたい
あ、最後に念のため……ローカル環境の作業が終わったら、MAMPの「Stop Servers」を押して、接続を解除しましょう。
そのままPCを落としても問題なさそうですが、気になる方はしっかり終了させておいてください笑
それでは、今回はこの辺で！
