WordPressでテーマを変更すると、以前のテーマで使用していたショートコードや装飾ボックス、ボタン、カラムレイアウトなどが正しく表示されなくなる問題がよく発生します。
そんなときに役立つのが、テーマ乗り換え支援プラグインです。
この記事では、STORK・SANGO・THOR・JINなどの人気テーマからSWELLへの移行プラグインの中身を分析しつつ、どのテーマにも応用できる乗り換え支援プラグインの作り方を詳しく解説します。
- Cocoon → SWELL：ショートコードの種類が多いため再定義が重要
- SANGO → SWELL：見た目重視のbox系変換とCSS調整が中心
- THOR → SWELL：クラス名置換とボタン／吹き出し系CSS変換が肝
- JIN → SWELL：JIN特有の広告ショートコードや評価スタイルに注意
目次
目的
- 旧テーマの独自クラスを新テーマ用に変換する
- ショートコードの互換性を確保する
- レイアウト崩れを防ぐCSS調整を行う
構成すべき主な機能
以下の5つを乗り換え機能が必要でした。
1. クラス名の変換（the_contentフック）
旧テーマで使用されていたHTMLクラス名を新テーマ対応のものへ変換します。
add_filter('the_content', function($content) {
$content = str_replace('old-box', 'is-style-swell-box', $content);
$content = str_replace('old-btn', 'is-style-btn_normal', $content);
return $content;
}, 20);2. ショートコードの再定義
旧テーマ固有のショートコード（例：, [blogcard url=...]）を再定義して、新テーマの同等機能にマッピングします。
add_shortcode('blogcard', function($atts) {
return do_shortcode('[swell_blogcard url="' . esc_url($atts['url']) . '"]');
});3. 旧CSSの読み込み + 最小化 + 最適化
旧テーマの style.css を読み込み、以下のように加工して使います：
- セレクタを
.content→.post_contentなどに置換 .wp-や.widget_などの不要なセレクタを除外@mediaの条件式にも対応
$css = file_get_contents(get_theme_root() . '/oldtheme/style.css');
$css = str_replace('.content', '.post_content', $css);
wp_add_inline_style('theme-style', $css);4. 吹き出し画像やレビューBoxの画像も再指定
add_action('wp_head', function() {
echo '<style>
.post_content .balloon__img-left div {
background-image: url("https://oldtheme.com/img/img_cat.gif");
}</style>';
});5. Service Workerの解除など特殊機能の対処
THORのようなPWA対応テーマでは、Service Workerを解除しないとキャッシュに旧JSが残ることがあります。
add_action('wp_footer', function() {
echo '<script>
navigator.serviceWorker.getRegistrations().then(function(regs){
regs.forEach(reg => reg.unregister());
});
</script>';
});まとめ
乗り換え支援プラグインを作成することで、古い記事の再修正を避けつつ、新しいテーマを最大限活用できます。
一度作っておけば、他のサイトにも再利用可能です。
