使用wp_enqueue_script() 函数加载JS和css

WordPress 3.3以后使用了新的wp_enqueue_script()函数,可以用来注册JS和CSS,避免了修改代码带来的安全兼容方面的问题,还可以方便主题升级。建议使用此方法加载JS和CSS代替修改在页面head部引用。
打开主题 functions.php添加以下内容:

/**
 * 示例:注册my.css custom-1.0.js和 my.js 到网站
 * 如果是外部地址可以直接填写URL或者本地的绝对地址
 * 如果需要引用的文件在其他主题文件里使用此函数 get_template_directory_uri()
 * 如果需要引用的文件就在本主题里使用此函数 get_stylesheet_directory_uri()
 * 如有旧版,可用 wp_deregister_script() 先注销
 */
function add_custom_script() {
    wp_register_style('myCSS', get_stylesheet_directory_uri() . 'my.css' );
    wp_register_script( 'my-custom-js', 'http://example.com/custom-1.0.js', array(), '1.0', true );
    wp_register_script('myJS', get_stylesheet_directory_uri() . 'my.js' );
    // 注册上面设置的CSS和JS名称
    wp_enqueue_style('myCSS');
    wp_enqueue_script('my-custom-js');
    wp_enqueue_script('myJS');
}
add_action('wp_enqueue_scripts', 'add_custom_script'); //使用钩子注册

如果服务器开启了缓存,经常会修改了主题css后上传却没有更新效果,如果修改不频繁可以通过版本号来解决,如果修改频繁可以通过修改时间来添加版本,使用filemtime函数,这个函数将输出文件的最后更新时间。
将下面两行代码加入header.php 文件中:

<?php $css_file = 'https://www.yourdomain.com/wp-content/themes/themename/style.css'; ?>
<link rel="stylesheet" href="<?php echo $css_file; ?>?ver=<?php echo filemtime($css_file); ?>" />

还可以利用 php 钩子,用 wp_enqueue_style() 函数把我们自定义的函数勾上。
将下面的代码添加到主题的functions.php文件下,即可为styl.css文件自动添加时间版本号:

// 为 css 文件添加时间戳版本号
add_action( 'wp_enqueue_scripts', 'liao_show_realtime_css' );
function liao_show_realtime_css(){
    $css_file = get_stylesheet_directory() . '/style.css';//注意检查是否跟你主题的CSS文件路径一致
    wp_enqueue_style( 'css-file', get_stylesheet_directory_uri().'/style.css', NULL, filemtime($css_file) );
}

js 文件的话同理:

//为js文件添加时间戳版本号
add_action( 'wp_enqueue_scripts', 'liao_show_realtime_js' );
function liao_show_realtime_js(){
    $js_file = get_stylesheet_directory() . '/js/main.js';////注意检查是否跟你主题的JS文件路径一致
    wp_enqueue_script( 'js-file', get_stylesheet_directory_uri().'/js/main.js', NULL, filemtime($js_file) );
}

注意CSS文件使用WP_enqueue_style函数,JS 使用WP_enqueue_script函数。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注