为什么幻灯片不会出现在我的自定义主题中？

我是WordPress主题开发的新手，我有以下问题。为什么幻灯片不会出现在我的自定义主题中？

我想创建一个WordPress的主题，使用了基于自举演示静态的网站上（我有这个网站的整个源，因为它是一个downlodable教程）自举 CSS框架：http://www.html.it/guide/img/bootstrap/demo/home.html

这是我定制WP主题：http://onofri.org/WP_BootStrap/

所以我必须创建一个基本的WP主题，作为第一阶段，我想插入之前的演示页的幻灯片在的的header.php文件我的WP主题的，所以这是我的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主题配置为使用引导CSS和flexslider.css，也是style2.css文件代表了演示网站是什么stili-custom.css（我自定义的CSS设置，最后加载到ovverride定义的属性）

正如你所看到的问题是，在我的主题开始幻灯片放映没有出现，我不知道这个问题。

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

TNX

安德烈

来源

2014-01-21 AndreaNobili

它看起来像你错过了激活Flexslider呼叫。你可以把这个在标题：

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

看到完整的文档在这里：http://www.woothemes.com/flexslider/

来源

2014-01-21 16:39:29 Michelle

这里是你的模板页面中使用一些更好的代码。这是一个循环，输出您的帖子精选图像。如果你不想获得精选的图片，那么取而代之的是删除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 -->

初始化Flexslider在您的JS：

$('#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(){ } 
});

来源

2014-01-21 17:38:16 BenRacicot

为什么幻灯片不会出现在我的自定义主题中？

回答

相关问题