カスタムフィールドを管理画面上から追加することができるWordPressプラグイン「Advanced Custom Fields」では、Wysiwygエディタを使ったフィールドも追加することができます。
ですが、Advanced Custom Fields標準のWysiwygエディタだと、通常の投稿のように”ビジュアル”と”テキスト”を切り替えることができません。
切り替えられなくても問題ない場合は良いのですが、投稿や固定ページと同じようにビジュアルとテキストを切り替えて使用したいというケースもあるかと思います。
そこで今回は、投稿や固定ページと同じように、ビジュアルとテキストが切り替えられるようにする方法をご紹介したいと思います。
Advanced Custom FieldsのWysiwygエディタでビジュアルとテキストを切り替えられるようにする方法
Advanced Custom FieldsのWysiwygエディタでビジュアルとテキストを切り替えられるようにするには、アドオンを入手する必要があります。
GitHubからアドオンをダウンロードし、解凍します。解凍したら、フォルダ名を「acf-wp-wysiwyg」に変更し、/wp-content/pluginsフォルダにフォルダ毎アップロードします。
プラグインに「Advanced Custom Fields: WP WYSIWYG」というのが追加されますので、有効化します。Advanced Custom Fields: WP WYSIWYGを有効化したら、Advanced Custom Fieldsのフィールドグループ編集画面に移動し、フィールドタイプで「Wysiwyg Editor (WordPress)」を選択してください。
「Wysiwyg Editor (WordPress)」を選択すると、以下のようにビジュアルとテキストが切り替え可能なWysiwygエディタが使用できます。
あとがき
GitHubの説明に以下のような注意点が記載されています。
This field uses the native wp_editor function which creates a very native looking WYSWYG field. The only downside to this field is that it does not work within a repeater field when adding a new row. Saving the post and reloading the edit screen will allow the field to render correctly and continue to work as expected.
Advanced Custom Fieldsのアドオンである「Repeater Field」との併用はできないそうです。もし、Repeater Fieldをすでに使っていたら、Advanced Custom Fields: WP WYSIWYGの導入は見送った方がよさそうです。
