Question

我尝试将使用Foundation 6框架制作的轨道滑块转换为WordPress，但是当它滑到第二个帖子时，它似乎会卡住并停止工作：

<ul class="orbit-container">
  <?php $i = 0; ?>
  <?php $slider = new WP_Query(array('post_type' => 'testimonials', 'orderby' => 'date', 'posts_per_page' => 3)); while($slider->have_posts()) : $slider->the_post(); ?>
    <li class="<?php echo $i == 0 ? 'is-active' : '' ?> orbit-slide">
      <div class="post">
        <blockquote class="post">
          <i class="fa fa-quote-left quotes"></i>
            <?php the_content(); ?>
          <i class="fa fa-quote-right quotes"></i>
        </blockquote>
        <cite><?php the_title(); ?></cite>
      </div><!-- .post -->
    </li>
  <?php $i++; endwhile; wp_reset_postdata(); ?>
</ul>

我还列出了以下js文件（以及触发基础的自定义文件）：

wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'https://code.jquery.com/jquery-3.2.0.min.js', array(), '3.2.0', true);
wp_enqueue_script('foundation', get_template_directory_uri() .'/js/foundation.min.js', array(), '6.3.1', true);
wp_enqueue_script('foundation-orbit', get_template_directory_uri() .'/js/foundation.orbit.min.js', array(), '6.3.1', true);

有人可以帮我吗？我根本不知道如何纠正这段代码。提前谢谢大家。

更新我忘记将它们粘贴在上面的代码中，但我还在无序列表下面包含了以下要点：

<nav class="orbit-bullets">
  <?php $entries = $slider->post_count; ?>
  <?php for($i=0; $i<$entries; $i++) { ?>
    <button class="<?php echo $i==0 ? 'is-active' : '' ?>" data-slide="<?php echo $i; ?>"></button>
  <?php } ?>
</nav>

生成的HTML：

<ul class="orbit-container">
  <li class="is-active orbit-slide">
    <div class="post">
      <blockquote class="post">
        <i class="fa fa-quote-left quotes"></i>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat...</p>
        <i class="fa fa-quote-right quotes"></i>
      </blockquote>
      <cite>Lorem Ipsum</cite>
    </div><!-- .post -->
  </li>
  <li class=" orbit-slide">
    <div class="post">
      <blockquote class="post">
        <i class="fa fa-quote-left quotes"></i>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <i class="fa fa-quote-right quotes"></i>
      </blockquote>
      <cite>Lorem Ipsum Two</cite>
    </div><!-- .post -->
  </li>
  <li class=" orbit-slide">
    <div class="post">
      <blockquote class="post">
        <i class="fa fa-quote-left quotes"></i>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat!!!</p>
        <i class="fa fa-quote-right quotes"></i>
      </blockquote>
      <cite>Lorem Ipsum Three</cite>
    </div><!-- .post -->
  </li>
</ul>

<nav class="orbit-bullets">
  <button class="is-active" data-slide="0"></button>
  <button class="" data-slide="1"></button>
  <button class="" data-slide="2"></button>
</nav>

Wordpress上的基础轨道滑块卡纸

0 个答案: