Sumirexxx

今日もiPhone片手に出かけます

[WordPress]ブログ改装続行中!ローカル環境とサーバー環境を合わせることから始めよう

WordPress

GWはほとんどをWordPressに捧げています。すみれっくす@sumirexxx_wpです。

今日は以前から書きたいと思っていた、ローカル環境とサーバー環境を合わせる方法について書きたいと思います!

なんで2つの環境が必要なの?

そもそも、なぜ2つの環境が必要なのでしょうか?ブログは1つなのに・・・。

まず、ブログとかシステムには必ず本番環境=みんなが目にする画面(今見ていただいてるのがそうです)があります。

でも例えばちょっとだけヘッダーのイメージを変えたいな、アイコンを追加したいな、と思ったとき。

すぐに本番環境を書き換えてもしもエラーになったら・・・。バックアップも取っていなかったら・・・。

いくら自分が作成したブログとは言っても、そのブログを続けている期間に比例して、最初から作り直すのは大変ですし2度と同じ記事を見れないことになります。

そんなこわーい状態にならないためにも、まずはローカル環境(自分のPCの中だけで見れる)でテストをして、OKであれば本番環境にあげて、

晴れて皆さんに見ていただくという手順は必ず用意した方がいいと思います!

でも途中から逆になっちゃった

…と、こんなに偉そうに言っていますが本当は私も最初はローカル環境の重要性に気がつかなくて本番環境でガリガリと書いていました。

画面が変になることもしばしば…(`・ω・´)

そのうち、「するぷろ」というiPhoneでブログが書けちゃう超便利アプリに出会い、どんどんローカル環境との距離は広がっていきました…。

そのかわり、サーバー環境には日々の私の書きたいことがどんどんと蓄積されていきました。

だからつまり、本番環境がテスト環境みたいになっちゃったんです。

2周年を迎えて記事が多くなってきた

そんなこんなで、完全に環境の差が出来上がってしまいました。

見た目も違えば記事も違う!これじゃだめだー!

2周年を迎えるのを期に、まずはこのローカルとサーバー環境の修正から始めることにしました。

ローカル環境からサーバー環境への移行

このサーバー→ローカルへのデータ移行の仕方の記事が少ないと思いませんか??

ローカル→サーバーは山ほどあるのに…。

サーバーからローカルに移行する人なんてまずいないんですかね。

何にも知らないところからWordPressを初めて、やっと形になってきたのにここでローカルを見捨てることなんてできない!

とにかく私はめっちゃ苦労して、いまのやり方までたどり着きました。

まずはサーバー環境からデータを取得する!

その前に、まずは必ずサーバーもローカルも、バックアップを取っておいてください。

なくしたものは取り戻せません。よろしくお願いします。

サーバー環境にログイン!

自分が登録したサーバーのphpAdminまで行きましょう。

私はロリポップを使っているのでその手順を載せます。

<ロリポップの場合>

ログイン画面からユーザー専用ページへ

Lolipopuログイン

ドメインとパスワードを入力

ドメインとパスワード

データベースを選択

データベース選択 2

ようやくphpAdminの文字が!!始めたばかりの頃は、ココまでくるのに何時間もかかりました。

Phpadmin開く

ブラウザに飛んで、この画面になると思います。

サーバー側phpadmin

ここで登録したユーザー名とパスワードは、ロリポップ登録時に設定したメールに記述されていると思います。

私はWordPress専用ノートを作って書き写しました。(まだEvernoteを使ってなかったのかなぁ?)

環境周りのユーザー名やパスワードは混乱しやすいので、はやる気持ちを抑えて、ひとつひとつきちんと管理しておくと後が楽ということを知りました。

これで無事にphpAdminにたどり着けました!いま3分の1くらいです!

次に自分のサーバーを選択して、エクスポートを開きます。念のためですが、今は「サーバー環境」をいじってますよ〜。

エクスポート 3

エクスポート画面になったら、ここからの設定はけっこう大事です!

エクスポート方法:「詳細」を選択します。まだ実行は押さない。

これから書いてあること以外はすべてデフォルトのままいじりません。

詳細 2

下にスクロールして、「出力をファイルに保存する」を選択します。ここで作ったSQLファイルを、

ローカル側のphpAdminにインポートするためです。

出力

追加コマンドの「DROP TABLE/VIEW/PROCEDURE/FUNCTION/EVENTコマンドの追加」にチェック

生成オプション

これでエクスポート設定は終わりです。「実行する」を押すと、SQLファイルが出力されます。

実行

SQLファイルを編集する

長くなってきましたが頑張りましょう。半分くらいきました。もうちょっとです!

エディタで先ほどエクスポートしたSQLファイルを開いて、ブログのアドレスで検索をかけてみましょう。

‘http://sumirexxx.com’という感じでシングルクォーテーションで囲まれている部分もあるので、一部で検索かけるのが良いです。例)sumirexxx.com

検索検索たくさん

検索をかけて確認したら、これをローカルアドレスに一気に置換します。

検索文字列:http://(自分のブログアドレス)

例)http://sumirexxx.com

置換文字列:http://localhost:8888/(ローカルフォルダ名)

例)http://sumirexxx.com

置換

注意!必ず保存して!!

騙取したままで気が済んでいると、この先の手順で私のようにローカル真っ白になります。ガ━━(;゚Д゚)━━ン!!

かならず保存してから次に進んでください。

超あせった(`・ω・´)

ローカルにインポートする!

次に先ほど編集したSQLファイルを、今度はローカル環境にインポートします。

同じような要領で、今度はローカル側のphpAdminにログインします。

MAMPだったらこの画面から簡単に行けます。

MAMP

ローカルサーバーのphpAdminへ!

ローカル

インポートするデータベースを用意します。

新規作成するか、前に使っていたデータベースを使います。

DB設定

インポート画面へ。

先ほど使うと決めたデータベースを選択して、インポートタブを開きます。

ローカル環境へ置換したSQLファイルを選択して、このまま何も設定せずに実行します。

インポート

インポートが正常に完了しました!

インポート完了

最後にこのファイルも見ておこう

wp-config.phpファイルです。

ココがローカルになっていないとたぶん(じゃなくて絶対)エラーになってしまいます。

Wp config php 2

それから84行目のWP-DEBUGを「true」に変えておくと、何かエラーががあったときに教えてくれます。

たいてい文字化けしてるけど、ファイルの位置と行くらいはわかります。

確認

エラー表示

ローカル環境に接続してみよう!

ローカル環境完成

さて、長かったですがどうですか??サーバー環境と同じになりましたか?

ずっと書きたかった記事がようやく書けました。

これが広く困っている人まで伝わるといいのですが…。

環境の違いで動かなくならないことを祈ります。。。

今までで一番長い記事だったー(´∀`)

最後まで読んでくれた方、ありがとうございました。

<