WordPress에서 접을 수 있는 사이드바 메뉴를 만드는 방법(쉬운 방법)

WordPress에서 접을 수 있는 사이드바 메뉴를 만들고 싶습니까?

접을 수 있는 메뉴를 사용하면 웹사이트 방문자가 사이드바를 복잡하게 만들지 않고도 많은 링크에 쉽게 액세스할 수 있습니다. 대규모 웹 사이트, 전자 상거래 상점 또는 레이아웃이 더 복잡한 모든 사이트에 적합합니다.

이 기사에서는 WordPress에서 접을 수 있는 사이드바 메뉴를 쉽게 만드는 방법을 보여줍니다.

접을 수 있는 사이드바 메뉴란 무엇이며 언제 사용해야 합니까?

가장 사용자 친화적인 메뉴를 통해 방문자가 필요로 하는 모든 링크에 쉽게 액세스할 수 있습니다. 그러나 페이지가 많거나 레이아웃이 더 복잡한 사이트에서는 이것이 까다로울 수 있습니다.

Amazon과 같이 많은 제품 카테고리와 하위 카테고리가 있는 대형 전자 상거래 상점을 생각해 보십시오.

표준 메뉴에 모든 단일 제품 범주를 표시하는 것은 좋은 생각이 아닙니다. 쇼핑객은 관심 있는 카테고리를 찾기 위해 메뉴를 스크롤해야 할 것입니다.

여기에서 접을 수 있는 메뉴가 등장합니다. 이러한 메뉴는 콘텐츠를 부모-자식 관계로 구성합니다. 방문자가 접을 수 있는 메뉴에서 상위 항목을 클릭하면 해당 상위 항목의 모든 하위 콘텐츠가 표시되도록 확장됩니다.

Guardian 뉴스 아울렛은 모바일 사이트에 접을 수 있는 메뉴를 사용합니다.

접을 수 있는 메뉴를 확장 가능한 메뉴라고도 합니다. 방문자가 클릭하면 다른 섹션이 확장되기 때문입니다.

기본적으로 접을 수 있는 메뉴는 방문자에게 많은 콘텐츠와 복잡성을 숨깁니다. 이것은 카테고리 및 하위 카테고리의 긴 목록을 스크롤하는 것보다 훨씬 더 사용자 친화적입니다.

즉, WordPress 사이트에서 접을 수 있는 사이드바 메뉴를 쉽게 만드는 방법을 살펴보겠습니다.

WordPress에서 접을 수 있는 사이드바 메뉴를 만드는 방법

Bellows Accordion Menu 플러그인을 사용하여 WordPress에서 접을 수 있는 사이드바 메뉴를 만들 수 있습니다.

Bellows Accordion Menu는 편리한 단축 코드를 제공하므로 사이드바를 포함한 모든 페이지, 게시물 또는 위젯 영역에 축소 가능한 메뉴를 배치할 수 있습니다.

먼저 플러그인을 설치하고 활성화해야 합니다. 도움이 필요하면 WordPress 플러그인 설치 방법에 대한 가이드를 참조하세요.

활성화되면 WordPress 대시보드의 모양 » 메뉴 페이지로 이동합니다.

시작하려면 메뉴 이름을 '메뉴 이름' 필드에 입력하십시오. 귀하의 사이트 방문자는 귀하의 참조용이기 때문에 이름을 볼 수 없습니다. 그런 다음 메뉴 만들기 버튼을 클릭할 수 있습니다.

다음으로 접을 수 있는 메뉴에 추가할 페이지를 선택할 수 있습니다. 기본적으로 WordPress는 가장 최근 페이지만 표시합니다. 웹사이트의 모든 페이지 목록을 보려면 모두 보기 탭을 클릭하십시오.

또는 모두 선택을 클릭할 수 있습니다. 이렇게 하면 모든 페이지가 접을 수 있는 메뉴에 추가됩니다.

선택에 만족하면 '메뉴에 추가' 버튼을 클릭하십시오. 게시물, 블로그 카테고리를 선택하거나 사용자 정의 링크를 추가할 수도 있습니다. 자세한 내용은 WordPress에 탐색 메뉴를 추가하는 방법에 대한 가이드를 참조하세요.

메뉴에 다양한 웹페이지를 모두 추가한 후 끌어다 놓아서 이동할 수 있습니다. 이렇게 하면 접을 수 있는 메뉴에 페이지가 표시되는 순서가 변경됩니다.

