jQuery（...）。nivoSlider不是Wordpress中的一个函数 [英] jQuery(...).nivoSlider is not a function in Wordpress

问题描述

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

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

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 type ='text / javascript'src ='http：//www.rgesc.com/wp-content/themes/theme1885/js/jquery.prettyPhoto.js？ver = 3.1.3'> ;< /脚本> 
< script type ='text / javascript'src ='http：//www.rgesc.com/wp-content/themes/theme1885/js/jquery.nivo.slider.js？ver = 2.5.2 >< /脚本> 
< script type ='text / javascript'src ='http：//www.rgesc.com/wp-content/themes/theme1885/js/jquery.loader.js？ver = 1.0'>< ; /脚本> 
< script type ='text / javascript'src ='http：//www.rgesc.com/wp-content/themes/theme1885/js/superfish.js？ver = 1.4.8'>< ; /脚本> 
  

头标记之间的这一行

 < script type =text / javascript> 
 jQuery（window）.load（function（）{
 // nivoslider init 
 jQuery（'＃slider'）。nivoSlider（{
 effect：'boxRainReverse'，
切片：15，
 boxCols：8，
 boxRows：8，
 animSpeed：500，
 pauseTime：5000，
 directionNav：false，
 directionNavHide：false，
 controlNav：true，
 captionOpacity：1}）; 
}）; 
< / script> 
  

这一行低于其他脚本

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

其他照片厨房也不起作用。我刚认识到这一点。

解决方案

以下是使用， wp_enqueue_script 和 wp_enqueue_scripts 。

查看此处的捆绑WP脚本的完整列表。

  add_shortcode（'test-nivo'，'shortcode_so_22436214'）; 
 add_action（'wp_enqueue_scripts'，'enqueue_so_22436214'）; 
 
 / ** 
 * SHORTCODE输出
 * / 
函数shortcode_so_22436214（$ atts）
 {
 $ nivo_folder = get_stylesheet_directory_uri（）。 / NIVO; 
 
 $ output =<<< HTML 
< div id =sliderclass =nivoSlider> 
< img src =$ nivo_folder / nemo.jpgalt =/> 
< a href =http://example.com>< img src =$ nivo_folder / toystory.jpgalt =title =＃htmlcaption/>< / a> ; 
< img src =$ nivo_folder / up.jpgalt =title =这是标题的示例/> 
< img src =$ nivo_folder / walle.jpgalt =/> 
< / div> 
< div id =htmlcaptionclass =nivo-html-caption> 
< strong>这< / strong>是< em> HTML< / em>的示例标题为< a href =＃>链接< / a>。 
< / div> 
 HTML; 
 
返回$ output; 
} 
 
 / ** 
 * ACTION排队脚本
 * / 
 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（）。'/ nicivo/nivo-slider.css'）; 
} 
  

我们的自定义JS文件， start-nivo。 js ：

  jQuery（document）.ready（function（$）
 {
 $（'＃slider'）。nivoSlider（{
效果：'随机'，//指定集合如：'fold，fade，sliceDown'
 slices：15，//用于切片动画
 boxCols：8，//对于方框动画
 boxRows：4，//对于方框动画
 animSpeed：500，//幻灯片转换速度
 pauseTime：3000，//如何每个幻灯片显示
 startSlide：0，//设置开始幻灯片（0索引）
 directionNav：true，//下一个和上一个导航
 controlNav：true，// 1,2 ，3 ...导航
 controlNavThumbs：false，//使用控制导航的缩略图
 pauseOnHover：true， //在悬停时停止动画
 manualAdvance：false，//强制手动转换
 prevText：'上一个'，//上一个方向文本
 nextText：'下一个'，//下一个方向文本
 randomStart：false，//从随机幻灯片开始
 beforeChange：function（）{}，//在幻灯片转换前触发
 afterChange：function（）{}，//触发后幻灯片转换
 slideshowEnd：function（）{}，//显示所有幻灯片后的触发器
 lastSlide：function（）{}，//显示上一张幻灯片时触发
 afterLoad：function （）{} //滑块加载时触发
}）; 
}）; 
  

I use wordpress for my website. At the beginning of the using theme, slider was working but now I get these errors

TypeError: jQuery(...).nivoSlider is not a function

TypeError: jQuery(...).lightbox is not a function

TypeError: jQuery(...).prettyPhoto is not a function

TypeError: $ is not a function

My website address is : http://www.rgesc.com/ I have been searching solutions for this problem for a week, I tried to add jquery libs, above nivo.slider.js and tried to input this. I'm not good on wordpress and need help on this issue.

var j = jQuery.noConflict();

but nothing changes.

<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>

This lines in between head tags

 <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>

This line below other scripts

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

Additional photo galley is not working too. I just recognized that.

解决方案

Here's an example of WordPress implementation using the Docs example, enqueuing the styles and scripts properly, and having all demo files inside the directory /wp-content/themes/your-theme/nivo/.

The following code is inserted in the functions.php theme file. The shortcode is a helper to display the slider, [test-nivo] (you'll have to pull the images from the post to make this dynamic). Note the use of the bundled WP jQuery as a dependency of our script, try not to use any external jQuery as they don't have the noConflict mode enabled.
_{Main WP functions: get_stylesheet_directory_uri, wp_enqueue_script and wp_enqueue_scripts.
Check the full list of bundled WP scripts 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' );
}

And our custom JS file, 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
    });
});

这篇关于jQuery（...）。nivoSlider不是Wordpress中的一个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！