在WordPress的側邊欄（如YouTube）中顯示更多文章

我正在嘗試創建一個YouTube Esque邊欄「顯示更多」按鈕。在WordPress的側邊欄（如YouTube）中顯示更多文章

來自同一類別的職位是使用下面的代碼顯示在我的模板側邊欄：

<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>

是否有可能限制該查詢/偏移，並獲取更多點擊「顯示更多」按鈕。一旦顯示更多已被切換，我需要將其更改爲「顯示更少」。我很高興將一個查詢中的所有帖子都隱藏在前端（我並不太在意進入複雜的AJAX）。

限制div的高度可能會切斷中間的帖子。似乎有很多信息/答案通過AJAX加載更多mosts或加載一個特定的div的帖子，但不是像我之後簡單的顯示和隱藏場景。提前謝謝了。

來源

2017-05-06 Taylorsuk

如果你不介意加載所有的帖子，你可以使用一些jQuery來獲得這種效果。查看CodePen鏈接。

https://codepen.io/pen/QvOpGK

聲明此時您將隱藏的帖子，4將成爲第一篇，我們隱藏

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

然後使用jQuery顯示在點擊的帖子，我加入一個類show那給出一個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"); 
    } 

});

來源

2017-05-06 23:00:47

看起來正是我爲什麼後。我怎麼能動畫這個滑動div擴展名？在CSS類或jQuery的過渡？ – Taylorsuk

我分叉我的筆包括動畫。 https://codepen.io/sketchbookkeeper/pen/zwPpQm。基本上我們只是在檢查是否顯示選定的帖子後，使用'slideDown（）'和'slideUp（）'jQuery函數。 –

在WordPress的側邊欄（如YouTube）中顯示更多文章

回答

相關問題