カテゴリー編集ページの「説明文入力ボックス」をビジュアルエディターにする方法

以前、カテゴリー編集ページの「カテゴリー説明文」を用いて、カテゴリーページに文章を表示する方法を紹介しました。

Wordpressのカテゴリ設定には、「説明」というカテゴリの説明を入力する項目があります。 カテゴリの説明とは、Wordpr...

ただ、デフォルトの「カテゴリー説明文入力」は普通のTEXTAREA入力ボックスでした。

デフォルトのテキスト入力ボックスだと、文章に対して、ちょっと凝った装飾をしようと思っても、タグを入力する必要があり、ちょっと不便です。

Wordpressデフォルトのカテゴリー説明文入力ボックス

今回はこの説明文入力ボックスを、ビジュアルエディターに変更するカスタマイズ方法を紹介したいと思います。

WordPressのカテゴリー説明文入力ボックスをビジュアルエディターに変更

これにより、通常のテキストボックスよりは、手軽に文章装飾が出来るようになるかと思います。

スポンサーリンク
レクタングル(大)広告

カテゴリー説明文入力欄をビジュアルエディターにする方法

カテゴリー説明文のテキストエリアをビジュアルエディターに変更するには、functions.phpに以下のコードをコピペするだけです。

//カテゴリー説明文でHTMLタグを使えるようにする
remove_filter( 'pre_term_description', 'wp_filter_kses' );
//pタグが付与されるのでpタグが邪魔な場合取り除く
remove_filter( 'term_description', 'wp_kses_data' );

//カテゴリー説明文の代わりに表示するビジュアルエディターのHTML
add_filter('edit_category_form_fields', 'cat_description');
if ( !function_exists( 'cat_description' ) ):
function cat_description($tag){
  ?>
    <table class="form-table">
      <tr class="form-field">
        <th scope="row" valign="top"><label for="description"><?php _e('Description'); ?></label></th>
        <td>
        <?php
          $settings = array('wpautop' => true, 'media_buttons' => true, 'quicktags' => true, 'textarea_rows' => '15', 'textarea_name' => 'description' );
          wp_editor(wp_kses_post($tag->description , ENT_QUOTES, 'UTF-8'), 'cat_description', $settings);
        ?>
        <br />
        <span class="description"><?php _e('The description is not prominent by default; however, some themes may show it.'); ?></span>
        </td>
      </tr>
    </table>
  <?php
}
endif;

//カテゴリー編集ページから「カテゴリー説明文」を取り除く
add_action('admin_head', 'remove_default_category_description');
if ( !function_exists( 'remove_default_category_description' ) ):
function remove_default_category_description(){
  global $current_screen;
  if ( $current_screen->id == 'edit-category' )
  {
  ?>
    <script type="text/javascript">
    jQuery(function($) {
        $('textarea#description').closest('tr.form-field').remove();
    });
    </script>
  <?php
  }
}
endif;

やっていることを簡単にします。

まず、「edit_category_form_fields」フックを用いて、新しい「ビジュアルエディター入力ボックス」を追加しています。

そして、「admin_head」フック部分でJavaScript(jQuery)を用いて以前の「カテゴリー説明文入力ボックス」を削除しています。

参考 Visual Term Description Editor – WordPress Plugins

動作確認

上記のコードをコピペするだけで、以前は以下のようなテキスト入力ボックスだったのが

カスタマイズ前のカテゴリー説明文入力ボックス

ビジュアルエディターを用いたリッチなエディターに変わりました。

カスタマイズ後のビジュアルエディターを用いたカスタマイズ説明文入力ボックス

このカスタマイズは「カテゴリー編集」画面のみで適用されます。「カテゴリー一覧」画面では適用されないのでご注意ください。

まとめ

こんな感じで、手順としては結構簡単に「カテゴリー説明文」をビジュアルエディターに変更することが可能です。

ただ「カテゴリー説明文」は、Wordpressデフォルトで以下のように書かれています。

この説明はデフォルトではあまり重要な意味を持ちませんが、これを表示するテーマも中にはあります。

なので、「カテゴリー説明文」を利用していないテーマであれば、このカスタマイズの意味は持ちません。

ただ、テーマをカスタマイズすることで、「カテゴリー説明文」を意図した場所に表示することは可能です。

Wordpressのカテゴリ設定には、「説明」というカテゴリの説明を入力する項目があります。 カテゴリの説明とは、Wordpr...

ということで「カテゴリー説明文表示に対応しているテーマで、説明文のHTMLをもう少し手軽に編集したい」なんて場合にどうぞ。

『カテゴリー編集ページの「説明文入力ボックス」をビジュアルエディターにする方法』へのコメント

  1. 名前:山下 投稿日:2018/10/17(水) 09:23:56 ID:523525ae9

    為になる情報ありがとうございます!投稿カテゴリーで重宝しています。
    woocommerceの商品カテゴリーにも利用したいのですが、どうしたらいいかご教授いただけないでしょうか?

  2. アバター画像 名前:わいひら 投稿日:2018/10/18(木) 23:30:16 ID:6d6a19e88

    個々のプラグインの対応方法まではわからないです。
    英語かもしれませんが、プラグインのフォーラムで質問するしかないかもしれません。
    ただ、通常プラグインフォーラムでも、カスタマイズ方法まではサポートしてないと思うので、プラグインのコアファイルを調べるか、業者に依頼するしかないかもしれません。