워드프레스 아코디언 플러그인으로 아코디언 메뉴 만들기

 

제목을 클릭하면 내용이 펼쳐지고 다시 클릭하면 축소되는 기능을 아코디언(혹은 토글)이라고 합니다.

아코디언은 깔끔한 미관 효과를 가져오며, [상단바, 사이드바, FAQ 등] 다양하게 활용할 수 있는데요.

개인적으로 모든 웹사이트의 필수 기능이라고 생각 됩니다.

이번 포스팅에서는 플러그인으로 아코디언 기능을 만드는 방법에 대해 알아보겠습니다. 

 

아코디언 기능은 몇 몇 테마나 페이지 빌더(엘리먼트)에서 제공되기도 하고, 아니면 직접 자바스크립트/jQuery, HTML/CSS로 구현하는 것도 가능한데요.

하지만, 제가 사용하고 있는 Generatepress 테마에서는 해당 기능을 지원하지 않으며, 저는 코딩을 할 줄 모르기 때문에 플러그인을 통해 아코디언 기능을 사용하는 방법에 대해 알려드리려고 합니다.

플러그인은 웹 사이트에 영향을 주기 때문에 가능하면 설치하지 않는 것이 좋지만, 저처럼 대안이 없는 분들에게는 플러그인을 사용하는 것을 추천 드립니다.

 

플러그인 추가 페이지에서 “Accordion”을 검색하면 수 많은 Accordion 플러그인이 나오는데요.

그중에서도 제가 사용하고 있는 Bellows Accordion Menu를 소개해드리고자 합니다.

 

Bellows Accordion Menu

활성 설치 : 10,000+

Bellows Accordion Menu는 단축 코드로 쉽게 아코디언 메뉴를 만들 수 있는 플러그인입니다.

메뉴 컬러는 3가지(바닐라, 블루, 그레이)뿐이지만, 깔끔한 디자인에 여러 개의 하위 메뉴를 동시에 확장할 수 있고, 계층 구조로 하위 메뉴 안에 하위 메뉴를 넣을 수 있어 무료 버전으로도 충분히 쓸만한 플러그인 입니다.

프로 버전

 

 

 

사용 방법

[디자인 > 메뉴]에서 만들어 놓은 카테고리 메뉴 입니다. 이것을 아코디언 형식으로 만들어 보겠습니다.

 

플러그인 [설정 > 완성] 페이지에서 ⓛ아코디언 형식으로 표시할 메뉴를 선택하고 ②숏코드를 복사 합니다.

 

[디자인 > 위젯]에서 해당 메뉴를 표시할 위젯에 숏코드를 입력하고 업데이트 하면 다음과 같이 아코디언 메뉴가 표시 됩니다.

 

그리고 기본 구성 페이지에서는 메뉴 컬러와 폴딩 방식을 설정할 수도 있습니다.

나머지 설정 페이지에 대해서는 내용을 모르니 생략하도록 하겠습니다.

 

제가 이 플러그인을 추천 드리는 이유는 다른 플러그인의 경우, 위의 이미지처럼 아코디언 메뉴를 만들 수 있지만 계층 구조로 하위 항목에 하위 항목을 둘 수 없는 반면,

 

이 플러그인은 [디자인 > 메뉴]에서 만들어 놓은 메뉴를 그대로 아코디언 형식으로 만들어주기 때문에 메뉴를 만들기도 쉽고, 계층 구조로 하위 항목 안에 하위 항목을 넣을 수도 있기 때문입니다.

 

 

 

 

 

마치며

여기까지 워드프레스 아코디언 메뉴를 만드는 방법에 대해 알아보았습니다.

나중에라도 다른 방법으로 계층 구조의 아코디언 메뉴를 만들 수 있게 된다면 내용을 다시 업데이트 하도록 하겠습니다.

 

 

 

읽어주셔서 감사합니다. 

밑에 좋아요 버튼을 눌러주시면 저에게 큰 힘이 되고 콘텐츠의 방향성을 잡는 데에도 도움이 됩니다.

혹시 궁금한 점이나 원하시는 주제가 있으시다면 댓글 남겨주세요.

구글 검색 키워드(첫 페이지 순) : 워드프레스 아코디언, 워드프레스 아코디언 메뉴, 워드프레스 아코디언 플러그인, 워드프레스 아코디언 메뉴 플러그인, generatepress 아코디언, generatepress 아코디언 메뉴, 워드프레스 FAQ, 워드프레스 FAQ 플러그인