WordPress:投稿画面でカテゴリー選択部分にフィルタ機能を実装する方法

  • Posted on
  • Category : WordPress
WordPress:投稿画面でカテゴリー選択部分にフィルタ機能を実装する方法

備忘録。WordPressで記事投稿や編集時にカテゴリー選択する際、大量のカテゴリーが登録されている場合はスクロールを沢山して目的のカテゴリーを見つけるのが少し手間になります。その手間を少しでも減らしたいという時に使えそうなカスタマイズで、カテゴリー選択部分にフィルタ機能を追加し、目的のカテゴリーを簡単に見つけられるようにする方法です。

デフォルトのカテゴリー選択部分

画像はデフォルトのカテゴリー選択部分をキャプチャしたものになりますが、この「カテゴリー一覧」の中にカテゴリーをフィルタできる機能を追加します。

実装には以下をfunctions.phpに記述します。

functions.php

add_action( 'admin_head-post-new.php', 'post_filter_categories' );
add_action( 'admin_head-post.php', 'post_filter_categories' );

function post_filter_categories() {
?>
<script type="text/javascript">
jQuery(function($) {
	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();
			if( filter ) {
				$(list).find('label:not(:contains(' + filter + '))').parent().hide();
				$(list).find('label:contains(' + filter + ')').parent().show();
			} else {
				$(list).find('li').show();
			}
			return false;
		})
		.keyup(function() {
			$(this).change();
		});
	}

	$(function() {
		catFilter( $('#category-all'), $('#categorychecklist') );
	});
});
</script>
<?php
}

上記を記述して投稿画面を確認すると、下の画像左側のように検索ボックスが出現します。
あとは、ここに目的のカテゴリー名を入力すると画像右側のように下の一覧がフィルタリングされたものに切り替わり、目的のカテゴリーを見つけやすくなります。

カテゴリーを検索できるボックスが表示され、 例えば「A」と入力すると他のカテゴリーが非表示になり「カテゴリーA」だけが表示されるようになる

カスタム投稿で使用したい場合

カスタム投稿で使用したい場合は、ソース下部に記述してあるcatFilter( $('#category-all'), $('#categorychecklist') );の部分で、「category」となっている部分をタクソノミー名にすればカスタム投稿でも使用できます。

例えば、タクソノミーが「genre」だった場合は先ほどの部分をcatFilter( $('#genre-all'), $('#genrechecklist') );という形で変更すれば実装できます。
(よくわからない場合はChromeのデベロッパーツールなどを使って該当箇所にどのようなIDが付いているか確認するとわかりやすいと思います)
また、プレースホルダで「カテゴリー検索」というものを表示させていましたが、カスタム投稿で使用する場合にカテゴリーという呼び方が少し違うという時には、はじめに紹介したソース内の該当箇所を変更すれば任意のプレースホルダに変更できます。

このカスタマイズについては、以下フォーラムにあがっているのを参考にさせてもらいました。

また、ここで紹介したようなWordPressの管理画面に関するその他のカスタマイズを以下にまとめているので、興味ある方はこちらもご覧ください。

Back to Top

WordPress:投稿画面でカテゴリー選択部分にフィルタ機能を実装する方法

WordPress:投稿画面でカテゴリー選択部分にフィルタ機能を実装する方法

/ WordPress

Tagged with:

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のアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。