접을 수 있는 메뉴는 모두 부모-자식 관계에 관한 것입니다.

방문자가 접을 수 있는 메뉴에서 상위 항목을 클릭하면 확장되어 모든 하위 콘텐츠가 표시됩니다.

이 관계를 만들려면 끌어서 놓기를 사용하여 모든 하위 페이지를 상위 페이지 아래에 정렬하기만 하면 됩니다.

그런 다음 각 어린이를 잡고 오른쪽으로 약간 끕니다. 그런 다음 이 페이지를 해제할 수 있습니다. 이렇게 하면 항목을 들여쓰고 자식 페이지로 바꿉니다.

완료되면 변경 사항 저장 버튼을 클릭하는 것을 잊지 마십시오.

이제 이 축소 가능한 메뉴를 WordPress 사이드바에 추가하려고 합니다. 이를 위해 Bellows Accordion이 자동으로 생성하는 단축 코드를 사용합니다.

단축 코드를 얻으려면 모양 » 벨로우즈 메뉴 로 이동하십시오. 아직 선택하지 않은 경우 모두 표시 탭을 선택했는지 확인합니다.

이제 모든 코드를 강조 표시해야 하는 Shortcode 상자를 클릭할 수 있습니다. 이제 Command + c 또는 Ctrl + c 키보드 단축키를 사용하여 이 코드를 복사합니다.

다음 단계는 이 단축 코드를 위젯에 붙여넣는 것이므로 Appearance » Widgets 로 이동하십시오. 이것은 현재 테마 내의 모든 위젯 영역을 표시합니다. 표시되는 옵션은 다를 수 있지만 대부분의 최신 WordPress 테마에는 사이드바가 있습니다.

사이드바 영역을 찾으면 클릭하십시오. 이제 이 섹션이 확장됩니다.

블록을 추가하려면 + 아이콘을 클릭하고 Shortcode 입력을 시작합니다. 표시되면 Shortcode 블록을 선택하십시오.

이제 접을 수 있는 메뉴 단축 코드를 이 블록에 붙여넣기만 하면 됩니다. 메뉴를 게시하려면 화면 상단의 업데이트 버튼을 클릭해야 합니다.

이제 사이트를 방문하면 접을 수 있는 새로운 사이드바 메뉴가 표시됩니다.

Bellows Accordion 플러그인을 사용하면 이 기본 메뉴를 매우 쉽게 사용자 지정할 수 있습니다. 예를 들어 사이트의 브랜딩을 더 잘 반영하기 위해 색 구성표를 변경할 수 있습니다.

기본 메뉴를 조정하려면 WordPress 대시보드에서 모양 » 벨로우즈 메뉴 로 이동하면 됩니다.

이 메뉴에는 접을 수 있는 메뉴를 사용자 지정하는 데 필요한 모든 설정이 있습니다. 탐색할 설정이 많이 있습니다. 그러나 기본 구성 » 기본 구성 으로 이동하여 시작할 수도 있습니다.

여기에서 여러 가지 메뉴 색상 간에 전환할 수 있습니다. 방문자가 아코디언 접기 설정을 사용하여 한 번에 여러 하위 메뉴를 확장할 수 있는지 여부를 선택할 수도 있습니다.

메뉴의 정렬 및 너비를 변경하려면 '레이아웃 및 위치' 탭을 클릭하세요.

변경 사항을 실시간으로 미리 보려면 WordPress Customizer에서 축소 가능한 사이드바 메뉴를 편집할 수 있습니다. 이렇게 하려면 모양 » 사용자 정의 로 이동하십시오.

왼쪽 막대에서 벨로우즈를 선택합니다.

여기에서 접을 수 있는 사이드바에 대한 다양한 설정을 찾을 수 있습니다. 여기에는 너비, 정렬 및 사이드바 메뉴의 색상 변경이 포함됩니다.

이 기사가 WordPress에서 접을 수 있는 사이드바 메뉴를 만드는 방법을 배우는 데 도움이 되었기를 바랍니다. 또한 웹사이트 방문자를 추적하는 방법에 대한 가이드와 트래픽 증가를 위한 최고의 푸시 알림 소프트웨어를 살펴볼 수 있습니다.

이 기사가 마음에 들면 WordPress 비디오 자습서용 YouTube 채널을 구독하십시오. Twitter와 Facebook에서도 찾을 수 있습니다.