专业WORDPRESS主题设计制作

wp_enqueue_scripts钩子(wordpress钩子函数大全)

发布于: 2022-08-19

wp_enqueue_scripts钩子主要用来前台调用css和js文件,其中需要了解下这两个函数:wp_enqueue_style和wp_enqueue_script

第一种方法

function tone_front_cssscript(){
    //全局加载样式
    wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css' );
    //全局加载js脚本
    wp_enqueue_script( 'jquery-min', get_template_directory_uri() .'/js/jquery.min.js' );
}
add_action( 'wp_enqueue_scripts', 'tone_front_cssscript' );

第二种方法,先注册css或js,再进行调用

function tone_admin_cssscript(){
    wp_register_style('custom_wp_admin_css', get_template_directory_uri() . '/style.css');
    wp_enqueue_style( 'custom_wp_admin_css' );

    wp_register_style('custom_wp_admin_script', get_template_directory_uri() . '/js.css');
    wp_enqueue_script( 'custom_wp_admin_script' );
}
add_action( 'admin_enqueue_scripts', 'tone_admin_cssscript' );

使用 is_single() 只在文章加载脚本或CSS

id为文章的ID就可以让脚本和css只加载到那篇文章。当然,如果直接使用 is_single() (不填ID),就会在所有文章加载脚本和CSS。  
function myScripts() {  
    if ( is_single(id) ) { 
        wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css' );
        wp_enqueue_script( 'jquery-min', get_template_directory_uri() .'/js/jquery.min.js' );
    }  
}  
add_action( 'wp_enqueue_scripts', 'myScripts' );

使用 is_page() 只在页面加载脚本或CSS

wp_enqueue_scripts钩子
id为页面的ID就可以让脚本和css只加载到那个页面。当然,如果直接使用 is_page() (不填ID),就会在所有页面加载脚本和CSS。
function myScripts() {  
    if ( is_page(id) ) { 
        wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css' );
        wp_enqueue_script( 'jquery-min', get_template_directory_uri() .'/js/jquery.min.js' );
    }  
}
add_action( 'wp_enqueue_scripts', 'myScripts' );
WP技术资料 wordpress模板制作、wordpress主题开发相关知识常见问题总结
MORE
服务电话:
0533-2765967

微信 13280692153