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

Pocket
LINEで送る

この記事の所要時間: 410

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

[html]
<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>
[/html]

動かすコンテンツに

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

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

[html]
<li class="filter" data-filter="category_1">category_1</li>
[/html]

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

[html]
<script>
$(function() {
$(‘指定した要素名’).mixitup();
});
</script>
[/html]

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

[html]
<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; ?>
[/html]

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

[html]
<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>
[/html]

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

人気の記事

コメント

コメントを残す

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

PAGE TOP

%d人のブロガーが「いいね」をつけました。