且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

使用jquery/isotope类调用/链接wordpress类别

更新时间:2023-01-30 13:55:40

删除自动添加您要手动添加的类的JS代码,

Remove JS code that automatically add the class that you wanted to be added manually,

这些行

jQuery(".grid-item").first().addClass("comercial");
jQuery(".grid-item:eq(1)").addClass("residencial");
jQuery(".grid-item:eq(2)").addClass("cultural");
jQuery(".grid-item:eq(3)").addClass("interiores");
jQuery(".grid-item:eq(4)").addClass("residencial");
jQuery(".grid-item:eq(5)").addClass("residencial");

在您的wordpress循环中,获取当前项目的类别列表,并将其存储在以空格分隔的变量中,因为稍后将用作类,您可以使用

in your wordpress loop, get the list of categories of the current item and store them in variable separated by space as this will be use as classes later, you can use get_the_category function

//get the category assign to the post
//$cat_objects = get_the_category();
$cat_objects = wp_get_post_terms( get_the_ID(), 'portfolio_category');



/**Define category variable to be use as class, leave empty if you don't want to add global classes you can add 'grid-item' in here and remove it on the LI element, **/
$categories = '';

// Loop through each category object
foreach ( $cat_objects as $cat ) {

    // extract the category slug and add them to $categories variable, 
    $categories .=  ' '. $cat->slug; /** Added Space at the beginning of each category so they will be separated during actual output**/
}

然后,您可以从上面的代码中添加存储在$categories变量中的类别列表,作为格网项目li <li class="grid-item<?php echo $categories; ?>">

you can then add the list of categories stored in the $categories variable from the code above as additional class for grid-item li's, <li class="grid-item<?php echo $categories; ?>">

您的循环应该看起来像这样

Your loop should look something like this

<div class="projecto"><div class="grid">
<?php $my_query = new WP_Query('post_type=portfolio&posts_per_page=-1');
    while ($my_query->have_posts()) : $my_query->the_post(); 

    $cat_objects = get_the_category();
    $categories = '';
    foreach ( $cat_objects as $cat ) {
        $categories .=  ' '. $cat->slug;
    }

    ?>
<?php $feat_image = wp_get_attachment_url(get_post_thumbnail_id($post->ID) );?>

<?php if($feat_image!=''){?>  <li class="grid-item<?php echo $categories; ?>"><a href="<?php the_permalink(); ?>"><div class="proimg"><img alt="" src="<?php echo $feat_image;?>" /></div></a>
<h5><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h5>
                       <div class="textblock"><?php echo $text = get_post_meta( $post->ID, 'text', true ); ?>
</div>
                       </li><?php } ?>
<?php endwhile;  wp_reset_query(); ?>
</div>