为什么幻灯片没有出现在我的自定义主题中？答案

【问题标题】：Why the slideshow don't appear in my custom theme?为什么幻灯片没有出现在我的自定义主题中？
【发布时间】：2014-01-21 14:59:18
【问题描述】：

我是 WordPress 主题开发的新手，遇到以下问题。

我正在尝试基于这个 BootStrap 演示静态网站创建一个使用 BootStrap CSS 框架的 WordPress 主题（我有这个网站的全部源代码，因为它是一个可下载的教程）：http://www.html.it/guide/img/bootstrap/demo/home.html

这是我的自定义 WP 主题：http://onofri.org/WP_BootStrap/

所以我已经创建了一个基本的 WP 主题，作为第一阶段，我想在我的 WP 主题的 header.php 文件中插入上一个演示页面的 slideshow ，所以这是我的 header.php 代码：

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<!-- leave this for stats -->

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php wp_head(); ?>
</head>
<body>

    <!-- Sezione slider con Flexslider -->
    <div class="row">
    <div class="col-sm-12">
     <div id="main-slider" class="flexslider">
      <ul class="slides">
       <li>
           <img src="<?php bloginfo('template_url'); ?>/assets/img/flexslider/flex-1.jpg"/>
           <div class="flex-caption">
               <p class="flex-caption-text">
                   <span>Lorem ipsum</span><br>
                   <span>sit dolor</span><br>
                   <span>adipiscing elitur</span>
               </p>
           </div>
       </li>
       <li>
           <img src="<?php bloginfo('template_url'); ?>/assets/img/flexslider/flex-2.jpg"/>
           <div class="flex-caption">
               <p class="flex-caption-text">
                   <span>Lorem ipsum</span><br>
                   <span>sit dolor</span><br>
                   <span>adipiscing elitur</span>
               </p>
           </div>
       </li>
       <li>
           <img src="<?php bloginfo('template_url'); ?>/assets/img/flexslider/flex-3.jpg"/>
           <div class="flex-caption">
               <p class="flex-caption-text">
                   <span>Lorem ipsum</span><br>
                   <span>sit dolor</span><br>
                   <span>adipiscing elitur</span>
           </p>
           </div>
       </li>
      </ul>
     </div><!-- /.flexslider -->
    </div><!-- /.col-sm-12 -->
    </div><!-- /.row -->

<center>
<div id="page">
<div id="header">

<h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>
<div class="description"><?php bloginfo('description'); ?></div>
</div>
<hr />

如您所见，我只是将静态演示网站的块放在了我的 header.php 文件的开头。

好的，我的 WordPress 主题配置为使用 BootStrap CSS 和 flexslider.css 以及代表演示网站中的内容的 style2.css 文件stili-custom.css（我的自定义 CSS 设置，最后加载以覆盖定义的属性）

如您所见，问题是在我的主题开始时幻灯片没有出现，我不知道这个问题。

为什么？你能帮我解决这个问题吗？

Tnx

安德烈亚

【问题讨论】：

标签： html css wordpress twitter-bootstrap wordpress-theming

【解决方案1】：

您似乎错过了激活 Flexslider 的调用。你可以把它放在标题中：

<script type="text/javascript" charset="utf-8">
  jQuery(document).ready(function($) {
    $('.flexslider').flexslider();
  });
</script>

在此处查看完整文档：http://www.woothemes.com/flexslider/

【讨论】：

【解决方案2】：

这里有一些更好的代码可以在您的模板页面中使用。这是一个循环，输出您的帖子特色图像。如果您不想获得特色图片，请删除 PHP 并改用您的硬编码。随意使用。

<!-- Flexslider Slider -->
    <section class="slider">
    <div id="timeline" class="flexslider">
    <ul class="slides">

      <?php
        $query = new WP_Query( array( 'orderby' => 'title', 'order' => 'ASC', 'posts_per_page' => '-1' ) );

        if ( $query->have_posts() ) : ?>
        <?php while ( $query->have_posts() ) : $query->the_post(); ?>
        <?php $post_thumbnail_id = get_post_thumbnail_id();
        $post_thumbnail_url = wp_get_attachment_url( $post_thumbnail_id ); ?>
           <li>
             <div class="slider-img" style="background: transparent url(<?php echo $post_thumbnail_url ?>) no-repeat center center; background-size: cover;"></div>
            <div class="caption-wrapper">

              <a class="toggle">
              <h2 class="caps"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
              </a>

              <div class="caption-content">
              <p><?php ?><br /> 
              <span class="date"><?php the_date(); ?></span></p> 
              <?php the_excerpt(); ?>
              </div>

            </div>
            </li>
            <?php endwhile; wp_reset_postdata(); ?>
            <?php else : ?>
            <?php endif; ?>

            </ul>
        </div> <!-- end #timeline -->
    </section>
<!-- End Flexslider Slider -->

在你的 JS 中初始化 Flexslider：

$('#timeline').flexslider({
 // animation: "slide",
 // controlNav: false,
 // directionNav: false,
 // slideshow: false,
 // animationLoop: false,
 // touch: true,
 // keyboard: true,
 // // controlsContainer: ".controls-container",
 // sync: "#carousel",
 // start: function(slider){  },
 //      before: function(){  }
});

【讨论】：