php cpt同位素循环 - 将术语附加为过滤类

Posted 2021-05-05

<!-- I run this inside a loop in archive-cptname.php-->

<div class="col-xs-6 col-sm-3 isotope <?php $terms_as_text = get_the_term_list( $post->ID,'portfolio_category', '', ', ');
	if (!empty($terms_as_text)) echo '', strip_tags($terms_as_text) ,''; ?>">
	<figure class="port-caption">

		<?php the_post_thumbnail( 'portfolio_thumb', array( 'class' => 'port-thumb' ) ); ?>

		<figcaption class="port-caption-text" style="background:<?php the_field('hover_color'); ?>;">
			<a href="<?php the_permalink(); ?>"><?php the_title( '<h3 class="portfolio-title">', '</h3>' ); ?></a>

			<?php $terms_as_text = get_the_term_list( $post->ID,'portfolio_category', '', ', ');
			if (!empty($terms_as_text)) echo '<p>', strip_tags($terms_as_text) ,'</p>'; ?>

		</figcaption>
	</figure>
</div>




<!--then filter stuff like so... there is a better way to do this-->

<section class="blackbar">
	<div class="container">
		<div class="row">
			<div class="col-md-12">

					<div class="portfolioFilter">
						<a href="#" data-filter="*" class="current">All Categories</a>
						<a href="#" data-filter=".Transit">Transit</a>
						<a href="#" data-filter=".Place">Place Based</a>
						<a href="#" data-filter=".Billboard">Billboard</a>
						<a href="#" data-filter=".Technology">Technology</a>
						<a href="#" data-filter=".Interactive">Interactive</a>
						<a href="#" data-filter=".Stadium">Stadium</a>
						<a href="#" data-filter=".Retail">Retail</a>
					</div>

			</div>
		</div>
	</div>
</section>






<!--instantiate isotope and set options-->

<script>

	jQuery(function ($) {

  var $container = $('.row.portfolio'); //The ID for the list with all the blog posts
  $container.isotope({ //Isotope options, 'item' matches the class in the PHP
  	itemSelector : '.isotope', 
  	layoutMode : 'masonry'
  });

  //set filters

  $('.portfolioFilter a').click(function(){
  	$('.portfolioFilter .current').removeClass('current');
  	$(this).addClass('current');

  	var selector = $(this).attr('data-filter');
  	$container.isotope({
  		filter: selector,
  		animationOptions: {
  			duration: 750,
  			easing: 'linear',
  			queue: false
  		}
  	});
  	return false;
  }); 

});

</script>