WordPress 在文章页面加载指定 JS & CSS
对于某些特定功能 JS 或 CSS 文件,也许只是特定页面用到。不需要全站加载,这时可以按条件引入。话不多说,实现方法见下文(通过 wp_enqueue_scripts 函数加载文件,也是 WordPress 建议用法)。
/**
* Enqueue scripts and styles.
*/
function wp_load_scripts() {
// 全站加载资源
wp_enqueue_style( 'theme-style', get_theme_file_uri( '/assets/main.css' ), array(), null );
wp_enqueue_script( 'theme-jquery', get_theme_file_uri( '/assets/main.js' ), array(), null );
// 仅在“文章”和“页面”加载
if ( is_single() || is_page() ) {
wp_enqueue_script( 'post-jquery', get_theme_file_uri( '/assets/post.js' ), array(), null );
}
// 仅在指定“页面”加载(WP后台查看页面链接的ID参数)
if ( is_page( ID ) ) {
wp_enqueue_script( 'page-jquery', get_theme_file_uri( '/assets/page.js' ), array(), null );
}
// 仅在特定“页面模板”加载
if( is_page() ) {
global $wp_query;
// 根据“页面模板”文件名匹配
$page_template_name = get_post_meta( $wp_query->post->ID, '_wp_page_template', true );
if($page_template_name == 'onecolumn-page.php'){
wp_enqueue_script( 'page-jquery', get_theme_file_uri( '/assets/page.js' ), array(), null );
}
}
}
add_action( 'wp_enqueue_scripts', 'wp_load_scripts' );
代码添加到主题 functions.php 文件生效。如有需要,你也可以按例子添加其它判断条件。
