【Wordpress・Mac】テスト用ブログを作って自分のパソコンで動かす方法徹底解説

こんにちは、元SEをやってたmoriです。

今回は自分のブログを自分のパソコンに入れて動かす方法について紹介します。

今回お話しする内容は、公開しているブログは今まで通りに運用して、デザインやプログラムを作りかえる場合などテスト用のブログを自分のパソコンに作る方法です。

ブログを自分のパソコンで動かすことのメリット

まず最初にブログを自分のパソコンで動かすことのメリットについてお話ししましょう。

ぼくはブログのデザインを触る時などには、必ず自分のパソコンに作ったテスト用のブログで動作を確認してから本番のブログ（今見ていただいてるブログ）にアップするようにしています。

なぜそうするのか？
そのメリットについて簡単に紹介してから、具体的な方法を説明していきますね。

テスト用のブログを使う最大のメリットはこれしかありません。

失敗しても本番のブログに影響がない

最大のメリットはこれなんです。
ぼく自身のこれまでの経験から言うと、デザインやプログラムを触ると最初からうまくいくことはほぼありません。大体は失敗します。

デザインが崩れる
ブログが真っ白になってアクセスできなくなる

実際にブログのデザインやプログラムを触ってこんなことに遭遇したことありませんか？

mori

ブログが真っ白！どうしよう……

パニックになりますよね。

でも、テスト用のブログで動作確認をするようにしていたらデザインが崩れるのも、真っ白になってアクセスできなくなるのもテスト用のブログだけ。
公開しているブログにはなんら影響がありません。

安心して修正ができます。

この安心感こそが、テスト用のブログを自分のパソコンに作る最大のメリットなんです。

それでは一から順番にテスト用のブログを自分のパソコンに作っていきましょう。
ここでは、ぼくの使ってるブログの環境をもとに説明します。
あなたのブログと同じ環境かどうか確認しておいてくださいね。

ブログ：Wordpress
レンタルサーバー：エックスサーバー
パソコン：Mac

テスト用ブログの大まかな作成手順はこのようになります。

自分のパソコンにサーバー環境を準備する（ローカル環境）
サーバーからファイルをダウンロードする
サーバーからデータをダウンロードする
ローカル環境にデータをコピーする
ローカル環境に合わせてデータを修正する

それでははじめしょう！

手順1．自分のパソコンにサーバー環境を準備する（ローカル環境）

まず最初にやることは、自分のパソコンにブログが動く環境を作りましょう。
Wordpressを動かすのに必要なものはWEBサーバーとデータベースです。

なんか面倒臭そう…

って思ったあなた！
大丈夫！一発でこの環境を作ることができるソフトがあるのでめちゃくちゃ簡単ですよ。

MAMPのウェブサイトを開いて、グレーのマークのMAMPから”DOWNLOAD”をクリックします。

こんなファイルがダウンロードされるので、ダブルクリックして起動します。

ここからインストール画面になります。
「続ける」をクリックしていってください。

「続ける」をクリック

「インストール」をクリック

インストールが始まります。

インストールが完了！めっちゃ簡単でしょ。

これであなたのパソコンにWordpressが動くのに必要な環境が整いました！

手順2．サーバーからファイルをダウンロードする

次にやることは、公開しているブログのデータを取ってくること。
取ってくるデータは大きく分けてこの2つです。

画像やWordpressのプログラムファイルなど一式
データベースに格納されたデータ（ブログ記事など）

まずはファイル一式をダウンロードしましょう。

ファイルをダウンロードにするにはFTPクライアントソフトというものを使います。

FTPクライアントソフトって何？

公開されているブログはインターネット上にあるサーバーという場所に保管されています。

FTPクライアントソフトはこのサーバーに接続して、そこに置かれているファイルをダウンロードしたりアップロードしたりすることができるソフトです。

ぼくはFileZilla Clientというソフトを使っています。

上のリンクをクリックしてもらうとダウンロードページが表示されるので、ダウンロードしてくださいね。

FileZilla Clientをインストールインストールして、サーバーに接続します。
FileZilla Clientの使い方に関してはこちらを見てくださいね。

FileZilla の使い方 – FileZilla – OSDN

FileZilla Clientは左右に画面が分かれています。
左側には自分のパソコン、右側にはサーバーが表示されます。

パソコン側（ローカルサイト）とサーバー側（リモートサイト）をそれぞれこのように表示させてください。

ローカルサイト	“/Applications/MAMP/htdocs/”※1
リモートサイト	“/ドメイン/public_html”※2

※1：インストールしたMAMPフォルダの中にある”htdocs”フォルダ
※2：レンタルサーバーから指定された公開フォルダ。多くの場合はドメイン名のフォルダの中にある”public_html”です。

サーバー側に表示されたすべてのファイルを選択します。
そして右クリック「ダウンロード」。

これでサーバー側からファイルがパソコンにダウンロードされます。
ブログにアップロードした画像の数などにもよりますが、結構時間がかかるので気長に待って下さいね。

ダウンロードが完了したらOK！

手順3．サーバーからデータをダウンロードする

次はデータベースをサーバーから抜き出します。
レンタルサーバー（エックスサーバーで説明します）にログインして、サーバーパネルを開きます。

データベースという項目があるので、”phpmyadmin”をクリックしてください。

認証画面が表示されるので、ユーザー名とパスワードを入力します。

ユーザー名とパスワードの確認方法

この2つの項目はデータベースのもので、エックスサーバーやブログのユーザー名やパスワードとは違います。
忘れてしまった時にはWordpressの設定ファイルを見ると確認できますよ。

さっきパソコンにダウンロードしたファイルからこのファイルを探してください。

wp-config.php

ファイルを開けると20行目あたりに「MySQL 設定」というものが書かれているのが見つかるはず。

注目するのはこの部分。

// ** MySQL 設定 - この情報はホスティング先から入手してください。 ** //
/** WordPress のためのデータベース名 */
define('DB_NAME', 'db_name');

/** MySQL データベースのユーザー名 */
define('DB_USER', 'db_user');

/** MySQL データベースのパスワード */
define('DB_PASSWORD', 'password');

“DB_USER”に書かれている”db_user”がユーザー名。
“DB_PASSWORD”に書かれている”password”がパスワードです。

phpMyAdminというデータベースを管理する画面が表示されました。
まずは左のデータベース一覧から抜き出すデータベースを選びます。

データベース名？

すぐ上で説明した”wp-config.php”ファイルにデータベースが書かれています。
“DB_NAME”に書かれたものを選択してください。

データベースを選ぶと右側にそのデータベースの情報が表示されます。
上のタブから「エクスポート」をクリックします。

エクスポート方法で「詳細」を選択。

出力の項目では「圧縮」で”gzip形式”を選びます。
ファイルを圧縮して容量を減らすことができますよ。

生成オプションの追加コマンドでは「CREATE DATABASE/USE コマンドを追加する」にチェックを入れます。

最後に画面の一番下にある「実行」ボタンです。

データベースの中身がダウンロードされればOK。

手順4．ローカル環境にデータをコピーする

ブログのデータをパソコンのデータベースにコピーします。

パソコンのデータベース?

って思ったかも知れませんがご安心を。
さっきMAMPをインストールした時、一緒にデータベースもインストールされているんです。

MAMPの画面から”Open WebStart page”をクリックします。

MAMPのスタートページが表示されました。
「ツール」から”phpMyAdmin”をクリック。

右側にあるタブから「インポート」をクリックします。

インポートするファイルで、アップロードファイルに先ほど公開されているブログから抜き出したデータベースのファイルを選びます。
そして画面下にある「実行」をクリックしてください。

無事にデータベースがコピーできました。

手順5．ローカル環境に合わせてデータを修正する

これでファイルとデータの移動が完了しました。
ですが、まだやらないといけないとが残っています。

