WordPress使用wp_enqueue_scripts钩子引用css ,js 文件,去除链接后面所带的版本号的方法

最近使用wp_enqueue_scripts引用css,js等文件的时候,发现在引用的链接后面自动添加了版本号,有些加的是wordpress的版本,有的加的是其它版本号,感觉比较乱,所以今天鸿硕就来研究一下,去除这些版本号。
自动添加的版本号如下所示:

http://www.abc.com/aaa/bbb/ccc/style.css?ver=5.5.5

如果传统引用方法,直接在模板head部分引用js,css等文件则不会出现这个问题。但是相较而言,鸿硕感觉使用wp_enqueue_scripts这个钩子来引用css,js文件安全性更好,因此选择使用wp_enqueue_scripts这个钩子来引用js,css文件。

具体使用方法,一般由wp_enqueue_script()和wp_enqueue_style()这两个函数配合wp_enqueue_scripts来使用,由于这两个函数的使用方法差不多(仅仅是最后一个参数有些区别,wp_enqueue_script()最后一个参数是决定引用的js文件是放在</head>之前还是</body>之前,而wp_enqueue_style()最后一个参数是$media是指CSS的媒体类型,可留空,默认为all)。

下面就以wp_enqueue_script()这个函数为例来进行介绍:

wp_enqueue_script( string $handle , string $src = '' , string[] $deps = array() , string|bool|null $ver = false , bool $in_footer = false )
实用结构:
<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

参数:
$handle:(必需)调用的脚本名称,用于区别其它js,因此不能和其它js文件命名相同,如同名将无法显示调用的代码。默认值:None
$src:(可选)WordPress网站根目录下的JS路径。如:"/wp-includes/js/xxx.js"。默认值:None
$deps:(可选)依赖关系数组;加载该脚本前需要加载的其它脚本。默认值:array()
$ver:(可选)指明脚本版本号的字符串(若存在版本号)。默认为false。如果填写版本号,则显示您所填写的版本号,如果不想显示,则设置为null。
$in_footer:(可选)默认值:false。如为true排在</body>前面,false排在</head>前面。但必须有wp_footer()钩子。

调用的方法:

只在前台调用:
<?php
function tone_front_script() {
wp_enqueue_script( 'boot', get_template_directory_uri() . '/js/bootstrap.js');
}
add_action( 'wp_enqueue_scripts', 'tone_front_script' );
?>

只在后台调用:
<?php
function tone_admin_script() {
wp_enqueue_script('boot', get_template_directory_uri() . '/js/bootstrap.js');
}
add_action('admin_enqueue_scripts', 'tone_admin_script');
?>

另外一种方法,使用wp_head钩子和admin_head钩子

为WordPress后台添加css和js代码
<?php
function admin_jscss() {
wp_enqueue_style( 'admin-myjscss', get_template_directory_uri() . '/css/bootstrap.css' );
wp_enqueue_script('admin-myjscss', get_template_directory_uri() . '/js/bootstrap.js' );
wp_enqueue_script( 'admin-myjscss', get_template_directory_uri() . '/js/jquery.min.js' );
}
add_action('admin_head', 'admin_jscss');
?>

如果在使用时把参数$ver写成'null',则会在前端代码中显示为:

http://www.abc.com/aaa/bbb/ccc/style.css?ver=null

这个当然不是鸿硕想要实现的效果,鸿硕想要的效果是精简的,直接链接后面没有?ver=null这些版本号代码。
要实现这些效果,可以添加钩子实现,两种代码:

1,仅仅去除您使用wp_enqueue_scripts钩子引用的css,js文件的版本号。

function hs_remove_cssjs_ver($src)
{
    if (strpos($src, 'ver=' . get_bloginfo('version')))
        $src = remove_query_arg('ver', $src);
    return $src;
}
add_filter('style_loader_src', 'hs_remove_cssjs_ver', 999);
add_filter('script_loader_src', 'hs_remove_cssjs_ver', 999);
2,除了去除您使用wp_enqueue_scripts钩子引用的css,js文件,其它css,js文件的版本号也去除了,例如插件引用的文件。
function hs_remove_cssjs_ver_all($src)
{
    if (strpos($src, 'ver='))
        $src = remove_query_arg('ver', $src);
    return $src;
}
add_filter('style_loader_src', 'hs_remove_cssjs_ver_all', 999);
add_filter('script_loader_src', 'hs_remove_cssjs_ver_all', 999);

 

给TA打赏
共{{data.count}}人
人已打赏
wordpress教程

wordpress的两个调用文章分类和页面分类的函数get_categories()和get_pages()

2021-7-25 9:29:20

wordpress教程建站知识

wordpress标签云优化

2021-8-25 16:15:12

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索