WordPressも長く運営しているとカテゴリの数が増えてきます。
カテゴリ数が10~20とかだと特に問題はないのですが、これが50~100以上となってくると目当てのカテゴリを選ぶのも面倒になってきます。
毎回多くのカテゴリリストの中から、目当てのカテゴリを探すのは本当に億劫です。
なので、「カテゴリリストにフィルタリングフォームを設けて手軽にカテゴリを探せる」といったような機能を追加してみることにしました。
その際に行ったカスタマイズ方法を紹介したいと思います。
目次
主な手順
今回のカスタマイズに必要な主な手順は以下だけです。
- 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' );
参考情報
今回のカスタマイズは、NxWorldの以下のカスタマイズ方法を参考にさせていただきました。
ただ、上記ページのサンプルプログラムでは、「子カテゴリに対応していない(親カテゴリが消えると子カテゴリも消えてしまう)」という仕様だったため、子カテゴリが消えないように変更しました。
追加機能
また、より検索しやすいように以下のような仕様も追加しました。
- 半角英数字の大文字と小文字の区別なく検索できる機能追加
- 全角英数字と半角英数字を区別なく検索できる機能追加
「ABCDE」という大文字のカテゴリを「abc」のような小文字文字列で検索してもヒットするようにしました。
また、「ABCDE」といった全角英数字文字列を、「abc」のような半角英数字文字列で検索してもヒットするようにしました。
動作確認
functions.phpにコードを追記すると、投稿画面のカテゴリ選択部分に以下のような入力フォームが表示されます。
例えば、Wordpress関係のカテゴリを探したくて「wor」と検索すると、以下のような検索結果が表示されます。
また、全角英数字・半角英数字や大文字・小文字の区別もなくフィルタリングすることも可能です。
もちろん日本語検索も可能です。
とりあえず、頭文字だけでも入力すると、かなりカテゴリを絞ることができるので便利になりました。
まとめ
こんな感じで、結構手軽にカテゴリーリストにフィルタリング(インクリメンタルサーチ)機能を追加することが可能です。
今回の機能は、まだブログを始めたばかりの方には不要かもしれません。
けれど長くWordpress運営を続けてきたりなどで、「カテゴリの数が100を超えて毎回探すのが面倒すぎる…」とか「カテゴリを有効活用するために利便性を上げたい」なんて場合には、有効かと思います。