WordPress和同位素过滤

时间：2012-03-08 作者：dinosauuur

我想用同位素(http://isotope.metafizzy.co/) 要筛选我的Wordpress帖子，http://i44.tinypic.com/fco55k.jpg 这就是我的网站看起来的样子，我想根据帖子类别过滤帖子，所以我需要为每个帖子添加一个类名，然后使用同位素对其进行过滤

  <li><a href="#" data-filter="*">show all</a></li>
  <li><a href="#" data-filter=".design">design</a></li>
  <li><a href="#" data-filter=".typo">typography</a></li>

这些是我的类别名称，然后我想根据他所在的类别添加一篇文章的类名。

<div id="main">
          <?php
          $args = array(\'orderby\' => \'rand\' );
          $random = new WP_Query($args); ?>
          <?php if(have_posts()) : ?><?php while($random->have_posts()) : $random->the_post(); ?>
         <a href="<?php the_permalink() ?>"> <div id="img" class="<?php  $category = get_the_category(); 
                echo $category[0]->cat_name; ?>">
            <?php 
                the_post_thumbnail();?>

            <h1><?php the_title(); ?></h1>
</div></a>

和javascript im使用

    <script type="text/javascript">
jQuery(window).load(function(){
jQuery(\'#main\').isotope({
  masonry: {
    columnWidth: 20
  },

});
$(\'#filters a\').click(function(event){
  var selector = $(this).attr(\'data-filter\');
  $(\'#main\').isotope({ filter: selector });
  return false;
});
});

</script>

5 个回复

最合适的回答,由SO网友:Damien 整理而成

不确定同位素和过滤器是否正常工作？？

我想你错过了两件事

过滤器需要包装在一个类中（这样jquery就可以通过点击a链接来操作），如下所示：

<ul id="options">
<li><a href="#" data-filter="*">show all</a></li>
<li><a href="#" data-filter=".web">web</a></li>
<li><a href="#" data-filter=".mobile">mobile</a></li>
</ul>

NB数据过滤器区分大小写（因此，如果它们与您的WordPress类别或您使用的任何内容不匹配，则无法工作）。

同位素jquery需要确保WordPress的安全，才能在无冲突模式下运行

// filter items when filter link is clicked
$(\'#filters a\').click(function(){
var selector = $(this).attr(\'data-filter\');
$container.isotope({ filter: selector });
return false;
});

这是WordPress的代码更改

// filter items when filter link is clicked
jQuery(\'#options a\').click(function(){
var selector = jQuery(this).attr(\'data-filter\');
mycontainer.isotope({ filter: selector });
return false;
});

注意，请在同位素脚本的其余部分之后输入此选项，并注意#options是HTML中过滤器列表中的类：）

你可以看到它在damien.co/isotope

希望对你有帮助？

SO网友:Beau

您可能需要使用此功能：

将此放在您的函数中。php

function isotope_categories() {

        $categories = get_categories();

        $html = \'<ul class="filters option-set" data-option-key="filter">\';
        $html .= \'<li><a href="#filter" data-option-value="*" class="selected">All items</a></li>\';

        foreach ($categories as $category) {

            $html .= "<li><a href=\'#filter\' data-option-value=\'.category-{$category->category_nicename}\'>{$category->cat_name}</a></li>";   
        }

        $html .= \'</ul>\';

        echo $html;
    }

然后在同位素容器所在的文件中调用此函数。

例如：

<nav class="options">                       
    <?php isotope_categories() ?>
</nav>

它将输出同位素的正确标记

因此，如果您在Wordpress的后端创建新帖子并将类别链接到它们，它们将显示出来并可过滤

SO网友:Curtis Flick

当我偶然发现这个主题时，我也一直在尝试将jQuery同位素插件与WP集成。如果你仍然需要帮助，下面是它的工作原理。我的方法有点不同，因为我创建了一个自定义的post类型的项目，我想通过projects\\u类别进行筛选，这是一种自定义的分类法。

页面模板需要以下php才能生成#项目筛选器列表和#项目div。

<?php
$terms = get_terms(\'project_categories\');
$count = count($terms);
if ( $count > 0 ){
echo \'<ul id="projects-filter">\';
echo \'<li><a href="#" data-filter="*">All</a></li>\';
foreach ( $terms as $term ) {
    $termname = strtolower($term->name);  
    $termname = str_replace(\' \', \'-\', $termname);  
    echo \'<li><a href="#" data-filter="\' . \'.\' . $termname . \'">\' . $term->name . \'</a></li>\';
}
echo \'</ul>\';
}
?>

<?php 
    $loop = new WP_Query(array(\'post_type\' => \'projects\', \'posts_per_page\' => -1));
    $count =0;
?>

<div id="project-wrapper">
    <div id="projects">

    <?php if ( $loop ) : 

        while ( $loop->have_posts() ) : $loop->the_post(); ?>

            <?php
            $terms = get_the_terms( $post->ID, \'project_categories\' );

            if ( $terms && ! is_wp_error( $terms ) ) : 
                $links = array();

                foreach ( $terms as $term ) 
                {
                    $links[] = $term->name;
                }
                $links = str_replace(\' \', \'-\', $links); 
                $tax = join( " ", $links );     
            else :  
                $tax = \'\';  
            endif;
            ?>

            <?php $infos = get_post_custom_values(\'wpcf-proj_url\'); ?>

            <div class="project-item <?php echo strtolower($tax); ?>">
                <div class="thumb"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail( \'projects-thumb\' ); ?></a></div>
                <h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
                <p class="excerpt"><a href="<?php the_permalink() ?>"><?php echo get_the_excerpt(); ?></a></p>
                <p class="links"><a href="<?php echo $infos[0]; ?>" target="_blank">Live Preview →</a> <a href="<?php the_permalink() ?>">More Details →</a></p>
            </div>

        <?php endwhile; else: ?>

        <div class="error-not-found">Sorry, no portfolio entries for while.</div>

    <?php endif; ?>


    </div>

    <div class="clearboth"></div>

</div> <!-- end #project-wrapper-->

下面是发挥魔力的javascript。

jQuery(document).ready(function(){
    var mycontainer = jQuery(\'#projects\');
    mycontainer.isotope({ 
        filter: \'*\',
        animationOptions: {
            duration: 750,
            easing: \'liniar\',
            queue: false,
        }
    }); 

    jQuery(\'#projects-filter a\').click(function(){ 
        var selector = jQuery(this).attr(\'data-filter\'); 
        mycontainer.isotope({ 
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: \'liniar\',
                queue: false,
            } 
        }); 
      return false; 
    });
});

SO网友:Chip Bennett

首先，用<div>, 并添加<?php post_class(); ?> 模板标记到该<div>.

因此，改变这一点：

<a href="<?php the_permalink() ?>"> <div id="img" class="<?php  $category = get_the_category(); echo $category[0]->cat_name; ?>">
    <?php the_post_thumbnail();?>

    <h1><?php the_title(); ?></h1>
</div></a>

。。。。为此：

<div <?php post_class(); ?>
    <a href="<?php the_permalink() ?>"> <div id="img">
        <?php the_post_thumbnail();?>

        <h1><?php the_title(); ?></h1>
    </div></a>
</div>

现在，如果你读了post_class() Codex条目（链接在上面），您将看到，在其他类中，此模板标记应用了category-{slug} 班（对于示例类别，post_class() 将添加category-design 或category-typo.

那么，你只需要瞄准category-{slug} 实施同位素过滤器。

SO网友:Justin Young

添加animationEngnine：“jquery”-动画将更加平滑。

var mycontainer = jQuery(\'#projects\');
mycontainer.isotope({ 
    filter: \'*\',
    animationEngine: \'jquery\',
    animationOptions: {
    duration: 350,
    easing: \'linear\',
    queue: true
    }
}); 

jQuery(\'#projects-filter a\').click(function(){ 
    var selector = jQuery(this).attr(\'data-filter\'); 
    mycontainer.isotope({ 
        filter: selector,
        animationOptions: {
            duration: 350,
            easing: \'linear\',
            queue: true,
        } 
    }); 
  return false; 
});

结束

小码农CODE

WordPress和同位素过滤

相关推荐

jQuery .load and WP function