열심히 글을 쓰는데 방문자는 한 글만 읽고 나가 버린다면, 체류 시간이 짧아서 고민이신 분들 많으시죠?
이럴 때 효과적인 게 바로 사이드바의 인기차트입니다. 뉴닉(NEWNEEK) 같은 미디어 사이트처럼 “지금 많이 보는 글 TOP 5″를 사이드바에 걸어 두면, 방문자가 궁금해서 한 번 더 클릭할 확률이 높아지는데요. 한 블로그에서 여러 글을 볼수록 체류 시간과 블로그 지수가 올라가기 때문에, 구글 상위 노출과 방문자 유입에도 유리해집니다.
문제는 워드프레스에 이런 인기차트 사이드바가 기본 기능으로 들어 있지 않다는 점이에요. 그래서 이번 글에서는 클로드 코드 + 워드프레스 MCP로, 코드 한 줄 직접 쓰지 않고 관리자에서 제목·라벨·링크를 수정할 수 있는 인기차트 사이드바를 만드는 방법을 정리해 드립니다.
블로그 체류시간 높이는 인기차트 만들기, 자세한 내용은 아래 영상 가이드로 설명드리겠습니다.
워드프레스와 AI를 활용해 보다 다양하고, 고퀄리티의 홈페이지를 직접 만들어 보고 싶으신 분들께서는
아래 클래스를 참조해주세요.
영상의 내용을 텍스트로 한번 더 복습하고 싶으신 분들은 아래 내용을 참조해주세요.
인기차트 사이드바 -1. 참고할 사이트 구조 가져오기
먼저 비슷하게 만들고 싶은 사이트를 하나 정합니다. 저는 인기차트 디자인이 깔끔한 뉴닉을 참고했어요.
- 참고할 사이트에서 F12를 눌러 개발자 도구를 켭니다.
- 좌측 상단 화살표(요소 선택) 아이콘을 누른 뒤, 인기차트 영역을 클릭합니다.
- 선택된 요소에서 우클릭 → Copy element로 HTML 구조를 복사합니다.
이렇게 복사한 구조를 클로드에게 그대로 넘겨주면, “이런 느낌으로”를 말로 설명할 필요 없이 디자인을 정확하게 전달할 수 있습니다.
인기차트 사이드바 -2. 클로드에게 숏코드 플러그인으로 요청하기
워드프레스 MCP가 연결된 클로드 코드를 켜고, 복사한 요소와 함께 아래처럼 요청합니다.
“이 구조를 본떠서 글쓰기 페이지에 인기차트 사이드바를 만들려고 해. 카덴스 테마를 쓰고 있어서 위젯에 숏코드 형태로 요소를 추가할 거야.
숏코드로 만들어질 요소는 워드프레스 플러그인으로 조작할 수 있게 만들어 줘. 글의 제목과 라벨, 링크 모두 유저가 직관적으로 수정할 수 있는 형태로 관리자 화면에 세팅해 줘.”
포인트는 두 가지예요.
- 숏코드 형태로 만들기 → 사이드바 위젯에 숏코드 한 줄만 넣으면 어디든 붙일 수 있습니다.
- 플러그인 + 관리자 화면으로 만들기 → 인기글이 바뀔 때마다 클로드를 다시 부를 필요 없이 직접 수정할 수 있습니다.
인기차트 사이드바 -3. 관리자 화면에서 인기글 입력하기
플러그인이 만들어지면 워드프레스 관리자에 인기차트 전용 설정 페이지가 생깁니다. 여기서 아래 항목을 채워 주면 됩니다.
- 글 제목 (1위~5위)
- 라벨 (카테고리나 태그처럼 보여줄 짧은 문구)
- 링크 (클릭 시 이동할 글 주소)
- 텍스트 크기와 굵기 (상단 옵션에서 자유롭게 조절)
저는 제 블로그에 맞게 “헨리프레스 TOP 5”라는 이름으로 만들어 봤어요.
인기차트 사이드바 -4. 글 페이지에서 확인하기
마지막으로 블로그 글 페이지로 돌아가 보면, 사이드바에 인기차트가 예쁘게 들어가 있는 걸 확인할 수 있습니다. 원래라면 유료 플러그인을 쓰거나 따로 개발을 맡겨야 했던 기능이 프롬프트 한 번으로 끝났어요.
마무리
인기차트 사이드바는 방문자가 한 글에서 다음 글로 자연스럽게 넘어가게 만들어서, 체류 시간과 블로그 지수를 함께 끌어올려 주는 장치입니다. 아직 방문자가 많지 않거나 상위 노출이 잘 안 되는 수익형·SEO 블로그라면 꼭 한 번 달아 보세요.
클로드 코드와 워드프레스 MCP 덕분에, 이제 비개발자도 이런 기능을 직접 만들 수 있게 되었습니다.
클로드로 워드프레스 기능을 만드는 다른 사례가 궁금하신 분들은 이 글도 같이 참고해 보세요.
함께 보면 좋은 글: ‘오늘 하루 보지 않기’ 팝업, 워드프레스 + 클로드로 만들기
함께 보면 좋은 글: 클로드 코드로 5분만에 꿀잼 퀴즈만들기 (feat.워드프레스)
워드프레스를 통해 다양한 홈페이지와 퀄리티높은 블로그를 만들어보고 싶은 분들은
아래 클래스를 참조해주세요.
