WordPress 在文章页面加载指定 JS & CSS

Eric 杂记 806 次浏览 评论已关闭

对于某些特定功能 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 文件生效。如有需要,你也可以按例子添加其它判断条件。