2013年2月16日のWordBenc大阪でMac環境でのWordPressの引っ越しについてお話しました。

1. WordPressのお引っ越しspecial
コマンドは使わないからデザイナーでも安心♪ [mac編]
2013.02.16 石田 美穂

2. 自己紹介
石田 美穂 (いしだ みほ)
フリーランスのWEBデザイナーです。
「イシダウェブ工房」 の屋号にて個人で活動中のほか、
「WEB制作会社 StudioBRAIN」のアシスタントとして、
いろんなWordPress案件に関わっています。趣味はネイルと園芸など。
facebook ishidamiho
twitter dk45blog
website http://ishida-webkontor.com
http://www.studiobrain.net
てください★
よかったらフォローし

3. Section 1. ローカル環境の構築

4. 全体的な流れをざっと説明
1. PCにMAMPをインストール
MAMPをWEBサイトからタウンロード
パソコンにインストール
2. MAMPを起動して自分のPCにDBを作る
MAMPを起動
phpMyAdminを開いて新規Dを作る
3. MAMPにWordPressを設置して動かす
MAMPの中の「htdocs」ディレクトリにWordPressを置き、
DBの接続情報を書き込み、使えるようにする

5. MAMPのインストール
MAMPと検索すると
一番上に出てくると思います
左側の「MAMP」を
ダウンロード。

6. MAMPのインストール
DLしたフォルダをクリックして解凍。
インストール画面が出てくるので、
あとはどんどん「続ける」をクリックして
インストール完了。

7. MAMPのインストール
アプリケーションの中に
「MAMP」という
ディレクトリができているはず。
なぜかMAMP PROも
入ってくるけど
要らないのでアンインストール。

8. MAMPを起動
このアイコンをクリックしてMAMPを立ち上げ
「サーバを起動」を押す。
するとウェブサーバを
自分のパソコンで使えるようになる。

9. ローカルにWP用のDBを作る
DBを作成します。
「スタートページを開く」をクリック
ブラウザでこの画面が立ち上がります。
メニューの中から
「phpMyAdmin」をクリックします。

10. ローカルにWP用のDBを作る
DBの名前: 任意
文字コード: utf8_general_ci

11. ローカルにWP用のDBを作る
からっぽのDBができました。

12. ローカルにWordPressを設置
アプリケーション/MAMP/htdocs の中に任意の名前でフォルダ
を作り、WordPressのファイルを入れておく。

13. ローカルのWordPressにアクセス
ブラウザのアドレスバーに
localhost:8888/wordpress/wp-admin/ と入れてみよう。
(赤字のところはさっき自分がWPデータを入れたフォルダ名にする)
wp-config.phpを設定する画面になります。

14. WPにDB情報を入力
DB情報を入力。
データベース名：wpdata (さっき自分で作った名前)
ユーザー名：root
パスワード：root
データベースのホスト名：localhost

15. ローカルにWPがインストールされた！
WordPressインストール完了！

16. ローカルでいつもどおりの構築ができます

17. Section 2. ローカル環境から本番環境へ

18. 全体的な流れをざっと説明
1. 事前準備：ローカル
phpMyAdminを使ってDBをダウンロード
2. 事前準備：本番サーバ
WordPress本体、 テーマファイル、画像フォルダをアップロード
phpMyAdminを使って空のDBを作り、データをインポートする。
wp-config.phpに新サーバのDB情報を記入
3. URLの書き換え
「searchreplacedb2.php 」を使っDBの中にあるURLを一括変換
4. 新サーバにログイン

19. 全体的な流れをざっと説明
(;・ ・) な、なんか手順多い？！
ヨワヨワデザイナーにはむずかしそう・・・
( ﾟДﾟ)b 大丈夫！暗黒画面(ターミナル)と魔術 (コマンド) は使わないよ。
クリックとちょこっと文字入力だけで出来るんだぜ！
慣れたら10分もあれば引っ越しできる。

20. 1. 事前準備：ローカル編
1. 事前準備：ローカル
phpMyAdminを使ってDBをダウンロード
2. 事前準備：本番サーバ
WordPress本体、 テーマファイル、画像フォルダをアップロード
phpMyAdminを使って空のDBを作り、データをインポートする。
wp-config.phpに新サーバのDB情報を記入
3. URLの書き換え
「searchreplacedb2.php 」を使っDBの中にあるURLを一括変換
4. 新サーバにログイン

21. ローカルDBのダウンロード
MAMPのphpMyAdminを立ち上げて、
WP用に作ったDBの名前をクリックする。

22. ローカルDBのダウンロード
「エクスポート」をクリック

23. ローカルDBのダウンロード
「出力をファイルに保存する」に
チェックを入れる。
形式は「zip」か「gzip」で。
その後、「実行」ボタンを押す。
↓
DBのデータが取り出せました。

24. 2. 事前準備：本番サーバ編
1. 事前準備：ローカル
phpMyAdminを使ってDBをダウンロード
2. 事前準備：本番サーバ
WordPress本体、 テーマファイル、画像フォルダをアップロード
phpMyAdminを使って空のDBを作り、データをインポートする。
wp-config.phpに新サーバのDB情報を記入
3. URLの書き換え
「searchreplacedb2.php 」を使っDBの中にあるURLを一括変換
4. 新サーバにログイン

25. WPのファイル一式、テーマ、画像フォルダをUP
普通にFTPでサクッと。

