Wordpressのサイドバー（YouTubeのような）の投稿をもっと表示

Question

私はYouTubeのEsqueサイドバー「もっと見る」ボタンを作成しようとしています。同じカテゴリから

ポストは、次のコードを使用して、私のテンプレートのサイドバーに表示されます。

<div class="sidebar-left"> 
    <div class="grid-container"> 
     <?php 
       global $post; 
       $category = get_the_category($post->ID); 
       $current_cat = $category[0]->cat_name; 

       $my_query = new WP_Query('category_name='.$current_cat.'&showposts=10'); 
       while ($my_query->have_posts()) : $my_query->the_post(); ?> 
       <a href="<?php the_permalink(); ?>"> 
         <div class="grid-item-meta"> 
           <span><?php echo $entry_cats; ?></span> 
           <h3><?php the_title(); ?></h3> 
           <h5>Written by <?php echo get_the_author(); ?></h5> 
         </div> 
       </a> 
       <?php endwhile; 
        wp_reset_postdata(); 
       ?> 
    </div> 
</div> 

が、それはこのクエリを制限する/それを相殺し、「表示詳細」ボタンをクリックする上でより多くを取得することが可能です。ショーがもう一度表示されたら、「Show Less」に変更する必要があります。私は1つのクエリですべての投稿を引っ張ってフロントエンドに隠している（私はあまり複雑なAJAXに入ることには関心がない）、とてもうれしいです。

divの高さを制限すると、中央のポストを切断する可能性があります。 AJAX経由で大部分を読み込んだり、特定のdivに投稿を読み込んだりする際に、たくさんの情報や答えがあるようですが、後になっているようなシンプルな表示と非表示のシナリオはありません。事前に多くの感謝。

Answer 1

すべての投稿を読み込んでも構わない場合は、その効果を得るためにjQueryを使用することができます。 CodePenのリンクを確認してください。あなたが投稿を非表示になります、その時点で

https://codepen.io/pen/QvOpGK

を宣言し、4は最初のポストは、私たちが

#posts div:nth-child(n + 4) { 
    display: none; 
} 

が次にクリックで記事を表示するjQueryのを使用して非表示になります、私はクラス showを追加していることaを与える display: block;

//We need to tell jQuery which posts to show in hiddenPosts 

var hiddenPosts = $('#posts div:nth-child(n + 4)'); 

var button = $('#showMore'); 

$(button).click(function() { 

    hiddenPosts.toggleClass('show'); 

    //change button's text 

    if (button.text() == "Show More") { 
    button.text("Show Less"); 
    } else { 
    button.text("Show More"); 
    } 

});