引入 CSS 和 Javascript

当你在创建主题的时候,你可能会创建额外的css或js文件。需要牢记的是WordPress网站不仅会激活你的主题,还会使用许多不同的插件。主题和插件使用标准的WordPress函数来加载脚本和样式是非常重要的,以使它们能够协调的工作。这样能确保站点保持高效并且不会出现兼容性问题。

为WordPress添加脚本和样式是相当容易的。基本上,你只需要创建一个将脚本和样式加入载入队列的函数即可。当把脚本或样式加入队列的时候,WordPress会创建一个句柄和路径来寻找你的文件以及它所有的可能的依赖项(如 jQuery),然后使用钩子来插入你的脚本和样式。

将脚本和样式加入队列

向主题中添加脚本和样式的正确方法是把它们放入functions.php文件中。必须在所有的主题中引入style.css文件,但为你可能会添加一些其他的文件来扩展主题的功能。

WordPress在软件包中添加了许多脚本文件,包括非常常用的库比如jQuery。在添加你自己的脚本前,请查看是否可以使用已经包含的库。

基础的用法如下:

使用 wp_enqueue_script() 或者 wp_enqueue_style() 来把脚本或者样式加入队列。

样式

css样式用来定制主题的外观。样式也是存储主题信息的文件。基于此,必须在所有主题中引入style.css文件。

应该使用wp_enqueue_style来加载样式文件,而不是直接在header.php文件中引入。为了加载主样式文件,你可以在functions.php文件中加入。

加载style.css

这个操作会寻找名称为'"style"的样式文件并载入它。

这个函数的基本用法如下:

你可以传入以下参数:

  • $handle 是样式的名称。
  • $src 是文件的位置。剩下的参数都是可选的。
  • $deps 是当前样式文件所依赖的文件。如果设置了这项,当前样式文件会在依赖项加载以后再进行加载。
  • $ver 是样式文件的版本号。
  • $media 可以指定在何种媒体设备中加载,例如“all”,“screen”,“print”或者“handheld”。

因此,如果你想加载位于主题根目录下“css”文件夹内的“slider.css”这个文件,你可以通过如下方式来使用这个函数:

脚本

加载额外的脚本文件需要使用wp_enqueue_script。这样的话可以确保正确的加载和缓存脚本文件,并且可以使用条件标签来指定需要加载脚本的页面。

wp_enqueue_script语法和wp_enqueue_style相似。

加载脚本文件:

  • $handle 是脚本的名称。
  • $src 是文件的位置。
  • $deps 是当前脚本的一个依赖项数组,例如 jQuery。
  • $ver 是脚本文件的版本号。
  • $in_footer 是一个布尔值,允许你设置将将脚本放入html页脚而不是页头,以此来加快DOM的加载速度。

加载脚本的使用方法如下所示:

评论脚本

WordPress评论有很多开箱即用的功能,包括串联评论和增强的评论表单。为了让评论能够正常的工作,它们需要一些辅助脚本。然而,由于在脚本中定义了一些选项,因此需要在每个使用评论的主题中引入评论脚本。

引入评论脚本的正确方式是使用条件标签来检查条是否需要引入,这样就不会加载没有必要的脚本。例如,你可以使用is_singular确保只在单篇文章或页面中加载它,并且确保在“允许回复评论”被用户选中的情况下加载它。因此,你可以像下面这样来使用:

如果用户开启了评论,并且是在单篇文章或页面,评论脚本会被加载进来。否则,不会加载它。

在函数中组合载入脚本

将所有的脚本和样式放入一个单一的函数中是最佳实践,然后通过wp_enqueue_scripts这个动作来加载它们。这个函数和动作应该在初始化之后进行设置。

本文翻译自Including CSS & JavaScript

 

相关文章

发表评论