プラグインを使わないでフィルター、ソート機能をつける覚え書き。[MixltUp]

投稿内容の一覧をタイル状に表示して、フィルターやソートをさせたい時はプラグインを使うことも多いけど、jQueryをその分重複して読み込むことになってしまったり、そのせいでスライドショーとか他のライブラリが動かなくなることが多いので、シンプルに機能をつけたかったので、試してみました。
使うライブラリは
・MixltUp
というもの。
サイトにソートとフィルターのデモが出ています。

で、これを実際にwordpressのコンテンツのソートに使う場合、

まずはヘッダに必要なものを読み込ませます。
header.php
の

<?php wp_head(); ?>

の後に記述したら、案の定コンフリクトを起こしたので、前に記述。

<!-- jQuery読み込み -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 
<!-- ソートスクリプト読み込み -->
<script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
 
<!-- Javascript -->
<script type="text/javascript">
$(function(){
	// Instantiate MixItUp:
	$('#Container').mixItUp();
});
</script>

cssにはこれを記述。

#Container .mix{
	display: none;
}

後は必要な部分をマークアップするだけ。

フィルタするボタンの部分にそのカテゴリのクラス名を入れる。
このブログだと、

がループされるのでその中にあるクラスのカテゴリ名を指定。

↓フィルタ用のボタン
<div class="filter" data-filter="all">すべて表示</div>
<div class="filter" data-filter=".category-wordpress">カテゴリー（wordpress）</div>
<div class="filter" data-filter=".category-news">カテゴリー（news）</div>
 
↓コンテンツの中身
<div id="Container">
	<!--ここからがループ-->
	<article class="mix category-wordpres">カテゴリー（wordpress）</article>
	<article class="mix category-news">カテゴリー（news）</article>
	<article class="mix category-wordpres">カテゴリー（wordpress）</article>
	<article class="mix category-news">カテゴリー（news）</article>
	<!--//ここまでがループ-->
</div>

1つややこしかったのが、articleのclassに「mix」を足さなくちゃいけないけど、この部分のclassはpost_classで吐き出しているので、直接記述ができない。
そういう場合はその中に追加したいクラス名を入れればいいだけ。

↓これを
<article id="Container post-<?php the_ID(); ?>" <?php post_class(); ?>>
 
↓こう変更する
<article id="Container post-<?php the_ID(); ?>" <?php post_class('mix'); ?>>

これでバッチリフィルタ機能が付けられました。

Leave a Reply Cancel Reply