我们知道正常一个网页
加载Javascript和
CSS,一般的方法是在head中通过下面的方法来加载
html
<script type="text/javascript" src="/js%E6%96%87%E4%BB%B6%E8%B7%AF%E5%BE%84"></script>
<link rel="stylesheet" type="text/css" href="/css%E6%96%87%E4%BB%B6%E8%B7%AF%E5%BE%84">
但在
wordpress中有更加高效的加载方式,在function.php里进行动态的加载。官方文档很多内容,包括register注册和enqueue队列两种,通过wordprss官方文档里的解释有非常多,复杂难明。没有直接了当的说明什么时候用什么。但我在官方主题的引用方法里得出结论:
1、CSS,官方主题里直接用的enqueue队列方式;
2、Javascript,建议直接使用enqueue队列方式。
总之,不知道的话就使用队列加载。
贴上我的加载实例:
php
//加载样式表和jquery库
function mytheme_scripts() {
wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), $theme_version );//加载主样式表
wp_enqueue_style( 'font-awesome' , get_template_directory_uri() . '/font-awesome/css/font-awesome.min.css' );//加载font-awesome
//全局加载js脚本
wp_enqueue_script( 'min-script', get_template_directory_uri() . '/js/jquery.min.js', array( 'jquery' ) );//加载本地JS库,如果要加载远程库,替换成具体网址
//页面、文章页面等加载灯箱效果
if ( is_singular() ) {
wp_enqueue_style( 'fancybox-style', 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css');//灯箱
wp_enqueue_script( 'fancybox-script', 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js');
}
// 评论回复样式表.
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {//如果在页面评论加载comment-reply脚本
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );
wp_enqueue_script和wp_register_script分别什么时候使用
网上通用的说法是:当我们有一个脚本, 它会在多个地方被引用, 我们就应该先使用wp_register_script进行注册, 然后通过wp_enqueue_script进行引用, 这样做可以有效的对脚本进行统一管理, 避免硬编码, 这就好比我们使用枚举来替代魔法数一样. 万一我们需要修改脚本路径的时候, 只需要在wp_register_script注册的函数中修改一次, 而不需要在wp_enqueue_script进行多次修改。
而且分别加载,不需要的时候不加载,能有增加加载速度的作用。
我们看看官方主题是如何加载的
php
function twenty_twenty_one_scripts() {
// 兼容IE加载不同的样式表
global $is_IE, $wp_scripts;
if ( $is_IE ) {
// 如果是IE就加载下面的样式表
wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/assets/css/ie.css', array(), wp_get_theme()->get( 'Version' ) );
} else {
// 如果不是IE就加载标准的样式表
wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) );
}
// 加载RTL 样式表.
wp_style_add_data( 'twenty-twenty-one-style', 'rtl', 'replace' );
// 加载Print styles.
wp_enqueue_style( 'twenty-twenty-one-print-style', get_template_directory_uri() . '/assets/css/print.css', array(), wp_get_theme()->get( 'Version' ), 'print' );
// 评论回复样式表.
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {//如果在页面评论加载comment-reply脚本
wp_enqueue_script( 'comment-reply' );
}
// Register the IE11 polyfill file.
wp_register_script(
'twenty-twenty-one-ie11-polyfills-asset',
get_template_directory_uri() . '/assets/js/polyfills.js',
array(),
wp_get_theme()->get( 'Version' ),
true
);
// Register the IE11 polyfill loader.
wp_register_script(
'twenty-twenty-one-ie11-polyfills',
null,
array(),
wp_get_theme()->get( 'Version' ),
true
);
wp_add_inline_script(
'twenty-twenty-one-ie11-polyfills',
wp_get_script_polyfill(
$wp_scripts,
array(
'Element.prototype.matches && Element.prototype.closest && window.NodeList && NodeList.prototype.forEach' => 'twenty-twenty-one-ie11-polyfills-asset',
)
)
);
// 加载菜单脚本.
if ( has_nav_menu( 'primary' ) ) {
wp_enqueue_script(
'twenty-twenty-one-primary-navigation-script',
get_template_directory_uri() . '/assets/js/primary-navigation.js',
array( 'twenty-twenty-one-ie11-polyfills' ),
wp_get_theme()->get( 'Version' ),
true
);
}
// Responsive embeds script.
wp_enqueue_script(
'twenty-twenty-one-responsive-embeds-script',
get_template_directory_uri() . '/assets/js/responsive-embeds.js',
array( 'twenty-twenty-one-ie11-polyfills' ),
wp_get_theme()->get( 'Version' ),
true
);
}
add_action( 'wp_enqueue_scripts', 'twenty_twenty_one_scripts' );
从上面的代码我们可以看出来,全局性的css和Javascript他都是直接使用wp_enqueue_scripts来加载,单独注册再列队的也有,所以个人认为可以只使用wp_enqueue_scripts来加载Javascript并不会影响使用。当然如果你先使用wp_register_script注册, 再使用wp_enqueue_script进行引入,那一定是正确的。
引用文档:
1、
https://blog.csdn.net/qq_39482708/article/details/122519611
2、
https://developer.wordpress.org/reference/functions/wp_enqueue_script/
[…] WordPress加载jquery的方法可以参见WordPress 加载Javascript和CSS的方法 […]