SWELL│カスタム書式を増やすカスタマイズ

2022.04.102026.10.13

文字単位でクラスを追加できて、装飾を施せるSWELLのカスタム書式。

どうしても文字部分だけCSSでカスタマイズしたい時に非常に便利です。

この記事で参照したSWELL 2.19.0では、設定画面の標準カスタム書式は2つです。

追加にはswell_custom_formatsフィルターを使います。

掲載画像は旧画面の操作位置を示す参考であり、以下の最新版コードを現在のビジュアル編集画面で操作した記録ではありません。

そこで本記事ではカスタム書式を追加するカスタマイズを紹介します。

SWELLでカスタム書式を増やすカスタマイズ

swell_custom_formatsにフックして、カスタム書式を増やすコードを追加してあげます。

それでは詳しく解説いたします。

標準のカスタム書式に少なくとも1つ名前を付ける

まずは基本から、空白のカスタム書式の表示入力欄に名前を入力しましょう。

WordPressの管理画面＞ SWELL設定＞カスタム書式

SWELL 2.19.0のソースでは、標準書式の名前が少なくとも1つ設定されているときにこのフィルターを呼びます。

標準の書式1か2のどちらかに名前を設定してください。

CSSの記述

変更前にカスタム書式用CSSの内容を控えておきます。

既存のCSSを残したまま、確認用のCSSを追加します。

今回はカスタム書式を3つ追加する予定です。

WordPressの管理画面＞SWELL設定＞エディタ設定＞カスタム書式用CSSを開いて、下記のコードを挿入しましょう。

/*カスタム書式の追加確認*/
.swl-format-3{
	color:#b00020;
}
.swl-format-4{
	color:#0645ad;
}
.swl-format-5{
	color:#176b2c;
}

コード枠のファイル名はstyle.cssですが、この手順の貼付先はSWELL設定の「カスタム書式用CSS」です。

子テーマのstyle.cssだけへ貼った場合に、編集画面にも同じ装飾が読み込まれることを保証する手順ではありません。

functions.phpにコードを挿入する

コードを記述する場所は下記になります。

WordPressの管理画面＞外観＞テーマファイルエディター＞ functions.php

子テーマのfunctions.phpをバックアップし、PHPエラーで管理画面を開けなくなった場合にも元のファイルへ戻せる手段を確保します。

以下は既存のPHP開始タグの内側へ追加します。

同名関数や旧版は置き換え、二重登録しないでください。

親テーマには追記しません。

$add_custom_formatsの配列の部分に追加したいクラス名と名前を記載しましょう。

例：swl-format-3 / カスタム書式3

function motoki_swell_add_custom_formats($custom_formats) {
    $add_custom_formats = array(
        array('className' => 'swl-format-3', 'title' => 'カスタム書式3'),
        array('className' => 'swl-format-4', 'title' => 'カスタム書式4'),
        array('className' => 'swl-format-5', 'title' => 'カスタム書式5')
    );
    $names = array_column($custom_formats, 'name');
    $classes = array_column($custom_formats, 'className');
    foreach ($add_custom_formats as $format) {
        $name = 'loos/custom-format-' . $format['className'];
        if (in_array($name, $names, true) || in_array($format['className'], $classes, true)) continue;
        $custom_formats[] = array('name' => $name, 'title' => $format['title'], 'tagName' => 'span', 'className' => $format['className']);
        $names[] = $name;
        $classes[] = $format['className'];
    }
    return $custom_formats;
}
add_filter('swell_custom_formats', 'motoki_swell_add_custom_formats', 999);

※コードはSWELLユーザーフォーラムの過去の投稿記事を参考にしています。

追加したカスタム書式を編集画面で確認する

あとは投稿記事の編集画面でテキストを入力します。

テキストを選択して、SWELLアイコンから選択。

再読み込みした編集画面で、カスタム書式3、カスタム書式4、カスタム書式5が表示されるか確認してください。

表示されない場合は、後述の表に沿って標準書式の名前と登録の重複を調べます。

下書きのテキストに書式を設定し、編集画面とプレビューで文字色を確認してください。

