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

我是WordPress主题开发中的新手，我有以下问题。为什么FlexySlider幻灯片未加载到此WordPress主题中？

我想创建一个WordPress的主题，使用了基于自举演示静态网站自举CSS框架（我有这个网站的整个源，因为它是一个downlodable教程）：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文件用来加载JavaScript的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主题配置为使用引导CSS和flexslider.css，也是style2.css文件，在代表什么演示网站是stili-custom.css（我自定义的CSS设置最后加载到ovverride的definied属性）

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

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

TNX

安德烈

来源

2014-01-21 AndreaNobili

我看你加载flexslider JS，但你居然呼吁flexslider建立你的幻灯片？

喜欢的东西：

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

来源

2014-01-21 19:50:44 badAdviceGuy

嗯，但为什么在纯HTML演示网站，我没有这样的电话吗？我指的是这个演示网站：http://www.html.it/guide/img/bootstrap/demo/home.html – AndreaNobili

如果你进入开发工具，然后向下滚动到演示页面的底部，你会看到正在加载的脚本列表。其中一个是'scripts.js'，该文件是调用flexslider创建幻灯片的代码（第3-9行） '$（window）.load（function（）{（'＃＃main-slider '）.flexslider（{ animation：“slide”， useCSS：false， pauseOnHover：true }）; }）;'' – badAdviceGuy

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

回答

相关问题