标题内容添加自定义 span 包裹 " />

本文介绍使用 jQuery 精准定位并包裹指定父容器（如 .ast-archive-entry-banner）内 元素的文本内容，为其动态添加 标签，适用于无 PHP 修改权限的主题定制场景。

本文介绍使用 jquery 精准定位并包裹指定父容器（如 `.ast-archive-entry-banner`）内 `

` 元素的文本内容，为其动态添加 `` 标签，适用于无 php 修改权限的主题定制场景。

在 WordPress 主题（如 Astra）等前端受限环境中，有时无法直接修改模板文件，但又需对特定结构的标题添加样式钩子（例如为 SEO 或 CSS 动画提供语义化包裹）。此时，jQuery 提供了一种轻量、可靠且无需后端介入的解决方案。

核心思路是：仅作用于拥有 .ast-archive-entry-banner 类的父级区域内的 <h1></h1> 标签，避免全局污染。以下代码利用 jQuery 的选择器精确匹配，并通过 .html() 方法的回调函数安全替换内容：

$(document).ready(function() {
  $(".ast-archive-entry-banner h1").html(function(index, currentHtml) {
    return '<span class="my-class">' + $(this).text() + '</span>';
  });
});

✅ 关键说明：

• $(".ast-archive-entry-banner h1") 使用后代选择器，确保只匹配该 class 下的 <h1></h1>（即使嵌套多层，如 section > div > h1）；
• .html(function(...)) 的回调形式可逐个处理匹配元素，$(this).text() 安全提取纯文本（自动过滤子标签，防止重复嵌套）；
• index 和 currentHtml 参数虽未使用，但保留以增强可读性与扩展性（例如后续可加入条件判断）。

⚠️ 注意事项：

• 必须确保 jQuery 已加载（推荐使用 CDN，如 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>），且脚本置于 DOM 尾部或包裹在 $(document).ready() 中；
• 若页面存在多个 .ast-archive-entry-banner 区块，该代码会自动批量处理所有匹配的 <h1></h1>；
• 切勿使用 .wrapInner() 替代 —— 它会将整个子节点（包括已有 <span></span>）一并包裹，易导致嵌套污染；而 .html() + .text() 组合可确保“纯净文本重写”，更可控。

最后，配合 CSS 即可生效：

.my-class {
  background: linear-gradient(135deg, #ff9a9e, #fad0c4);
  padding: 0.2em 0.5em;
  border-radius: 4px;
}

该方案简洁、健壮、可维护，是前端微调中兼顾兼容性与精准性的典型实践。