テーマ変更後の表示崩れは、旧テーマのクラス、ショートコード、画像、スクリプトを分けて調べます。
この記事は独自の互換処理を作る最小例であり、各社の移行プラグインを解析した結果や、SWELLの公式互換コードではありません。
旧クラスだけを変換する最小例
WordPress 6.2以降で、本文のdiv要素にあるold-boxというクラスだけを独自クラスへ変換します。
変更前の子テーマのfunctions.phpと追加CSSをバックアップし、検証環境で次の関数とフックを追加します。
function waza_legacy_box_content($content) {
if (!class_exists('WP_HTML_Tag_Processor')) return $content;
$tags = new WP_HTML_Tag_Processor($content);
while ($tags->next_tag('DIV')) {
if ($tags->has_class('old-box')) {
$tags->remove_class('old-box');
$tags->add_class('waza-legacy-box');
}
}
return $tags->get_updated_html();
}
add_filter('the_content', 'waza_legacy_box_content', 20);
外観の追加CSSには次のスタイルを追加します。
.post_content .waza-legacy-box { border: 2px solid #476582; padding: 1em; margin-block: 1.5em; border-radius: .25em; }old-boxは説明用のクラス名なので、旧記事の実際のHTMLを調べて置き換えてください。
掲載CSSは、本文を囲む要素にpost_contentクラスがある場合に適用されます。
別のテーマでそのクラスがない場合は、開発者ツールで本文を囲む要素を確認し、CSS先頭の.post_contentをその要素に合うセレクターへ変更してください。
クラスを変換しても装飾が付かないときは、変換後のwaza-legacy-boxと本文を囲む要素の両方を確認します。
本文中の文字列やold-box-extraなど別のクラスは変換せず、保存済み本文も書き換えません。
ショートコードと旧CSSの扱い
旧ショートコード名と属性、出力HTMLを確認し、新テーマに実在する機能へ個別に対応させます。
存在を確認していないswell_blogcardへの転送コードは使わず、リンクカードは新テーマの編集画面で作り直して表示を比較します。
旧テーマのCSS全体を文字置換して読み込むと、相対画像URLや他の画面へ影響するため、必要な装飾だけを独自クラスへ移植します。
旧テーマの画像を再利用する場合は利用条件とファイルの所在を確認し、自分が管理するメディアURLへ変更します。
Service Workerと検証範囲
すべてのService Worker登録を解除する旧コードは使いません。
キャッシュが疑わしい場合は開発者ツールで登録元とscopeを確認し、その機能の正式な停止手順を検証環境で試します。
このクラス変換例はローカルのWordPressで出力を検証しましたが、各旧テーマのショートコードやレイアウト全体の互換性は未検証です。
確認と戻し方
旧装飾を使う記事でPC・スマホの幅、画像、リンク、キーボード操作を比較します。
戻す場合は今回追加した関数・フックとCSSだけを外し、表示時のクラス変換を止めます。
保存済み本文には旧クラスが残っていますが、その装飾を定義するCSSが新テーマにない場合、旧テーマの見た目までは戻りません。
追加前の状態へ戻すときは、退避したfunctions.phpと追加CSSとの差分を確認し、今回の追加分以外を消さないようにします。
参照：WordPress HTML Tag Processor。
変換後の表示見本
上のPHP関数をローカルで実行して得たHTMLに、同じCSSを適用した見本です。
この見本は変換後のHTMLを表示するもので、閲覧時に旧記事へPHPの変換処理を実行するものではありません。
保存済み本文は変更せず、表示するときのクラスだけを変換します。
