【アプリ課金が最大17%オフ】Amazonコインはこちら
naenote.netへようこそ

naenote.netは、「捗る」がテーマのガジェット×テック系情報ブログです

シンプル・ミニマル・スピーディーがモットーの管理人が
「これは!」と感じた情報を厳選してお届けします

SimplicityからAFFINGER4に乗り換えたときの移行設計と手順の記録

affinger4

当ブログのテーマをSimplicityからAFFINGER4へ移行した際に考えた、移行設計をまとめて紹介します。

Simplicityの後継である「Cocoon」や、AFFINGER4の後継の「WING」でも使える方法だと思うので、参考になれば幸いです。

1. テスト環境の準備

Cloud9というクラウド開発環境(無料)にテスト環境を作ります。

WordPressをクリック一発でインストールできる点、すべてがブラウザ完結するのでどこからでもアクセスできる点、作業中以外はWordPressを落としておけるのでセキュリティリスクも少なめな点が便利です。

具体的な環境の作り方は次の記事をどうぞ。

参考 簡単数分!Cloud9でクラウド上にWordpressテスト環境を作成する方法

Cloud9にWordPressをインストールしたら、Updraftというプラグインでバックアップした本番環境データを投入します。(サイトURLなどは変更が必要)

使い方の解説はこちら。

参考 UpdraftPlus で WordPress を丸ごとバックアップ | データ復旧大図鑑 – 自分で解決!ファイル復元

2. AFFINGER4設定、デザインカスタマイズ

本番相当のテスト環境にAFFINGER4をインストール。

AFFINGER4設定やデザインカスタマイズを入れ、形を整えていきます。

3. ウィジェット配置

忘れがちなのがウィジェットです。

WordPressではテーマ毎にウィジェット挿入可能部分が異なるため、テーマ変更の際はウィジェットの入れ直しが必要です。

完成形を確認しつつウィジェット配置を決めていきます。

4. コンテンツ移行の設計

一番重いのがコレです。

Simplicityに組み込まれていたCSSなどの独自デザインやタグを洗い出したうえ、AFFINGER4側で対応するものにマップし、それぞれに移行方針を決めていきます。

組み込みCSSの移行

CSSとショートコードについては

  • 似たスタイルあればclassを置換する
  • なければ独自CSSをあてるかあきらめる
  • ショートコード化する場合は置換用の正規表現を作る

というアプローチで進めました。

たとえば赤太字スタイルはSimplicityにもAFFINGER4にもありますが、class名称が違うので置き換えが必要です。

  • Simplicity……class=”bold-red”
  • AFFINGER4……class=”hutoaka”

他に移行が必要なものと方針を洗い出したのが下記の表です。

スッキリしたかったので、SimplicityにあってAFFINGER4にないスタイルは、AFFINGER4組み込みのスタイルにマージする形としました。

+ 表を見る

装飾SimplicityAFFINGER4代替案
太字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”無視
補足(i)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のテーマ移行に便利なブログカード変換プラグインを作った
WINGとCocoonで記述形式の異なる「ブログカード」を相互変換するプラグインを作りました。WordPressのテーマ移行にお役立てください。

4. 移行設計に即して本番作業を行う

以上に従って本番環境へ変更を加えていきます。

やることが明らかであとは作業だけ状態なので、変更作業自体は1時間もかからずに終了しました。

ブログそのものの変更

画面の右側に本番環境、左側にテスト環境を表示しておきます。

本番環境へAFFINGER4をインストールしたら、テスト環境にある通りの設定やカスタマイズ等を投入します。

組み込みCSSや独自スタイルはSearch Regexで行ないます。コンテンツ自体の変更なので、ミスがないよう1つずつ確認・置換します。

ブログカードのショートコード化は移行プラグインで一発で済ませます。

サンプルチェック

アクセスや収益の大きな記事を実際に開いてみて、デザインやコンテンツの崩れがないか確認します。

想定していた正規表現にマッチしない場合(想定外)もあるので最後の目視チェックは必須です。

Search Consoleへ反映

最後に、Search Consoleで最後の仕上げを行います。

WordPressにおけるテーマ変更はHTML構造そのものの変更を伴うもの。

正しい姿をGoogleに認識してもらうべく、全記事へのリンクが貼ってあるサイトマップページを「このページと直接リンクをクロールする」でFetch as Googleしましょう。

それが終わってしばらくしたら、「データハイライター」も設定し直しておきます。

以上で移行作業は完了です。

まとめ:ブログ移行は設計8割

WordPressのテーマの移行は面倒ですが、きちんと手順を設計したうえで、自動化できるところは自動化してしまえば、作業自体は楽です。

  • デザインカスタマイズの方法を事前に把握しておく
  • ウィジェットなどの代替手段を決める
  • 組み込まれたデザインの移行方針を考える
  • 正規表現でHTMLを置き換える
  • PHPを使って少し凝った置き換えをする

だいたいはこの手順で、楽ができるのではないでしょうか。

以上、SimplicityからAFFINGER4にテーマを移行したときの手順でした。

コメント

コメント以外のご意見・ご要望、管理人へのご連絡などは、お問い合わせからどうぞ

スポンサーリンク