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
Truncate After
Truncate After는 게시물의 특정 지점에서 낭독을 중단하고 싶을 때 사용합니다. 첫 번째로 일치하는 위치부터 이후의 모든 내용이 오디오 생성 전에 제거됩니다. 메인 콘텐츠 영역 안에 있어 단일 CSS 클래스로 감싸기 어려운 각주, 참고 문헌 목록, 또는 저자 박스를 잘라낼 때 유용합니다.
설정 방법
- 텍스트 음성 변환 - TTSWP → CSS 선택자로 이동합니다.
- Truncate After 카드로 스크롤합니다.
- 줄당 하나의 문자열을 입력하고 저장합니다.
- 원하는 게시물에서 오디오를 다시 생성합니다.
일치 규칙
- 렌더링된 게시물 HTML에 대해 대소문자를 구분하지 않는 부분 문자열 방식으로 일치합니다.
- 일반 텍스트 또는 HTML 마크업을 입력할 수 있습니다. 예를 들어
<strong>각주</strong>는 각주가 굵게 표시된 경우에만 일치하고,각주는 페이지의 어느 위치에 있든 일치합니다. - 여러 개의 잘라낼 기준점이 필요하다면 여러 문자열을 입력하세요. 게시물에서 가장 먼저 나타나는 항목이 적용됩니다.
예시
굵게 표시된 각주 제목에서 자르기:
<strong>각주</strong>
여러 가능한 기준점 중 첫 번째에서 자르기:
<h2>참고 문헌</h2>
<strong>저자 소개</strong>
제외 선택자 vs. Truncate After
- 제외 대상이 깔끔한 클래스나 ID(사이드바, 광고, 위젯)로 감싸져 있다면 제외 선택자를 사용하세요.
- 특정 기준점 아래의 모든 내용을 잘라내고 싶고 감쌀 수 있는 깔끔한 래퍼가 없다면 Truncate After를 사용하세요.
두 기능 모두 합성 전에 실행되므로 오디오에만 영향을 주며, 눈에 보이는 페이지는 변경되지 않습니다.
올바른 선택자 찾는 방법
프런트엔드에서 게시물을 열고 브라우저의 검사기를 사용하세요(F12를 누른 후 요소를 클릭합니다).
다음을 확인하세요:
- class 속성(
class="..."형태) -.class-name으로 사용 - ID 속성(
id="..."형태) -#id-name으로 사용 - 일반 태그 - 태그 이름 그대로 사용 (
figcaption,aside)
제외하려는 모든 요소를 잡을 수 있으면서 가장 구체적인 선택자를 선택하세요. 유사한 요소가 여러 개 있다면 클래스나 태그를 사용하세요.
선택자 테스트하기
선택자를 저장한 후:
- 오디오가 있는 게시물을 엽니다.
- 게시물 → 모든 게시물로 이동합니다.
- 재생성 아이콘을 클릭합니다.
- 새 오디오를 재생합니다.
원하지 않는 콘텐츠가 여전히 나타난다면 선택자가 일치하지 않은 것입니다. 브라우저 검사기를 열어 클래스나 태그를 확인하고 다시 시도하세요.
제한 사항
- CSS 선택자는 합성 전에 원시 게시물 콘텐츠를 대상으로 실행됩니다.
- 눈에 보이는 페이지에는 영향을 주지 않으며, ElevenLabs로 전송되는 텍스트에만 적용됩니다.
- 복잡한 선택자도 작동합니다(
.widget-area aside > .title). 그러나 유지 관리를 쉽게 하려면 간단하게 유지하는 것이 좋습니다.