Question

亲爱的StackOverflow我在显示wordpress后缩略图方面遇到了一些问题，如下图所示。我创建了一个单页模板，其中包含我想要显示的每种帖子类型的查询，但其中一个我希望水平显示更多/更少的按钮，具体取决于剩余的数量。我认为我需要把它们放到单独的div中，然后Jquery滚动div，但我很丢失。下面的图片可以解释得更好。

Suggested Layout 显然，右边的部分将被隐藏，直到需要滚动并替换当前图像为止。

我对所有显示/替换视图的建议持开放态度，但仅限于一次只有一定数量的项目......目前，7。

以下是相关的部分代码到目前为止并不正确，但它尽可能接近现在。

    <section id="releases" class="content" >
  <?php 
  $args = array(
    'post_type' => 'releases',
    'post_status' => 'publish'
  );
  $query = new WP_Query($args);

  //
  $first = 7;
  $next = 6;
  ?>

  <?php if($query->have_posts()): ?>
    <div class="slide">
    <?php while($query->have_posts()) : $query->the_post(); ?>
      <div class="release col-3 left">
      <?php the_post_thumbnail(); ?>
      </div>
      <?php $current_position = $query->current_post + 1; ?>
      <?php if ($current_position < $query->found_posts && $current_position % $first == 0) : ?>
    <!-- -->
      <div class="release col-3 left">
        SHOWMORE</div>
      <div class="clear"></div>
      </div><div class="slide">

      <?php endif; ?>
    <?php endwhile; ?>
    </div>
  <?php endif; ?>
</section>

感谢您给我的任何帮助。

Answer 1

Html是这里的主要部分。我无法编写代码，因为您需要检查许多条件。但如果您需要一个psedu代码，那么您需要做的就是。

获取并统计所有帖子。
如果count小于7，则只生成一个div。无需滚动。但是如果它超过7且小于13则产生2个div，依此类推。

所以html应该是这样的。

<div class="wrapper">
    <div class="slide">
       <ul>
          <li>Post 1</li>
          <li>Post 2</li>
          <li>Post 3</li>
          <li>Post 4</li>
          <li>Post 5</li>
          <li>Post 6</li>
          <li>Post 7</li>
          <li class="next">Next</li>
       </ul>
    </div>
    <div class="slide hidden">
       <ul>
          <li>Post 8</li>
          <li>Post 9</li>
          <li>Post 10</li>
          <li>Post 11</li>
          <li>Post 12</li>
          <li>Post 13</li>
          <li class="next">Next</li>
       </ul>
    </div>
</div>

.slide {显示：内联;宽度：960像素;}
.slide ul li {display：inline; list-style-type：none;}
.hidden {显示：无;}

现在你在jquery所要做的就是

jQuery的（文件）。就绪（函数（$）{ $（ '滑'）。点击（函数（）{ $（this）.hide（“slide”，{direction：“right”}，1000）; $（this）.next（）。show（“slide”，{direction：“left”}，1000）; }）; }）;

Answer 2

我已经设法解决了这个问题，足以与其他人分享......你可以根据自己的要求改变幻灯片行动，但至少你不必在网上搜索你需要的东西。

帖子缩略图的Wordpress代码是：

＆＃13;

jQuery(document).ready(function($) {

  // Show the next slide after clicking the "next" button/link.
  $('.next').click(function() {
    $(this).parent().parent().hide("slow");
    $(this).parent().parent().next('.slide').show("slow");
  });
});

＆＃13;

.col-3 {
  width: 25%;
}
#slider {
  overflow: hidden;
  white-space: nowrap;
}
.slide {
  display: inline-block;
  max-width: 960px;
}
.slide ul li {
  display: inline;
  list-style-type: none;
}
.hidden {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

  <section id="releases" class="content" >
    <?php 
    $args = array(
      'post_type' => 'releases',
      'posts_per_page' => -1,
    );
    $query = new WP_Query($args);

    echo '<div id="slider">';
    for($i=1; $query->have_posts(); $i++)
    {
      $query->the_post();
      $prePost='';
      $postPost='';

      if($i==1)
      {
        $prePost='<div class="slide"><ul>';
      }
      if($i==7)
      {
        $postPost='<li class="release col-3 left next">SEE MORE</li></ul></div>';
        // $i=0;
      }
      if($i==8)
      {
        $prePost='<div class="slide hidden"><ul>';
      }
      if($i==14)
      {
        $postPost='<li class="release col-3 left next">SEE MORE</li></ul></div>';
        $i=7;
      }

      echo $prePost, '<li class="release col-3 left"><div class="inner">';
      the_post_thumbnail();
      echo '</div></li>', $postPost;
    }
    echo '</div>';
    ?>
  </section>

＆＃13;

这取自我的现场环境，但是早上6点我可能有点不对劲。

我很乐意帮助任何有此问题的人使其发挥作用，我知道这可能会导致多少球疼痛。

用水平滚动显示Wordpress Post Thumbnails

2 个答案: