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

是否可以限制此查询/偏移它并在单击“显示更多”按钮时获取更多信息。切换显示更多后，我需要将其更改为“显示更少”。我很高兴在一个查询中提取所有帖子并将它们隐藏在前端(我不太关心进入复杂的 AJAX)。

限制 div 的高度可能会切断中间的帖子。似乎有很多关于通过 AJAX 加载更多内容或在特定 div 中加载帖子的信息/答案，但不是像我所追求的那样简单的显示和隐藏场景。提前谢谢了。

Answer 1

如果您不介意加载所有帖子，您可以使用一些 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");
  }

});