在 wordpress 中使用 NextGen Gallery 插件运行幻灯片时出现 JQuery 错误答案

【问题标题】：JQuery error when run slideshow with NextGen Gallery plugin in wordpress在 wordpress 中使用 NextGen Gallery 插件运行幻灯片时出现 JQuery 错误
【发布时间】：2017-06-12 19:17:06
【问题描述】：

在 NextGen Gallary 插件中添加幻灯片后，Chrome 中的错误代码。 Sildeshow页面中的错误部分？我找不到这个页面.. 在页脚中附加了 jQuery i 链接。这和我的 jQuery 文件有冲突吗？

请看附图和代码screenshot of error

JQMIGRATE: Migrate is installed, version 1.4.1
slideshow:212 Uncaught TypeError: jQuery(...).nggShowSlideshow is not a function
    at HTMLDocument.<anonymous> (slideshow:212)
    at i (jquery.js?ver=1.12.4:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
    at Function.ready (jquery.js?ver=1.12.4:2)
    at HTMLDocument.K (jquery.js?ver=1.12.4:2)
(anonymous) @ slideshow:212
i @ jquery.js?ver=1.12.4:2
fireWith @ jquery.js?ver=1.12.4:2
ready @ jquery.js?ver=1.12.4:2
K @ jquery.js?ver=1.12.4:2

<script type="text/javascript">
jQuery('#ngg-slideshow-8c3cff8f8dc2fd0d87b86cbcbb01a9eb-207510-image-list').hide().removeClass('ngg-slideshow-nojs');
jQuery(function($) {
    jQuery('#ngg-slideshow-8c3cff8f8dc2fd0d87b86cbcbb01a9eb-207510').nggShowSlideshow({
        id: '8c3cff8f8dc2fd0d87b86cbcbb01a9eb',
        fx: 'fade',
        width: 1000,
        height: 600,
        domain: 'https://localhost/marc1/',
        timeout: 10000      });

<script type="text/javascript">
    jQuery('#ngg-slideshow-8c3cff8f8dc2fd0d87b86cbcbb01a9eb-207510-image-list').hide().removeClass('ngg-slideshow-nojs');
    jQuery(function($) {
        jQuery('#ngg-slideshow-8c3cff8f8dc2fd0d87b86cbcbb01a9eb-207510').nggShowSlideshow({
            id: '8c3cff8f8dc2fd0d87b86cbcbb01a9eb',
            fx: 'fade',
            width: 1000,
            height: 600,
            domain: 'https://localhost/marc1/',
            timeout: 10000      });

【问题讨论】：

标签： javascript jquery wordpress nextgen-gallery

【解决方案1】：

这种类型的错误通常是由于在加载 JQuery 本身之前运行的 JQuery 插件（脚本）造成的。从您的屏幕截图来看，您似乎已将脚本直接手动添加到您的页面模板中。

在 WordPress 中，JQuery 脚本应始终由 wp_enqueue_script 挂钩加载并使用 JQuery 依赖项进行设置。

wp_enqueue_script( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

例如：

function load_my_script_SO44497195(){
    wp_register_script( 
        'my_script', 
        get_template_directory_uri() . '/js/myscript.js', 
        array( 'jquery' )
    );
    wp_enqueue_script( 'my_script' );
}
add_action('wp_enqueue_scripts', 'load_my_script_SO44497195');

但是，如果您确实必须通过 html 手动加载脚本，您应该将此代码包装在

// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );
});

或者至少把你的脚本放在页脚，让 JQuery 有机会首先加载。但是，您真的应该只将脚本排入队列。

所有这些都是猜测，因为我只截取了你的屏幕截图。如果我们可以访问实时站点，那就容易多了。

此外，在您在问题中给出的代码块中，您两次加载了相同的脚本，并且都没有结束脚本标签</script>，这似乎不仅没有必要，而且还可能导致问题。两次先解决这个问题，因为它很可能是问题的根源。

【讨论】：