当ブログのテーマをSimplicityからAFFINGER5へ移行した際に考えた、移行設計をまとめて紹介します。
Simplicityの後継である「Cocoon」でも使える方法だと思うので、参考になれば幸いです。
1. テスト環境の準備
Cloud9というクラウド開発環境（無料）にテスト環境を作ります。
WordPressをクリック一発でインストールできる点、すべてがブラウザ完結するのでどこからでもアクセスできる点、作業中以外はWordPressを落としておけるのでセキュリティリスクも少なめな点が便利です。
具体的な環境の作り方は次の記事をどうぞ。
参考 簡単数分！Cloud9でクラウド上にWordpressテスト環境を作成する方法
Cloud9にWordPressをインストールしたら、Updraftというプラグインでバックアップした本番環境データを投入します。（サイトURLなどは変更が必要）
使い方の解説はこちら。
参考 UpdraftPlus で WordPress を丸ごとバックアップ | データ復旧大図鑑 – 自分で解決！ファイル復元
2. AFFINGER5設定、デザインカスタマイズ
本番相当のテスト環境にAFFINGER5をインストール。
AFFINGER5設定やデザインカスタマイズを入れ、形を整えていきます。
3. ウィジェット配置
忘れがちなのがウィジェットです。
WordPressではテーマ毎にウィジェット挿入可能部分が異なるため、テーマ変更の際はウィジェットの入れ直しが必要です。
完成形を確認しつつウィジェット配置を決めていきます。
4. コンテンツ移行の設計
一番重いのがコレです。
Simplicityに組み込まれていたCSSなどの独自デザインやタグを洗い出したうえ、AFFINGER5側で対応するものにマップし、それぞれに移行方針を決めていきます。
組み込みCSSの移行
CSSとショートコードについては
- 似たスタイルあればclassを置換する
- なければ独自CSSをあてるかあきらめる
- ショートコード化する場合は置換用の正規表現を作る
というアプローチで進めました。
たとえば赤太字スタイルはSimplicityにもAFFINGER5にもありますが、class名称が違うので置き換えが必要です。
- Simplicity……class=”bold-red”
- AFFINGER5……class=”hutoaka”
他に移行が必要なものと方針を洗い出したのが下記の表です。
スッキリしたかったので、SimplicityにあってAFFINGER5にないスタイルは、AFFINGER5組み込みのスタイルにマージする形としました。
| 装飾 | Simplicity | AFFINGER4 | 代替案 |
|---|---|---|---|
| 太字 | class=”bold” | class=”huto” | N/A |
| 赤字 | class=”red” | ー | class=”bold-red” |
| 太赤字 | class=”bold-red” | class=”hutoaka” | N/A |
| 赤字下線 | class=”red-under” | ー | 無視 |
| 黄色マーカー | class=”marker” | class=”ymarker” | N/A |
| 黄色下線マーカー | class=”marker-under” | ー | class=”ymarker” |
| 打ち消し線 | class=”strike” | ー | delタグ |
| 参考 | class=”ref|sanko|sankou|reffer” | class=”sankou” | N/A |
| キーボードキー | class=”keyboard-key” | ー | 無視 |
| 補足（ｉ） | class=”information” | ー | class=”graybox” |
| 補足（？） | class=”question” | ー | class=”graybox” |
| 補足（！） | class=”alert” | ー | class=”redbox” |
| 囲い（濃い青） | class=”sp-primary” | ー | class=”yellowbox” |
| 囲い（薄緑） | class=”sp-success” | ー | class=”yellowbox” |
| 囲い（薄青） | class=”sp-info” | ー | class=”yellowbox” |
| 囲い（淡黄色） | class=”info-box” | class=”yellowbox” | N/A |
| 囲い（淡赤） | class=”sp-danger” | class=”redbox” | N/A |
独自に追加したスタイルの移行
吹き出しなど独自に追加していたものについても、AFINGER4に該当スタイルを利用するよう変更しました。
吹き出しはシロマさんのコレを使わせていただいていました。
| 装飾 | 正規表現パターン | 置換内容 |
|---|---|---|
| 目立たせBox | |<fieldset class=”vivid”><legend>(.+?)</legend>(.+?)</fieldset>| ※自前のタグ | <div style=”padding:10px 0;”><div class=”freebox”><p class=”p-free”><span class=”p-entry-f”>$1</span></p><div class=”free-inbox”>$2</div></div></div> ※「フリーボックス」のタグ |
| 吹き出し（NAE） | |<p class=”r-fuki nae”>(.+?)</p>| | ［st-kaiwa1］$1［/st-kaiwa1］ ※吹き出しのショートコード |
| 吹き出し（妻） | |<p class=”l-fuki wife”>(.+?)</p>| | ［st-kaiwa2 r］$1［/st-kaiwa2］ ※吹き出しのショートコード |
| 吹き出し（MENSA先輩） | |<p class=”l-fuki mensa”>(.+?)</p>| | ［st-kaiwa3 r］$1［/st-kaiwa3］ ※吹き出しのショートコード |
ブログカードの移行
Simplicityでは記事本文に直接URLを書けば自動的にブログカードに変換されます。
しかしAFFINGER4では、記事IDを指定するショートコードを使います。（［st-card id=記事ID］）
正規表現を使った単純な置換ができないので、PHPで移行用プログラムを組みました。
プラグイン化して公開していますので、使ってみてください。
参考 WINGとCocoonのテーマ移行に便利なブログカード変換プラグインを作った
4. 移行設計に即して本番作業を行う
以上に従って本番環境へ変更を加えていきます。
やることが明らかであとは作業だけ状態なので、変更作業自体は1時間もかからずに終了しました。
ブログそのものの変更
画面の右側に本番環境、左側にテスト環境を表示しておきます。
本番環境へAFFINGER5をインストールしたら、テスト環境にある通りの設定やカスタマイズ等を投入します。
組み込みCSSや独自スタイルはSearch Regexで行ないます。コンテンツ自体の変更なので、ミスがないよう1つずつ確認・置換します。
ブログカードのショートコード化は移行プラグインで一発で済ませます。
サンプルチェック
アクセスや収益の大きな記事を実際に開いてみて、デザインやコンテンツの崩れがないか確認します。
想定していた正規表現にマッチしない場合（想定外）もあるので最後の目視チェックは必須です。
Search Consoleへ反映
最後に、Search Consoleで最後の仕上げを行います。
WordPressにおけるテーマ変更はHTML構造そのものの変更を伴うもの。
正しい姿をGoogleに認識してもらうべく、全記事へのリンクが貼ってあるサイトマップページを「このページと直接リンクをクロールする」でFetch as Googleしましょう。
それが終わってしばらくしたら、「データハイライター」も設定し直しておきます。
以上で移行作業は完了です。
まとめ：ブログ移行は設計8割
WordPressのテーマの移行は面倒ですが、きちんと手順を設計したうえで、自動化できるところは自動化してしまえば、作業自体は楽です。
- デザインカスタマイズの方法を事前に把握しておく
- ウィジェットなどの代替手段を決める
- 組み込まれたデザインの移行方針を考える
- 正規表現でHTMLを置き換える
- PHPを使って少し凝った置き換えをする
だいたいはこの手順で、楽ができるのではないでしょうか。
以上、SimplicityからAFFINGER5にテーマを移行したときの手順でした。
コメント