cocoonフック調査～tinymce_init_arrayの使い方と活用例
タナビーの高梨です。
WordPressのテーマ「Cocoon」には、テーマ改変なしでデザインや動作を拡張できる豊富なアクション・フィルターフックが用意されています。
分かる範囲で内容を調査したのでブログにまとめていこうと思います。
今回はビジュアルエディターのツールバーの内容を様々にカスタマイズできるフィルターフック
👉tinymce_init_array
です
フックの概要
| フック名 | 発火タイミング |
|---|---|
| tinymce_init_array | ビジュアルエディタ起動時 |
発火条件
ビジュアルエディタ起動時に、無条件に１回発火します。
使いどころ
下記の記事で紹介しているtinymce_style_formatsはスタイルだけの追加ですが、このフックはその他の内容も追加編集することができます。
段落の中から「見出し１」を外して「グループ」を追加する例
フォントサイズのリストを変更する例
スタイルに追加する例
だたし、WordPressの標準でtiny_mce_before_initという同じような機能のフィルターフックが提供されており、あえてこのフックを使う必要性は理解できていません。
apply_filters呼び出し元のソースコード
lib/admin-tinymce-qtag.php
$init_array = apply_filters('tinymce_init_array', $init_array);引数
$init_array：（array）TinyMCE configの配列ですが、詳細は調べきれませんでした。
カスタマイズコード例
上記のカスタマイズ例です。
function customize_tinymce_init_array ( $init_array ) {
$style_formats = json_decode($init_array['style_formats'], true );
$style_formats[] = array(
'title' => 'addedStyle',
'items' => array(
array(
'title' => 'addedStyle1',
'block' => 'div',
'classes' => 'addedStyle1'
),
array(
'title' => 'addedStyle2',
'block' => 'div',
'classes' => 'addedStyle2'
)
)
);
$init_array['style_formats'] = json_encode( $style_formats );
$init_array['block_formats'] = '段落=p; グループ=div; 見出し2=h2; 見出し3=h3; 見出し4=h4; 見出し5=h5; 見出し6=h6; 整形済みテキスト=pre';
$init_array['fontsize_formats'] = '1rem 2rem 3rem 4rem';
return $init_array;
}
add_filter('tinymce_init_array', 'customize_tinymce_init_array');注意点
・WordPressの標準で提供されているtiny_mce_before_initでほぼ事足りるので、こちらのフックを使う理由は明確にしておいた方が良い
まとめ
・tinymce_style_formats フックは、ビジュアルエディタの内容を独自のものに変更できるフィルターフック。
・よく使う装飾を登録しておくと、記事作成の効率が向上します。
・CSSの用意や管理しやすさを意識して運用することが大切です。
・WordPressの標準で提供されているtiny_mce_before_initと何が違うのかは不明