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

현재위치:///WPBOX 사이트의 탑 메뉴 설정 방법

로그아웃시 화면

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

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

wpbox사이트의 로그아웃시 탑 메뉴 모양

그림 1

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

wpbox의 로그인 화면

그림 2

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

wpbox의 로그인 화면을 위한 우커머스 설정

그림 3

로그인 시 화면

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

wpbox 사이트의 로그인 시 나타나는 탑 메뉴 모양

그림 4

워드프레스 메뉴 설정

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

wpbox 사이트의 탑 메뉴 설정

그림 5

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

wpbox 사이트 탑 메뉴의 설정화면 내부

그림 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) 입니다. 현재 사용중인 아바다 테마의 탑 메뉴 내에 검색기 위젯을 위치시키기 위해서 사용한 편법입니다.
이 검색기는 테마의 기본 검색기능이 아닌 구글 맞춤검색을 이용한 검색기 이며, 원래 위젯으로 제공되어 사이드바 안 에 있지만 반응형 디스플레이에서 사이드 바 안에 있는 것은 한참 아래로 뒤쳐지기 때문에 , 이 검색기를 최상단에 나타나도록 하기 위해서 이 방법을 썼습니다.

wpbox의 탑 메뉴 속에 나타나는 구글 맞춤 검색기

그림 7

결론

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

글쓴이 :

6 댓글

  1. gsgs5974 2017년 6월 24일 - 3:14 오후 - 답글쓰기

    아주 유용한 정보인데 도움을 주는 플러그인이 어떤것인지가 나와 있지 않는것 같습니다.
    알려주실수 있으신가요?

    • 이명성 2017년 6월 27일 - 4:13 오후 - 답글쓰기

      글 안에 적혀 있습니다. ^^

      Nav Menu Roles
      widget in menu for wordpress
      우커머스
      등입니다.

  2. baeyoungrye 2016년 2월 10일 - 8:46 오후 - 답글쓰기

    좋은정보 감사합니당!!

    • wpbox 2016년 2월 10일 - 9:54 오후 - 답글쓰기

      고맙습니다. ^^

댓글 쓰기