深入解析如何优化网页加载速度 – 最佳实践：优化 CSS 和 JavaScript 文件

创建主题时，我们可能需要创建其他样式表或 JavaScript 文件。但是，请记住，在 WordPress 站…--由S9社区整理

文本是《wordpress主题完整开发系列（共30篇）》专题的第 3 篇。阅读本文前，建议先阅读前面的文章：

创建主题时，我们可能需要创建其他样式表或 JavaScript 文件。但是，请记住，在 WordPress 站点中，同时激活的不只有你的主题，还会有许多其他插件。想要他们和谐地一起工作，主题和插件都需要使用标准的 WordPress 方法加载脚本和样式表，这可以确保网站保持高效运行且不存在兼容问题。

向 WordPress 添加脚本和样式是一个相当简单的过程。从本质上讲，我们将创建一个将所有脚本和样式排入队列的函数。在排队脚本或样式表时，WordPress 会创建一个句柄和路径来查找文件及其可能具有的任何依赖项（如 jQuery），然后我们使用一个将插入脚本和样式表插入队列的钩子来添加自定义 CSS 和 JS 文件。

插入脚本和样式

为主题添加脚本和样式的正确方法是将它们添加到 functions.php 文件中。style.css 是所有主题都需要的文件，除此之外，我们还可能需要添加其他文件以扩展主题的功能。

WordPress 包含许多 JavaScript 文件作为软件包的一部分，其中包括一些常用的库，如 jQuery。在添加自己的JavaScript之前，请检查您是否可以使用包含的库。

插入脚本和样式的基础是：

使用wp_enqueue_script()将 JS 文件插入队列
使用wp_enqueue_style() 将 CSS 文件插入队列。

CSS 样式表

我们的 CSS 样式表用于自定义主题的外观，样式表也是存储主题元信息的文件。因此， 每个主题都需要 style.css 文件。

我们应该 wp_enqueue_style 加载样式表，而不是直接把他们添加到 header.php文件中。加载主样式表时，我们可以在 functions.php 中将其插入队列。

插入 style.css 文件

wp_enqueue_style( 'style', get_stylesheet_uri() );

上面的代码将查找名为 “style.css” 的样式表并加载它。

样式排队函数的基本功能是：

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

我们可以包含以下参数：

$handle 样式表名称。

$src 样式文件所在的位置，其余参数是可选的。

$deps 指的是此样式表是否依赖于另一个样式表。如果设置了此项，则除非首先加载其依赖的样式表，否则不会加载此样式表。

$ver：版本号。

$media：可以指定要加载此样式表的媒体类型，例如 ‘all’, ‘screen’, ‘print’ 或 ‘handheld’。

因此，如果我们需要加载主题根目录中名为“CSS”的文件夹中的名为“slider.css”的样式表，可以使用如下代码：

wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css',false,'1.1','all');

JavaScript 脚本

加载 JavaScript 脚本时，我们应该使用 wp_enqueue_script 函数。这样做可以确保脚本能够按照正确的加载，并在浏览器中缓存合适的版本，除此之外，我们还可以使用条件函数在 WordPress 中按需就在脚本。

wp_enqueue_script使用类似的语法 wp_enqueue_style。该函数的基本使用方法如下：

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);

$handle：脚本的名称。

$src：脚本文件所在的位置。

$deps：依赖的脚本数组，例如 jQuery。

$ver：脚本的版本号。

$in_footer：是一个布尔数（true / false），它允许我们将脚本放在 HTML 文档的页脚中，而不是放在 <head> 中，这样它就不会延迟加载 DOM 树。

该脚本的真是工作代码如下：

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

评论回复脚本

WordPress 评论默认有很多功能，包括嵌套评论和增强的评论表单。为了使评论正常工作，我们需要加载一些 JavaScript。但是，由于需要在这个 JavaScript 脚本中定义一些选项，因此我们应将此脚本添加到使用评论的每个主题中。

包含评论回复脚本的正确方法是使用条件标签来检查是否存在某些条件，以便不会不必要地加载脚本。例如，我们需要 is_singular 让该脚本只在单页面中加载，并且只在用户 “启用嵌套注释” 时加载。所以，实际上加载评论脚本的代码看起来像下面这样：

if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
 wp_enqueue_script( 'comment-reply' );
}

如果用户启用了评论，并且我们在文章页面上，WordPress 将加载评论回复脚本，否则就不会加载。

合并排队函数

为了便于维护，最好将所有排队脚本和样式的操作合并到一个函数中，然后使用wp_enqueue_scripts函数来调用它们，如下所示：

function add_theme_scripts() {
  wp_enqueue_style( 'style', get_stylesheet_uri() );

  wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css', array(), '1.1', 'all');

  wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
      wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );