php - グリッドリストビュー + 無限スクロール

Question

ワードプレス アーカイブ ポスト ループにグリッド ビューを作成する簡単なコードがあり、3column-grid / 2column-grid (トグル) スイッチャーを追加したい

ここに私のメインコードがあります:

<?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';
?>

その上、アクティブにするには無限スクロール（プラグイン）が必要です。トグル (別名) グリッド/リスト ビューのコードを無限スクロールと組み合わせて、(トグル ボタンをクリックしない限り) 2 つのループを作成せずに帯域幅を保存するにはどうすればよいですか?

この解決策を見つけましたが、コード全体を組み合わせる方法がわかりません:

/*
 *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 メソッドは、何かが返されるまで待機します。

助言がありますか？