플레이어가 프론트엔드에 표시되지 않음

4 min read

관리자에서 오디오가 정상적으로 생성되었지만, 사이트에서 포스트를 열면 오디오 플레이어가 보이지 않습니다. 이 페이지에서는 일반적인 원인을 안내합니다.

빠른 체크리스트

자세히 살펴보기 전에:

  1. Ctrl+Shift+R로 페이지를 새로고침합니다 (강제 새로고침으로 캐시를 우회)
  2. 관리자 TTS 열에서 해당 포스트에 오디오가 있는지 확인합니다
  3. 로그아웃 상태가 아닌지 확인합니다 (일부 테마는 관리자 전용 요소를 숨깁니다)

원인 1: 포스트 유형이 활성화되지 않음

증상: 관리자에는 오디오가 있지만 프론트엔드에 플레이어가 없습니다. 일부 포스트 유형에서는 작동하지만 다른 유형에서는 작동하지 않습니다.

해결 방법:

  1. 텍스트 음성 변환 → 콘텐츠로 이동합니다.
  2. 현재 포스트의 유형(포스트, 페이지, 상품 등)이 활성화되어 있는지 확인합니다.
  3. 저장합니다.
  4. 프론트엔드 포스트를 새로고침합니다.

원인 2: 테마 충돌

증상: 일부 테마에서는 플레이어가 나타나지만 현재 테마에서는 나타나지 않거나, 보이지 않거나 깨져 보입니다.

일반적인 원인:

  • 테마가 TTSWP가 플레이어를 삽입하는 the_content 필터를 제거하는 경우
  • 테마가 WordPress 기본 콘텐츠 훅을 우회하는 사용자 정의 템플릿을 사용하는 경우
  • 테마의 CSS가 플레이어를 숨기는 경우 (어딘가에 display: none 적용)

해결 방법:

  1. 임시로 기본 WordPress 테마(Twenty Twenty-Four)로 전환합니다.
  2. 포스트를 새로고침합니다.
  3. 기본 테마에서 플레이어가 나타나면 문제는 현재 테마에 있습니다.

우회 방법:

  • 포스트 내에 [mementor-tts] 단축 코드를 사용해 배치를 강제 지정합니다
  • 사용자 정의 테마 템플릿에서 [tts_player id="123"] 단축 코드를 사용합니다
  • 플레이어가 숨겨진 경우 표시되도록 사용자 정의 CSS를 추가합니다

원인 3: 배치가 표시되지 않는 뷰로 설정됨

증상: 일부 페이지에는 플레이어가 나타나지만 다른 페이지에는 나타나지 않습니다.

예시: 배치가 발췌문 앞으로 설정된 경우, 플레이어는 아카이브 및 블로그 목록 페이지에만 표시되고 단일 포스트에는 표시되지 않습니다.

해결 방법:

  1. 텍스트 음성 변환 → 플레이어로 이동합니다.
  2. 배치 드롭다운을 확인합니다.
  3. 가장 범용적인 배치를 위해 제목 뒤 또는 콘텐츠 뒤로 전환합니다.
  4. 저장합니다.

원인 4: 캐시가 이전 버전을 제공 중

증상: 시크릿 창에서는 플레이어가 나타나지만 일반 브라우저에서는 나타나지 않습니다.

해결 방법:

  1. 브라우저 캐시를 지웁니다 (Ctrl+Shift+Delete).
  2. 캐싱 플러그인(WP Rocket, LiteSpeed 등)을 사용 중이라면 해당 캐시를 지웁니다.
  3. CDN(Cloudflare 등)을 사용 중이라면 캐시를 퍼지합니다.

캐싱 플러그인을 참고하세요.

원인 5: JavaScript 차단됨

증상: 플레이어 HTML은 있지만 (소스 보기), 깨져 보이거나 정적으로 표시됩니다.

이유: 플레이어는 컨트롤에 JavaScript를 사용합니다. JS가 차단되면 플레이어가 스타일 없는 HTML로 표시됩니다.

해결 방법:

  • 브라우저 콘솔에서 JS 오류를 확인합니다
  • 사이트에서 광고 차단기 또는 콘텐츠 차단기를 비활성화합니다
  • 다른 플러그인이 mementor-tts-public.js를 큐에서 제거하고 있지 않은지 확인합니다

원인 6: Weglot 또는 WPML 라우팅 문제

증상: 원본 언어에서는 플레이어가 작동하지만 번역된 페이지에서는 작동하지 않습니다 (또는 반대).

해결 방법: Weglot 또는 WPML 연동 토글이 켜져 있는지 확인합니다. 텍스트 음성 변환 → 개요 → 빠른 설정으로 이동합니다. WPML 연동Weglot 연동을 참고하세요.

원인 7: 페이지의 AMP 버전

증상: 일반 버전에서는 플레이어가 표시되지만 AMP에서는 표시되지 않습니다.

이유: AMP는 JavaScript에 대한 엄격한 규칙을 적용합니다. TTSWP 플레이어는 AMP 페이지 내에서 실행되지 않습니다.

우회 방법: 방문자를 비-AMP 버전으로 안내하거나, AMP 페이지에서는 다른 오디오 방식을 사용하세요.

여전히 해결되지 않나요?

위의 방법으로도 해결되지 않는다면:

  1. 텍스트 음성 변환 → PRO 지원 또는 지원 페이지를 확인합니다
  2. 테마 이름, WordPress 버전, 플러그인 버전, 브라우저, 포스트 및 관리자 TTS 열의 스크린샷을 포함해 주세요

관련 페이지