分类： 包含资产

欢迎阅读本指南，了解如何在主题中包含 CSS、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/your-image.jpg' ) ); ?>" alt="">

包含字体

现在让我们看看如何使用 theme.json 在主题中包含字体。

您可以通过使用 theme.json 在主题中包含字体。以下是 Twenty Twenty-Two 主题中如何实现此操作的示例。您可以看到字体文件已添加到 assets/fonts 文件夹中。然后在 theme.json 中的 settings.typography.fontFamilies 下，我们看到在 fontFace 中如何引用该文件，以生成一个可在样式中使用的变量。

这就是该变量的样子，您只需将 slug 替换为您在设置中设置的那个即可。

var(--wp--preset--font-family--source-serif-pro)

这是一个在文章标题中使用 Source Serif Pro 字体的示例。

"styles": {
    "blocks": {
        "core/post-title": {
            "typography": {
                "fontFamily": "var(--wp--preset--font-family--source-serif-pro)"
            }
        }
    }
}

后续步骤

如果您想查看本课程中提到的函数，请查看 WordPress.org 上提供的参考文档。您还可以查看主题手册，了解更多关于如何包含资源的信息。