cocoonフック調査～tinymce_style_formatsの使い方と活用例
2025年9月8日
cocoon
WordPress
タナビーの高梨です。
WordPressのテーマ「Cocoon」には、テーマ改変なしでデザインや動作を拡張できる豊富なアクション・フィルターフックが用意されています。
分かる範囲で内容を調査したのでブログにまとめていこうと思います。
今回はビジュアルエディターのスタイルに独自のスタイルを追加できるフィルターフック
👉tinymce_style_formats
です
フックの概要
| フック名 | 発火タイミング |
|---|---|
| tinymce_style_formats | ブロックエディタのクラシックブロックなどビジュアルエディター起動時 |
発火条件
ビジュアルエディタ起動時に、無条件に１回発火します。
使いどころ
ブロックエディタでクラシックブロックの「スタイル」に規定のスタイルを追加することができます。
具体的には以下のような形で追加されます。
あらかじめよく使う装飾パターンを登録しておけば、記事執筆中に簡単に呼び出せるようになり、作業効率化につながります。
ブロックエディタだけではなく、テンプレートやアフィリエイトタグの編集メニューなど、ビジュアルエディターすべてに反映されます。
apply_filters呼び出し元のソースコード
lib/admin-tinymce-qtag.php
$style_formats = apply_filters('tinymce_style_formats', $style_formats);引数
$style_formats：（array）追加するスタイル情報
| キー | 型 | 内容 |
|---|---|---|
| ‘title’ | string | 一番上位に表示される名前（上記の場合、「追加スタイル１」） |
| ‘items’ | array | 下層（実際に追加されるスタイル）の内容 |
itemsの内容
| キー | 型 | 内容 |
|---|---|---|
| ‘title’ | string | 表示される名前（上記の場合、「addStyle-1」など） |
| ‘inline’ | string | inlineに内包されるタグ（’span’など） |
| ‘block’ | string | 最上位に配置されるタグ（’div’など） |
| ‘classes’ | string | タグに付加されるクラス名 |
カスタマイズコード例
上記のカスタマイズ例です。
function customize_tinymce_style_formats ( $style_formats ) {
$style_formats[] = array(
'title' => '追加スタイル１',
'items' => array (
array(
'title' => 'addedStyle1-1',
'block' => 'div',
'classes' => 'addedStyle1-1'
),
array(
'title' => 'addedStyle1-2',
'block' => 'div',
'classes' => 'addedStyle1-2'
),
),
);
$style_formats[] = array(
'title' => '追加スタイル２',
'items' => array (
array(
'title' => 'addedStyle2',
'inline' => 'span',
'classes' => 'addedStyle2'
),
),
);
return $style_formats;
}
add_filter('tinymce_style_formats', 'customize_tinymce_style_formats');注意点
・追加したクラスに対応する CSS定義は別途必要 です。
・blockとinlineを混在させる場合は、出力結果に注意してください。
・スタイルが増えすぎるとエディタが煩雑になるため、本当に使うものだけを登録するのがおすすめです。
まとめ
・tinymce_style_formats フックは、ビジュアルエディタに独自のスタイルを追加できるフィルターフック。
・よく使う装飾を登録しておくと、記事作成の効率が向上します。
・CSSの用意や管理しやすさを意識して運用することが大切です。