WordPress主题中未通过函数方法加载的脚本

时间：2017-04-13 作者：The WP Intermediate

我正在尝试通过函数加载CSS和Javscripts。CSS正在加载，但不知道发生了什么错误，javascripts和Jquery没有通过functions方法加载。

我试图通过head部分直接加载脚本，但通过functions方法无法加载。我在这里制作代码摘录→

  /* Register scripts. */
        wp_register_script( \'custom\', JS . \'/jquery-3.1.1.js\');
                wp_register_script( \'custom\', JS . \'/custom.js\');
你认为这也有什么错误吗→

/*-------------------------------------------*/
/* 1. CONSTANTS */
/*-------------------------------------------*/
define( \'THEMEROOT\', get_stylesheet_directory_uri() );
define( \'IMAGES\', THEMEROOT . \'/img\' );
define( \'JS\', THEMEROOT . \'/js\' );
可以找到实时WP站点链接here 用于任何直接故障排除。

尝试单击汉堡菜单，然后脚本将不会加载，这就是为什么汉堡菜单没有设置动画。

The Complete Function →

if ( ! function_exists( \'klogeto_scripts\' ) ) {
function klogeto_scripts() {
    /* Register scripts. */
    // wp_register_script( \'jquery\', JS . \'/jquery-3.1.1.js\');
            // wp_register_script( \'custom\', JS . \'/custom.js\',  array(), \'20151215\', true);
            // wp_enqueue_script( \'custom\' );
            wp_register_script( \'custom-js\', get_template_directory_uri() . \'js/custom.js\', array(), \'20151215\', true );
            wp_enqueue_script( \'custom-js\' );


    /* Load the stylesheets. */
    wp_enqueue_style( \'style\', THEMEROOT . \'/css/style.css\' );
wp_enqueue_style( \'responsive\', THEMEROOT . \'/css/responsive.css\' );
    wp_enqueue_style( \'fontawesome\', \'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css\' );
}
add_action(\'wp_enqueue_scripts\',\'klogeto_scripts\');
}

3 个回复
最合适的回答,由SO网友:Tom J Nowell 整理而成

在你试图做的事情中，有几个根本性的问题阻碍了你实现目标

命名问题是您注册了2个脚本，但您将它们都命名为“自定义”。当您稍后告诉WordPress显示“自定义”时，WordPress如何知道您指的是哪个脚本？

/* Register scripts. */
wp_register_script( \'custom\', JS . \'/jquery-3.1.1.js\');

// does this overwrite the previous line? ¯\\_(ツ)_/¯
wp_register_script( \'custom\', JS . \'/custom.js\');
因此，让我们通过给他们不同的名称（和适当的缩进）来解决这个问题：

/* Register scripts. */
wp_register_script( \'wpnovice-jquery\', JS . \'/jquery-3.1.1.js\');
wp_register_script( \'wpnovice-custom\', JS . \'/custom.js\');
注意，我在每个前面加了前缀，custom 是一个超级通用的术语，可能已经在使用了。

WP已经随JQuery提供了

永远不要捆绑WordPress附带的库。这样做可能会导致jQuery的多个副本和版本出现在前端。相反，请告诉WP脚本需要jQuery：

/* Register scripts. */
wp_register_script( \'wpnovice-custom\', JS . \'/custom.js\', array( \'jquery\' ) );
注册！=注册脚本会告诉WordPress它们存在，但不会告诉你如何处理它们。WordPress已经注册了很多脚本，但这些脚本并没有出现在每个WordPress站点的前端。

这是教某人如何建造房屋和某人实际建造房屋之间的区别。

因此，注册后，您需要致电wp_enqueue_script 告诉WordPress如何将脚本添加到页面

/* Register scripts. */
wp_register_script( \'wpnovice-custom\', JS . \'/custom.js\', array( \'jquery\' ) );
wp_enqueue_script( \'wpnovice-custom\' );
计时即使使用最新版本的代码，也可能无法工作！这是因为时间和地点很重要。同样的道理，牛排煮熟后要半生不熟也不管用，让WP在已经做好的时候打印脚本也不管用。

作为一条一般性建议，不要将代码放在文件中的全局范围内，而是将其包装在动作或挂钩中，以便在应该运行时运行（并且可以在需要时取消挂钩）。

这里我们想要wp_enqueue_scripts 挂钩/动作。以下是核心WP文档中的一个示例：

function themeslug_enqueue_script() {
    wp_enqueue_script( \'my-js\', \'filename.js\', false );
}
add_action( \'wp_enqueue_scripts\', \'themeslug_enqueue_script\' );
关于常数的最后一点注记
/*-------------------------------------------*/
/* 1. CONSTANTS */
/*-------------------------------------------*/
define( \'THEMEROOT\', get_stylesheet_directory_uri() );
define( \'IMAGES\', THEMEROOT . \'/img\' );
define( \'JS\', THEMEROOT . \'/js\' );
我建议不要使用这些名称，它们是超级通用名称，并且会污染全局名称空间。在这种情况下，它们可能会产生误导或导致问题。

此版本的注册脚本调用是显式的，它是否引用了正确的URL没有任何歧义：

// register script
wp_register_script( \'wpnovice-custom\', get_stylesheet_directory_uri() . \'/js/custom.js\', array( \'jquery\' ) );

SO网友:Frits

注册脚本后，需要将其排队。

以下假设您正在使用主题：

wp_register_script( \'custom-js\', get_template_directory_uri() . \'/custom.js\', array(), \'20151215\', true ); 
wp_enqueue_script( \'custom-js\' );
我还建议使用WordPress的内置jQuery文件。

EDIT

完整的函数应如下所示：

function my_custom_scripts() {
    wp_register_script( \'custom-js\', get_template_directory_uri() . \'/custom.js\', array(), \'20151215\', true ); 
    wp_enqueue_script( \'custom-js\' );
}
add_action( \'wp_enqueue_scripts\', \'my_custom_scripts\' );

SO网友:MagniGeeks Technologies

首先，您的站点有一些js错误。您可以在chrome控制台选项卡中看到您的站点，并看到有一个类似Uncaught的错误

TypeError: $ is not a function at custom.js:1
关于在你的站点中添加js，你做得很好

wp_register_script( \'custom\', JS . \'/jquery-3.1.1.js\');
wp_register_script( \'custom\', JS . \'/custom.js\');
这是完全错误的。您不需要在wordpress中添加外部jQuery。Wordpress已经有了那个文件。

Where is wp_enqueue_script?

wp\\u enqueue\\u脚本和wp\\u register\\u脚本不同。请通过以下链接了解他们

https://jhtechservices.com/wordpress-wp_enqueue_script-vs-wp_register_script/

https://wordpress.stackexchange.com/questions/82490/ when-should-i-use-wp-register-script-with-wp-enqueue-script-vs-just-wp-enque

wp_enqueue_script vs. wp_register_script

你应该这样做

wp_register_script( \'custom-js\', get_template_directory_uri() . \'/custom.js\', array(jquery), \'1.0\', true ); 
wp_enqueue_script( \'custom-js\' );

标签： javascript   wp-enqueue-script   wp-register-script   小码农  

相关推荐

如何将Bootstrap Tour JavaScript添加到WordPress管理面板仪表板小部件

我正在开发一个主题，想知道如何将引导程序教程脚本添加到自定义仪表板小部件中。基本上，我想将引导程序巡更脚本包含到管理面板中，这样我就可以编写一个自定义仪表板小部件，然后将巡更脚本链接到该小部件。