CSS 选择器

5 min read

CSS 选择器告诉 TTSWP 文章中哪些部分需要朗读,哪些部分应该跳过。当简单的"禁止音频类"方法不够用时,或者你需要在不编辑每篇文章的情况下进行全站排除时,可以使用 CSS 选择器。

两种选择器类型

包含选择器

默认情况下,TTSWP 会朗读整个文章内容区域。如果你的主题将主要文章包裹在特定容器中(例如 .article-body#main-content),你可以将朗读限制在该容器内。

示例:

.article-body

只有匹配 .article-body 的元素内的文本会被朗读,该容器外的所有内容都会被忽略。

保持字段为空则使用默认设置(整个文章内容)。

排除选择器

匹配排除选择器的元素会在生成前从文本中移除,这些元素内的所有内容也会一并移除。

每行输入一个选择器:

.wp-caption
figcaption
.sidebar
.widget-area
.ad-container

常用排除示例

如果以下选择器适用于你的主题,可以直接复制粘贴到排除列表中。

图片标题

.wp-caption
figcaption
.caption

侧边栏和小工具

.sidebar
#secondary
.widget-area
.elementor-sidebar

广告

.ad-container
.advertisement
.ads
[data-ad]
.google-auto-placed

评论

.comments-area
#comments
.comment-list

相关文章和邮件订阅

.related-posts
.yarpp-related
.mailchimp-signup
.newsletter-form

面包屑导航和元信息

.breadcrumbs
.post-meta
.entry-meta
.author-box

截断于

当你需要在文章的特定位置停止朗读时,可以使用"截断于"功能。从第一个匹配位置开始的所有内容,都会在生成音频前被丢弃。这对于切除位于主内容区域内、难以用单一 CSS 类包裹的脚注、参考列表或作者简介非常方便。

设置方法

  1. 进入 文字转语音 - TTSWP → CSS 选择器
  2. 滚动到 截断于 卡片。
  3. 每行输入一个字符串,保存。
  4. 在任意文章上重新生成音频。

匹配规则

  • 对渲染后的文章 HTML 进行不区分大小写的子字符串匹配。
  • 可以输入纯文本或 HTML 标记。例如,<strong>脚注<\/strong> 仅在"脚注"为粗体时匹配,而 脚注 则匹配页面上任何出现的该词。
  • 如果需要多个可能的截断点,可以输入多个字符串,文章中最早匹配的结果优先。

示例

在粗体"脚注"标题处截断:

<strong>脚注<\/strong>

在多个可能标记中的第一个处截断:

<h2>参考文献<\/h2>
<strong>关于作者<\/strong>

排除选择器 vs. 截断于

  • 当需要跳过的内容包裹在干净的类或 ID 中时(侧边栏、广告、小工具),使用 排除选择器
  • 当你需要截断某个标记以下的所有内容,且没有干净的包裹容器时,使用 截断于

两者都在合成前运行,因此只影响音频,不影响页面的可见内容。

如何找到正确的选择器

在前端打开你的文章,使用浏览器检查器(F12,然后点击元素)。

查找以下内容:

  • class 属性(以 class="..." 开头)- 变为 .class-name
  • ID 属性(以 id="..." 开头)- 变为 #id-name
  • 常见标签 - 直接使用标签名(figcaptionaside

选择最具针对性、同时又能覆盖所有需要排除内容的选择器。如果有多个相似元素,使用类或标签。

测试选择器

保存选择器后:

  1. 打开任意带有音频的文章。
  2. 进入 文章 → 所有文章
  3. 点击 重新生成 图标。
  4. 播放新生成的音频。

如果不需要的内容仍然出现,说明选择器未匹配。打开浏览器检查器,确认类名或标签,然后重试。

限制说明

  • CSS 选择器在合成前对原始文章内容运行
  • 它们不影响页面的视觉显示,只影响发送到 ElevenLabs 的文本
  • 复杂选择器可以使用(.widget-area aside > .title),但建议保持简洁以便维护

相关页面