获取类别wordpress中的标签 - 可过滤的投资组合

Question

I'm wondering if anyone knows how I can make a filterable portfolio using jquery to switch between different tags within a category using wordpress.

This is my current code to get the tags in a category:

<ul>
    <?php
        query_posts('category_name=Sport');
        if (have_posts()) : while (have_posts()) : the_post();
            if( get_the_tag_list() ){
                echo $posttags = get_the_tag_list('<li class="jquery">','</li><li>','</li>');
            }
        endwhile; endif; 
        wp_reset_query(); 
    ?>
</ul>

I can't customize the li elements to display usefull link.

I'm sorry if this question has been asked before. I googled around and I could just find jquery portfolio filtering by a custom post type, but I can't use post types on the site I'm building.

Any help will be appreciated!

Answer 1

You can't do it using the code as you have it structured currently. You need to be able to add a filterable attribute to each item in order to establish a proper relationship. Furthermore, we'll need to structure the article it's self so that it has all tags as a class. Then we can easily filter.

 query_posts('category_name=Sport');
 $posttags = get_the_tags();
 $tags_class = implode(' ', $posttags);
 if (have_posts()) : 
     if ($posttags):
         echo '<ul class="jquery">';
         foreach($posttags as $tag) {
             echo '<li data-filter="'.$tag->name .'"> '.$tag->name.' </li>';
         endforeach;
         echo '</ul>';
     endif;
     while (have_posts()) : the_post();
        //generate the article list for all articles within the sports category
        //the $tags_class variable is a whitespace delimited string of tags for this post
        echo '<article class="filterable '.$tags_class.' ">';
            //the rest of your post, such as the image etc goes in here
        echo '</article>';

     endwhile; 
 endif; 
 wp_reset_query(); 

Now for the jQuery.

$(function () {
    $('ul.jquery > li').click(function () {
        $('.filterable').hide();
        $('.filterable').filter($(this).data('filter')).show();
    });
});

Here's a jsFiddle illustrating the filter functionality.