如何在我创建的 wordpress 中将我的主题中的 javascript 排入队列？

Question

我将 html、css、js 模板转换为 wordpress 主题。为了让我的css正常工作，我只是在functions.php中添加了函数，但是为了让javascript加入队列它不起作用我尝试了很多修改但没有任何效果这是我的function.php<?phpfunction load_stylesheets(){    wp_register_style('normal',get_template_directory_uri() . '/css/normalize.css',  array(), 1, 'all');  wp_enqueue_style('normal');        wp_register_style('demonstration',get_template_directory_uri() . '/css/demo.css',  array(), 1, 'all');  wp_enqueue_style('demonstration');}add_action('wp_enqueue_scripts','load_stylesheets');function addjs(){        wp_register_script('anime', get_template_directory_uri() . '/js/anime.min.js', array(), 1,1, 1);  wp_enqueue_script('anime');      wp_register_script('imagesload', get_template_directory_uri() . '/js/imagesloaded.pkgd.min.js', array(), 1,1, 1);  wp_enqueue_script('imagesload');      wp_register_script('main', get_template_directory_uri() . '/js/main.js', array(), 1,1, 1);  wp_enqueue_script('main');      }

Answer 1

请试试这个

add_action('wp_footer','addjs');

function addjs() {

    wp_register_script('anime', get_template_directory_uri() . '/js/anime.min.js', array ('jquery'),'',true);

    wp_register_script('imagesload', get_template_directory_uri() . '/js/imagesloaded.pkgd.min.js', array ('jquery'),'',true);

    wp_register_script('main', get_template_directory_uri() . '/js/main.js', array ('jquery'),'',true);

}

Answer 2

wp_enqueue_scripts 是在将要出现在前端的脚本和样式排入队列时使用的正确钩子。尽管有这个名字，但它用于将脚本和样式排入队列。

因此，您必须在一个函数中添加脚本和样式，或者您可以使用现有代码再添加一个 wordpress 操作。

add_action( 'wp_enqueue_scripts', 'addjs' );

Answer 3

它的短而甜的是你没有在addjs任何地方调用你的函数。如果您添加：

add_action( 'wp_enqueue_scripts', 'addjs' );

然后它应该工作。（注意：以上不适用于任何人，请查看下面的编辑）

但是，您应该注意以下几点：

• 确保您的缩进/间距一致，并且行后没有多余的空格。干净的代码是关键！

• 不需要单独添加 JS 和 CSS 文件，它们都可以在同一个add_action函数回调中处理。

• 除非您正在做一些非常花哨的事情（仅在页面上找到短代码时才入队等），wp_enqueue_{script/style}否则将为您处理该wp_register_{script/style}功能。在大多数情况下，您可以使用enqueue它们而不是注册然后将它们加入队列。

• 查看文档并确保您的参数与函数接受的参数相同。它将防止在更极端的情况下出现警告和错误。

这是为您整理的示例：

add_action( 'wp_enqueue_scripts', 'enqueue_theme_assets' );

function enqueue_theme_assets(){

    // Styles

    wp_enqueue_style( 'normal', get_template_directory_uri() . '/css/normalize.css', array(), '1.0' );

    wp_enqueue_style( 'demonstration', get_template_directory_uri() . '/css/demo.css', array(), '1.0');

    // Scripts

    wp_enqueue_script( 'anime', get_template_directory_uri() . '/js/anime.min.js', array(), '1.0', true );

    wp_enqueue_script( 'imagesload', get_template_directory_uri() . '/js/imagesloaded.pkgd.min.js', array(),'1.0', true );

    wp_enqueue_script( 'main', get_template_directory_uri() . '/js/main.js', array(), '1.0', true );

}

编辑：

我刚刚看到你的评论add_action( 'wp_enqueue_scripts', 'addjs' );不起作用。看看wp_enqueue_script()文档。您会在#Usage部分注意到，它正确地将脚本排入wp_enqueue_scripts钩子依赖于主题中使用的wp_footer()和wp_head()函数，因此**确保您已wp_footer();在主题中调用，特别是因为您将$in_footer参数设置为true.