ACF(Advanced Custom Fields)Wysiwygエディタのツールバーを独自にカスタマイズする方法

wordpressでカスタムフィールドを使う際にとっても便利なプラグインがACF(Advanced Custom Fields)です。これが無いと仕事にならないという方も多いのではないでしょうか。ACFではカスタムフィールドのフィールドタイプを幾つかの中から選択出来ますが、ビジュアルエディタとして「Wysiwygエディタ」というものが用意されています。この「Wysiwygエディタ」のツールバーを独自にカスタマイズする方法をご紹介します。

ACFのビジュアルエディタ「Wysiwygエディタ」とは

ACFのフィールドタイプには基本的なテキストフィールド、テキストエリアの他にもクライアントワークに役立つビジュアルエディタが用意されています。ビジュアルエディタを使いたい場合はフィールドタイプの「Wysiwygエディタ」を選べばビジュアルエディタが付いたテキストエリアになります。

設定画面ではビジュアルエディタの上部にあるツールバーの内容を選択することができ「Full」と「Basic」の2種類用意が標準で用意されています。また、画像やその他メディアファイルをアップロードする必要がない場合は、その下にある「メディアアップロードボタンを表示するか?」を「いいえ」にすると「メディアを追加ボタン」が非表示となります。

それでは、ツールバーは「Full」と「Basic」でどのように違うのかを確認していきます。

Fullを選択した場合

WordPress標準のビジュアルエディタツールバーです。「太字」や「斜体」など基本的なボタンが並んでおり、一番右の「ツールバー切り替え」ボタンを押すと2段目に「テキスト色」設定など隠れていたボタン達が表示されます。沢山の機能がありますが、個人的にこれらのボタンを全て使いこなして文章を書く人ってそんなに居ないような気がします。

Basicを選択した場合

Basicの場合は1段に収まるような形で機能が絞り込まれています。文章を書くならこのくらいで十分な気がしますね。

Basicよりも更にボタンを絞りたい場合どうするか

「Basic」は「Full」と比べてボタン数が少なくなっており、スッキリしていますが中にはフルスクリーン化など消しても問題なさそうなものがあるのと、見た目に影響しそうな「中央揃え」「右揃え」などがあります。

クライアントワークの場合、「中央揃え」や「右揃え」により意図しないデザインになる事もありそうなので、必要なければそれすらも消してしまった方がトラブルを防げます。

functions.phpにコードを追加することにより、「Full」「Basic」の他に独自のツールバーを作ることが出来ます。

functions.phpに追記するコード

function my_acf_toolbars($toolbars) {
  // ツールバーの種類に「Simple」という項目を追加
  $toolbars['Simple' ] = array();
  $toolbars['Simple' ][1] = array('bold', 'italic', 'underline'); // 「Simple」の中に表示したいボタンを選択

  return $toolbars;
}
add_filter('acf/fields/wysiwyg/toolbars' , 'my_acf_toolbars');

「Simple」という名の独自のツールバーを設定してみます。

$toolbars['Simple' ][1] = array('bold', 'italic', 'underline'); 

上記コードで「Simple」ツールバーにどのボタンを表示するかを設定しています。上記の場合「太字」「斜体」「下線」を表示するように設定しています。

ちなみにツールバーは2段、3段と分ける事ができ、その際は

$toolbars['Simple' ][1] = array('bold', 'italic', 'underline'); 
$toolbars['Simple' ][2] = array('追加したい機能'); 

という形にすれば、分かれます。

funcions.phpに追記した後のACF設定画面

コードを追加して保存した後、改めてACF設定画面を開いた時の画面です。「Full」「Basic」の横に先程新しく作った「Simple」が追加されていますので、Simpleを選択します。

Simpleを選択したときのWysiwygエディタ

設定通り「太字」「斜体」「下線」の3つだけが表示されたとてもシンプルなツールバーが表示されました。これで意図しないデザインを防ぐことができます。今回はシンプルにボタンを絞りましたが、もちろん自分の好みに合わせた内容に出来ます。

ツールバーに設定できる機能一覧

bold 太字
italic 斜体
strikethrough 打ち消し線
bullist 番号なしリスト
numlist 番号付きリスト
blockquote 引用
hr 水平線
alignleft 左寄せ
aligncenter 中央寄せ
alignright 右寄せ
link リンクの挿入/編集
unlink リンクの削除
wp_more 「続きを読む」タグを挿入
fullscreen フルスクリーン
wp_adv ツールバー切り替え(2段目以降の表示・非表示を切り替える)
rmnlQuicktagSettings_tmce Quicktags
formatselect 段落(h1、h2などの見出し選択)
alignjustify 両端揃え
forecolor テキスト色
pastetext テキストとしてペースト
removeformat 書式設定をクリア
charmap 特殊文字
outdent インデントを減らす
indent インデントを増やす
undo 取り消し
redo やり直し
wp_help キーボードショートカット
code ソースコード

ACF設定画面上から「Full」「Basic」を消す方法

クライアントがACFを触る事はあまり無いと思いますが、ACF設定画面で「Full」「Basic」を選択させたくない場合、functions.phpのコードを以下のようにすれば消すことが出来ます。

function my_acf_toolbars($toolbars) {
  // ツールバーの種類に「Simple」という項目を追加
  $toolbars['Simple' ] = array();
  $toolbars['Simple' ][1] = array('bold', 'italic', 'underline'); // 「Simple」の中に表示したいボタンを選択

  // ACF設定画面から「Full」「Basic」を非表示に
  unset($toolbars['Full']);
  unset($toolbars['Basic']);
  return $toolbars;
}
add_filter('acf/fields/wysiwyg/toolbars' , 'my_acf_toolbars');

これでACF設定画面には「Simple」しか表示されなくなりました。

使う方に合わせたカスタマイズを

クライアントワークの場合、実際に使う人はあまりwordpressに慣れていないケースが多くその様な方の場合ボタンがズラッと並んでいると抵抗感があると思います。あまり必要でなさそうな機能はバッサリカットして極力シンプルにする方がトラブルも防げるので、使う方に合わせたカスタマイズをしていきたいものです。