WordPress中如何通过jQuery为h1-h4标题添加data-splitting属性

• data-splitting 属于HTML标准的自定义数据属性（data-*属性族），你的判断完全正确：本质就是给h1~h4标签添加该自定义属性，最终标签形态为<h1 data-splitting>、<h2 data-splitting>这类，供前端动画脚本识别需要拆分渲染动效的元素。
• 硬编码修改绝对不要改动WordPress核心内置代码，所有修改都在当前启用的主题/子主题范围内完成，修改核心代码会在下次WordPress版本更新时被直接覆盖。

1. 主题模板内的固定标题（比如文章页大标题、侧边栏模块标题）：
   进入WordPress后台「外观」-「主题文件编辑器」，找到对应模板文件（常见为single.php、page.php、template-parts/content.php、sidebar.php），找到输出标题的代码，默认一般为the_title( '<h1 class="entry-title">', '</h1>' );这类格式，直接在开标签内追加data-splitting即可，修改后示例：the_title( '<h1 class="entry-title" data-splitting>', '</h1>' );
2. 文章/页面正文内用户编辑添加的h1~h4标题：
   不需要逐个修改文章内容，直接在当前主题（推荐子主题）的functions.php文件末尾加入以下代码，会自动给正文输出的h1~h4标签追加目标属性：

// 自动给正文内容内的h1-h4标签添加data-splitting属性
add_filter( 'the_content', function( $content ) {
    if ( is_admin() ) return $content; // 后台编辑区域不生效
    // 匹配h1-h4开标签，追加data-splitting属性，不影响原有class/id等属性
    $content = preg_replace( '/<(h[1-4])([^>]*)>/i', '<$1$2 data-splitting>', $content );
    return $content;
}, 20 );

保存文件后清空网站缓存（缓存插件、CDN缓存），刷新页面即可看到所有标题已带上目标属性。

你之前的代码不生效有三个核心错误：

• 语法错误：$('document')写法错误，document是JS内置顶层对象，不需要加引号，加引号后会变成查找页面中<document>标签的选择器，永远匹配不到元素。
• 依赖缺失：用wp_enqueue_script加载自定义脚本时没有声明jQuery依赖，会导致脚本先于jQuery加载，$对象未定义直接报错。
• 时序问题：脚本放在head区域执行时，页面DOM还未渲染完成，此时无法选中后面输出的h1~h4标签。

可直接复用的修复代码 #

不需要单独创建外部JS文件，直接把以下代码加入当前主题的functions.php文件末尾即可：

// 页脚内联加载标题属性添加脚本，自动规避jQuery冲突和加载时序问题
add_action( 'wp_footer', function() {
    if ( is_admin() ) return;
    ?>
    <script>
    jQuery(document).ready(function($) {
        // 给页面所有h1-h4标签添加data-splitting属性
        $('h1, h2, h3, h4').attr('data-splitting', '');
        // 如果动画脚本需要手动初始化，取消下一行注释即可
        // if (typeof Splitting !== 'undefined') Splitting();
    });
    </script>
    <?php
}, 30 );

这段代码直接把脚本输出到页面底部，WordPress会自动保证jQuery提前加载，不需要额外处理冲突，也不会被主题的脚本合并功能轻易拦截。

1. 先按F12打开浏览器开发者工具，切换到Console（控制台） tab，看是否有红色JS报错，有报错先修复报错，否则jQuery代码会中断执行。
2. 在控制台直接输入jQuery('h1').attr('data-splitting','')按回车执行，如果执行后h1成功加上属性，说明原有问题是脚本加载位置/时序错误；如果执行报错，说明站点jQuery加载异常，需要先检查主题是否正确加载了WordPress自带的jQuery库。
3. 如果用缓存/性能优化插件，添加代码后务必清空所有缓存再测试，避免缓存的旧页面导致修改不生效。

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