基于Twig的WordPress主题Flynt中，如何为<body>标签添加自定义类？

一、直接在_document.twig中实现的步骤 #

Flynt主题的_document.twig是渲染页面骨架的核心模板，你可以在这里直接获取页面信息并拼接自定义body类：

1. 打开主题目录下的templates/_document.twig文件，找到<body>标签所在位置。
2. 在标签上方添加Twig代码，根据当前页面类型生成自定义类名，并与原有body类合并：

{% set customBodyClasses = [] %}

{# 单页面/文章 #}
{% if is_singular() %}
  {% set postType = get_post_type() %}
  {% set customBodyClasses = customBodyClasses|merge(['type-' ~ postType]) %}
  {% set customBodyClasses = customBodyClasses|merge(['slug-' ~ post.post_name]) %}
{# 博客首页 #}
{% elseif is_home() %}
  {% set customBodyClasses = customBodyClasses|merge(['type-blog', 'slug-blog']) %}
{# 归档页（分类/标签/自定义文章类型归档） #}
{% elseif is_archive() %}
  {% if is_category() or is_tag() %}
    {% set term = get_queried_object() %}
    {% set customBodyClasses = customBodyClasses|merge(['type-taxonomy', 'slug-' ~ term.slug]) %}
  {% else %}
    {% set postType = get_post_type() %}
    {% set customBodyClasses = customBodyClasses|merge(['type-' ~ postType]) %}
  {% endif %}
{# 搜索页 #}
{% elseif is_search() %}
  {% set customBodyClasses = customBodyClasses|merge(['type-search']) %}
{# 404页 #}
{% elseif is_404() %}
  {% set customBodyClasses = customBodyClasses|merge(['type-404']) %}
{% endif %}

{# 合并原有body类与自定义类 #}
{% set finalBodyClasses = body_class(customBodyClasses|join(' ')) %}

3. 将原<body>标签修改为：

<body class="{{ finalBodyClasses }}">

二、关于最佳位置的讨论 #

不推荐直接在Twig中硬编码的原因 #

虽然在_document.twig中直接修改可以快速实现需求，但不符合Flynt组件化、可维护的设计思路，后续修改或扩展时需要直接修改核心模板，不利于代码管理。

更优方案：修复functions.php中的过滤器错误 #

你之前触发的致命错误，大概率是因为过滤器回调函数的定义时机不对（比如过滤器先于函数被注册），或者函数作用域问题。正确的实现方式如下：

在主题的functions.php中添加以下代码：

add_filter('body_class', 'flynt_add_custom_body_classes');

function flynt_add_custom_body_classes($classes) {
    // 单页面/文章
    if (is_singular()) {
        $post = get_post();
        $classes[] = 'type-' . get_post_type($post);
        $classes[] = 'slug-' . $post->post_name;
    }
    // 博客首页
    elseif (is_home()) {
        $classes[] = 'type-blog';
        $classes[] = 'slug-blog';
    }
    // 归档页
    elseif (is_archive()) {
        if (is_category() || is_tag()) {
            $term = get_queried_object();
            $classes[] = 'type-taxonomy';
            $classes[] = 'slug-' . $term->slug;
        } else {
            $classes[] = 'type-' . get_post_type();
        }
    }
    // 搜索页
    elseif (is_search()) {
        $classes[] = 'type-search';
    }
    // 404页
    elseif (is_404()) {
        $classes[] = 'type-404';
    }
    return $classes;
}

这段代码严格遵循WordPress的钩子机制，将自定义类与系统默认body类合并，既符合Flynt的架构设计，也便于后续维护扩展。

内容的提问来源于stack exchange，提问作者user5853892