WPBOX 사이트의 탑 메뉴 설정 방법

로그아웃시 화면

2016년 현재 Wpbox 사이트의 메뉴구조 중 최상단에 있는 탑 메뉴는 우커머스의 기본 페이지와 로그인/아웃시 메뉴가 나타나는 것을 조정해 주는 플러그인을 이용해서 만들었습니다.

먼저 로그인하지 않은 상태의 외부 모습은 아래의 이미지(그림1)와 같습니다.

로그인을하거나 회원가입을 하라는 버튼이 표시되고,
버튼을 누르면 로그인과 회원가입이 동시에 보이는 화면(그림2)입니다.

이 화면은 우커머스의 기본 my-account 화면에 회원가입을 동시에 표시하는 설정을 해 놓은 것(그림3)입니다.

로그인 시 화면

이 상태에서 로그인하거나 회원가입을 하게 되면, 상단 탑 메뉴 디스플레이는 다음(그림 4)과 같습니다.

워드프레스 메뉴 설정

각 메뉴의 설정 상태를 직접 워드프레스 메뉴 화면에 들어가서 보면 다음(그림5)과 같고,

내부의 설정을 펼치면 (그림 6)과 같습니다.

모든 메뉴가  로그인했을 때와 로그아웃했을 때에 따라서 나타나고 사라지게 하는 것은 “Nav Menu Roles” 플러그인을 이용했습니다.
이 플러그인을 이용해서 로그아웃 했을 때  1~4번은 사라지고,  5번(로그인/회원가입)이 나타나게 합니다.

로그인에 성공했을 때는  1~4번이 나타나고, 5번은 사라집니다.

(6번은 항상 반응형 디스플레이가 800px 이하가 되면 나타납니다. 아래에 설명)

상세설명

1번 “나의 강의”는 Wpbox의 상품 중 강의를 선택한 것이 있으면 모든 강의 리스트가 나타나는 페이지이며 로그인 한  사용자에게만 나타나게 했습니다.

2번 “나의계정”은 Wpbox에서 구매한 모든 목록과 나의 주소, 연락처등 구매의 기본정보를 수정할수 있는 페이지이고, 우커머스가 기본 제공하는 my-account 화면입니다.
이 화면은 로그인한 사용자와 로그아웃한 사용자에게 보여주는 화면이 다른데, 로그인한 사용자를 위한 메뉴를 만들어서 “나의 계정”이라 이름 붙이고, 로그인 했을때만 나타나게 했습니다.

3번 “판매자관리”는 Wpbox 사이트만의 특성 중 하나인 누구나 셀러가 되어 본인의 샵을 관리하는 메인 화면이며, 셀러가 아닌 회원에게는 셀러가입 동의문이 나타나고, 셀러인 회원에게는 관리 화면이 나타납니다. 로그인한 사용자를 위한 메뉴이므로, 로그인 했을때만 나타나게 했습니다.

4번 “로그아웃”은 링크를 통한 다이렉트 로그아웃 버튼이고, 우커머스의 my-account 화면의 엔드포인트로 링크 주소를 “https://wpbox.kr/my-account/customer-logout/”로 넘겨주면 링크 클릭 시 로그아웃 됩니다. 로그인 한 사용자를 위한 메뉴이므로, 로그인했을 때만 나타나게 했습니다.

5번 “로그인/회원가입” 은 로그아웃한 사용자에게 나타나는  버튼이며 우커머스 my-account 화면의 로그아웃 시 나타나는 디스플레이 입니다. 위에서 설정한 “나의 계정”과 같은 페이지를 사용하고, 페이지의 제목이 “나의 계정”이므로 이 화면에서는 페이지의 제목이 나타나지 않도록 CSS 처리했습니다.

6번은 메뉴 안에 위젯을 넣을 수 있는 플러그인인 “widget in menu for wordpress” 를 이용해서 만든 메뉴이고, 평상시에는 나타나지 않으며, 모바일을 이용할때 (디스플레이 의 크기가 800px 이하가 될 때) 로그인/아웃에 상관없이 나타나는 메뉴(그림7) 입니다. 현재 사용 중인 아바다 테마의 탑 메뉴 내에 검색기 위젯을 위치시키기 위해서 사용한 편법입니다.
이 검색기는 테마의 기본 검색기능이 아닌 구글 맞춤검색을 이용한 검색기 이며, 원래 위젯으로 제공되어 사이드바 안 에 있지만 반응형 디스플레이에서 사이드 바 안에 있는 것은 한참 아래로 뒤처지기 때문에, 이 검색기를 최상단에 나타나게 하려고 이 방법을 썼습니다.

결론

로그인과 로그아웃시 나타나야 할것을 선별해서 “Nav Menu Roles”플러그인으로 처리하였고, 우커머스 my-account 화면이 사용자의 로그인/아웃에 따라서 달라지는 것을 이용해서 반복 해 사용했습니다.

글쓴이 : 이명성
WPBOX.KR 운영자
AVADA.KR 운영자
EnnioLove.com 운영자
Facebook
everygofine@gmail.com

카테고리 WPBOX태그 nav menu roles, Widgets in Menu, wpbox, 구글맞춤검색, 메뉴구성, 탑 메뉴, 플러그인