主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情! |
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作 |
在开发WordPress主题的时候,可以直接在head标签中写下需要的js或者css,但是这种加载方式已经不提倡了。现在 WordPress 主题通过 function.php 加载 js 和 css 文件。
基本架构
//加载css和js
函数 wpdie_add_scripts() {
wp_enqueue_style('style', get_template_directory_uri() . '/style.css');
$jq = get_template_directory_uri() 。 '/js/jquery.min.js';
wp_deregister_script('jquery');
wp_register_script('jquery', $jq);
wp_enqueue_script('jquery');
//在文章页面加载prism.css
如果(is_single()){
wp_enqueue_style('prism', get_template_directory_uri() . '/css/prism.css');
}
//在底部加载js,注意true。在标题中留空
wp_register_script('aosjs', get_template_directory_uri() . '/js/aos.js', array('jquery'), '');
wp_enqueue_script('aosjs',false,array(),'',true);
wp_enqueue_style('fa', get_template_directory_uri() . '/css/font-awesome/font-awesome.css');
}
add_action('wp_enqueue_scripts', 'wpdie_add_scripts');
有两个常用的 add_action 钩子可以将脚本和 CSS 加载到 WordPress 中:
init:确保始终为您的网站标题(如果使用 home.php、index.php 或模板文件)以及其他“前端”帖子、页面和模板样式加载脚本和 CSS。
wp_enqueue_scripts:“正确”的钩子方法,可能并不总是有效,具体取决于您的 WordPress 设置。
注意事项
这样加载css和js的时候,你会发现你使用的wordpress程序的版本号暴露在每个文件后面。平心而论,为了安全起见,这东西需要被屏蔽。怎么看:
函数 wpdie_remove_cssjs_ver( $src ) {
if( strpos( $src, 'ver=' ) )
$src = remove_query_arg('ver', $src);
返回 $src;
}
add_filter('style_loader_src', 'wpdie_remove_cssjs_ver', 999);
add_filter('script_loader_src', 'wpdie_remove_cssjs_ver', 999);
通过上面的代码,不仅css和js都被正确加载了。
另外,你还需要注意,这个方法需要你在head标签中包含和 这种功能还可以。
这几篇文章你可能也喜欢:
- 如何清除WordPress缓存?(WordPress消耗内存)
- 如果将图像上传到 WordPress 网站时出现 HTTP 错误,我该怎么办?
- 如何解决WordPress媒体库图片加载错误(WordPress媒体库文件路径)
- 如果您的WordPress站点无法更新怎么办(如何设置WordPress站点地址)
- 如何防止独立WordPress外贸网站被搜索引擎索引
本文由主机参考刊发,转载请注明:WordPress网站怎么快速简单的通过function.php来加载js文件和css文件,WordPress优化加速 https://zhujicankao.com/66856.html
评论前必须登录!
注册