Question

我正在为使用Isotope.js开发的WordPress主题创建一个可过滤的投资组合模板，但我似乎无法让它正常工作，而且我不能确定为什么。< / p>

以下是页面模板的代码：

<?php
/*
Template Name: Portfolio Filter
*/
?>
<?php get_header(); ?>
<div id="content" class="clearfix">
<div id="main" class="col940 left first clearfix" role="main">

    <header>

        <h1 id="port-title"><?php the_title(); ?></h1>

    </header> <!-- end article header -->


                <?php if(get_post_meta(get_the_ID(), 'page_intro', true) != '') : ?>
                <div id="port-single-intro">
                    <h3><?php echo get_post_meta(get_the_ID(), 'page_intro', true); ?></h3>
                    <hr />
                </div>
                <?php endif; ?>



        <script type='text/javascript'>         
            $(document).ready(function () {

//Set your isotope area
var $container = $('#portfolio-wrap'),
filters = {};

//Set our items to be filtered, .post will work if you're using the post_class(); function
$container.isotope({
    itemSelector : '.portfolio-item',
    layoutMode : 'masonry',

});

//Set the buttons to filter the content
$('.filter a').click(function(){
    var $this = $(this);
    // don't proceed if already selected
    if ( $this.hasClass('selected') ) {
    return;
}

var $optionSet = $this.parents('.option-set');
//change selected class
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');

//store filter value in object
//i.e. filters.color = 'red'
var group = $optionSet.attr('data-filter-group');
filters[ group ] = $this.attr('data-filter-value');

//convert object into array
var isoFilters = [];
for ( var prop in filters ) {
isoFilters.push( filters[ prop ] )
}
var selector = isoFilters.join('');
$container.isotope({ filter: selector });

return false;
});

});
    </script>

    <script>

    </script>

    <!-- Portfolio Filter -->
    <h2>Catagories</h2> 
    <ul class="filter" data-filter-group="catagories">
        <li><a href="#filter-topic-any" data-filter-value="" class="selected">All</a></li>
        <?php
            //Grab the child categories
            $categories=get_categories('portfolio');
                    foreach($categories as $category) {
                //and format them for use as isotope filters
                echo '<li><a href="#filter-topic-' . $category->slug . '" class="" data-filter-value=".category-' . $category->slug . '" ' . '>' . $category->name . '</a></li>';
            } 
        ?>
    </ul>

    <div id="portfolio-wrap">           
        <?php 
            $loop = new WP_Query(array('post_type' => 'portfolio')); 
        ?>
        <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
        <?php   
            $custom = get_post_custom($post->ID);
            ?>


        <div class="portfolio-item">
            <div class="view view-sixth">
                <?php the_post_thumbnail( 'gframe-thumb-port' ); ?>
                    <div class="mask">
                            <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                            <p><a href="<?php the_permalink() ?>">View</a></p>
                    </div>
            </div>
        </div>

        <?php endwhile; ?>  
    </div>
</div>  
</div>
<?php get_footer(); ?>

请注意，代码中的jQuery将被单独加载，我现在已经将它包含在内了。

您可以在http://themes.i-am-grae.me/studio8查看实时内容。

基本上它一次只显示一个投资组合条目，有没有人看到任何突出的东西可以解决这个问题？

亲切的问候

格雷姆

Answer 1

项目在那里，所以它不是WordPress的问题。我认为它必须对你的宽度和高度做些什么。检查基本的同位素演示。

http://isotope.metafizzy.co/docs/introduction.html

帮助我的isotope.js可过滤的投资组合

1 个答案: