サーバー上のwordpressをローカル環境で再現する

最近だとwebサイト制作で wordpress が絡むのは当たり前みたいな感じになっていてレンタルサーバー内でも導入がめっちゃ簡単になってたりするけど、その分その後のケアというか仕組みの理解が追いつかないこともあったりします。
その理解の一環として、今回はサーバー先行で始めた wordpress をローカルに再現するやり方をご紹介。


利用が個人でも企業でも大きな改修等を行うときにいきなり本番環境では行わずにテストができる環境で試すかと思います。本番環境とは別のサーバーだったりローカルだったり。
ローカル環境再現にはいくつかやり方はあると思いますが、ここでは xampp を使用します。

前準備 – xampp インストール

ローカルに xampp が無い方は以下の記事を参考にインストールをしてください。

準備ができたら順を追って解説していきます。
今回の解説環境は windows ですが、特に環境に左右されるものはないので Mac の方でも参考にできるかと思います。

今回は疑似的に当ブログをローカル環境で再現したいと思います。
設定上重要となる情報は仮で以下の値として解説します。

  • データベース名: db_sample
  • テーブル接頭辞: wp_sample_

※自身の環境に合わせて値を変更してください

目次

  1. サーバー上の「DBデータ」と「wp-content」をバックアップ
  2. DBデータをローカル用に整形
  3. ローカル(xampp)の phpMyAdmin へDBデータをインポート
  4. ローカルへ WordPress をインストール
  5. エラー時の対処法

01. サーバー上の「DBデータ」と「wp-content」をバックアップ


まずはDBデータからバックアップ。
当ブログはさくらサーバー運用なので、さくらサーバーの phpMyAdmin へアクセス/ログイン。


バックアップ対象の「db_sample」をクリック。


エクスポートタブをクリック。


全てのテーブルデータを選択し、「SQL / 圧縮なし」で実行。(他項目は画像を参照)


db_sample.sql」ファイルがダウンロードされます。


FTPソフト(アプリケーション問わず)で WordPress のファイルが格納されている場所まで行き、「wp-content」を丸ごとローカルへダウンロード。

これでDBデータとwp-contentのバックアップはok。

02. DBデータをローカル用に整形

先ほどダウンロードしたDBデータ「db_sample.sql」をテキストエディタで開き、以下を置換。

  • 置換前: http://www.koreyome.com/
  • 置換後: http://localhost/

今回は当ブログをサンプルとしているので「http://www.koreyome.com/」となっていますが、この部分は「バックアップ対象の WordPress がインストールされているアドレス」になるので各自の環境に合わせて適切なアドレスに変えて置換してください。

03. ローカル phpMyAdmin へDBデータをインポート


xampp の Apache / MySQL を起動。


http://localhost/phpmyadmin/」へログイン。


「New」から新しいデータベース「db_sample」(utf8_general_ci)を作成。
※サーバー環境を再現するのでサーバーDBと同じ名前にしています


作成された「db_sample」のインポートタブをクリック。


前の工程でダウンロードした「db_sample.sql」ファイルを選択し、実行/インポート。


もしここでこの画像のようにエラーが出る場合は下記の「エラー時の対処法」へお進みください。(ファイルサイズ最大値の変更)


インポートが成功すると上記の画像のようにインポート成功のメッセージと共に、「db_sample」以下にデータが読み込まれます。

04. ローカルへ WordPress をインストール


webサイト から WordPress をダウンロード。


ダウンロードしたファイルを解凍後「blog」と名称変更。(解説しやすいように名称を変えただけなので任意のフォルダ名でok)


xampp-Apache のローカルデータ参照先である「htdocs」内に解凍した WordPress フォルダを移動。


Wordpress フォルダ内を xampp のルートにするために「httpd.conf」ファイル内のパスを「blog」フォルダのパスへ変更・保存・xampp(Apache/MySQL)再起動

※このやり方に関しては以前の記事「xamppのApache/htdocsのrootを変更する」で解説しています


ルートの変更が成功すると「http://localhost/」で WordPress のインストール画面が表示されます。以降は流れに沿って進みます。

  • データベース名: db_sample
  • ユーザー名: [xamppで決めたもの]
  • パスワード: [xamppで決めたもの]
  • データベースのホスト名: localhost
  • テーブル接頭辞: wp_sample_

※上記の設定はあくまで今回用の仮の値なので、自身の環境に合わせた値を設定してください


一通り進むとこの画像のように「すでにインストールされています」とメッセージが出ます。これは前の工程でサーバーからバックアップしたDBデータをローカルへインポートした為に起こる現象です。エラーではないのでご安心ください。

ログイン前にもう一工程。


このタイミングでサーバーからバックアップしておいた「wp-content」をローカルの「wp-content」へ上書きします。この際、既存に存在するファイルは残した状態で存在しないファイルだけを上書き保存するようにご注意ください。


http://localhost/wp-login.php にログインできればローカル環境での再現に成功です。


最後に http://localhost/ へアクセスしてみてサーバーと同じ状態が確認できれば終了です。

※「続きを読む」(記事詳細)のリンク先が変になる場合は下記の「エラー時の対処法」をご参照ください

05. エラー時の対処法

■ SQLデータインポート時のファイルサイズ最大値エラーに関して

info.php

<?php
phpinfo();
?>

上記のような info.php を作成してアクセスしてみるとファイルサイズの上限値(upload_max_filesize)がわかります。設定されている箇所は以下。

  • xampp/php/php.ini


上記では思い切って「50M」にしていますが、自身の環境・ファイルサイズに合わせて変更してください。(変更・保存・xampp(Apache/MySQL)再起動後に再度インポート)

■ WordPressをローカルに再現後、記事詳細へのリンクが見当たらなくなる


アドレスは間違っていないはずなのに「Error 404」になる…

解決法は WordPress のデータがある場所まで行き、「.htaccess」ファイルを削除した後、ログイン画面/パーマリンク設定から変更を保存(特に値は変えずにそのままでもok) することだ。

なぜこうなるかはよくわからないけど、自分も今回この現象になった際はこの方法で解決しました。

長くなりましたが今回は以上ですm(_ _)m

参考

Share