Advanced Custom FieldsのWysiwygエディタに独自のツールバーを追加する方法

Advanced Custom FieldsのWysiwygエディタに独自のツールバーを追加する方法

Advanced Custom FieldsのWysiwygエディタに独自のツールバーを追加する方法

Advanced Custom Fields(ACF)のWysiwygエディタでは、ツールバーの種類を「Full」と「Basic」の2種類から選択できるようになっています。

ツールバー「Full」を選択した場合は、以下のようにすべての機能がツールバーに表示されます。

Fullを選択した場合のWysiwygエディタ
Fullを選択した場合のWysiwygエディタ

ツールバー「Basic」を選択した場合は、以下のように利用できる機能の種類が限定されます。

Basicを選択した場合のWysiwygエディタ
Basicを選択した場合のWysiwygエディタ

ツールバーは2種類用意されていますが、もっと機能を限定にした独自のツールバーにしたいこともあるかと思います。そんな時のために、Wysiwygエディタで独自のツールバーを利用できるようにする方法をご紹介したいと思います。

Advanced Custom FieldsのWysiwygエディタに独自のツールバーを追加する方法

Wysiwygエディタに独自のツールバーを追加するには、適用しているテーマのfunctions.phpに以下のようなコードを追加します。

function my_acf_wysiwyg_toolbars($toolbars) {
  $toolbars['Original'] = array();
  $toolbars['Original'][1] = array('bold', 'link', 'unlink');
  return $toolbars;
}
add_filter('acf/fields/wysiwyg/toolbars', 'my_acf_wysiwyg_toolbars');

「array(‘bold’, ‘link’, ‘unlink’)」の部分で、ツールバーに表示する機能を指定しています。また、「$toolbars[‘Original’]」の”Original”の部分は、追加するツールバーの名前なので任意で変更してください。

上記を追加すると、フィールドグループの編集画面でWysiwygエディタのツールバーの選択肢に「Original」という項目が追加されます。

独自のWysiwygツールバーの追加

Originalを選択すると、指定したbold(太字)/link(リンクの挿入と編集)/unlink(リンクの削除)のみが使えるWysiwygエディタになります。

機能が限定されたWysiwygエディタ
Originalを選択した場合のWysiwygエディタ

ツールバーを2行に分けたい際は、以下のように記述します。「$toolbars[‘Original’][1]」で1行目、「$toolbars[‘Original’][2]」で2行目の機能を指定しています。

function my_acf_wysiwyg_toolbars($toolbars) {
  $toolbars['Original'] = array();
  $toolbars['Original'][1] = array('bold', 'link', 'unlink');
  $toolbars['Original'][2] = array('italic', 'bullist', 'numlist');
  return $toolbars;
}
add_filter('acf/fields/wysiwyg/toolbars', 'my_acf_wysiwyg_toolbars');

以下のように2行に分かれてボタンが表示されます。

ツールバーを2行にしたWysiwygエディタ
ツールバーを2行にしたWysiwygエディタ

Wysiwygエディタのツールバーに追加できる機能の一覧

Wysiwygエディタのツールバーに追加できる機能は以下の通りです。独自のツールバーを追加する際は、使いたい機能をfunctions.phpで指定してください。

formatselect フォーマットの選択(段落や見出しの切替)
bold 太字
italic イタリック(斜体)
bullist 番号なしリスト
numlist 番号付きリスト
blockquote 引用
alignleft 左寄せ
aligncenter 中央揃え
alignright 右寄せ
link リンクの挿入と編集
unlink リンクの削除
wp_more 続きを読むタグを挿入
fullscreen フルスクリーン
wp_adv ツールバー切り替え
strikethrough 打ち消し線
hr 横ライン
forecolor テキスト色
pastetext テキストとしてペースト
removeformat 書式設定をクリア
charmap 特殊文字
outdent インデントを減らす
indent インデントを増やす
undo 元に戻す
redo やり直す
wp_help キーボードショートカット

あとがき

Wysiwygエディタでは、ツールバーをBasicにしても引用とか中央揃えとか割と色々できちゃいます。

Wysiwygエディタを使いたいけどもっと機能を限定したい時は、独自のツールバーを追加してあげることで解決しますし、出力側の実装もやりやすくなりますね。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です