Nivo滑块不能在wordpress jquery中工作

时间:2014-02-09 09:03:21

标签: javascript php wordpress twitter-bootstrap nivo-slider

我已经在wordpress中添加了nivo滑块插件,但是它没有超过git加载文件。我相信问题在于我加载jquery的方式。

我已将javascript jquery.nivo.slider.js文件包含在我的主题文件夹中的js文件夹中。  在header.php中,我在head标签中使用了这个:

    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/bootstrap/js/jquery.nivo.slider.pack.js"></script>
   <script type="text/javascript">
    $(window).load(function() {
    $('#slider').nivoSlider();
    });
    </script>
   <?php wp_enqueue_script("jquery"); ?>

   <?php wp_head(); ?>

在index.php中,我使用的是:

    <div class="container">

    <div class="slider-wrapper theme-default">
    <div class="ribbon"></div>
    <div id="slider" class="nivoSlider">
    <img src="bootstrap/images/screen1.jpg"/>
    <img src="bootstrap/images/screen2.jpg" />
    <img src="bootstrap/images/screen3.jpg"  />
    <img src="bootstrap/images/screen4.jpg"/>
    </div>
    </div>

我没有在functions.php文件中使用任何内容。我在style.css中使用了这个:

@import url("bootstrap/css/nivo-slider.css");
@import url("bootstrap/css/slider.css");
@import url("bootstrap/css/bootstrap.css");
@import url("bootstrap/themes/default/default.css");

你能不能告诉我哪里出错了,因为git文件正在出现而不是图片幻灯片。当用作index.html时,它可以作为一种魅力。

1 个答案:

答案 0 :(得分:2)

如果你使用入队标准你可以解决jquery冲突,那么看一下这两个链接可能会解决问题。 http://codex.wordpress.org/Function_Reference/wp_register_script

http://codex.wordpress.org/Function_Reference/wp_enqueue_script

创建 script.js 文件

$(window).load(function() {
$('#slider').nivoSlider();
});

打开主题文件functions.php并添加以下代码:

创建功能

    function enqueue_script_for_nivo () {
    wp_enqueue_script('jquery');
    // Load your nivo script too here.
   wp_register_script('nivoscript',get_stylesheet_directory_uri().'/bootstrap/js/jquery.nivo.slider.pack.js"');
    wp_register_script( 'my-script', get_stylesheet_directory_uri() . '/js/script.js' );
wp_enqueue_script('nivoscript');
    wp_enqueue_script('my-script');
    }

add_action('wp_enqueue_scripts','enqueue_script_for_nivo');

这一切都试试这个,希望它应该有效:)