WordPressテーマ「AFFINGER5」から人気テーマ「SWELL」に乗り換えたい方に向けて、Loos公式が提供するサポートプラグイン「af5-to-swell」を使えば、記事のデザイン崩れを最小限に抑えた移行が可能になります。
本記事ではこのプラグインの内容をコードレベルで読み解きながら、実際にどんなサポートが受けられるのかをわかりやすく解説します。
SWELL│乗り換えサポート from AFFINGER5はどんなプラグイン？
「【SWELL】乗り換えサポート from AFFINGER5」は、AFFINGER5からSWELLへの移行をスムーズに行うために作られた公式の変換・互換性維持プラグインです。
このプラグインを使うことで、AFFINGER5で書いた過去の投稿がそのままSWELL上で違和感なく表示されるようになります。
導入手順
- マイページからプラグインをダウンロード（Loos公式またはSWELL会員サイトより）
af5-to-swellを有効化- あとは何もしなくてもOK！
※SWELLテーマでのみ有効になります。他テーマでは動作しません。
SWELL│乗り換えサポート from AFFINGER5の主な機能一覧
以下、機能の詳細です。
機能1：記事内HTMLの変換・最適化
◾ クラス名の変換フィルタ（the_content フィルタ）
以下のように、AFFINGER5独自クラスをSWELL向けに変換します：
| AFFINGER5のclass | 変換後のclass（SWELL準拠） |
|---|---|
"st-square-checkbox" | "st-list-check st-list-border" |
"rankh4 rankno-X" | "rankh4 p-adBox__title -rank" |
"rankstlink-r2" | "is-style-btn_normal red_" |
"rankstlink-l2" | "is-style-btn_normal blue_" |
add_filter( 'the_content', function( $content ) {
$content = str_replace( '"st-square-checkbox', '"st-list-check st-list-border', $content );
return $content;
}, 20 );これにより、過去記事の表示崩れを最小限に抑えることが可能です。
機能2：AFFINGER5のCSSをSWELLでも利用可能に
◾ AF5のCSSを読み込み・最小化・不要部分を削除し、インライン出力
$af5_style = file_get_contents( $af5_style_path );
$af5_style = str_replace( '.entry-content', '.post_content', $af5_style );post_contentに合わせてクラス名を置換- WordPress特有の
.aligncenter,.wpcf7-など不要なセレクタはdelete_selectors()にて除去 .postや32768pxのような古い記述もクリーンアップ- 最終的に
wp_add_inline_style()にてCSSを出力
これにより、旧デザインのスタイルをSWELLの構造に適合させた形で再現できます。
機能3：ショートコードの完全再現
AFFINGER5で多用されるショートコードを、1対1で再現またはSWELL標準ショートコードに変換します。
主な対応ショートコード一覧：
| ショートコード名 | 用途・役割 |
|---|---|
[branch] | 条件分岐表示などの分岐処理（詳細不明） |
| アイコン表示（FontAwesomeなど） |
[st-box-btn], [st-box-btn-list] | カード型ボタン、縦並びボタン |
[st-button], [st-mybutton], [st-mybutton-mini], [st-mcbutton] | 複数のカスタムボタン |
[st-card] | 関連記事カード（SWELLの |
[st-cmemo] | クリップメモ風ボックス |
[st-div], [st-div-a] | カスタムdiv。スタイルを自由に指定できる汎用ボックス |
[st-flexbox] | Flexboxベースのボックス表示 |
[st-kaiwa1〜8] | 吹き出し会話（キャラ画像・名前設定付き） |
[st-marumozi], [st-marumozi-big] | 丸文字装飾（見出しや強調に） |
[st-midasibox], [st-midasibox-intitle] | 見出し付きボックス（SWELL風） |
[st-minihukidashi] | 小型の吹き出し表示 |
[st-mybox] | タイトル付きボックス |
[st-postgroup], [st-catgroup] | 投稿一覧表示ショートコード |
[st-rank] | ランキング表示と星評価付き見出し |
[st-slidebox] | アコーディオン（開閉ボックス） |
[st-step] | ステップ（手順）ボックス |
[st-tab-content], [st-input-tab], [st-tab-main] | タブ切り替えボックス |
[st-timeline], [st-timeline-list] | タイムライン表示 |
[star5]〜[star0] | 星評価表示（5段階） |
add_shortcode( 'st-card', function ( $atts ) {
return do_shortcode( '投稿が見つかりません。 . '"]' );
});機能4：SEOメタ情報の自動引き継ぎ（SEO SIMPLE PACK向け）
移行後にSEO SIMPLE PACKを使用している場合、AFFINGER5で保存された以下のメタ情報を、自動的に引き継いで表示します。
引き継がれる項目：
| AFFINGER5メタキー | SSP側の表示 |
|---|---|
st_titlewords | ssp_meta_title |
st_description | ssp_meta_description |
st_keywords | ssp_meta_keyword |
stmeta_robots | ssp_meta_robots |
add_filter( 'ssp_output_title', function( $ssp_title ) {
$af5_meta = get_post_meta( get_the_ID(), 'st_titlewords', true );
return empty( $ssp_title ) && $af5_meta ? $af5_meta : $ssp_title;
});このおかげで、SEOの再設定不要でそのままスムーズに運用継続できます。
まとめ
「af5-to-swell」は、AFFINGER5からSWELLへ移行する際の手間と不安を大幅に削減してくれるプラグインです。
- コンテンツクラスの自動変換
- AFFINGER5のCSSの再利用（不要部分は除去）
- 主要ショートコードの再現
- SEOメタ情報の自動移行
- 自動アップデート対応
SWELLテーマに完全に移行する前のつなぎとしても非常に優秀なプラグインであり、記事資産を維持しながら段階的にブロックエディタへと移行していきたい方に最適です。