このままではWordpressの設定や、記事に書かれたURLが公開されたブログに合わせたものになっているので正しくブログが表示されません。

これは設定を変更していないブログの表示です。

最後に設定ファイルや記事に書かれた内容を修正していきましょう。

ブログの基本情報を変更

データベースの中に書かれているブログの基本情報。
ここにブログのURLも書かれているので変更しましょう。

MAMPのスタート画面からphpMyAdminを開けます。
画面の左にデータベースの情報が表示されているので”wp-options”をクリック。

変更するデータは2つ。
検索して探すと楽です。

タブで「検索」を選んで、定型問い合わせの欄にこのように入力して検索します。

カラム	演算子	値
option_name	IN(…)	home,siteurl

こんな感じで入力します。

2件見つかりましたね。”siteurl”と”home”、それぞれ「編集」ボタンを押して編集していきます。

“option_value”の値を”https://moori.musyozoku.com”に変更して、「実行」ボタンをクリックです。

2つの項目を修正したらこうなりました。

設定ファイルの情報を変更

WordPressで使うデータベースの情報も変更します。
編集するファイルは先ほどから何度か出てきてるwp-config.php。

変更する場所は”DB_HOST”です。”localhost”に変更します。

/** MySQL のホスト名 */
define('DB_HOST', 'localhost');

データベースにユーザーを追加

次はデータベースのユーザーを追加します。
wp-config.phpに書かれている”DB_USER”と”DB_PASSWORD”がを控えておいてくださいね。

MAMPからphpMyAdminを開きます。
そしてこの順番で操作してください。

右側の画面の一番上にある「サーバ: localhost」をクリック
タブから”User accounts”をクリック
表示された画面から”Add user account”を選択

画面が切り替わったら、ログイン情報の欄に次のように入力します。

入力項目	内容
User name	DB_USERの値
Host name	ドロップダウンメニューから「ローカル」を選択。自動的に”localhost”が設定される
パスワード	DB_PASSWORDの値
Re-type	DB_PASSWORDの値

そしてグローバル特権の”Check all”にチェックを入れます。
最後に画面したの「実行」をクリックして登録完了。

これでパソコンに作ったブログにアクセスできるようになります。
URLに”https://moori.musyozoku.com/wp-admin”と入力してログイン画面が表示されたらOKです。

記事に書かれたURLを変更

これが最後です。
記事に中に書かれているURLをローカル環境のURLに書き換えます。

記事の中に書かれたURLの書き換えには”Search Regex”というプラグインを使います。
このプラグインが入っていないなら追加してくださいね。

管理画面から「メニュー」→「Search Regex」

検索文字と置換文字を入力します。
“Search pattern”、”Replace pattern”にこのように入力します。

入力項目	内容
Search pattern	公開しているブログのドメイン (https://などがついた状態)※
Replace pattern	“https://moori.musyozoku.com”

※公開しているブログのドメインが”https://blog.com”なら”https://blog.com”と入力。

“Replace”ボタンをクリックすると、修正を行う箇所が表示されるので確認することができます。
問題なければ”Replace & Save”をクリックします。

成功したらこのような画面が表示されます。

さらに”https://”などがついていないドメイン名だけでも置換をしておきます。

入力項目	内容
Search pattern	公開しているブログのドメイン (https://などなし)
Replace pattern	“localhost:8888”

これで再度置換します。

お疲れ様でした！これでおしまいです。

まとめ

これで公開しているブログを自分のパソコン（ローカル環境）にコピーすることができました。
ちょっとややこしい部分もあるかも知れませんが、実際にやってみると意外に簡単です。

一度作ってしまえば、なにも気にすることなく自由にブログのデザインを触ることができますよ。
ブログのデザインやプログラムを触るっていう人はぜひともローカル環境にブログを作ってみてくださいね。

【WordPress・Mac】テスト用ブログを作って自分のパソコンで動かす方法徹底解説