jQuery(...).nivoSlider 不是 Wordpress 中的函数

Question

我在我的网站上使用 wordpress。在使用主题开始时，滑块正在工作，但现在我收到这些错误

TypeError: jQuery(...).nivoSlider 不是函数

TypeError: jQuery(...).lightbox 不是函数

TypeError: jQuery(...).prettyPhoto 不是函数

TypeError: $ 不是函数

我的网址是：http://www.rgesc.com/ 我已经为这个问题搜索了一周的解决方案，我尝试在 nivo.slider.js 上方添加 jquery 库并尝试输入它。我不擅长 wordpress，在这个问题上需要帮助。

var j = jQuery.noConflict();

但没有任何改变。

<script type='text/javascript' src='http://www.rgesc.com/wp-includes/js/jquery/jquery.js?ver=1.8'></script>
<script type='text/javascript' src='http://www.rgesc.com/wp-content/themes/theme1885/js/modernizr.js?ver=2.0.6'></script>
<script type='text/javascript' src='http://www.rgesc.com/wp-content/themes/theme1885/js/jquery.prettyPhoto.js?ver=3.1.3'></script>
<script type='text/javascript' src='http://www.rgesc.com/wp-content/themes/theme1885/js/jquery.nivo.slider.js?ver=2.5.2'></script>
<script type='text/javascript' src='http://www.rgesc.com/wp-content/themes/theme1885/js/jquery.loader.js?ver=1.0'></script>
<script type='text/javascript' src='http://www.rgesc.com/wp-content/themes/theme1885/js/superfish.js?ver=1.4.8'></script>

这行在head标签之间

 <script type="text/javascript">
    jQuery(window).load(function() {
        // nivoslider init
        jQuery('#slider').nivoSlider({
            effect: 'boxRainReverse',
            slices:15,
            boxCols:8,
            boxRows:8,
            animSpeed:500,
            pauseTime:5000,
            directionNav:false,
            directionNavHide:false,
            controlNav:true,
            captionOpacity:1            });
    });
</script>

其他脚本下方的这一行

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

附加照片库也无法正常工作。我才意识到这一点。

Answer 1

这是一个使用 Docs example 实现 WordPress 的示例，正​​确地将样式和脚本排入队列，并将所有演示文件放在目录 /wp-content/themes/your-theme/nivo/ 中。

下面的代码被插入到functions.php 主题文件中。短代码是显示滑块[test-nivo] 的助手（您必须从帖子中提取图像才能使其动态化）。注意使用捆绑的 WP jQuery 作为我们脚本的依赖项，尽量不要使用任何外部 jQuery，因为它们没有启用 noConflict 模式。
_{主要 WP 功能：get_stylesheet_directory_uri，@ 987654323@ 和 wp_enqueue_scripts.
查看捆绑的 WP 脚本的完整列表here。}

add_shortcode( 'test-nivo', 'shortcode_so_22436214');
add_action( 'wp_enqueue_scripts', 'enqueue_so_22436214' );

/**
 * SHORTCODE output
 */
function shortcode_so_22436214( $atts ) 
{
    $nivo_folder = get_stylesheet_directory_uri() . '/nivo';

    $output = <<<HTML
    <div id="slider" class="nivoSlider">
        <img src="$nivo_folder/nemo.jpg" alt="" />
        <a href="http://example.com"><img src="$nivo_folder/toystory.jpg" alt="" title="#htmlcaption" /></a>
        <img src="$nivo_folder/up.jpg" alt="" title="This is an example of a caption" />
        <img src="$nivo_folder/walle.jpg" alt="" />
    </div>
    <div id="htmlcaption" class="nivo-html-caption">
        <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
    </div>  
HTML;

    return $output;
}

/**
 * ACTION Enqueue scripts
 */
function enqueue_so_22436214() 
{
    wp_register_script( 
         'nivo-pack',
         get_stylesheet_directory_uri() . '/nivo/jquery.nivo.slider.pack.js'
    );
    wp_enqueue_script( 'nivo-start', get_stylesheet_directory_uri() . '/nivo/start-nivo.js', array( 'jquery', 'nivo-pack' ), false, true );
    wp_enqueue_style( 'nivo-css', get_stylesheet_directory_uri() . '/nivo/nivo-slider.css' );
}

还有我们自定义的 JS 文件，start-nivo.js：

jQuery( document ).ready( function( $ ) 
{ 
    $('#slider').nivoSlider({
        effect: 'random',               // Specify sets like: 'fold,fade,sliceDown'
        slices: 15,                     // For slice animations
        boxCols: 8,                     // For box animations
        boxRows: 4,                     // For box animations
        animSpeed: 500,                 // Slide transition speed
        pauseTime: 3000,                // How long each slide will show
        startSlide: 0,                  // Set starting Slide (0 index)
        directionNav: true,             // Next & Prev navigation
        controlNav: true,               // 1,2,3... navigation
        controlNavThumbs: false,        // Use thumbnails for Control Nav
        pauseOnHover: true,             // Stop animation while hovering
        manualAdvance: false,           // Force manual transitions
        prevText: 'Prev',               // Prev directionNav text
        nextText: 'Next',               // Next directionNav text
        randomStart: false,             // Start on a random slide
        beforeChange: function(){},     // Triggers before a slide transition
        afterChange: function(){},      // Triggers after a slide transition
        slideshowEnd: function(){},     // Triggers after all slides have been shown
        lastSlide: function(){},        // Triggers when last slide is shown
        afterLoad: function(){}         // Triggers when slider has loaded
    });
});

Answer 2

你包含 jQuery 三次：

1. jquery.js?ver=1.8
2. jquery-1.10.2.min.js
3. jquery-1.7.1.min.js

第一个之后的包含将删除所有绑定到 $ 和 jQuery 的插件，包含 jQuery 一次，您将解决问题。

Answer 3

除非绝对必要，否则我建议只使用 1 个 jQuery 版本。

Here is how you should use multiple jQuery versions on a website using jQuery.noConflict()