• RSS

[WP]Advanced Custom FieldsのWYSIWYGでテキストとビジュアル両方のエディタを利用する方法

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

Advanced Custom FieldsのWYSIWYGは、テキストエディタとビジュアルエディタを切り替えて利用することができなのですが、「Advanced Custom Fields: WP WYSIWYG」というアドオンを利用することで、通常投稿や固定ページ本文の編集時のように、両方のエディタを使うことができるようになります。


Advanced Custom Fields: WP WYSIWYGを利用するには、あらかじめAdvanced Custom Fieldsプラグインが有効化されている必要があります。

Advanced Custom Fields: WP WYSIWYGアドオンの入手

以下のページよりアドオンをダウンロードします。


Advanced Custom Fields: WP WYSIWYGの使い方

zipファイルを解凍後、acf-wordpress-wysiwyg-field-masterをwp-content/plugins/フォルダに移動し、サーバーへアップします。
Advanced Custom FieldsのWYSIWYGでテキストとビジュアル両方のエディタを利用する方法

WordPressの管理画面にアクセスし、プラグインページに「Advanced Custom Fields: WP WYSIWYG」が表示されているかと思いますので、有効化します。
Advanced Custom FieldsのWYSIWYGでテキストとビジュアル両方のエディタを利用する方法

プラグインを有効化したら、管理画面左メニューの「カスタムフィールド」をクリックして、フィールドグループページに移動します。
Advanced Custom FieldsのWYSIWYGでテキストとビジュアル両方のエディタを利用する方法

フィールドグループの編集ページで、フィールドタイプに「Wysiwyg Editor (WordPress)」が追加されているので選択します。
Advanced Custom FieldsのWYSIWYGでテキストとビジュアル両方のエディタを利用する方法

あとはAdvanced Custom Fields同様、フィールドが必須かどうかやデフォルト値、メディアアップロードボタンを表示するかなどを設定し、カスタムフィールドを利用する投稿タイプを指定の上、「公開」ボタンをクリックします。
Advanced Custom FieldsのWYSIWYGでテキストとビジュアル両方のエディタを利用する方法

投稿画面でエディタの切り替え

カスタムフィールドを利用する投稿タイプの編集画面へ行くと、以下のようなフィールドが表示され、
Advanced Custom FieldsのWYSIWYGでテキストとビジュアル両方のエディタを利用する方法

ビジュアルエディタとテキストエディタの切り替えができることを確認します。
Advanced Custom FieldsのWYSIWYGでテキストとビジュアル両方のエディタを利用する方法

もちろん、TinyMCE Advancedプラグインによるビジュアルエディタの拡張も反映されます。
Advanced Custom FieldsのWYSIWYGでテキストとビジュアル両方のエディタを利用する方法



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

This site uses Akismet to reduce spam. Learn how your comment data is processed.