워드프레스에 운세 위젯 설치하기 — 코드 한 줄로 끝내는 방법

워드프레스로 운영하는 사이트에 운세 기능을 넣으려면 보통 두 가지 장벽을 만납니다. 하나는 마땅한 플러그인이 없다는 것이고, 다른 하나는 있더라도 사주 계산의 정확도를 검증할 방법이 없다는 것입니다. 이 글은 플러그인 없이, 사용자 정의 HTML 블록 하나로 운세 위젯을 설치하는 방법을 다룹니다.

준비물은 연동 키 하나입니다

설치에 필요한 것은 연동 키(wgt_로 시작하는 공개 식별자) 하나입니다. SAZU 위젯 대시보드에서 발급하며, 발급과 동시에 위젯을 설치할 사이트 주소를 함께 등록합니다.

이 주소 등록이 보안의 핵심입니다. 연동 키는 사이트 HTML 에 그대로 노출되지만, 등록된 도메인이 아닌 곳에서 호출하면 위젯이 동작하지 않습니다. 키가 유출되어도 제3자가 크레딧을 소진시킬 수 없다는 뜻입니다.

주소는 프로토콜까지 포함해 정확히 적습니다. https://myshop.com 과 https://www.myshop.com 은 서로 다른 주소로 취급되므로, 두 곳 모두에서 접속이 가능하다면 둘 다 등록해야 합니다.

블록 편집기에서 설치하기

워드프레스 5.0 이후의 블록 편집기(구텐베르크)를 기준으로 설명합니다.

1. 위젯을 띄우고 싶은 글이나 페이지를 편집 상태로 엽니다.
2. 블록 추가(+)에서 사용자 정의 HTML 블록을 선택합니다. 검색창에 "HTML"을 입력하면 바로 나옵니다.
3. 아래 코드를 붙여넣고 data-key 값을 발급받은 연동 키로 바꿉니다.

<div id="sazu-widget"></div>
<script src="https://www.sazu.app/embed.js" data-key="wgt_YOUR_KEY" async></script>

미리보기로 확인한 뒤 발행하면 끝입니다. 서버 설정을 만지거나 테마 파일을 수정할 일은 없습니다.

클래식 편집기를 쓰고 있다면

상단 탭에서 텍스트 모드로 전환한 뒤 같은 코드를 붙여넣습니다. 비주얼 모드에서 붙여넣으면 워드프레스가 태그를 문자로 변환해 버려 위젯이 뜨지 않습니다. 이 경우 화면에 코드가 그대로 보이므로 바로 알 수 있습니다.

사이드바나 푸터에 넣으려면

외모 → 위젯 메뉴에서 사용자 정의 HTML 위젯을 원하는 영역에 추가하고 같은 코드를 넣습니다. 다만 사이드바는 폭이 좁아 운세 결과의 표와 긴 문단이 답답하게 보일 수 있습니다. 결과 화면은 폭이 넓을수록 읽기 좋으므로, 본문 영역에 두는 편을 권합니다.

사이트 속도를 지키는 배치

위 코드는 두 부분으로 나뉩니다. <div id="sazu-widget"> 는 위젯이 표시될 자리를 잡는 태그이고, <script> 는 위젯을 불러오는 설치 스크립트입니다.

두 줄을 붙여 두어도 정상 동작하지만, 사이트 속도까지 챙기려면 스크립트를 페이지 맨 아래(</body> 직전)로 옮기는 편이 좋습니다. 스크립트는 자기 위치와 무관하게 #sazu-widget 태그를 찾아 그 자리에 위젯을 그리기 때문에, 표시 위치는 그대로 유지됩니다.

테마 파일을 건드리기 어렵다면 그대로 두어도 무방합니다. async 속성이 붙어 있어 스크립트가 본문 렌더링을 막지 않습니다.

디자인을 사이트에 맞추기

기본값은 다크 테마에 골드 강조색입니다. 밝은 배경의 사이트라면 그대로 두었을 때 위젯만 어둡게 떠서 이질감이 생깁니다. 속성 몇 개로 조정할 수 있습니다.

<script src="https://www.sazu.app/embed.js"
  data-key="wgt_YOUR_KEY"
  data-theme="light"
  data-accent="#2563eb"
  async></script>

data-theme 에는 dark·light·auto 를 넣을 수 있습니다. auto 는 설치된 사이트의 배색을 감지해 맞춥니다. data-accent 는 버튼과 제목에 쓰이는 강조색이며 브랜드 색상 코드를 그대로 넣으면 됩니다.

값을 직접 적기보다는 대시보드의 꾸미기 화면에서 실시간 미리보기로 맞춘 뒤, 완성된 설치 코드를 복사하는 편이 빠릅니다.

운세 종류 바꾸기

속성을 지정하지 않으면 오늘의 운세가 표시됩니다. 다른 운세를 띄우려면 data-service 를 지정합니다.

<script src="https://www.sazu.app/embed.js"
  data-key="wgt_YOUR_KEY"
  data-service="compatibility"
  async></script>

궁합·연애운·월간·연간·대운·인생흐름·고민 맞춤분석을 지원하며, 코드 목록은 위젯 문서에 정리돼 있습니다. 페이지마다 다른 운세를 배치하면 각 페이지가 독립적인 방문 이유를 갖게 됩니다.

설치 후 확인할 것

발행한 페이지를 실제로 열어 다음 세 가지를 봅니다.

• 입력 폼이 보이는가. 아무것도 뜨지 않는다면 연동 키 오타이거나, 비주얼 모드에서 붙여넣어 태그가 문자로 변환된 경우입니다.
• 도메인 오류 문구가 뜨는가. 접속한 주소가 연동 키에 등록한 주소와 다르다는 뜻입니다. www 유무를 확인합니다.
• 결과에 SAMPLE 배지가 붙는가. 무료 플랜에서는 정상입니다. 아래에서 설명합니다.

무료 플랜의 범위를 먼저 아셔야 합니다

무료 플랜은 연동 테스트용입니다. 신용카드 없이 설치해서 위젯이 사이트에 어떻게 보이는지, 색상과 테마가 어울리는지 확인할 수 있습니다. 다만 모든 운세가 방문자 입력과 무관한 고정 예시로 표시되며 SAMPLE 배지가 붙습니다.

방문자 각자의 사주로 계산된 실제 풀이를 내보내려면 구독이 필요합니다. 도입을 검토하실 때 이 구분을 먼저 확인하시는 편이 좋습니다. 설치와 디자인 확인까지는 비용 없이 끝내고, 실제 운영 단계에서 전환하는 순서가 자연스럽습니다.

정리

• 사용자 정의 HTML 블록에 두 줄을 붙여넣으면 설치가 끝납니다. 플러그인도 서버 작업도 필요 없습니다.
• 연동 키에 사이트 주소를 등록해야 동작하며, 이 잠금이 키 유출 시의 크레딧 소진을 막습니다.
• 테마와 강조색은 속성으로 조정하되, 대시보드 미리보기로 맞춘 코드를 복사하는 편이 빠릅니다.
• 무료 플랜은 고정 예시까지입니다. 실제 풀이는 구독 이후에 나갑니다.