안녕하세요! 워드프레스 가이드 Dave입니다.
오늘은 워드프레스에서 콘텐츠 슬라이더를 만드는 방법을 알아 보겠습니다.
콘텐츠 슬라이더(Content Slider)는 포스트나 페이지 콘텐츠가 슬라이더 내용으로 들어가는 슬라이더를 말합니다. 주로 웹사이트 메인 페이지 상단에 위치하여 최신 글이나 대표 글(Featured Posts)을 보여주는 데 많이 사용되죠.
메인화면 상단의 콘텐츠 슬라이더 /사진 출처=리디셀렉트
워드프레스에서 이런 콘텐츠 슬라이더를 만드는 가장 간단한 방법은 무엇일까요?
네, 맞습니다. 언제가 그렇듯, 플러그인을 사용하는 거죠.
워드프레스 플러그인들 중에는 슬라이더 기능을 제공하는 플러그인들이 많이 나와 있고 그 중 일부는 콘텐츠 슬라이더 기능도 제공합니다. 그러니 슬라이더 플러그인을 사용하는 것만큼 간단한 방법도 없을 겁니다.
워드프레스에서 “content slider” 검색 /사진 출처=wordpress.org
그런데 꼭 이 방법 밖에 없을까요?
예를 들면 이런 경우가 있을 수 있습니다.
- 별도 플러그인 없이 간단하게 콘텐츠 슬라이더 하나만 만들어 넣으면 될 경우
- 검토한 기존 플러그인들이 내 ‘입맛’에 맞지 않을 경우
- 좀더 커스터마이즈된 슬라이더가 필요한 경우 등.
이럴 땐 굳이 시중에 나와 있는 슬라이더 플러그인들 사용하지 않고 직접 만들어 쓰는 것도 고려할만한 방법이겠죠?
슬릭(Slick) 라이브러리
슬릭(slick)은 자바스크립트 슬라이더 라이브러리입니다. 가벼우면서도 다양한 기능을 지원하고 있어서 많이들 사용하는 라이브러리죠.
워드프레스 슬라이더 플러그인들 중에도 이 슬릭 기반의 슬라이더 플러그인들이 여럿 나와 있습니다. 당장 워드프레스 플러그인 디렉터리만 검색해도 많이 나오죠.
하지만 여기서는 이들 슬라이더 플러그인을 사용하는 대신 그냥 Slick만 설치하여 쓰는 방식을 택하겠습니다. 슬릭만 설치하고, 나머지 콘텐츠 슬라이더 기능은 별도로 만들어 붙여 보죠!
Slick 설치하기
슬릭 라이브러리를 워드프레스 사이트에 추가(설치)하는 방법은 여러 가지가 있습니다.
우선, 슬릭은 자바스크립트 라이브러리이기 때문에 일반적인 자바스크립트 추가하기 방식을 사용하여 워드프레스에 설치할 수 있습니다. 워드프레스 API 함수인 wp_enqueue_script() 함수를 사용하여 슬릭(slick)을 워드프레스에 추가해 주면 됩니다. (자세한 방법은 설명을 생략합니다. 아래 글을 참조하세요!)
하지만 여기서는 직접 코드를 추가하는 대신 간단하게 플러그인으로 설치하는 방법을 택하겠습니다.
SEO Slider
SEO Slider라는 플러그인을 찾아 내 워드프레스 사이트에 설치합니다.
네? 뭐라고요? 슬라이드 플러그인이라고요? 지금 장난하는 건가요?
네, 네. 알겠습니다. 그리고 죄송합니다!! 앞서 플러그인을 사용하지 않고 슬라이더를 추가한다고 말해 놓고 이제 와서 슬그머니 플러그인을 설치하라뇨?
맞습니다. 제가 거짓말을 했네요! 하지만 우리는 여기서 이 플러그인을 슬라이더 용도로 사용하기 위해 설치할 건 아닙니다. 어디까지나 이 플러그인의 기능 중 슬릭(slick) 라이브러리 설치 부분만을 차용하기 위해 설치한 것 뿐입니다. 가끔은 플러그인의 특정 기능만 가져와 써야 할 때도 있습니다. ㅎㅎ
참고로, 이 SEO Slider 플러그인은 슬릭 기반의 이미지 슬라이더를 제공하는 무료 플러그인입니다. 물론 콘텐츠 슬라이더 기능은 포함되어 있지 않습니다.
이 방법이 마음에 들지 않는 분들은 앞서 소개한, 코드를 직접 추가하는 방식으로 처리하시면 됩니다.
슬라이더 콘텐츠 구성하기
슬릭 라이브러리 설치가 완료 되었으면 이번엔 슬릭을 적용할 슬라이더 콘텐츠를 한번 구성해 보기로 하겠습니다.
Posts List Block
콘텐츠를 만들기에 앞서, 우선 간단하게 플러그인을 하나 (또?) 추가하겠습니다.^^
Posts List Block이라는 플러그인입니다. 이 플러그인은 워드프레스 블록 편집기 내에 포스트 목록 블록을 추가해 주는 아주 간단한 플러그인입니다.
왜 필요한지는 조금 있다 설명 드리고, 일단 플러그인을 설치했다면 다음으로 넘어가죠!
새 페이지 만들기
이제 슬라이더 콘텐츠를 만들겠습니다.
우선 워드프레스 대시보드에서 “새 페이지”를 하나 추가합니다. 슬라이더 콘텐츠를 추가할 페이지입니다.
그런 다음 페이지에서 블록 추가 버튼을 눌러 보면 아래와 같이 “Blog Posts Listing” 블록이 표시될 것입니다. 이 블록은 말 그대로 페이지에 글 목록을 표시해 주는 블록입니다. 이제 이 블록을 페이지에 추가합니다.
그러면 몇 개의 포스트를 출력할지 입력할 수 있는 입력 막대가 보일 것입니다. 디폴트 값은 10개인데, 슬라이드에 쓰기엔 너무 많은 양 같으니 여기선 그냥 임의로 “3”이라고 주겠습니다. 슬라이드 3개 짜리 콘텐츠 슬라이더를 만들게 됩니다.
여기서 “미리보기”를 하거나 페이지를 저장하고 결과 페이지를 보면 아래와 같이 최신 글 3개가 화면에 표시되는 것을 확인할 수 있습니다. (페이지가 어떻게 보이는지는 사용하는 테마에 따라 다를 수 있습니다)
슬릭 슬라이더 적용하기
이제 이렇게 표시된 글 목록을 슬라이더로 변환시켜 주는 일만 남았네요. 슬릭(slick) 라이브러리가 바로 그 일을 하죠.
페이지에 아래 자바스크립트 코드를 추가해 봅시다.
jQuery(".a8c-posts-list>ul").slick();
이 코드는 앞서 추가한 최신 글 목록에 슬릭(slick)을 적용하는 코드입니다. 여기서 .a8c-posts-list는 앞서 우리가 추가한 “Blog Posts Listing” 블록을 가리키는 클래스명이구요.
참고로, 위 코드는 페이지 속에 포함시키거나 아니면 Insert Headers and Footers 플러그인 같은 것을 사용하여 추가하면 됩니다. (자세한 사용법은 아래 글 참고)
이렇게 슬릭을 적용하고 나면 앞서 우리가 만든 글 목록이 다음과 같이 콘텐츠 슬라이더로 변경됩니다.
코드 한줄로 만든 슬라이더 치곤 제법 그럴 듯 하죠?
물론 이 슬라이더는 아직 스타일을 제대로 적용하지 않아서 디자인이 그다지 돋보이지 않습니다. 또한 슬릭의 다양한 옵션들을 하나도 처리해 주지 않고 그저 디폴트값만 사용했기 때문에 조금 밋밋한 감이 있습니다.
또 여기서는 설명을 간단하게 하기 위해 아주 기능이 적은 Posts List Block을 사용했지만 워드프레스 블록들 중에는 아주 다양한 기능을 갖춘 포스트 목록 블록들이 많이 나와 있습니다. 이들 중 하나를 사용하면 좀더 멋진 포스트 목록을 꾸밀 수 있을 것입니다. 물론 굳이 블록이 싫다면 Display Posts 같은 숏코드 플러그인을 사용하거나 페이지 빌더의 포스트 그리드 컴포넌트 같은 것을 이용해도 되구요.
여기서는 그저 방법만 간단히 소개했습니다.
슬라이더를 입맛에 맞게 꾸미고 슬릭의 옵션값들을 조정해서 나만의 콘텐츠 슬라이더로 만드는 일은 여러분 몫입니다. 멋지게 한번 만들어 보세요! 🙂
0 thoughts on “슬릭(Slick)으로 콘텐츠 슬라이더 만들기”