欢迎阅读关于如何在主题中包含CSS、JavaScript、图像和字体的指南。
通过本课程，您将：
- 了解如何排队加载样式表和脚本，
- 通过样式表或内联样式在主题中包含CSS，
- 通过外部文件或内联JavaScript在主题中包含JavaScript，
- 在主题中包含图像，以及
- 在主题中包含字体。
排队加载样式和脚本
如何在主题中排队加载样式和脚本？
这与为WordPress插件开发排队加载CSS或JavaScript非常相似。请务必查看WordPress开发者初级学习路径中的排队加载CSS或JavaScript课程。
本质上，为了在主题中排队加载或包含CSS或JavaScript文件，您需要使用WP enqueue scripts动作钩子。
包含CSS
让我们从在主题中包含CSS开始，无论是使用样式表还是内联样式。以Twenty Twenty-Two主题为例，在functions.php文件中，我们看到他们使用了WP enqueue scripts动作钩子来排队加载样式。
具体来说，这里使用了get_template_directory_uri函数，该函数与style.css文件拼接后，将使CSS样式在前端可用。如果您需要添加内联CSS，WordPress提供了wp_add_inline_style函数。
包含JavaScript
现在让我们看看如何通过外部文件或内联JavaScript在主题中包含JavaScript。这里以Twenty Twenty-One主题为例。
我们看到有几个JavaScript文件被排队加载。使用了WP enqueue scripts动作钩子，这些文件位于assets/js文件夹中。与添加内联CSS类似，您可以使用wp_add_inline_script函数添加内联JavaScript。
包含图像
如何在主题中包含图像？
我们假设您不是在构建一个块主题。以下是一个示例代码，您可以选择使用。将图像文件放在assets/img文件夹中，并使用get_parent_theme_file_uri函数获取主题的URL。
<img src="<?php echo esc_url( get_parent_theme_file_uri( 'assets/img/example.webp' ) ); ?>" alt="" />包含字体
现在让我们看看如何使用theme.json在主题中包含字体。
您可以通过theme.json在主题中包含字体。以下是Twenty Twenty-Two主题中的一个示例。您可以看到字体文件已添加到assets/fonts文件夹中。然后在theme.json的settings.typography.fontFamilies部分，我们看到在fontFace下如何引用文件以生成可在样式中使用的变量。
变量的形式如下，您只需将$slug替换为在settings中设置的slug。
var( –wp–preset–font-family–{$slug} )
这是一个使用Source Serif Pro字体作为文章标题的示例。
var( –wp–preset–font-family–source-serif-pro )
下一步
如果您想查看本课程中提到的函数，请参阅WordPress.org上提供的参考文档。您还可以查看主题手册，了解更多关于如何包含资源的信息。