WordPressでMixItUpを使うときのメモ

タイル状にならんだ要素を簡単お洒落に振り分けることが出来るMixitUpですが、WordPressでもろもろ取得しながら使おうとしたときにちょっとつまったので、メモです。 githubはこれ。

mixItUpの使い方

jQueryや本体のjsやcssは読めているとして、

<div id="Container">
    <div class="mix cat1"></div>
    <div class="mix cat2"></div>
    <div class="mix cat1"></div>
    <div class="mix cat3"></div>
</div>

1.振り分けたい要素にmixと振り分けに利用するクラスを付ける。cat1とか任意のクラス。 並び順も変更出来るけど、今回は無視。本サイト参照で。

<div class="filter" data-filter="all">Show All</div>
<div class="filter" data-filter=".cat1">Category 1</div>
<div class="filter" data-filter=".cat2">Category 2</div>

2.フィルターボタンのセクションは、クラスにfilterを付ける。 振り分けるクラスと連動してdata-filter=にドットと一緒に仕込む。

// On document ready:

$(function(){

    // Instantiate MixItUp:

    $('#Container').mixItUp();

});

読み込み終了時に$('#Container').mixItUp()で終わり。割と簡単。 #Containerは自分の環境に変えてね。

カスタム投稿、カスタムタクソノミーでMixItupする場合

上の使い方で言えば、cat1の部分、ここをWordPressのカスタムタクソノミーのタームでやろうとした場合、 content部分はget_postsで

<?php $args = array(
    'posts_per_page' => 40,                //表示（取得）する記事の数
    'post_type' => '投稿タイプのスラッグ',    //投稿タイプの指定
    );
    $customPosts = get_posts($args);
    if($customPosts) : foreach($customPosts as $post) : setup_postdata( $post ); ?>


        <?php
        $terms = get_the_terms($post -> ID, 'タクソノミースラッグ');
        foreach($terms as $term){
            $term_slug = $term -> slug;
        }
        ;?>

        <div class="mix <?php echo esc_html($term_slug); ?>">
            //ループの処理
        </div>


        <?php endforeach; ?>
        <?php else : //記事が無い場合 ?>
        <p>記事はまだありません。</p>
        <?php endif;
wp_reset_postdata(); //クエリのリセット ?>

普通のループでもいけると思いますが、カスタム投稿をget_postsで取得しつつ、取得した投稿にカスタムタクソノミーのタームスラッグをクラスで付与。これが後でフィルターボタンと連動するわけ。 これでcat1とかの部分は、自動で取得出来ます。

次、フィルターボタンも自動で取得

<?php
// カスタム分類名
$taxonomy = 'タクソノミースラッグ';

// パラメータ
$args = array(
    // 子タームの投稿数を親タームに含める
    'pad_counts' => true,

    // 投稿記事がないタームも取得
    'hide_empty' => false
);

// カスタム分類のタームのリストを取得
$terms = get_terms( $taxonomy , $args );

if ( count( $terms ) != 0 ) {
    echo '<ul class="peaple-filter">';
    echo '<li class="btn btn-sm filter" data-filter="all">すべて</li>';

    // タームのリスト $terms を $term に格納してループ
    foreach ( $terms as $term ) {

        // タームのURLを取得
        $term = sanitize_term( $term, $taxonomy );
        $term_link = get_term_link( $term, $taxonomy );
        if ( is_wp_error( $term_link ) ) {
            continue;
        }

        // 子タームの場合はCSSクラス付与
        if( $term->parent != 0 ) {
            echo '<li class="filter children"  data-filter=".'. $term->slug .'">';
        } else {
            echo '<li class="filter" data-filter=".'. $term->slug .'">';
        }

        echo ''. $term->name .'';
        echo '</li>';
    }

    echo '</ul>';
}
    ?>

任意のカスタムタクソノミーのスラッグをまるっと一覧でulとliで取得出来ちゃいます。 後はコンテンツを追加して、カスタムタクソノミーのタームが増えたとしても、自動でフィルターボタンも増えていきます。 静的なサイトで任意のクラスを簡単に付けられる環境なら困りませんが、WordPressと組み合わせてもろもろ自動取得になると、ちょい面倒ですね。

参考にさせていただいたサイト様

とりあえず振り分けフィルターはMixItUpが簡単で便利でした。アニメーションもかわいいです。 それではまた。