Question

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

TypeError：jQuery（...）。nivoSlider不是函数

TypeError：jQuery（...）。lightbox不是函数

TypeError：jQuery（...）。prettyPhoto不是函数

TypeError：$不是函数

我的网址是：http://www.rgesc.com/ 我一直在寻找这个问题的解决方案一周，我试图在nivo.slider.js上面添加jquery libs并试图输入这个。我对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>

头部标记之间的界线

 <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

你包括jQuery三次：

的jquery.js？版本= 1.8
的jquery-1.10.2.min.js
的jquery-1.7.1.min.js

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

Answer 2

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

enter image description here

以下代码插入functions.php主题文件中。短代码是帮助显示滑块[test-nivo]（您必须从帖子中提取图像以使其动态化）。请注意使用捆绑的WP jQuery作为我们脚本的依赖项，尽量不要使用任何外部jQuery，因为它们没有启用noConflict模式。
_{主要WP功能：get_stylesheet_directory_uri，wp_enqueue_script和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 3

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

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

jQuery（...）。nivoSlider不是Wordpress中的一个函数

3 个答案: