動態的標籤職位分類到WordPress的循環

Question

我AA定製循環進入我的WordPress定製的博客頁面，和Im顯示我的所有帖子進去，這樣的：

<section class="container blog-article-actu"> 
      <div class="row"> 

    <?php 
    $the_query = new WP_Query('showposts=-1'); 

    while ($the_query->have_posts()) : 
    $the_query->the_post(); 
    $catObj = get_the_category(); 

     ?> 

     <article class="blog-article-actu-article" style="background:url('<?php $url = wp_get_attachment_url(get_post_thumbnail_id($post->ID), 'thumbnail'); ?><?php echo $url ?>');"> 
      <div class="blog-article-actu-article-top"> 
       <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2> 
       <div class="details-blog-article-actu"> 
        <div class="blog-article-actu-date"> 
         <span class="day"><?php the_time('d') ?></span><br> 
         <span class="month"><?php the_time('F') ?></span> 
        </div> 

        <a href="#" target="_blank"><p> 

         <?php 
          if (($catObj[0]->name == 'Actualités et évènements') OR ($catObj[1]->name == 'Actualités et évènements')) { 
           echo "<img src=\"XXX/actu-icon.png\" alt=\"Actualités et évènements\">"; 
          } elseif (($catObj[0]->name == 'Témoignages') OR ($catObj[1]->name == 'Témoignages')) { 
           echo "<img src=\"XXX/chat-icon.png\" alt=\"Témoignages\">"; 
          } elseif (($catObj[0]->name == 'Vidéos') OR ($catObj[1]->name == 'Vidéos')) { 
           echo "<img src=\"XXX/video-icon.png\" alt=\"Vidéos\">"; 
          } else { 
           echo ""; 
          } 
         ?> 
        </p></a> 
       </div> 
      </div> 

      <div class="blog-article-actu-article-bottom-wrap"> 
       <span class="blog-article-actu-article-excerpt"><?php the_excerpt();?></span> 
       <span class="blog-article-actu-article-bottom"><a href="<?php the_permalink() ?>">En savoir <span>+</span></a></span> 
       <div class="social-blog-article-actu"> 
        <a href="#" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a> 
        <a href="http://www.facebook.com/sharer.php?u=<?php the_permalink() ?>&t=<?php the_title(); ?>"><i class="fa fa-facebook" aria-hidden="true"></i></a> 
       </div> 
      </div> 
     </article> 

    <?php // End of the loop. 
    endwhile; 
    ?> 

      </div> 
    </section> 

然後我被要求建立的東西對它們進行排序，通過標籤，動態的，有類似這樣的標記系統，這一個：https://codepen.io/Chaaampy/pen/gWOrvp

但是我有點失落有關......我想到得到我的環路中的每個帖子的標籤，然後將其添加爲一個CSS類，就像我可以顯示或隱藏JS中的一些文章......呃，我不知道，有人對我有什麼想法嗎？

謝謝！ :)

Answer 1

如果有人有興趣，找到了解決方案通過建立類似的東西：https://codepen.io/Chaaampy/pen/gWOrvp

$(function filter() { 
    var selectedClass = ""; 
    $(".link").click(function(){ 
    selectedClass = $(this).attr("data-rel"); 
$(".wrap").fadeTo(100, 0.1); 
    $(".wrap section").not("."+selectedClass).fadeOut().removeClass('scale_anm'); 
setTimeout(function() { 
    $("."+selectedClass).fadeIn().addClass('scale_anm'); 
    $(".wrap").fadeTo(300, 1); 
}, 300); 
}); 

}）;

請注意，我使用get_the_tags將標記插入Wordpress，然後將它們添加爲我想要顯示/隱藏的元素的類