서브 메뉴가 있는 브레드크럼(현재 위치 표시) 만들기
워드프레스용 화면 요소 만들기
웹사이트에서 브레드크럼(Breadcrumbs)은 어느 동화책에서 나온 얘기처럼 지나온 길을 표시해 주는 용도로 사용됩니다. 이를 통해 방문자는 현재 페이지가 어느 분류에 속해 있는지도 확인할 수 있고, 상위 페이지로 바로 이동할 수 있는 방법도 얻을 수 있습니다.
여기에 더하여 좀 더 다양한 콘텐츠를 가진 사이트의 경우, 브레드크럼에 서브 메뉴 구조를 더하여 내비게이션의 역할을 추가하여 표시하는 경우도 있습니다.
예를 찾자니 검색이 잘 안 되네요. 완성된 모습을 먼저 예로 보여 드리면, 이런 구조입니다. 만약 5개의 제품군이 있고 그 아래 각각 하위 제품들이 있는 것을 소개하고 싶을 때, 사이트 주 메뉴에서 다시 찾아 들어가는 것보다 현재 보는 게 무엇이고, 같은 분류의 다른 제품은 무엇인지 바로 파악을 할 수 있으면 더 좋을 겁니다.
관련 키워드로 검색을 해 보니 만드는 방법은 잘 안 나오더라고요. 대부분 브레드크럼 하면 일반적인 모양의 거쳐온 경로를 표시하는 것이고, 만드는 방법이 있더라도 이걸 html로 짜 넣는 방식이라 관리를 하는 게 사실 어려워 보였습니다.
쉽게 관리를 하려면 워드프레스에 있는 메뉴로 관리를 해야 할 것인데, 방법이 무엇인가 고민을 좀 해봤습니다. 왜 메뉴로 접근을 했는가 하면, 워드프레스는 기본적으로 wp_nav_menu()라는 함수를 통해 메뉴를 표시하게 되는데, 메뉴를 화면에 준비할 때 html 구조뿐 아니라 바로 이 메뉴가 현재 열린 페이지와 같은지, 하위 자식 메뉴가 있는지 등의 정보를 클래스명들로 포함을 해 주기 때문입니다. 그러면 이 클래스명으로 css 정의를 해서 다른 모양으로 표시를 한다던지 이어서 응용을 할 수 있는 것이죠. 페이지의 상태와 메뉴 구조를 연동하는 것을 만약 직접 해야 했다면 저도 더 진행하긴 어려웠을 겁니다.
과연 저 메뉴를 무슨 방법으로 가공을 해야 하위 메뉴가 열리는 브레드크럼이 될 수 있을 것인가?
고민 중 떠오른 방법은 현재 위치 표시를 위한 별개의 구조가 있으면 되겠구나 싶었습니다. 이용하는 테마에 페이지 빌더가 있어서 저는 이렇게 구성해서 표시를 해 봤습니다.
1. 현재 위치 표시를 위한 바 만들기
가로로 세 칸의 버튼 형태의 구조를 하나 추가합니다. 그 아래에는 '외모>메뉴'에서 만든 메뉴가 표시되는 요소를 하나 추가했습니다. (이 메뉴는 최종 현재 위치 바에 표시될 리스트를 만들기 위한 용도로만 쓰임)
2. 현재 위치 바 글자를 현재 열린 페이지의 메뉴 텍스트로 바꾸기
다음으로 필요한 건 현재 열린 페이지가 일치하는 메뉴의 이름을 두 번째 세 번째 요소에 넣는 작업입니다. jQuery를 이용하면 클래스명 조합으로 요소를 선택해서 가공을 할 수 있는 방법이 있습니다. 그래서 두 번째, 세 번째 요소에 이름을 지어주고, 그곳의 텍스트를 만약 메뉴 중에 현재 위치로 체크된 게 있다면 글자를 복사해다가 교체를 했습니다. (※ 딱 생각되는 논리 순서대로 적은 것이니 참고하여 더 정리하셔도 될 거 같아요.)
선택자로 요소를 찾아간 다음, 거기서 글자( .text() )를 복사해서 현재 위치용 요소의 글자를 바꾼다로 요약됩니다.
3. 메뉴 클래스명을 활용하여 현재 위치와 관련된 부분만 떼어 리스트 만들기
1) 세 번째 현재 위치 표시 아래의 메뉴 리스트 만들기
먼저 현재 위치 바에서 세 번째 칸에 리스트를 붙이고자 할 때에는 세 가지의 경우의 수가 있었습니다.
1) 하위 메뉴에 있는 페이지가 열려서, 하위 메뉴에 'current-menu-item' 클래스명이 있고, 부모 메뉴에 'current-menu-ancestor'가 있는 경우
2) 부모 메뉴에 있는 페이지가 열려 있어서 'current-menu-item'이 부모 메뉴에 있지만, 그 아래 자식 메뉴도 가지고 있는 경우
3) 하위 메뉴가 없는 부모 페이지만 있는 메뉴. 이때에는 세 번째 표시 부분은 없어도 됨
서브 메뉴를 가지고 필요한 리스트를 만들어 원하는 곳에 붙였다면, 이제 하위 메뉴들은 필요가 없어서 맨 마지막 줄을 통해 모두 삭제합니다.
2) 두 번째 현재 위치 표시 아래의 메뉴 리스트 만들기
3-1)에서 자식 메뉴들이 모두 제거가 되었으니, 남은 것들 그대로를 가져다 붙이면 되겠습니다.
결론은, 1) 2)를 거치면 이렇게 현재 위치 바의 각 텍스트 요소 아래로 ul 리스트가 붙게 되는 겁니다.
4. 마우스를 올렸을 때 메뉴가 나오는 동작 추가
마우스를 올렸을 때에만 메뉴가 보이는 동작을 하려면, jQuery의 .hover() 이벤트 체커를 이용하면 됩니다. css로 기본적으로 메뉴 리스트들이 안 보이게 처리한 다음, 마우스를 올렸을 때, 'on'이라는 클래스를 추가했다 빼는 동작을 추가하여 화면에 보이고 안 보이고를 처리할 수 있습니다.
.breadcrumbs-menu-sub { display:none; }
.breadcrumbs-menu-sub.on { display:block; }
완성된 모습은 여기서 참고해 보세요.
> https://oks-dev.tk/wpcomponent/qna/ask-a-question/
적었던 스크립트는 여기에 적어 놨습니다.
> https://oks-dev.tk/wpcomponent/custom-breadcrumbs/
하위 메뉴가 열리는 브레드크럼을 제작하는 방법을 한 번 소개해 봤습니다.
핵심이라면, 일단 워드프레스의 기본 '외모>메뉴'에서 메뉴들을 관리해야 한다는 점이고(그래야 현재 열린 페이지를 알아서 체크해 줌), 경우의 수 처리 및 메뉴를 떼어다 리스트를 만드는 부분은 jQuery로 해결이 가능하다는 점입니다.
브레드크럼의 모양은 디자인적으로 css를 꾸미면 되는 부분이라 소개에서 생략을 했고요.
비슷한 구조가 필요하신 경우 한 번 적용 방법을 참고해 보시면 좋겠습니다.
끝.
