WordPress投稿画面の「カテゴリー一覧」にフィルタリング(検索)機能を追加するカスタマイズ方法

WordPressも長く運営しているとカテゴリの数が増えてきます。

カテゴリ数が10~20とかだと特に問題はないのですが、これが50~100以上となってくると目当てのカテゴリを選ぶのも面倒になってきます。

投稿画面のカテゴリリスト多いと探すのが面倒

毎回多くのカテゴリリストの中から、目当てのカテゴリを探すのは本当に億劫です。

なので、「カテゴリリストにフィルタリングフォームを設けて手軽にカテゴリを探せる」といったような機能を追加してみることにしました。

カテゴリリストにフィルタリング機能追加

その際に行ったカスタマイズ方法を紹介したいと思います。

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

主な手順

今回のカスタマイズに必要な主な手順は以下だけです。

  1. functions.phpにコードを貼り付ける

単に、カテゴリリストのフィルタリング(インクリメンタルサーチ)機能を付加したいだけなら、コピペ一発で行えます。

functions.phpにコードを貼り付ける

カテゴリリストにフィルタリング機能を付けるには、以下のコードをfunctions.phpに追記する形でコピペします。

//投稿管理画面のカテゴリー選択にフィルタリング機能を付ける
function add_category_filter_form_domo() {
?>
<script type="text/javascript">
jQuery(function($) {
  //全角英数字を半角英数字にする
  function zenToHan(text) {
    return text.replace(/[A-Za-z0-9]/g, function(s) {
          return String.fromCharCode(s.charCodeAt(0) - 65248);
      });
  }

  //フィルタリング機能の実装
  function catFilter( header, list ) {
    var form  = $('<form>').attr({'class':'filterform', 'action':'#'}).css({'position':'absolute', 'top':'38px'}),
        input = $('<input>').attr({'class':'filterinput', 'type':'text', 'placeholder':'カテゴリー検索' });
    $(form).append(input).appendTo(header);
    $(header).css({'padding-top':'42px'});
    $(input).change(function() {
      var filter = $(this).val();
      filter = zenToHan(filter).toLowerCase();
      if( filter ) {
        //ラベルテキストから検索文字の見つからなかった場合は非表示
        $(list).find('label').filter(
          function (index) {
            var labelText = zenToHan($(this).text()).toLowerCase();
            return labelText.indexOf(filter) == -1;
          }
        ).hide();
        //ラベルテキストから検索文字の見つかった場合は表示
        $(list).find('label').filter(
          function (index) {
            var labelText = zenToHan($(this).text()).toLowerCase();
            return labelText.indexOf(filter) != -1;
          }
        ).show();
      } else {
        $(list).find('label').show();
      }
      return false;
    })
    .keyup(function() {
      $(this).change();
    });
  }

  $(function() {
    catFilter( $('#category-all'), $('#categorychecklist') );
  });
});
</script>
<?php
}
add_action( 'admin_head-post-new.php', 'add_category_filter_form_domo' );
add_action( 'admin_head-post.php', 'add_category_filter_form_domo' );
functions.phpの編集を誤るとエラーが出てサイトが正常動作しなくなります。functions.phpの編集の前に、バックアップしておいてください。

参考情報

今回のカスタマイズは、NxWorldの以下のカスタマイズ方法を参考にさせていただきました。

ただ、上記ページのサンプルプログラムでは、「子カテゴリに対応していない(親カテゴリが消えると子カテゴリも消えてしまう)」という仕様だったため、子カテゴリが消えないように変更しました。

フィルタリングに引っかからないとli要素が非表示になるという仕様でした。ただそれだとli要素配下の子ノードも消えてしまうという仕様だったため、label要素を非表示にするように変更しました。子カテゴリがない場合は、そのままの仕様で問題ないと思います。

追加機能

また、より検索しやすいように以下のような仕様も追加しました。

  • 半角英数字の大文字と小文字の区別なく検索できる機能追加
  • 全角英数字と半角英数字を区別なく検索できる機能追加

「ABCDE」という大文字のカテゴリを「abc」のような小文字文字列で検索してもヒットするようにしました。

また、「ABCDE」といった全角英数字文字列を、「abc」のような半角英数字文字列で検索してもヒットするようにしました。

動作確認

functions.phpにコードを追記すると、投稿画面のカテゴリ選択部分に以下のような入力フォームが表示されます。

カテゴリリストにフィルタリング機能追加

例えば、Wordpress関係のカテゴリを探したくて「wor」と検索すると、以下のような検索結果が表示されます。

Wordpress関係のカテゴリをフィルタリング

大文字と小文字の区別なくフィルタリングされます。

また、全角英数字・半角英数字や大文字・小文字の区別もなくフィルタリングすることも可能です。

全角・半角、大文字・小文字の区別なくフィルタリング可能

もちろん日本語検索も可能です。

日本語でフィルタリングも可能

とりあえず、頭文字だけでも入力すると、かなりカテゴリを絞ることができるので便利になりました。

まとめ

こんな感じで、結構手軽にカテゴリーリストにフィルタリング(インクリメンタルサーチ)機能を追加することが可能です。

今回の機能は、まだブログを始めたばかりの方には不要かもしれません。

けれど長くWordpress運営を続けてきたりなどで、「カテゴリの数が100を超えて毎回探すのが面倒すぎる…」とか「カテゴリを有効活用するために利便性を上げたい」なんて場合には、有効かと思います。

当記事の機能は、Simplicityで実装済みです。