WordPress正确引入JS和CSS文件方法

来源: 老季博客
日期: 2019-3-16
作者: 腾讯云/服务器VPS推荐评测/Vultr
阅读数: 182

在开始使用WordPress开发你的网站建设项目之前,你需要知道如何在WordPress引入JS和CSS文件,在WordPress中引入这两种文件的方式与平常网站中引入的方式有所不同,让我们来一起看看。

引入.js文件

在WordPress引入JS和CSS文件之前,需要将这些文件通过WordPress的API进行注册,从而声明它们的存在,然后在通过调用函数将它们引入到对应的页面中,注册两种文件的API函数 很简单,使用起来也很方便,我们以注册Bootstrap的JS以及CSS文件为例:

function jpost_scripts() {
    wp_register_script('wp-jpost', plugins_url('wp-jpost.js', __FILE__), array('jquery'),'0.1', true);
    wp_enqueue_script('wp-jpost');
}

add_action( 'init', 'jpost_scripts' );  

以上函数是再插件中为JS文件进行注册,让我们来看看,wp_register_script函数这个API对应的参数内容是什么意思。
第一个参数’wp-jpost’,可以当作是该注册脚本的名称,名称必须唯一,在之后加载的时候会用到该名称。
第二个参数就是该文件的路径了,我们采用插件页的目录来引用。
第三个参数是指在该脚本加载之前需要预加载的包,例如我们现在需要依赖jquery采能使用。
第四个参数是指该脚本的版本号, 通过引入版本号能够更新客户端缓存,很有用。
最后一个参数是指是否将该脚本引入到页面底部(</body>标签之前),这样做有利于SEO搜索引擎优化原则。

引入.css文件

wp_register_style('bootstrap', get_template_directory_uri() . '/bootstrap/bootstrap.css', '', '3.0.1');

与JS的注册函数相比较,它们的功能解释都是相同的,除了最后一个变量不是将该脚本在页脚加载。

对注册好的JS和CSS文件进行引入

在通过之前的注册流程之后,我们就可以开始在主题中引入对应的文件了,引用方式比注册要简单得多,例如我们要引入上面的bootstrap.js,那么就按照以下进行编码:wp_enqueue_script('bootstrap');如果要引入bootstrap.css,那么就按照以下进行编码:wp_enqueue_style('bootstrap');需要说明的是,JS和CSS的名称一样是没关系的,同样可以正常加载。

写在文章最后

采用WordPress的方式加载JS和CSS文件好处有很多,除了一劳永逸之外,还能够在不同功能页面引入不同文件,从而更有利于网站优化。

链接到文章: https://jiloc.com/44838.html

6 replies on “WordPress正确引入JS和CSS文件方法”

工作说道:

function jpost_scripts()放在wordpress的哪个文件中?

放在主题中的functions.php文件中

值得入手说道:

我想引入放在七牛存储的css和js,应该怎么弄呢

wp_register_style(‘bootstrap’, ‘这里是引入地址’, ”, ‘3.0.1’);

莫问说道:

正好需要,谢谢

geoer说道:

谢谢,写得很清楚

发表回复

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