인기글 위젯을 붙였는데 썸네일이 다 찌그러져서 나온 경험, 한 번쯤 있으실 겁니다. 플러그인 자체 문제인 줄 알고 다른 플러그인으로 갈아탔다가 똑같은 증상을 또 겪는 경우도 많더라고요. 실무에서 보면 이건 플러그인 문제가 아니라 Tools 설정 몇 개를 안 건드려서 생기는 문제인 경우가 대부분입니다.
WP Popular Posts는 조회수 기반 인기글을 실시간으로 뽑아주는 워드프레스 필수급 플러그인입니다.
기본 상태로 쓰면 썸네일 비율과 CSS 충돌 때문에 못생기게 나옵니다.
Thumbnails·Data 탭 설정과 post_html 숏코드만 바꿔도 절반은 해결됩니다.
WP Popular Posts, 왜 이 플러그인을 쓰는가
WordPress Popular Posts(WPP)는 방문자의 조회 이력을 DB에 기록해서 기간별(오늘, 이번 주, 전체)로 가장 많이 읽힌 글을 자동으로 뽑아주는 플러그인입니다. 사이드바나 본문 하단에 넣어두면 체류 시간을 늘리는 데 실질적으로 도움이 됩니다.
많이들 여기서 막히더라고요. 설치하고 위젯만 꽂으면 알아서 예쁘게 나올 거라 생각하는데, WPP는 원래 스타일을 거의 안 입힌 채로 배포됩니다. 디자인의 90%는 관리자가 Tools 설정과 post_html을 직접 잡아줘야 나옵니다.
Thumbnails 탭 설정, 썸네일 찌그러짐 잡기
세로로 긴 썸네일이 위젯에서 눌린 것처럼 나오는 이유는 명확합니다. Thumbnail format이 Use original format으로 되어 있으면 원본 비율 그대로 좁은 칸에 욱여넣기 때문입니다.
[설정] > [Tools] > [Thumbnails 탭]에서 아래 순서로 바꿔주세요.
- Thumbnail format을 Custom으로 바꾸고 48×48, Cropped 옵션을 선택합니다
- Change thumbnail을 눌러 기본 썸네일 이미지를 하나 등록합니다 — 대표 이미지가 없는 글은 빈칸 대신 이 기본 이미지가 대신 나옵니다
- 설정을 저장한 뒤 반드시 Empty image cache를 한 번 눌러야 기존에 생성된 썸네일 캐시가 새 비율로 재생성됩니다
Data 탭 설정, CSS 충돌과 캐시 부하 줄이기
이 부분이 핵심입니다. Data 탭에서 Use plugin’s stylesheet가 Enabled로 켜져 있으면, WPP 기본 CSS와 테마·커스텀 CSS 파일이 동시에 적용되면서 순위 표시나 여백 값이 서로 충돌합니다. 직접 커스텀 CSS를 관리하는 사이트라면 이 옵션은 거의 항상 꺼두는 게 맞습니다.
| 설정 항목 | 기본값 | 권장값 |
|---|---|---|
| Use plugin’s stylesheet | Enabled | Disabled |
| Data Caching | Enable | Enable (그대로 유지) |
| Refresh cache every | 1 Minute | 10 Minute(s) |
| Load popular posts list via AJAX | Enabled | Disabled |
| Thumbnail format | Use original format | Custom (48×48 Cropped) |
캐시 주기를 1분으로 두면 트래픽이 몰릴 때마다 쿼리가 계속 다시 돌아서 DB 부하가 쌓입니다. 10분 정도로만 늘려도 화면 깜빡임과 서버 부담이 동시에 줄어듭니다. AJAX 로딩도 LiteSpeed Cache 같은 페이지 캐시 플러그인과 같이 쓰면 위젯이 늦게 툭 튀어나오면서 레이아웃이 흔들리는 원인이 되니, Disabled로 바꾸고 정적으로 렌더링되게 두는 편이 안정적입니다.
여기까지 바꾸고 나면 어떨까요? Apply를 누른 다음 LiteSpeed 캐시까지 한 번 비워주면, CSS를 한 줄도 안 건드려도 겉보기가 확실히 달라지는 걸 체감할 수 있습니다.
post_html 숏코드 교체로 레이아웃 깨짐 해결
왜 순위 텍스트나 썸네일이 잘려 보이는가
기본 숏코드 구조는 썸네일과 제목을 감싸는 div가 링크 태그(a) 안쪽 깊숙이 중첩되는 경우가 많습니다. 브라우저가 이 구조를 자동으로 정리하면서 레이아웃이 예상과 다르게 잘려 보이는 경우가 생깁니다. 이건 직접 겪어보면 체감되는데, 똑같은 CSS를 넣어도 post_html 구조가 다르면 결과물이 완전히 달라집니다.
교체할 post_html 구조
숏코드의 wpp_start, wpp_end, post_html 속성을 아래 구조로 바꿔주세요. thumb_img, title, views, url은 WPP가 자동으로 치환하는 태그입니다.
이 구조를 nopickle-game-optimized.css에 등록해 둔 wpp-list 클래스와 짝지어 두면, 순위 1·2·3위는 금·은·동 색상으로 강조되고 썸네일은 48px에 모서리 10px 라운드가 적용됩니다. 제목은 한 줄로 말줄임 처리되고 마우스를 올렸을 때만 파란색으로 바뀌는 구조까지 CSS 쪽에서 잡아줍니다.
흔한 오해와 잘못 알려진 설정
썸네일이 계속 이상하게 나오면 CSS부터 의심하는 경우가 많은데, 순서가 반대인 경우가 훨씬 많습니다. Thumbnails 탭에서 비율을 바꾼 다음 Empty image cache를 누르지 않으면, 기존에 생성돼 있던 원본 비율 캐시 파일이 그대로 남아서 계속 예전 모습으로 나옵니다.
또 하나는 “WPP는 기본 템플릿 자체가 못생겼으니 CSS 없이는 답이 없다”는 생각입니다. 절반만 맞습니다. CSS 이전에 Thumbnails·Data 탭 설정만 정리해도 겉보기의 상당 부분이 정상화되고, CSS와 post_html은 그 위에 마무리를 올리는 역할에 가깝습니다.
바꾸고도 썸네일이 여전히 이상하면, 설정을 다시 확인하기 전에 Tools > Empty image cache를 한 번 더 눌러보세요. 캐시가 안 비워져서 생기는 경우가 생각보다 많습니다.
적용 체크리스트
- Thumbnails 탭에서 Custom 48×48 Cropped로 변경
- Change thumbnail로 기본 썸네일 이미지 등록
- Data 탭에서 Use plugin’s stylesheet를 Disabled로 변경
- Refresh cache every를 10 Minute(s)로 조정
- Load popular posts list via AJAX를 Disabled로 변경
- Apply 저장 후 Empty image cache 실행
- post_html 숏코드를 wpp-list 구조로 교체
- LiteSpeed 캐시 전체 삭제 후 실제 화면 확인
초보자는 보통 CSS 파일부터 손대는데, 실무자는 Tools 설정을 먼저 정리하고 CSS는 마지막에 얹습니다. 순서를 바꿔서 CSS부터 손대면 캐시된 원본 비율 썸네일과 새 CSS가 계속 부딪히면서 디버깅 시간만 늘어나는 걸 여러 번 봤습니다.
지금 바로 워드프레스 관리자에 들어가 WP Popular Posts Tools의 Thumbnails 탭부터 열어보세요. Custom 48×48 Cropped로 바꾸고 Empty image cache 한 번만 눌러도 변화가 바로 눈에 보일 겁니다.
여러분은 인기글 위젯 썸네일 문제, CSS부터 건드려 보셨나요 아니면 플러그인 설정부터 확인해 보셨나요? Refresh cache 주기는 몇 분으로 쓰고 계신가요?
다음 글로는 LiteSpeed Cache와 WPP 캐시 충돌 없이 같이 쓰는 설정법, GeneratePress 사이드바 위젯 커스텀 CSS 구조 잡는 법을 추천드립니다.
본 포스팅은 정보 전달 목적이며, 실제 적용 시 발생하는 책임은 사용자에게 있습니다.