最新コードのビジュアルメニューからの選択・解除は未検証のため、次の旧画像だけを動作確認の根拠にしないでください。

カスタム書式を増やすカスタマイズは以上です。

名前・保存済み本文・文字色を分けて確認する

見える状態	確認する場所
書式の項目が増えない	標準の書式1・2の名前、PHPの有効化、既存name/classNameとの重複を確認
保存後の文字にクラスはあるが色が付かない	対応する.swl-format-3〜5のCSSと、公開側での読み込みを確認
コードを外しても本文にspanが残る	保存済み本文から書式を解除する。関数の停止だけでは本文を変更しない

保存した本文を確かめるときは、下書きの右上メニューでコードエディターを開き、対象文字列がspanとswl-format-3などのクラスで囲まれているか確認します。

前後のブロックコメントを含めて本文を控え、確認後はビジュアルエディターへ戻します。

2026年10月3日の検証記録では、隔離したWordPress 7.1.2／SWELL 2.19.0で、コード編集から保存したswl-format-3が再編集時にも残り、公開側の文字色がCSSの#b00020になることを確認しました。

これは保存済みクラスとCSSの確認です。

書式メニューからの文字選択・解除操作は、この確認には含みません。

まとめ

本記事ではカスタム書式を増やすカスタマイズを紹介いたしました。

カスタム書式は特定の文字を非表示にしたり、または色を変えたり、アンカーリンクを消したりと、細かいところのカスタマイズができるので、とても重宝します。

よくある質問：SWELLでカスタム書式を増やすとき

SWELLの標準のカスタム書式は、いくつですか？

記事では、参照したSWELL 2.19.0の設定画面の標準カスタム書式は2つです。追加にはswell_custom_formatsフィルターを使います。

カスタム書式を増やす前に、何を設定しますか？

標準の書式1か2のどちらかに名前を設定してください。記事によると、SWELL 2.19.0のソースでは、標準書式の名前が少なくとも1つ設定されているときにこのフィルターを呼びます。

CSSはどこに貼りますか？

コード枠のファイル名はstyle.cssですが、貼付先はSWELL設定の「カスタム書式用CSS」です。記事では、子テーマのstyle.cssだけへ貼った場合に、編集画面にも同じ装飾が読み込まれることは保証されないとされています。変更前にカスタム書式用CSSの内容を控えておきます。

PHPはどこに追加しますか？

子テーマのfunctions.phpをバックアップし、PHPエラーで管理画面を開けなくなった場合にも元のファイルへ戻せる手段を確保します。既存のPHP開始タグの内側へ追加し、同名関数や旧版は置き換えて二重登録しないでください。親テーマには追記しません。

書式の項目が増えない、または色が付かないときはどうしますか？

記事の表に沿って確認します。項目が増えない場合は、標準の書式1・2の名前、PHPの有効化、既存name/classNameとの重複を確認します。クラスはあるが色が付かない場合は、対応する.swl-format-3〜5のCSSと、公開側での読み込みを確認します。

保存した本文に書式がかかっているか、どう確かめますか？

下書きの右上メニューでコードエディターを開き、対象文字列がspanとswl-format-3などのクラスで囲まれているか確認します。前後のブロックコメントを含めて本文を控え、確認後はビジュアルエディターへ戻します。

コードを外せば、書式も消えますか？

消えません。記事では、コードを外すだけでは保存済み本文のspanやクラスは消えないとされています。戻すときはまず対象テキストの追加書式をエディターで解除して保存し、その後に関数・add_filter行と対応CSSを外します。

色だけで意味を伝えてもよいですか？

記事では、色だけで意味を伝えず、重要・補足などの語も併記してください。また、既存のnameまたはclassNameと重なる項目は追加しません。

どこまで動作確認されていますか？

記事では、2026年10月3日の検証記録として、隔離したWordPress 7.1.2／SWELL 2.19.0で、コード編集から保存したswl-format-3が再編集時にも残り、公開側の文字色がCSSの#b00020になることを確認したとされています。書式メニューからの文字選択・解除操作は確認に含まれず、最新コードのビジュアルメニューからの選択・解除は未検証です。