Question

我在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文件中插入上一个演示页面的幻灯片，所以这是我的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文件的开头。

要加载我的 jquery.flexslider.js ，我将此代码用于WordPress functions.php 文件，遵循用于加载JavaScripts的WordPress标准：

/* Function automatically executed by the hook 'load_java_scripts':
 * 1) Load all my JavaScripts
 */
function load_java_scripts() {
    // Load JQuery:
    wp_enqueue_script('jquery');
    // Load bootstrap.min.js:
    wp_enqueue_script('bootstrap.min-js', get_template_directory_uri() . '/assets/bootstrap/js/bootstrap.min.js', array('jquery'), 'v3.0.3', true);
    // Load FlexSlider JavaScript
    wp_enqueue_script('flexSlider-js', get_template_directory_uri() . '/assets/plugins/flexslider/jquery.flexslider.js', array('jquery'), 'v2.1', true);
    // Load FancyBox:
    wp_enqueue_script('fancy-js', get_template_directory_uri() . '/assets/plugins/fancybox/jquery.fancybox.pack.js', array('jquery'), 'v2.1.5', true);
    // Load scripts.js:
    wp_enqueue_script('fancy-js', get_template_directory_uri() . '/assets/js/scripts.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'load_java_scripts');

正如您所见， jquery.flexslider.js 应该加载到我的所有页面中，事实上（在FireFox中）查看页面源的末尾有：

<script type='text/javascript' src='http://localhost/wordpress/wp-content/themes/AsperTheme/assets/plugins/flexslider/jquery.flexslider.js?ver=v2.1'></script>

点击它可以看到 jquery.flexslider.js的来源

好的，我的WordPress主题配置为使用BootStrap CSS和flexslider.css以及style2.css文件，它代表演示网站中的stili-custom.css（我自定义的CSS设置，在最后要改变定义的属性）

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

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

TNX

安德烈

Answer 1

我看到你加载了flexslider js，但是你实际上是在调用flexslider来构建幻灯片吗？

类似的东西：

$(document).ready(function(){
   $('.flexslider').flexslider({option1: value, option2: value});
});

为什么FlexySlider幻灯片未加载到此WordPress主题中？

1 个答案: