VPS参考测评推荐
专注分享VPS主机优惠信息
衡天云优惠活动
华纳云优惠活动
荫云优惠活动

WordPress网站怎么快速简单的通过function.php来加载js文件和css文件,WordPress优化加速

主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

在开发WordPress主题的时候,可以直接在head标签中写下需要的js或者css,但是这种加载方式已经不提倡了。现在 WordPress 主题通过 function.php 加载 js 和 css 文件。

WordPress网站怎么快速简单的通过function.php来加载js文件和css文件,WordPress优化加速-主机参考

基本架构

//加载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网站怎么快速简单的通过function.php来加载js文件和css文件,WordPress优化加速 https://zhujicankao.com/66856.html

【腾讯云】领8888元采购礼包,抢爆款云服务器 每月 9元起,个人开发者加享折上折!
打赏
转载请注明原文链接:主机参考 » WordPress网站怎么快速简单的通过function.php来加载js文件和css文件,WordPress优化加速
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!