如何为使用ACF的WordPress特定页面添加自定义CSS类

你之前写的代码没有加页面判断逻辑，会把sortiment类加到全站所有页面的body上，完全达不到定向匹配的效果。如果加完代码连body上的类都看不到，基本是主题没正确调用WP自带的body类输出函数。

• 先检查主题模板的body标签写法
  打开当前启用主题/子主题的header.php文件，找到<body开头的标签，必须写成<body <?php body_class(); ?>>的格式，如果是硬编码写死的<body>标签，先把<?php body_class(); ?>补到尖括号里，否则所有给body加类的过滤代码都不会生效。
• 加带判断逻辑的body类过滤代码
  把下面的代码放到当前启用主题/子主题的functions.php文件最底部，不要嵌到其他函数的代码块里：

function custom_target_page_body_class( $classes ) {
    // 把123替换成你目标页面的ID，后台编辑目标页面时，浏览器地址栏post=后面的数字就是页面ID
    // 如果要按页面别名判断，把123换成页面别名字符串就行，比如is_page('sortiment')
    if ( is_page(123) ) {
        $classes[] = 'sortiment-page';
    }

    // 如果你要加类的是自定义文章归档页，就把上面的判断换成对应条件，比如is_post_type_archive('product')就是产品post type的归档页
    return $classes;
}
add_filter( 'body_class', 'custom_target_page_body_class' );

• 验证类是否生效
  保存代码后清空站点缓存、浏览器缓存，打开目标页面按F12打开开发者工具，选中body标签确认已经出现sortiment-page类即可。

确认专属类加上之后，就可以写只作用于目标页面row元素的样式，不会影响其他页面的同名row类：

body.sortiment-page .row {
    /* 在这里写你需要的自定义样式即可 */
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px;
}

• 代码放错位置：要放在当前启用的主题/子主题的functions.php里，不要放到没启用的主题文件中
• 判断条件不匹配：单页用is_page()，文章详情用is_single()，归档页用对应的归档判断函数，写错条件永远不会触发加类逻辑
• 缓存问题：装了页面缓存插件、开了CDN缓存的话，改完代码一定要全量清缓存再刷新看效果

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