CSS-селекторы указывают TTSWP, какие части поста нужно озвучивать, а какие нет. Используйте их, когда простого метода «класс без аудио» недостаточно, или когда нужны исключения для всего сайта без редактирования каждого поста.
Два типа селекторов
Селекторы включения
По умолчанию 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-класс.
Как настроить
- Перейдите в Синтез речи - CSS-селекторы.
- Прокрутите до карточки Обрезать после.
- Введите по одной строке. Сохраните.
- Перегенерируйте аудио в любом посте.
Правила совпадения
- Совпадение подстроки без учёта регистра с отрендеренным HTML поста.
- Можно вводить обычный текст или HTML-разметку. Например,
<strong>Сноски</strong>совпадает только когда слово «Сноски» выделено жирным, аСноскисовпадает с любым вхождением на странице. - Введите несколько строк, если хотите задать несколько возможных точек отсечения. Побеждает самое раннее совпадение в посте.
Примеры
Обрезать на жирном заголовке «Сноски»:
<strong>Сноски</strong>
Обрезать на первом из нескольких возможных маркеров:
<h2>Источники</h2>
<strong>Об авторе</strong>
Селекторы исключения и «Обрезать после»
- Используйте Селекторы исключения, когда пропускаемый элемент обёрнут в чистый класс или ID (боковая панель, реклама, виджет).
- Используйте «Обрезать после», когда нужно отсечь всё ниже маркера и нет чистого контейнера для указания.
Оба метода применяются до синтеза, поэтому они влияют только на аудио, но не на видимую страницу.
Как найти нужный селектор
Откройте пост во фронтенде и воспользуйтесь инспектором браузера (F12, затем щёлкните на элемент).
Ищите:
- Атрибут class (начинается с
class="...") - становится.class-name - Атрибут id (начинается с
id="...") - становится#id-name - Общий тег - просто имя тега (
figcaption,aside)
Выберите наиболее конкретный селектор, который при этом охватывает всё, что нужно исключить. Если похожих элементов несколько, используйте класс или тег.
Тестирование селекторов
После сохранения селекторов:
- Откройте любой пост с аудио.
- Перейдите в Записи - Все записи.
- Нажмите значок Регенерировать.
- Воспроизведите новое аудио.
Если нежелательный контент всё ещё присутствует, селектор не совпал. Откройте инспектор браузера, уточните класс или тег и попробуйте снова.
Ограничения
- CSS-селекторы применяются до синтеза к исходному содержимому поста
- Они не влияют на видимую страницу - только на текст, отправляемый в ElevenLabs
- Сложные селекторы работают (
.widget-area aside > .title), но для удобства обслуживания лучше их упрощать