爲什麼幻燈片不會出現在我的自定義主題中？

我是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

爲什麼幻燈片不會出現在我的自定義主題中？

回答

相關問題