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

Pocket

おしゃれな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

投稿者紹介

株式会社ユニキャスト
私たちは、テクノロジに魅せられた個性あふれるメンバーによって構成された茨城県日立市に本社を構えるベンチャー企業です。
”テクノロジを通して「驚き」と「感動」を創造し、人々の「夢」と「笑顔」を支えます。” の経営理念をモットーに明るい未来を描き、ワクワクする企画提案を続けて参ります。

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください