おしゃれで便利なjqueryプラグイン「MixltUP」を使ってみた。


この記事の所要時間: 410

おしゃれなjQueryのプラグイン「MixltUP」をwordpressでカテゴリごとに応用できないかと思って、連休中にやってみたことを書いておきます。 このプラグインを使えば、html要素に持たせた属性を使っていろいろな動きを簡単に実装できるようです。与えたカテゴリだけを表示させたり、順番に並べ替えたり、動きまで指定できるみたいですね! デモバージョンが用意されているようなので参考にして作りました。 MixItUp Boilerplate Template まずはwordpressのテーマにjsフォルダを作って、jQueryとMixltUPのファイルを解凍してhead部分に宣言を書いておきます。

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/mixitup-1.5.4/jquery.mixitup.min.js"></script>

動かすコンテンツに

<li class="mix category_1" data-cat="1">xxxxx</li>

のようにカテゴリの名前をつけておいて

 <li class="filter" data-filter="category_1">category_1</li>

それをコントロールするボタンにも同じカテゴリさえつけておけば 指定したオプション通りの動きをしてくれます。 しかもjsのコードはたったこれだけ

<script>
$(function() {
$('指定した要素名').mixitup();
});
</script>

それでこれをwordpressのカテゴリに応用する方法ですが自分はこのように書きました。

 <ul id="xxxxx">
<?php while (have_posts()): the_post(); ?>
<?php $cat = get_the_category(); ?>
<li class="mix <?php echo$cat[0]->slug; ?>" data-cat="<?php echo$cat[0]->slug; ?>">
                            
//記事の表示方法を書く
                            
<?php endif; ?>
<?php endwhile; ?>

記事のカテゴリをget_the_categoryで取得して変数に入れておいて、スラッグ名をclassとdata-catに入れて

<li class="sort" data-sort="random" data-order="random">Random</li>
<li class="filter" data-filter="all">Show All</li>
<li class="filter" data-filter="wordpress">WordPress</li>
<li class="filter" data-filter="jquery">jQuery</li>

のように違う場所でカテゴリを指定してソートさせるって感じです。 ただこれだとそのページにある記事しかソートされないのでちょっと使えないかもしれません(笑) 参考:簡単にソート、フィルタリングが実装できるjQueryプラグイン「MixItUp」 – Noise of Web Programming

投稿者紹介

疋田駿
Unicast Inc. ソフトウェアエンジニアRuby,Rails,React,Redux,ReactNative,Android,Elasticsearch,Dockerとか触りながら生計を立ててる。Thinkpad×fedora。ErgoDox愛好家な一児の父。

人気の記事

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PAGE TOP