人生は宇宙だ!

カンボジア大好き!自炊大好き!そんなmoriのライフログ

*

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

   

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

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

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

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

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

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

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

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

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

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

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

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

    ブログのエラー画面

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

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

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

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

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

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

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

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

    1. 自分のパソコンにサーバー環境を準備する(ローカル環境)
    2. サーバーからファイルをダウンロードする
    3. サーバーからデータをダウンロードする
    4. ローカル環境にデータをコピーする
    5. ローカル環境に合わせてデータを修正する

    それでははじめしょう!

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

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

    なんか面倒臭そう…

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

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

    MAMPのダウンロード

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

    MAMPのインストール

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

    MAMPインストール画面1

    「続ける」をクリック

    MAMPインストール画面2

    「続ける」をクリック

    MAMPインストール画面3

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

    MAMPインストール画面4

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

    MAMPインストール画面5

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

    MAMPインストール画面6

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

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

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

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

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

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

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

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

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

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

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

    FileZilla Clientのダウンロード

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

    FileZilla の使い方 – FileZilla – OSDN

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

    FileZillaの画面

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

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

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

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

    ファイルを選択してダウンロード

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

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

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

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

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

    エックスサーバーのサーバーパネル

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

    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”に書かれたものを選択してください。

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

    phpMyAdminからデータベースを選ぶ

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

    エクスポートの設定(詳細オプション)

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

    エクスポートの設定(圧縮の設定)

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

    エクスポートの設定(データベースの新規作成)

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

    エクスポートの実行

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

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

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

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

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

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

    MAMPの画面からWebStartページを開く

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

    ツールから

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

    データベースのインポート

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

    アップロードファイルの選択

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

    インポート成功

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

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

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

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

    ブログのエラー画面

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

    ブログの基本情報を変更

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

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

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

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

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

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

    変更対象を検索

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

    wp-options(修正前)

    “option_value”の値を”http://localhost:8888″に変更して、「実行」ボタンをクリックです。

    データを変更する

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

    wp-options(修正後)

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

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

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

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

    Wordpressの設定ファイル

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

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

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

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

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

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

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

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

    ログイン情報と権限を設定

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

    ローカル環境に作ったブログのログイン画面

    記事に書かれたURLを変更

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

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

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

    Search Regexを起動

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

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

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

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

    Search Regexで文字を変更する

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

    変更が成功

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

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

    これで再度置換します。

    Search Regexで文字を変更する

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

    まとめ

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

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

    • 0
    • 0
    • 0

     - ブログ運営

  •   関連記事

    ブログに反応がなくても落ち込むな
    「ブログを頑張って書いたのにコメントがない」と落ち込むあなたに贈る言葉

    反応がなくても誰かの心には響いているんだよ ブログを長く書いていると、他のブロガ …

    ツイートの埋め込み例
    Twitterのツイートをブログに埋め込む方法

    簡単にツイートを埋め込めます 自分のブログにTwitterでつぶやいたツイートを …

    ブログ初心者よ、誰もあなたのブログを見てないから何も気にせず好きに書け!

    こんにちは、moriです。 ぼくはこの記事を書いてる2017年の時点で、ブログを …

    ポジティブの連鎖反応
    ポジティブなことを書くとテンション上がるわ!その理由はポジティブ連鎖反応が起きてハイテンションになるから

    ポジティブな感情は楽しいアイデアを次々と湧き出させる こんにちは。昔は超ネガティ …

    httpでのアクセスをhttpsへリダイレクトさせる.htaccessの設定方法

    http接続をhttpsに自動的に飛ばす手順 ブログをhttps接続できるように …

    Chromeでは緑の鍵マークが付く
    エックスサーバーでSSLを申し込む手順

    このブログをhttpsで接続できるようにしました。 WordPressで運営して …

    インプットとアウトプットのバランス
    インプットだけじゃダメなんだよ痛感。アウトプットなきインプットは新陳代謝しない体と同じで腐ってしまう

    アウトプットしなければ体は腐っていく こんにちは、ブログを書くのが趣味のmori …

    Chromeでは緑の鍵マークが付く
    WordPressで運営しているブログをhttps化する方法

    https化したかったのは2つの理由 このブログを先日https化しました。ブラ …

    ブログが書けない人は過去記事のメンテナンス
    ブログが書けない?そんな時には過去記事のメンテナンスだ!

    過去記事のメンテナンスなら書くことへのハードルが低いから書ける! こんにちは。体 …

    項目が多すぎる記事
    ひとつの記事で伝えたいことが多すぎませんか?項目を絞らないと伝わらない

    たくさんの情報を一度に処理できない いろんなサイトを見ていると時々こんなタイトル …