我想将.js文件加入我的子主题


16

我试图将自定义.js文件放入我的子主题目录中。

在我的子主题的functions.php中,我找到了以下代码

/* After this. you can override Accessible Zen's pluggable functions or add your own.
 * Remember, do your best to stay accessible! :)
 *
 */
 add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_script( 'custom-script.js', 'js/custom-script.js', array('jquery') );
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) );
}

其中只有这部分是我实现的,应该从js /文件夹加载我的custom.script.js

wp_enqueue_script( 'custom-script.js', 'js/custom-script.js', array('jquery') );

不幸的是它没有这样做,有人可以帮忙吗?

*更新2

该代码现在看起来像这样,并且可以正常工作,当我将函数添加到另一个add_action中时,该代码不起作用。谢谢大家的帮助!我仍然想知道是否还没有办法减少这段代码。

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) );
}

/*add my custom jquery script*/
add_action( 'wp_enqueue_scripts', 'menu_scripts' );
function menu_scripts() {
wp_enqueue_script( 'responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_script(
    'custom-script',
    get_stylesheet_directory_uri() . '/js/custom-script.js',
    array( 'jquery' )
);
        }

这条线是做什么用的?

wp_enqueue_script( 'responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );

有必要吗?


wp_enqueue_script( 'custom-script.js', get_stylesheet_directory_uri() . 'js/custom-script.js', array('jquery') );
Pieter Goosen

@Pieter我调整了您的更改,但仍无法正常工作。这就是我的.js文件中的内容,如果我将其直接放在page.php中,则可以使用它,例如:<script> if(jQuery){alert(“ jQuery库已加载!”); } else {alert(“未找到jQuery库!”); } </ script>
MrKainig 2015年

@Pieter好的,我将代码放入问题
MrKainig

从您的js文件中删除脚本标签
Pieter Goosen 2015年

Answers:


32

这是一个工作示例:

add_action( 'wp_enqueue_scripts', 'menu_scripts' );
function menu_scripts() {
wp_enqueue_script( 'responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_script(
    'custom-script',
    get_stylesheet_directory_uri() . '/js/custom_script.js',
    array( 'jquery' )
);
        }

或者像这样,显然加载速度更快:

function my_scripts_method() {
    wp_enqueue_script(
        'custom-script',
        get_stylesheet_directory_uri() . '/js/custom_script.js',
        array( 'jquery' )
    );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

来源http://codex.wordpress.org/Function_Reference/wp_enqueue_script

get_template_directory_uri() 仅适用于父主题。


1
你为什么不使用get_stylesheet_directory_uri()
Pieter Goosen

它们都根据我的测试工作。
布拉德·道尔顿

我尝试了第一个,但是没有用。您能否发布完整的代码博客(包括我现有的工作队列)?因为我不知道如何使用我的functions.php中已经存在的代码正确实现您的代码
MrKainig 2015年

2
是的,它们确实可以,但是get_stylesheet_directory_uri()速度更快:-)
Pieter Goosen

它只是一个有效的例子。代表您需要做一些工作,以了解它如何与您的代码一起使用。现在,您可以重新编写代码,以便将脚本加载到主题中。
布拉德·道尔顿
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.