ACFのWYSIWYGメニュー(Full/Basic)をカスタマイズする方法
この記事ではACF(Advanced Custom Fileds)のWYSIWYGメニューを調整する方法をご紹介します。
個人的にツールバーの定義名称が不明で、調べるのに少し時間を費やしたので取りまとめてみました。
ACFのWYSIWYGにはFullとBasicがある
WordPressの従来の標準WYSIWYGでは一つしかメニューバーがありませんが、ACFではフィールドタイプからWYSIWYGを選択すると、ツールバーが表示されFullとBasicを選択することができます。
標準のFullでは以下のメニュー構成となります。
Basicでは以下の構成となります。
このままでも便利ですが、それぞれ過不足が出てきて調整したくなることも多いと思います。そこでこの記事ではカスタマイズする方法を2種類ご紹介します。
ツールバーをカスタマイズ (プラグイン利用)
手軽に行うにはTinyMCE Advancedの利用がおすすめです。
このプラグインはACFと互換性があり、メニューの項目をFullと連動させ調整することが可能です。メニューはドラッグアンドドロップで行えるので手軽に調整が行えます。
ここでの調整内容は以下のようにそのまま反映されます。とても便利ですね！
また余談となりますが、TinyMCE Advancedの利用メリットはもう一つありテーブル(Table)作成が容易に行えるので導入はACFとも相性がいいです。
ツールバーのカスタマイズ (テーマに記載)
先程はプラグインによるカスタマイズでしたが、WYSIWYGのFullとBasic以外にツールバーを自由にパターン作成が可能です。テーマのfunctions.php内に以下の登録を行います。
<?php
add_filter( 'acf/fields/wysiwyg/toolbars' , 'my_toolbars' );
function my_toolbars( $toolbars )
{
$toolbars['original bar1' ] = array();
$toolbars['original bar1' ][1] = array('bold' , 'italic' , 'underline' );
return $toolbars;
}
?> すると、以下のようにACF側でもツールバーパターンが増えていることが確認できます。
記事側も確認をすると以下のようになります。
またこのカスタムツールバーは何個でも定義できるので必要に応じて定義を増やせます。
<?php
add_filter( 'acf/fields/wysiwyg/toolbars' , 'my_toolbars' );
function my_toolbars( $toolbars )
{
$toolbars['original bar1' ] = array();
$toolbars['original bar1' ][1] = array('bold' , 'italic' , 'underline' ); // WYSIWYG 1行目
$toolbars['original bar1' ][2] = array('bullist'); // WYSIWYG 2行目
return $toolbars;
}
add_filter( 'acf/fields/wysiwyg/toolbars' , 'my_toolbars2' );
function my_toolbars2( $toolbars2 )
{
$toolbars2['simple' ] = array();
$toolbars2['simple' ][1] = array('bold','link');
return $toolbars2;
}
?> ツールバーの定義名を確認する
よく使うツールバーのボタン名についても以下まとめましたので、ご参考ください。
| 太字 | |
bold |
| 斜体 | |
italic |
| 文字色 | |
forecolor |
| 引用 | |
blockquote |
| 黒丸リスト | |
bullist |
| 数字リスト | |
numlist |
| 左揃え | |
aligncenter |
| 中央揃え | |
aligncenter |
| 右揃え | |
alignright |
| 両端揃え | |
alignjustify |
| リンク | |
link |
| リンク解除 | |
unlink |
| テーブル | |
table |
| インデントを減らす | |
outdent |
| インデントを増やす | |
indent |
| 元に戻す | |
undo |
| やり直す | |
redo |
| 段落 | |
formatselect |
| フォントファミリー | |
fontselect |
| フォントサイズ | |
fontsizeselect |
| ツールバー切り替え | |
wp_adv |
TIPS : この機能を使うタイミング
この機能はいつ使うと便利なの？というところですが、以下などが挙げられるかと思います。
① デザインで元々想定している要素タグが限られている。
(コーディングすらしていないので崩れのもとになってしまう)
② 該当のWYSIWYGエリアで利用してほしくない要素がある。
(デザイン性として運用時に利用してほしくないタグ、例えばテーブルなど)
など。
表示するボタンの数を制限したり、複数パターンを作成して、特定のWYSIWYGではAパターンのツールバー、別の所ではBパターンのツールバーを表示といった利用方法が便利かと思います。比較的大規模サイト向けの際には便利ですね。
また個人的にはプラグインTinyMCE Advancedを有効化の上、テーブルを有効化させつつfunctions.php側でメニューバーを調整するといった方法を必要に応じて採用しています。
ご参考になりましたら幸いです！