将 Tailwind CSS 集成到 WordPress 主题：详细教程-html教程-PHP中文网

将 Tailwind CSS 集成到 WordPress 主题：详细教程

心靈之曲

发布： 2025-10-25 11:22:19

原创

494人浏览过

将 tailwind css 集成到 wordpress 主题：详细教程

本文旨在为 WordPress 新手提供将现有 HTML 和 Tailwind CSS 主题集成到 WordPress 的详细指南。我们将探讨几种方法，包括使用 `functions.php` 文件、Code Snippet 插件以及创建子主题，并提供相应的代码示例和注意事项，帮助您顺利完成集成过程。

前期准备

在开始之前，请确保您已具备以下条件：

一个现有的 HTML 和 Tailwind CSS 主题: 确保您的主题结构良好，并且 Tailwind CSS 已经正确配置。
一个 WordPress 安装: 您需要一个可以访问的 WordPress 站点。
基本的 HTML 和 CSS 知识: 虽然本教程会尽量详细，但一些基础知识是必要的。
了解 WordPress 主题结构: 了解 WordPress 主题的基本文件，如 index.php, style.css, functions.php 等。

方法一：使用 functions.php 文件

这是最直接的方法之一，尤其适合于快速添加一些自定义 CSS 或 HTML。

定位 functions.php 文件: 找到您当前使用的主题的 functions.php 文件。它通常位于 wp-content/themes/[您的主题名称]/functions.php。

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

添加代码片段: 将以下代码片段添加到 functions.php 文件中：

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

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

登录后复制

编写 CSS 代码: 将您的 Tailwind CSS 代码放入 <style> 标签内。例如：
```
<?php
add_action( 'wp_head', function () { ?>
<style>
    .text-blue-500 {
        color: #3b82f6;
    }
</style>


<?php } );
?>
```
登录后复制
这段代码会将所有应用了 text-blue-500 类的文本颜色设置为蓝色。

注意事项:

直接修改主题的 functions.php 文件可能会在主题更新时丢失您的更改。因此，建议使用子主题。
这种方法适合于小规模的 CSS 修改和 HTML 添加。对于复杂的 Tailwind CSS 项目，建议使用其他方法。

方法二：使用 Code Snippet 插件

Code Snippet 插件允许您在不直接修改主题文件的情况下添加代码片段。这是一个更安全和灵活的方法。

安装 Code Snippet 插件: 在 WordPress 后台，搜索并安装 "Code Snippets" 插件。
添加新的 Snippet: 安装完成后，在 WordPress 后台找到 "Snippets" 菜单，并点击 "Add New"。

编写代码片段: 在代码编辑器中，粘贴以下代码，并将您的 Tailwind CSS 代码添加到 <style> 标签内：

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

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

登录后复制

保存并激活 Snippet: 为您的 Snippet 命名，然后保存并激活它。

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

22

查看详情

注意事项:

使用 Code Snippet 插件可以避免直接修改主题文件，从而降低出错的风险。
您可以通过插件管理您的代码片段，方便启用或禁用。

方法三：创建子主题

创建子主题是集成 Tailwind CSS 的最佳实践，因为它允许您在不修改父主题的情况下进行自定义。

创建子主题文件夹: 在 wp-content/themes/ 目录下创建一个新的文件夹，命名为 [您的主题名称]-child。例如，如果您的父主题是 "twentytwentythree"，则子主题文件夹应命名为 "twentytwentythree-child"。

创建 style.css 文件: 在子主题文件夹中创建一个 style.css 文件，并添加以下内容：

/*
 Theme Name:   Twenty Twenty-Three Child
 Theme URI:    https://example.com/twenty-twenty-three-child/
 Description:  Twenty Twenty-Three Child Theme
 Author:       Your Name
 Author URI:   https://example.com
 Template:     twentytwentythree
 Version:      1.0.0
*/

/*  Add custom CSS below this line: */

登录后复制

重要: Template: 行必须与您的父主题的文件夹名称匹配。

创建 functions.php 文件: 在子主题文件夹中创建一个 functions.php 文件，并添加以下内容：

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>

登录后复制

这段代码将加载父主题的 style.css 文件。

激活子主题: 在 WordPress 后台，进入 "外观" -> "主题"，激活您的子主题。

添加 Tailwind CSS: 现在，您可以在子主题的 style.css 文件中添加您的 Tailwind CSS 代码。或者，您可以创建一个单独的 CSS 文件，并在 functions.php 文件中将其加载：

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'parent-style' )
    );
    wp_enqueue_style( 'tailwind-style', get_stylesheet_directory_uri() . '/tailwind.css', array( 'child-style') );
}
?>

登录后复制

确保在子主题文件夹中创建一个 tailwind.css 文件，并将您的 Tailwind CSS 代码放入其中。

注意事项:

创建子主题是最佳实践，因为它允许您在不修改父主题的情况下进行自定义，从而避免在主题更新时丢失更改。
确保 Template: 行与您的父主题的文件夹名称匹配。
您可以在子主题中覆盖父主题的模板文件，以实现更高级的自定义。

总结

将 Tailwind CSS 集成到 WordPress 主题有多种方法，您可以根据您的需求和技能水平选择合适的方法。直接修改 functions.php 文件和使用 Code Snippet 插件适合于小规模的 CSS 修改和 HTML 添加，而创建子主题是最佳实践，因为它允许您在不修改父主题的情况下进行自定义。无论您选择哪种方法，请务必备份您的文件，并仔细测试您的更改，以确保您的 WordPress 站点正常运行。记住，理解 WordPress 的主题结构是成功集成的关键。

以上就是将 Tailwind CSS 集成到 WordPress 主题：详细教程的详细内容，更多请关注php中文网其它相关文章！