Question

我在WordPress主题开发方面相当新，我有以下问题。

我正在尝试使用基于此BootStrap演示静态网站的 BootStrap CSS框架创建一个WordPress主题（我有这个网站的完整源代码，因为它是一个可下载的教程）：{{3 }}

这是我的自定义WP主题：http://www.html.it/guide/img/bootstrap/demo/home.html

所以我创建了一个基本的WP主题，作为第一阶段，我想在WP主题的 header.php 文件中插入上一个演示页面的幻灯片 ，这是我的 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设置，最后加载到ovverride定义的属性）

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

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

TNX

安德烈

Answer 1

看起来你错过了激活Flexslider的调用。你可以把它放在标题中：

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

请参阅此处的完整文档：http://www.woothemes.com/flexslider/

Answer 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(){  }
});

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

2 个答案: