使用jquery/isotope类调用/链接wordpress类别 [英] Call/link wordpress category with jquery/isotope classes

问题描述

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

I am working on the portfolio section of my web, and these codes i have in filter.js script (in wp-includes/js folder)

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帖子中使用这些类，或者不确定如何在帖子中使用这些类来创建函数/循环.

I have the different classes in above codes, but i am not sure how to use these classes in wordpress posts or how to create a function/loop to use these classes in posts.

我的投资组合页面中包含该代码:

That code i have in my portfolio page:

<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/同位素集成教程，在jquery中创建类，在项目页面上执行代码来完成所有这些代码，而我不了解的是如何在wordpress帖子中使用这些同位素/jquery类 因此它们将显示为过滤器. 我知道，可以通过类别过滤，标签，元框或自定义循环来完成，但是我不知道如何精确地创建自定义循环，该循环使用类别中的过滤器类.

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

I have done all these codes by reading the tutorials of wordpress/isotope integration, create the classes in jquery, do codes on project page and what i didn't understand is how to use these isotope/jquery classes in wordpress posts so they will be appear as filters. I know, it could be done via category filtering, tags, metabox or custom loop but i don't know how exactly to create the custom loop, which use the filter classes in categories.

Sorry, if i didn't ask the question in right way, i am a beginner and trying to do everything by tutorials and by the help of experts.

推荐答案

删除自动添加您要手动添加的类的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>

这篇关于使用jquery/isotope类调用/链接wordpress类别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！