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

投稿者紹介

株式会社ユニキャスト

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

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

投稿者紹介

最近のエントリ

コメントを残すコメントをキャンセル

投稿者紹介

最近のエントリ

共有:

関連記事

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル