WordPress正确加载css和js的方法详解

摘要:记得很早之前,主题里的js文件和css文件都直接写在header或footer文件里,但是现在很少看到了,说明都在进步,代码越来越规范化了,那么他们又是怎么加载到站点的呢?

在wordpress使用中css及js的引入是最常见的,不同的主题作者用的方法也不一样,然后我们一般情况下都是放到header.php或footer.php里,用绝对路径引用,然后今天给大家说的是比较高逼格的引入方式,直接写地fun函数内,通过php调用出来。

一、引入css文件

比如你的主题需要引入 wpbon.css 文件,该文件在你主题的css文件夹下,那么你只需要在主题的functions.php文件内插入以下代码:

function wpbon_add_styles() {
  wp_register_style('wp_stylesheet',get_stylesheet_directory().‘/css/wpbon.css’);
  wp_enqueue_style('wp_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpbon_add_styles' );  

二、引入js文件

根据上面,我们可以再举例,你的主题需要引入wpbon.js文件,该文件在你主题的js文件夹下,那么就加入以下代码:

function wpbon_add_scripts() {
  wp_register_script('wp_script', get_stylesheet_directory_uri().'/js/wpbon.js', array('jquery'),'2.0', true);
  wp_enqueue_script('wp_script');
}
add_action( 'wp_enqueue_scripts', 'wpbon_add_scripts' );

三、参数详解

上面文件都有5个参数,分别作用是:

  • $handle:资源标识符,供 wp_enqueue_script 调用。
  • $src:资源的位置。相对地址或者绝对地址或者使用 WordPress 内置的函数获取地址等。常用定位函数有 plugins_url、get_template_directory_uri 等。
  • $deps:依赖关系。如果引用的是 jQuery 插件,需要依赖 jQuery 组建,那么就需要填写上 jQuery。注意,以数组的形式传递。
  • $ver:资源版本,可选的。
  • $in_footer:是否放在底部。一般来说,JS 文件要放在页面的底部,就可以设置这个参数为 true,留空或者 false 会输出到顶部。
5
分享到:

评论0

请先

WPBON主题 —— 匠心之作,一款良心的好主题

关于我们 在线咨询
没有账号? 忘记密码?

社交账号快速登录

社交帐号登录后,请去用户中心修改邮箱

WordPress正确加载css和js的方法详解-海报

WPBON主题更新至V1.8

这是一条网站公告,可在后台开启或关闭,可自定义标题,内容,用户首次打开关闭后不再重复弹出,此处可使用html标签...

查看详情 WP帮·通知中心