首页 Wordpress WordPress 加载Javascript和CSS的方法

WordPress 加载Javascript和CSS的方法

我们知道正常一个网页加载JavascriptCSS,一般的方法是在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/

相关推荐

1 条评论

发表回复

邮箱地址不会被公开。