【WordPress/jQuery】カテゴリーごとにフィルタリング可能なギャラリーの作成

作品・実績をポートフォリオなどに掲載することはよくありますが、カテゴリー別に多くのものを掲載するとページが長くなってスクロールが面倒になったり、ある程度のところでページを切り替えたりとユーザビリティ的によろしくないこともあります。
そんな手間を省くために、フィルタリングでカテゴリー別に作品を表示する手順を紹介します。

この記事ではワードプレスで登録したカテゴリーを指定し、投稿ページで設定したアイキャッチ画像を掲載するという想定で紹介していきます。

完成のイメージは下記のSATOWEBの制作事例ページをご覧ください
https://satoweb.info/pastwork/

1. JQueryの実装

$(function(){
  var $btn = $('.btn [data-filter]'),
  $list = $('.list [data-category]');
   
  $btn.on('click', function(e) {
    e.preventDefault();
     
    var $btnTxt = $(this).attr('data-filter');
     
    if ($btnTxt == 'all'){
      $list.fadeOut().promise().done(function() {
        $list.addClass('animate').fadeIn();
      });
    } else {
      $list.fadeOut().promise().done(function() {
        $list.filter('[data-category = "' + $btnTxt + '"]').addClass('animate').fadeIn();
      });
    }
  });
});

2. コードの実装

<div class="btn">
　<a href="" class="all" data-filter="all">ALL</a>
　<a href="" class="hp" data-filter="hp">HOMEPAGE</a>
　<a href="" class="lp" data-filter="lp">LANDINGPAGE</a>
　<a href="" class="gds" data-filter="gds">GOODS</a>
</div> <!-- end #btn -->

<?php
	//カテゴリーに付与されている番号を入力
	$categorys = array(2);
	for ($i=0; $i<count($categorys); $i++) :
?>
	<?php
		//showpostsに最大でいくつ載せるか入力
		query_posts('showposts=99&cat=0'.$categorys[$i]);
		if (have_posts()) : while (have_posts()) : the_post();
	?>
		 <!--class名とdata-categoryを入力 -->
		<div class="hp" data-category="hp">
			<a href="<?php the_permalink(); ?>">
			<?php
				if(has_post_thumbnail()):
					//functions.phpで指定したアイキャッチ名を指定
					the_post_thumbnail('archive_thumbnail');
				else:
			?>
				<!--アイキャッチ画像がない場合に表示する画像を指定-->
				<img src="<?php echo get_template_directory_uri(); ?>/assets/img/no-thumb-img.jpg" alt="" />
			<?php endif; ?>
			<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
			</a>
		</div>
	<?php endwhile; endif; ?>
<?php endfor; ?>

上記のPHPコード（<!– end #btn –>部分より下）を表示したいカテゴリーごとに設定してください。

functions.phpのアイキャッチ画像の指定

//アイキャッチを利用できるようにする
add_theme_support('post-thumbnails');

//アーカイブ用画像サイズ設定
add_image_size('archive_thumbnail', 320, 320, true);

以上の設定でワードプレスに登録したカテゴリーごとにフィルターできるギャラリーが作成できると思います。今回CSSでの装飾は省略しましたので、デザインに合わせてスタイルを調整してください。

jQueryの詳細については下記リンクのページを参照いたしました。
https://linkage-design.net/jquery-filtering-group

SATOWEBではホームページの新規制作、リニューアル、業務委託等、受付中です。
お問い合わせはこちらから受け付けていますので、お気軽にご相談ください。


←


→