私は、このはてなブログ以外にもWordPressも使用していて、
慣れる前まではCSSやPHPコードの編集を直接レンタルサーバー上で行っていました。
しかし、ブラウザ上での編集やPHPコードの動作確認もレンタルサーバー環境でやっていたので、
すごく面倒でした。
現在は、WordPressをローカル環境に作成して、更にレンタルサーバーのデータを複製して、
CSS等のカスタマイズをローカル環境で確認してからサーバーにアップしています。
ただ、レンタルサーバーのWordPressデータを自分のローカル環境に移した時に、
少しハマったことがありましたので、
自分の備忘も兼ねて、データ移動手順と注意点を説明していきます。
１．使用しているローカル環境
ローカル環境で使用するソフトウェアは、
・XAMPP
を使用しますが、
ここでは、既にローカル環境でWordPressが使用できている環境を前提にします。
もし今、別の用途で使用しているWordPressがあるならそれは使用しません。
レンタルサーバー上のデータ移行用に新規にWordPressをインストールして、データベースも作成しておきます。
後でこのデータベースにレンタルサーバーのWordPressのデータベースをインポートします。
２．WordPressデータのバックアップ
まずサーバー上のWordPressデータをバックアップをする必要があります。
ここで注意しなければならいことは、WordPressの投稿記事や画像は、データベースにあることです。
なので、契約しているレンタルサーバーの管理画面から、WordPressのバックアップだけではなく、
データベースもバックアップする必要があります。
WordPressのバックアップでは、主にCSSやPHPなどのテーマ関連のファイルがあり、
データベースのバックアップでは、主に投稿記事や画像が保存されています。
私の場合は、エックスサーバーと契約していますので、このレンタルサーバーでは、
WordPressのバックアップファイルは、Linuxでよく使用されるtar.gz形式の圧縮ファイルで、
データベースのバックアップファイルは、gz形式での圧縮ファイルで保存されました。
WordPressのバックアップファイルは解凍して使用しますが、
データベースのバックアップファイルは、解凍せずにそのままの状態で置いておいてください。
３．データベースのインポート
次にダウンロードしたデータベースの圧縮ファイルをローカル環境にインポートします。
まず、下図の赤枠のXAMPPのMySQLのAdminを押して、データベース管理画面を出します。
管理画面の左側にあるインポートしたいデータベースを選択します。
下図の場合は、test-localを選択しています。
インポートは上記のインポートタブにある「ファイルを選択」ボタンを押すと、
インポートしたいファイルを選択するウィンドウが出てきますので、
先ほどバックアップしたデータベースの圧縮ファイルを選択します。
ファイル選択は、展開せずに圧縮ファイルのままで大丈夫です。
そして、そのページの下のほうにある下図の赤枠の「実行」を押すとデータベースの展開が始まります。
インポートしたデータベースの「wp_posts」を見て、サーバー上の投稿記事があることを確認します。
４．インポート後のデータベース修正
インポートが完了しても、そのままの状態ではすぐにアクセスすることができません。
何故かというと、データベース内に設定されているURLがサーバー時のアドレスになっているからです。
他にもログイン名やパスワードもそのままです。
修正方法は、データベース内のWordPressで設定されているサイトURLアドレスを、
直接手作業で修正する必要があります。
サイトURLアドレスの修正箇所は、
上記画像の右側の赤枠の項目の左側にある「編集」で、自分のローカルアドレスに修正します。
上記画像の値では、私の環境で既に修正した後のURLが入っています。
５．ローカル環境のサイトアクセス確認
先ほど修正したWordPressのサイトURLにアクセスしてログインができることと、
ダッシュボードが表示され投稿記事があることを確認します。
この時に、投稿記事の内容まで見ることが確認できたのですが、
内容修正して保存するとエラーになりました。
結局のところ、原因はわかりませんでしたが、
WordPressの「設定」ー＞「パーマリンク設定」で、一度異なるところにチェックを入れて保存し、
それからもう一度自分が設定したいところにチェックを入れて保存すると、
記事の修正更新でエラーにならなくなりました。
まあ、とりあえず記事更新ができるようになったので原因追及はこれ以上しないことにします。
６．WordPress子テーマの複製
子テーマの複製は、ローカル環境のWordPressフォルダに、
サーバーデータを解凍したファイルの中の子テーマフォルダをローカル環境にコピーするだけです。
子テーマのフォルダは、public_html/wp-content/themes/以下コピーします。
その後、WordPressの「外観」ー＞「テーマ」で子テーマが出現するので有効にします。
これで記事更新やプレビューでのCSS確認ができるようになったと思います。
７．記事中の画像について
投稿記事中で使用していた画像は、
レンタルサーバー上のアドレスを指しているのでそのまま使用できるはずなのですが、
表示できた時とできない時がありました。
画像もローカル環境に持ってきて記事中の画像アドレスを修正すれば良いのですが、
当初の私の目的であるCSS修正の確認ができれば良かったので、
画像については何もしないことにします。
８．WordPressサイドバーやフッターなどについて
サイドバーやフッターは、バックアップデータに含まれているかもしれませんが、
どこのフォルダにあるかを調べるのが面倒でしたので、
ローカル環境のWordPressにサイドバー/フッターウィジェットを作成して、
内容を手作業でコピペしました。
また、プラグインは、public_html/wp-content/pluginsフォルダを
ローカル環境にコピペすれば使用できると思います。
９．最後に
私がWordPressを始めた当初、サーバー上のphpファイルをブラウザで直接修正して、
サイト閲覧しながら確認していたのですが、何かミスを起こしたらしく、
WordPressのダッシュボードすらアクセスできなくなった経験があります。
かなり焦りましたが、FTPでアクセスしてなんとか元通りにすることができました。
その時の私はローカル環境で確認できる環境を構築していなかったのでデバッグしていませんでした。
この時に、ローカル環境で確認することはやはり重要だなあと改めて思いました。
＜関連・おすすめ記事＞
WordPressのトップページに記事一覧を表示する方法 - 水瓶座列車
WordPressでモバイル対応のためのCSS作成方法の解説 - 水瓶座列車