26. 本番サーバのDB情報を書き換え
本番サーバにアップしたWordPressの中の
wp-config.phpを開き、
ローカル環境でのDB情報から
本番サーバでのDB情報に書き換える。

27. 本番サーバのDBにデータをインポート
本番サーバでphpMyAdminを起動。新規DBを作成
する。
「インポート」タブをクリックし、ローカルDBから
落としてきたデータを選択。
「実行する」を押すと、データが取り込まれる。

28. 一瞬でDBの取り込み完了！

29. 2. 事前準備：本番サーバ編
1. 事前準備：ローカル
phpMyAdminを使ってDBをダウンロード
2. 事前準備：本番サーバ
WordPress本体、 テーマファイル、画像フォルダをアップロード
phpMyAdminを使って空のDBを作り、データをインポートする。
wp-config.phpに新サーバのDB情報を記入
3. URLの書き換え
「searchreplacedb2.php 」を使っDBの中にあるURLを一括変換
4. 新サーバにログイン

30. ここで問題になるのがurl
ローカル環境でのurl (例) http://localhost:8888/wordpress
本番サーバでのurl (例) http://samplesite.com/wordpress
DBの中に書き込まれている
旧アドレスを書き換える事が必要。

31. エディタで一括置換はダメ＞＜
エディタでDBファイルを開け、一括置換を使ってurlの書き換えをしてしまうと、
内容の書き換えが適切に行われない可能性があります。
結果・・・
・ウィジェットの設定が復元されない
・動かないプラグインが出てくる可能性もある
url変換ツールを使えば大丈夫！
参考記事 http://webcre-archive.com/2012/10/04/wordpress-db-url-replace/
http://dogmap.jp/2012/09/20/wordpress-replace-siteurl/

32. url変換スクリプトをダウンロード
http://interconnectit.com/products/search-and-replace-for-wordpress-databases/
wordpress search and replace tool
ここからダウンロードしたZIPを解
凍して、
searchreplacedb2.php
を入手。

33. url変換スクリプトをアップして実行
先ほどのsearchreplacedb2.phpを、
wp-config.phpと同じ階層に置く。
ブラウザからsearchreplacedb2.php
にアクセスする。
例）
http://sample.com/searchreplacedb2.php

34. url変換ツールを実行
チェックはそのままで「submit」を押す

35. url変換ツールを実行
先ほどwp-config.phpに書き込んだ情報が出てきます。
内容に間違いがないのを確認したら、
「submit DB details」をクリック。

36. url変換ツールを実行
テーブルが全部選択されてる状態になっていると思います。
そのまま「countinue」をクリック

37. url変換ツールを実行
ポップアップでアラートがでてくるので、「OK」を押す
そして「continue」

38. 旧アドレス・新アドレスを入力
ローカルのWPアドレス
例）http://localhost:8888/wordpress
注意：
http://localhost:8888/wordpress/ ←最後にスラッシュいれてはダメ！
変換できない箇所がでてきてしまいます
本番サーバのWPアドレス
ローカルのWPアドレスをテストサーバのアドレスに読み替えれば
テストサーバ→本番サーバの引っ越しにも使えますよ！

39. 旧アドレス・新アドレスを入力
ほんまにやっちゃってええの？と聞かれるので
良ければ「OK」を押そう。

40. url変換が完了・変換ルールを削除
url変換した結果が表示されて、完了。
searchreplacedb2.phpは速やかに削除しよう。

41. 引っ越しできてた！

42. 2. 事前準備：本番サーバ編
1. 事前準備：ローカル
phpMyAdminを使ってDBをダウンロード
2. 事前準備：本番サーバ
WordPress本体、 テーマファイル、画像フォルダをアップロード
phpMyAdminを使って空のDBを作り、データをインポートする。
wp-config.phpに新サーバのDB情報を記入
3. URLの書き換え
「searchreplacedb2.php 」を使っDBの中にあるURLを一括変換
4. 新サーバにログイン

43. 管理画面をあけてみる
一番最初にwp-admin/にアクセスすると「データベースの更新が必要です」
と出てくるので、そのまま更新してください。

44. 管理画面に入れた！
ローカル環境で作っていたIDとPWを入れるとログインできます。
プラグインの設定などもきちんと持って来れています。

45. バックアップも同じ手順で復元OK
バックアップ用プラグイン等で保存して
おいたDBも、引っ越しと同じ手順で復元
できる。

46. ちょっと余談かもですが
「インポートツール」ってありますよね？
あれで引っ越しはできないの？
以前、自分でも疑問に思っていました

47. インポートツールでは完全な引っ越しができない
これにはすべての投稿、固定ページ、コメント、カスタムフィールド、カテ
ゴリー、タグ、ナビゲーションメニュー、カスタム投稿が含まれます。
ウィジェット、パーマリンク、プラグインの設定・・・
等はついてこない、という事。

48. インポートツールで引っ越したら
指定した固定ページがトップページになってない
スライダーが設定されてない
フッターウィジェットが無い
サイドバーウィジェットが初期化されてる
パーマリンクがデフォルトだ
手動で直さないといけないので
めんどくさい＆手違いが発生するかも＞＜

49. 今日のポイント
・ターミナル＆コマンドを使わなくても引っ越しはできる。
・URL変換はエディタではなく専用ツールを使おう。
・ローカル環境で何回か練習して、手順に慣れよう。

50. おしまい
ご清聴ありがとうございました！