将 Tailwind CSS 集成到 WordPress 主题：一份实用指南-html教程-PHP中文网

将 Tailwind CSS 集成到 WordPress 主题：一份实用指南

花韻仙語

发布： 2025-10-26 10:53:21

原创

602人浏览过

将 tailwind css 集成到 wordpress 主题：一份实用指南

本文旨在为 WordPress 初学者提供一份详细的指南，帮助他们将现有的 HTML 和 Tailwind CSS 主题集成到 WordPress 中。我们将探讨几种不同的方法，包括直接修改 `functions.php` 文件、使用代码片段插件以及利用子主题的 `style.css` 文件。通过本文，您将能够有效地将 Tailwind CSS 的强大功能融入到您的 WordPress 网站中。

将 Tailwind CSS 集成到 WordPress 主题可能对初学者来说有些挑战，但通过正确的步骤和方法，可以顺利完成。以下是一些常用的方法，以及相关的注意事项：

方法一：直接修改 functions.php 文件

这是最直接的方法之一，允许您将 CSS 和 HTML 代码直接添加到 WordPress 的 <head> 部分。

步骤：

立即学习“前端免费学习笔记（深入）”；

定位 functions.php 文件： 找到您当前使用的主题的 functions.php 文件。通常位于 wp-content/themes/[您的主题名称]/functions.php。请注意，直接修改主题文件存在风险，升级主题可能会覆盖您的修改。强烈建议使用子主题。
添加代码片段： 将以下代码片段添加到 functions.php 文件中：

<?php
add_action( 'wp_head', function () { ?>
<style>
    /* 在这里编写您的 CSS 代码 */
    /* 例如： .my-class { color: blue; } */
</style>

<!-- 或者在这里编写您的 HTML 代码 -->
<!-- 例如： <div class="my-class">Hello World!</div> -->
<?php } );

登录后复制

添加您的 Tailwind CSS 代码： 将您的 Tailwind CSS 代码添加到 <style> 标签中。您可以直接粘贴 Tailwind CSS 的代码，或者链接到您的 CSS 文件（如果已经编译好的话）。
- 直接粘贴： 将 Tailwind CSS 的输出粘贴到 <style> 标签中。这适用于小型项目或快速原型设计。
- 链接到 CSS 文件： 如果您已经使用 Tailwind CLI 或其他工具编译了 CSS 文件，可以使用 <link> 标签将其链接到您的 WordPress 网站。

<?php
add_action( 'wp_head', function () { ?>
    <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/tailwind.css">
<?php } );

登录后复制

确保将 `<?php echo get_stylesheet_directory_uri(); ?>/css/tailwind.css` 替换为您的 CSS 文件的实际路径。

登录后复制

注意事项：

性能影响： 直接在 functions.php 中添加大量 CSS 代码可能会影响网站的性能。建议对 CSS 代码进行压缩和优化。
代码维护： 大量的 CSS 代码嵌入在 functions.php 中会使代码难以维护。
子主题： 强烈建议使用子主题来修改 functions.php 文件，以避免在主题更新时丢失您的修改。

方法二：使用 "Code Snippets" 插件

"Code Snippets" 插件允许您安全地添加 PHP 代码片段到您的 WordPress 网站，而无需直接修改主题文件。

步骤：

立即学习“前端免费学习笔记（深入）”；

安装并激活插件： 在 WordPress 后台搜索并安装 "Code Snippets" 插件，然后激活它。
添加新的代码片段： 在 WordPress 后台的 "Snippets" 菜单中，点击 "Add New"。
配置代码片段：

集简云
软件集成平台，快速建立企业自动化与智能化

22

查看详情
- Title： 为您的代码片段指定一个描述性的标题，例如 "Tailwind CSS Integration"。
- Code： 将以下代码粘贴到代码编辑器中：

add_action( 'wp_head', function () { ?>
<style>
    /* 在这里编写您的 CSS 代码 */
</style>

<!-- 或者在这里编写您的 HTML 代码 -->
<?php } );

登录后复制

*   **Description：** 可选地添加代码片段的描述。
*   **Tags：** 可选地添加标签以方便组织和搜索。
*   **Run snippet everywhere：** 确保选中此选项，以便代码片段在整个网站上运行。

登录后复制

保存并激活代码片段： 点击 "Save Changes and Activate" 按钮。

注意事项：

"Code Snippets" 插件提供了一个更安全的方式来添加 PHP 代码，因为它允许您在不直接修改主题文件的情况下管理代码片段。
与直接修改 functions.php 文件类似，您仍然需要注意代码的性能影响。

方法三：使用子主题的 style.css 文件

如果您正在使用子主题，可以将您的自定义 CSS 代码添加到子主题的 style.css 文件中。

步骤：

立即学习“前端免费学习笔记（深入）”；

创建子主题（如果还没有）： 如果您还没有子主题，请创建一个。WordPress 官方文档提供了详细的子主题创建指南。
定位 style.css 文件： 找到您的子主题的 style.css 文件。通常位于 wp-content/themes/[您的子主题名称]/style.css。
添加 CSS 代码： 将您的 Tailwind CSS 代码添加到 style.css 文件中。

/*
Theme Name:   [您的子主题名称]
Template:     [父主题名称]
*/

/* 在这里编写您的 CSS 代码 */
.my-class {
    color: green;
}

登录后复制

链接 Tailwind CSS 文件 (如果已编译): 如果已经编译好 Tailwind CSS 文件，可以在 style.css 中使用 @import 导入。

/*
Theme Name:   [您的子主题名称]
Template:     [父主题名称]
*/

@import url("../[父主题名称]/style.css"); /* 导入父主题的样式 */
@import url("./css/tailwind.css"); /* 导入 Tailwind CSS 样式 */

/* 在这里编写您的 CSS 代码 */
.my-class {
    color: green;
}

登录后复制

确保将 ../[父主题名称]/style.css 替换为您的父主题 style.css 文件的实际路径，并将 ./css/tailwind.css 替换为您的 Tailwind CSS 文件的实际路径。

注意事项：