WordPress:Advanced Custom FieldsのWysiwygエディタをビジュアルとテキストで切り替えできるようにする方法

  • Posted on
  • Category : WordPress
WordPress:Advanced Custom FieldsのWysiwygエディタをビジュアルとテキストで切り替えできるようにする方法

WordPressでカスタムフィールドを扱う際に非常に便利になるプラグイン「Advanced Custom Fields」では、フィールドタイプでWysiwygエディタを選ぶことが出来るようになっていますが、ビジュアルエディタのみが使える状態になっています。それを投稿画面などにあるWordPressnのデフォルトエディタのようにビジュアルとテキストで切り替えられるようにする方法です。

※以下で紹介する内容は「Advanced Custom Fields」を既に使用(有効化)している想定のものになります。

Advanced Custom Fieldsでエディタを追加する

Wysiwygエディタを使いたいというときは、フィールドタイプの項目で「Wysiwygエディタ」を選ぶ

上のイメージにあるように、単純にAdvanced Custom Fields(以下:ACF)を有効化してをWysiwygエディタを使いたいというときは、フィールドタイプの項目で「Wysiwygエディタ」を選ぶことで表示させることが可能です。

「ビジュアル」と「テキスト」を切り替えるタブがない...

ただ、投稿画面などにデフォルトで表示されているエディタには右上に「ビジュアル」「テキスト」と表示されたタブがあり、それを使うことで見栄えを切り替えられるようになっていますが、ACFで追加したエディタにはこれらがなく、基本的にビジュアル時の見栄えしか表示されません。
ACFで追加されたWysiwygエディタでもデフォルトエディタのようにビジュアルとテキストで切り替えられるようにしたい場合は、以下で紹介する方法で実装できます。

ビジュアルとテキストを切り替えられるようにする

ACFのWysiwygエディタをビジュアルとテキストで切り替えられるようにしたいときは、「ACF { WordPress WYSIWYG Field」というアドオンを利用することで実装することができます。
実装手順はGitHubにも書かれていますが、以下のように2タイプの実装方法があります。

実装方法1:プラグインとして読み込む

一般的なプラグインを使用するような形で実装する方法です。

まず「ACF { WordPress WYSIWYG Field」から必要なファイルをダウンロードしてきます。
ダウンロードしたファイルを解凍すると、acf-wordpress-wysiwyg-field-masterといったフォルダ名になっていると思うので、それをacf-wp-wysiwygにリネーム(フォルダ名を変更)し、あとは通常のプラグインと同様に/wp-content/plugins/内にフォルダ毎配置します。

フォルダを配置後、管理画面のプラグイン一覧を確認すると「Advanced Custom Fields: WP WYSIWYG」というのが追加されているのが確認できるので有効化します。

「Wysiwyg Editor (WordPress)」を選択

あとは、ACFの設定画面でフィールドタイプを選択すると「Content」の箇所に「Wysiwyg Editor (WordPress)」というのが追加されているので、そちらを選択すればビジュアルとテキストを切り替えることができるWysiwygエディタを選択することが可能になります。

実装方法2:テーマ内で実装する

このアドオンは、プラグインだけでなくテーマ内に含める形で実装することもできます。
ACFと一緒に使うものですし個人的にはプラグインとして読み込む形の方が良いとは思いますが、環境など何らかの理由でプラグインとしては使いたくない人はこちらの方法を利用しましょう。

手順としては先ほどとほぼ一緒で、まず「ACF { WordPress WYSIWYG Field」から必要なファイルをダウンロードし、やはり同じく解凍したフォルダ名をacf-wp-wysiwygにリネーム(フォルダ名を変更)しておきます。

フォルダをリネームしたら、こちらの方法の場合はそのフォルダを使用しているテーマ内に配置し、内容を読み込むためにテーマ内にあるfunction.phpへ書きを記述します。

functions.php

include_once( 'acf-wp-wysiwyg/acf-wp_wysiwyg.php' );

※テーマ直下に配置しない場合は、パスを環境に合わせて変更してください。

「Wysiwyg Editor (WordPress)」を選択

上記記述をfunction.phpに記述後、ACFの設定画面でフィールドタイプを選択すると「Content」の箇所に「Wysiwyg Editor (WordPress)」というのが追加されているので、そちらを選択すればビジュアルとテキストを切り替えることができるWysiwygエディタを選択することが可能になります。

エディタを確認してみると…

「ビジュアル」と「テキスト」を切り替えられるようになる

上で紹介したいずれかの方法でエディタを選択した後に該当の投稿ページを確認してみると、このイメージのようにACFで実装したWysiwygエディタでもビジュアルとテキストで切り替えられるようになっているのを確認できます。

ただし…

上記方法で切り替え可能なエディタは実装できるのですが、実はこの機能には1点だけ欠点があり、GitHubにも書かれてはいますが、この機能は同じくACFのアドオンである「Repeater Field」との併用ができません。
とりあえず設定すること自体はできるのですが、実際に使用しようとすると切り替えが上手くできなかったりエディタ領域が崩れたりしてしまいます。

普通に使う機会多いと思いますし、なんでわざわざアドオンにしているのかなと思ったのですが、これが原因でACF内の機能に含めないんですかね…。

Back to Top

WordPress:Advanced Custom FieldsのWysiwygエディタをビジュアルとテキストで切り替えできるようにする方法

WordPress:Advanced Custom FieldsのWysiwygエディタをビジュアルとテキストで切り替えできるようにする方法

/ WordPress

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。