Question

我在wordpress archive post循环中有简单的代码来制作网格视图，我想添加3列 - 网格/ 2列 - 网格（切换）切换器

这是我的主要代码：

<?php get_header(); ?>
<div id="content-archive" class=".grid col-940">

<?php if (have_posts()) : ?>

    <?php get_template_part( 'loop-header' ); ?>

    <!--// show archive posts in 3 columns -->
    <?php $c=0; while (have_posts()) : the_post(); $c++;
        if ( $c == 3 ) {
            $style = 'col-300wrap fit';
            $c = 0;
        }
        else $style='col-300wrap';
    ?>

        <?php responsive_entry_before(); ?>
        <div id="post-<?php the_ID(); ?>" <?php post_class($style); ?>>       
            <?php responsive_entry_top(); ?>



            <div class="post-entry">
                <?php if ( has_post_thumbnail()) : ?>
                    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
                <?php the_post_thumbnail('medium', array('class' => 'archive')); ?>
                    </a>
                <?php endif; ?>
                <div class="trumpai"><?php the_excerpt(); ?></div>
                <?php wp_link_pages(array('before' => '<div class="pagination">' . __('Pages:', 'responsive'), 'after' => '</div>')); ?>
            </div><!-- end of .post-entry -->
            <?php get_template_part( 'post-meta' ); ?>                
            <?php get_template_part( 'post-data' ); ?>

            <?php responsive_entry_bottom(); ?>      
        </div><!-- end of #post-<?php the_ID(); ?> -->       
        <?php responsive_entry_after(); ?>

    <?php 
    endwhile; 

    get_template_part( 'loop-nav' ); 

else : 

    get_template_part( 'loop-no-posts' ); 

endif; 
?>  

</div><!-- end of #content-archive -->
<?php get_footer(); ?>

我需要添加此功能以显示2列网格：

<!--// show archive posts in 2 columns -->
<?php $c=0; while (have_posts()) : the_post(); $c++;
    if ( $c == 2 ) {
        $style = 'col-400wrap fit';
        $c = 0;
    }
    else $style='col-400wrap';
?>

我需要无限滚动（插件）才能激活。如何组合切换（又名）网格/列表视图的代码与无限滚动，而不构建两个循环（除非切换按钮单击）以保存带宽？

我找到了这个解决方案，但我不知道如何组合整个代码：

/*
 *grid.php: <?php echo "grid loop";?>
 *list.php: <?php echo "list loop";?>
 */

$(document).ready(function(){
    $('#toggle-grid').click(function(){
        // hide both loops
        $(".view").hide();
        // check if loop aleady has been generated
        if ($("#grid").html() != "") {
            $("#grid").show();
        } else { // otherwise fetch loop
            $.get("grid.php", function(data) {
                $("#grid").html(data).show();
            });
        }
    });
$('#toggle-list').click(function(){
        // hide both loops
        $(".view").hide();
        // check if loop aleady has been generated
        if ($("#list").html() != "") {
            $("#list").show();
        } else { // otherwise fetch loop
            $.get("list.php", function(data) {
                $("#list").html(data).show();
            });
        }
    });
});

作为代码作者Stefanbar说：php代码将在服务器端执行，然后将结果返回给js方法。 js方法将一直等到返回一些东西。

有什么建议吗？

网格列表视图+无限滚动

0 个答案: