在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）中显示更多文章

回答

相关问题