WordPress主题开发手册：包含 CSS 和 JavaScript 文件

创建主题时，您可能需要创建其他CSS样式表或 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' );

WordPress包含的默认脚本

默认情况下，WordPress 包含了 Web 开发人员常用的许多流行脚本，以及WordPress 本身使用的脚本。

为了能保证内容更新的及时性，这部分不再翻译，有需要的朋友可以到官方主题开发手册的相关章节中了解。

这篇文章对您有用吗？是 1 否 2

{{userData.name}}已认证