投稿内容の一覧をタイル状に表示して、フィルターやソートをさせたい時はプラグインを使うことも多いけど、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'); ?>>これでバッチリフィルタ機能が付けられました。