包括 CSS 和 JavaScript

在创建主题时，您可能希望创建额外的样式表或 JavaScript 文件。但是，请记住，WordPress 网站不仅会激活您的主题，还会使用许多不同的插件。为了让一切和谐地工作，重要的是主题和插件使用标准的 WordPress 方法加载脚本和样式表。这将确保站点保持高效并且不存在不兼容问题。

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

排队脚本和样式

向主题添加脚本和样式的正确方法是将它们排入 functions.php 文件队列。该 style.css 文件在所有主题中都是必需的，但可能需要添加其他文件以扩展主题的功能。

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

基础知识是：

wp_enqueue_script()使用、 wp_enqueue_style()或对脚本或样式进行排队 wp_enqueue_block_style。

样式表

您的 CSS 样式表用于自定义主题的呈现。样式表也是存储主题信息的文件。因此， 每个主题都需要style.css该文件。

而不是将样式表加载到您的 header.php 文件中，您应该使用 wp_enqueue_style. 为了加载您的主样式表，您可以将其排入队列 functions.php

排队 style.css：

wp_enqueue_style( 'style', get_stylesheet_uri() );

这将查找名为“style”的样式表并加载它。

入队样式的基本函数是：

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');

包括用于块样式的 CSS

除了wp_enqueue_style()，您还可以使用wp_enqueue_block_style()来排队块的样式。wp_enqueue_block_style() 需要 WordPress 5.9 或更高版本。

创建块主题的一个关键部分是性能。使用，wp_enqueue_block_style()主题仅在页面上使用块时加载所选块的 CSS。

附加样式加载在编辑器和前面，在 WordPress 和 Gutenberg 插件提供的块样式之后。您可以使用此方法添加您无法通过添加的块样式theme.json。例如，媒体查询。

此代码示例更改最新评论块中日期的大小和文本颜色。因为这是一个time嵌套在其他 HTML 元素中的 HTML 元素，所以不能使用theme.json.

首先，使用块的名称创建一个新的 CSS 文件：latest-comments.css。
放置文件的位置取决于您组织主题文件的方式。在示例中，文件位于文件夹中assets/CSS/blocks。

时间元素的 CSS 类是wp-block-latest-comments__comment-date. 前缀和块名称后面是部分，由两个下划线分隔。

您可以在编码指南中阅读有关块编辑器命名约定的更多信息。

文本颜色和字体大小添加了从以下生成的 CSS 自定义属性theme.json：

.wp-block-latest-comments__comment-date {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
}

接下来，将块样式放入主题设置函数中。

块名称放置在一个数组中以加载多个块样式。
循环foreach遍历数组中的每个块并创建句柄、src（源）和路径参数。
wp_enqueue_block_style()然后使用块名称和参数将文件排入队列：
wp_enqueue_block_style( "prefix/blockname", $args );

在代码示例中，前缀是“core”，因为样式是针对核心块的。当您从插件中设置块样式时，您需要调整前缀。

function myfirsttheme_setup() {
	/*
	 * Load additional block styles.
	 */
	$styled_blocks = ['latest-comments'];
	foreach ( $styled_blocks as $block_name ) {
		$args = array(
			'handle' => "myfirsttheme-$block_name",
			'src'    => get_theme_file_uri( "assets/css/blocks/$block_name.css" ),
			$args['path'] = get_theme_file_path( "assets/css/blocks/$block_name.css" ),
		);
		wp_enqueue_block_style( "core/$block_name", $args );
	}
}
add_action( 'after_setup_theme', 'myfirsttheme_setup' );

脚本

主题所需的任何其他 JavaScript 文件都应使用 wp_enqueue_script. 这确保了正确的加载和缓存，并允许使用条件标记来定位特定页面。这些是 可选的。

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 文档的页脚而不是页眉中，这样就不会延迟 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' );
}

如果用户启用了评论，并且我们在帖子页面上，那么将加载评论回复脚本。否则，它不会。

组合入队函数

最好将所有排队的脚本和样式组合到一个函数中，然后使用 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 本身使用的脚本。其中一些列在此参考页上：

wp_enqueue_script()

**该列表远未完成。**您可以在wp-includes/script-loader.php 中找到包含文件的完整列表。

变更日志：

2023-02-24 更新：添加了有关wp_enqueue_block_style()的信息。