워드프레스 케이보드 최신글 슬라이더 만들기

워드프레스 케이보드 게시판의 최신글을 회전 슬라이더로 표시하고 싶은 경우 Comosfarm에서 판매하는 최신글 슬라이더 플러그인을 사용하거나 엘리멘터 프로의 Loop Carousel 위젯을 사용하여 케이보드 최신글을 표시하는 것을 시도할 수 있습니다. 또는 케이보드 스킨 파일을 직접 수정하여 원하는 기능을 구현하는 것도 가능합니다.

워드프레스 케이보드 (KBoard) 최신글 슬라이더를 만드는 방법

지난 주말에 케이보드(KBoard) 게시판의 최신글 목록을 회전 슬라이더(캐러셀)로 표시하는 작업을 진행했습니다. 최종적으로 다음 영상과 같이 구현되도록 했습니다.

작업 요청 사항에 따라 다음과 같이 작동하도록 했습니다.

1. 슬라이드 항목은 데스크톱(PC)에서 4개, 모바일에서 2개가 표시되도록 함 (표시되는 슬라이드 항목 개수는 변경 가능)
2. 게시글 작성자 이름은 첫 글자만 노출되도록 하고 나머지는 별표(*)로 처리함
3. 슬라이드 항목 자동 회전.
4. 좌우의 내비게이션 화살표 제거
5. 페이지네이션 도트(Pagination dots)를 슬라이더 아래에 위치시키고 크기 조정.
6. 썸네일
   • 게시글에 썸네일이 지정된 경우에는 썸네일 이미지 표시
   • 썸네일이 지정되지 않은 경우에는 첫 번째 이미지가 표시되도록 함
   • 썸네일이 지정되지 않았고 게시글에 이미지가 하나도 없는 경우에는 썸네일 영역이 회색으로 표시됨.
7. Hover 시 이미지 확대 및 Overlay 배경색 변화.

몇 가지 방법으로 케이보드 최신글을 슬라이더(캐러셀)로 표시할 수 있습니다.

KBoard 화이클 비디오 최신글 슬라이더 플러그인 (유료)

쉬운 방법으로 Cosmosfarm에서 판매하는 KBoard 화이클 비디오 최신글 슬라이더 플러그인을 사용할 수 있습니다.

33,000원에 판매되고 있는 이 플러그인은 구입일로부터 1년 동안 보증이 제공됩니다. 아래와 같은 형식으로 최신글 슬라이더가 표시됩니다.

미리보기 페이지에서 확인해보니 자동 회전은 지원되지 않는 것으로 보입니다(이 부분은 정확하지 않으니 판매자에게 문의하여 확인이 필요합니다). 제공되는 기능 그대로 사용하기에 좋은 것 같습니다.

다만 댓글에 빈 화면만 표시되는 등의 오류가 있다고 호소하는 분들이 계시네요. 지금은 오류 없이 잘 작동하는지 문의한 후에 구입하면 안전할 것입니다.

엘리멘터 프로의 Loop Grid 또는 Loop Carousel 위젯 사용하기

엘리멘터 프로를 사용한다면 Loop Grid나 Loop Carousel과 같은 요소를 사용하여 케이보드 글들을 나열할 수 있습니다.

먼저 Theme Builder(테마 빌더)에서 Loop Item 템플릿을 만든 다음, Loop Carousel 옵션에서 템플릿을 설정할 수 있습니다.

템플릿은 미리 만들어진 Loop 템플릿에서 마음에 드는 것을 로드하여 적절히 수정할 수 있습니다.

Loop Carousel이나 Loop Grid 요소를 추가한 다음, Query의 Source에 KBoard를 지정하면 케이보드 최신글들이 나열됩니다.

하지만 이 방법을 이용할 경우 다음과 같은 제약(단점)이 있습니다.

1. 모든 게시판의 글들이 표시됩니다.
2. 게시글 작성 시 썸네일을 지정한 경우에만 썸네일이 표시됩니다.

두 번째 문제의 경우, 썸네일이 지정되어 있지 않은 경우 첫 번째 이미지를 썸네일로 지정하도록 하는 방법을 강구하면 좋을 듯 합니다.

이와 관련된 질문 몇 개가 구글에서 검색이 되지만 명확한 방법은 나와있지 않네요. (예: 케이보드 갤러리 내용 첫번째 이미지 썸네일 지정)

스킨 파일 편집 (직접 코딩)

상기의 방법으로 만족할 만한 결과가 나오지 않는 경우에는 케이보드 스킨 파일을 편집하여 원하는 기능을 구현하는 것을 고려할 수 있습니다.

저는 엘리멘터 프로의 Loop Carousel에서 특정 게시판의 최신글만 표시되도록 시도해 보았지만, 생각처럼 간단하지 않았습니다. 겨우 특정 게시판의 글만 표시되도록 하는 데 성공했지만, 썸네일이 지정되지 않은 게시글의 경우 썸네일이 표시되지 않았고, 이외에 클라이언트가 요구하는 레이아웃으로 슬라이더를 만드는 것이 쉽지 않았습니다.😥

그래서 엘리멘터와 연동하는 것을 포기하고 케이보드 스킨을 편집하여 고객이 원하는 디자인으로 회전 슬라이더(캐러셀)를 만들었습니다.

케이보드 스킨을 직접 수정하고 싶은 경우 다음 네 개의 파일을 편집할 수 있습니다.

• editor.php → 게시글 작성 페이지 커스텀
• list.php → 게시글 목록 페이지 커스텀
• document.php → 게시글 상세 페이지(게시글 본문) 커스텀
• latest.php → 최신글 페이지 커스텀

먼저는 백업을 확실히 한 후에 진행하시기 바랍니다.

👉 시간이 많이 소요되지 않은 커스텀 작업(예: 케이보드 최신글 슬라이더 만들기)이 필요하거나 워드프레스 또는 웹호스팅 문제 해결에 어려움을 겪는 경우 여기에서 서비스(유료)를 의뢰하실 수 있습니다.

참고

• 엘리멘터 문의 폼과 케이보드 게시판 연동
• 워드프레스 SMS 문자 연동 방법 (문의 폼 플러그인, 우커머스)
• 워드프레스로 쉽게 랜딩 페이지 만들기 (엘리멘터 플러그인 & GeneratePress, Divi 테마 등)