Call/link wordpress 类别 jquery/isotope 类

Question

我正在处理我网站的投资组合部分，这些代码在 filter.js 脚本中（在 wp-includes/js 文件夹中）

jQuery(document).ready(function(){
    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");
    jQuery('.grid').isotope({
          itemSelector: '.grid-item',
          layoutMode: 'fitRows'
    });

    jQuery(".dcjq-parent-li ul li a").click(function() {
        jQuery(".dcjq-parent-li ul li a").removeClass("active");
        jQuery(this).addClass("active");
        var filtro=jQuery(this).attr("data-filter");
        jQuery(".grid").isotope({ filter: filtro});
    });

    jQuery(".dcjq-parent").click(function() {
        if(jQuery(this).siblings("ul").css("display")=="block")
            jQuery(this).siblings("ul").slideToggle( "slow" );
        else
        {
            jQuery(".accordionMenu ul").each(function( index ) {
                if(jQuery(this).css('display')=="block")
                {
                    jQuery(this).slideToggle( "slow" );
                    jQuery(this).siblings("a").removeClass("active");
                }
            });
            jQuery(this).siblings("ul").slideToggle( "slow" );
            jQuery(this).addClass("active");
        }
    });

});

我在上面的代码中有不同的类，但我不确定如何在 wordpress 帖子中使用这些类或如何创建一个 function/loop 来使用这些类在帖子中。

我的投资组合页面中的代码：

<div id="aside">
    <ul id="subMenu" class="accordionMenu" data-option-key="filter">                        
        <li class="dcjq-parent-li">
            <a href="#" class="dcjq-parent active">Tipologia<span class="dcjq-icon"></span>
            </a>
            <ul style="display: block;">
                <li><a href="#filter" data-filter="*" class="active">todos</a></li>
                <li><a href="#filter" data-filter=".residencial">Residencial</a></li>
                <li><a href="#filter" data-filter=".comercial">Comercial</a></li>
                <li><a href="#filter" data-filter=".cultural">Cultural</a></li>
                <li><a href="#filter" data-filter=".interiores">Interiores</a></li>
            </ul>
        </li>
        <li class="dcjq-parent-li">
            <a href="#" class="dcjq-parent">Datas<span class="dcjq-icon"></span></a>
            <ul style="display: none;">
                <li><a href="#filter" data-filter="*" class="actv">todos</a></li>
                <li><a href="#filter" data-filter=".1980, .1981, .1982, .1983, .1984">1980 - 1984</a></li><li><a href="#filter" data-filter=".1985, .1986, .1987, .1988, .1989">1985 - 1989</a></li><li><a href="#filter" data-filter=".1990, .1991, .1992, .1993, .1994">1990 - 1994</a></li><li><a href="#filter" data-filter=".1995, .1996, .1997, .1998, .1999">1995 - 1999</a></li><li><a href="#filter" data-filter=".2000, .2001, .2002, .2003, .2004">2000 - 2004</a></li><li><a href="#filter" data-filter=".2005, .2006, .2007, .2008, .2009">2005 - 2009</a></li><li><a href="#filter" data-filter=".2010, .2011, .2012, .2013, .2014">2010 - 2014</a></li>
            </ul>
        </li>                                   
    </ul>
</div>

<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(); ?>
<?php $feat_image = wp_get_attachment_url(get_post_thumbnail_id($post->ID) );?>

<?php if($feat_image!=''){?>    <li class="grid-item"><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>
</div>
<?php get_sidebar( $blog-widgets ); ?>
<?php get_footer(); ?>

我已经通过阅读 wordpress/isotope 集成教程完成了所有这些代码，在 jquery 中创建了类，在项目页面上编写了代码，但我不明白的是如何在 wordpress 帖子中使用这些 isotope/jquery 类因此它们将显示为过滤器。我知道，这可以通过类别过滤、标签、元数据框或自定义循环来完成，但我不知道如何创建自定义循环，它在类别中使用过滤器类。

抱歉，如果我没有以正确的方式提出问题，我是一个初学者，正在尝试通过教程和专家的帮助来完成所有事情。

Answer 1

删除自动添加您希望手动添加的 class 的 JS 代码，

这些行

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 循环中，获取当前项目的类别列表并将它们存储在由 space 分隔的变量中，因为稍后将用作 classes，您可以使用 get_the_category函数

//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 的附加 class，<li class="grid-item<?php echo $categories; ?>">

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

<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>

Call/link wordpress 类别 jquery/isotope 类

Call/link wordpress category with jquery/isotope classes

javascript

php

wordpress

jquery

jquery-isotope