README

WordPress 的条件 CSS 和 JavaScript 加载器。它可以在页面上存在特定 CSS 类或 ID 时才加载文件。

它使用 Filament Group 的 loadCSS 和 loadJS。

警告：请求脚本的执行顺序不受管理，因此您不应使用它来加载相互依赖的多个 JavaScript 文件。

JavaScript 文件将在 DOM 准备就绪时加载。因此，您的脚本不应包含

• document.addEventListener( 'DOMContentLoaded', callback );
• window.onload
• jQuery(document).ready(...)

仅当插件 CSS 类存在时加载插件 JavaScript 的示例

<?php
function my_load_js() {
	echo wee_Conditional_Loader::js( '.my-plugin-css-class', plugins_url( 'my-plugin', 'script.js' ) );
}
add_action( 'wp_head', 'my_load_js' ); 
?>

仅当插件 ID 存在时加载插件 CSS 的示例

<?php
function my_load_css() {
	echo wee_Conditional_Loader::css( '#my-plugin-id', plugins_url( 'my-plugin', 'style.css' ) );
}
add_action( 'wp_head', 'my_load_css' );
?>

当然，您也可以在主题中使用它

<?php
function my_theme_conditional_css() {
	echo wee_Conditional_Loader::css( '.my-theme-css-class', get_stylesheet_directory_uri() . '/my-conditional-styles.css' );
}
add_action( 'wp_head', 'my_theme_conditional_css' );
?>

默认情况下，此插件的 JavaScript 会内联加载，如果运行 HTTP/2.0，则会作为外部文件加载。您可以在 wp-config.php 中设置以下常量来明确告诉 WordPress 使用外部文件

define( 'WEE_CL_LOAD_INLINE', false );

此插件还可以用于异步加载 CSS 文件

<?php
// Register stylesheets.
function my_styles() {
	wp_enqueue_style( 'style-handle-1', 'url/to/style.css' );
	wp_enqueue_style( 'style-handle-2', 'url/to/style.css' ); // We want this to load async.
}
add_action( 'wp_enqueue_scripts', 'my_styles' );

// Declare async stylesheets.
function my_async_styles( $tag, $handle ) {
	switch ( $handle ) {
		case 'style-handle-2':
			preg_match( "/href='([^']+)'/", $tag, $matches );
			if ( isset( $matches[1] ) ) {
				$tag = '<script>loadCSS( "' . esc_attr( $matches[1] ) . '", document.getElementById( "wee-conditional-loader" ) );</script>' .
					   '<noscript>' . trim( $tag ) . "</noscript>\n";
			}
			break;
	}

	return $tag;
}
add_filter( 'style_loader_tag', 'my_async_styles', 10, 2 );
?>

作者

Walter Ebert

许可证

MIT