【问题标题】：How to enqueue javascript in my theme in wordpress that i created?如何在我创建的 wordpress 中将我的主题中的 javascript 排入队列？
【发布时间】：2020-01-17 01:36:01
【问题描述】：

我将 html、css、js 模板转换为 wordpress 主题。为了让我的css正常工作，我只是在functions.php中添加了函数，但是为了让javascript加入队列它不起作用我尝试了很多修改但没有任何效果这是我的function.php

<?php


function 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');
	

		
}

【问题讨论】：

你也需要add_action('wp_enqueue_scripts', 'addjs');
我已经这样做了，但没有任何改变，而且在很多情况下，我在其他帖子中看到他们没有这样做。

标签： javascript php wordpress templates enqueue

【解决方案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);

}

【讨论】：

【解决方案2】：

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

add_action( 'wp_enqueue_scripts', 'addjs' );

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

不过，有几点需要注意：

确保您的缩进/间距一致，并且行后没有多余的空格。干净的代码是关键！
你不需要单独添加JS和CSS文件，它们都可以在同一个add_action函数回调中处理。
除非您正在做一些非常花哨的事情（仅当在页面上找到短代码时才入队等），wp_enqueue_{script/style} 将为您处理 wp_register_{script/style} 函数。在大多数情况下，您可以使用enqueue 他们而不是注册然后入队他们。
查看documentation 并确保您的参数与函数接受的参数相同。它将防止在更极端的情况下出现警告和错误。

这是一个为您整理的示例：

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。

【讨论】：

感谢您提供有组织的代码，我会试试这个并看看这个文档。

【解决方案3】：

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

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

add_action( 'wp_enqueue_scripts', 'addjs' );

【讨论】：