워드프레스에 모바일용 메뉴 추가하기(WP Responsive Menu)

최근 워드프레스 테마는 대부분 반응형으로 제작되어 나오고 있고 모바일용 메뉴도 함께 추가되어 있는 경우가 많습니다. 모바일 기기에서 메뉴가 원하는대로 표시되지 않거나 반응형이 아닌 경우 워드프레스 모바일용 메뉴 추가 플러그인을 사용할 수 있습니다.

워드프레스 아바다 테마 모바일 내비게이션
아바다 테마에는 모바일용 내비게이션을 설정할 수 있다.

워드프레스 모바일 메뉴 플러그인 WP Responsive Menu

WP Responsive Menu라는 플러그인을 사용하여 모바일용 메뉴를 추가할 수 있습니다.

워드프레스 모바일 메뉴 플러그인

위 스크린샷은 Vantage라는 테마를 모바일 기기에서 봤을 때의 모습입니다. 반응형인 것 같긴 한데, 메뉴가 많아질 경우 위의 그림과 같이 별로 보기가 좋지 않네요.

WP Responsive Menu 플러그인을 사용하여 모바일에서는 위 메뉴를 새로운 반응형 메뉴로 대체해 보겠습니다. 먼저 WP Responsive Menu 플러그인을 설치합니다.WP Responsive Menu 플러그인 - 워드프레스 모바일 메뉴 추가

설치한 후에 알림판에 WPR Menu라는 새로운 항목이 추가됩니다.WPR Menu - 워드프레스 모바일 메뉴 플러그인

Genearl Settings[일반 설정] 탭에서 모바일 기기에 표시될 메뉴를 선택합니다(아래 그림에서 (2)).
General Settings

Menu Appearance[메뉴 모양]에서 각종 설정을 변경할 수 있습니다.
WP REsponsive Menu Menu Appearance

이제 메뉴가 어떻게 바뀌었는지 살펴볼까요?
Responsive WordPresss menu

상단에 새로운 메뉴가 생겼음을 볼 수 있습니다. 그런데 약간 문제가 있네요. 기존 메뉴가 그대로 있네요. 이것을 모바일에서 없애주어야 합니다. 방법은 CSS를 통해서도 가능하지만 WP Responsive Menu 플러그인의 설정에서 가능합니다. 그 방법을 살펴보겠습니다.
모바일에서 워드프레스 메뉴 숨기기
위와 같이 요소 검사를 실시하여 메뉴에 적용되는 요소를 확인합니다. 이 경우 menu-menu-1-container 클래스이네요. (menu-menu-1 ID도 관계 없습니다.) 그러면 이 요소를 General Settings에 입력하면 됩니다.
Element to hide in Mobile Device

위 화면에서 Elements to hide in mobile: 아래의 입력 창에 .menu-menu-1-container(또는 #menu-menu-1도 무관)를 입력하고 저장합니다. 다시 모바일 화면을 볼까요?
Responsive Moible Menu Plugin in WordPress Final screen
이제 이전 메뉴가 없어졌음을 볼 수 있습니다. (이전 메뉴 옆에 있던 검색 상자 부분은 없어지지 않았습니다. CSS를 통해 없애거나 적당히 조정하시면 되겠습니다.) 메뉴 옆의 아이콘을 클릭해보면Mobile Menu plugin for WordPress
위와 같이 나타납니다. 여기서는 기본 레이아웃을 바꾸지 않았지만 Menu Appearance에서 메뉴 아이콘(로고), 색상 등을 조정하시면 사이트 분위기에 맞게 연출이 가능합니다.

마치며

이상으로 테마에서 모바일용 메뉴를 제공하지 않는 경우 사용할 수 있는 워드프레스 플러그인에 대해 살펴보았습니다.

메뉴를 만들 때 너무 복잡하게 만들지 말고 꼭 필요한 메뉴 항목만 추가하는 것이 좋습니다. SEO에 유리한 메뉴에 대해서는 다음 글을 참고해보시가 바랍니다.

참고:


9개 댓글

  1. 혹시 GeneratePress 테마 서브 메뉴 백그라운드 색상을 적용 하려는데 요소명 아시나요? 개발자 도구를 봐도 알 수가 없네요.

      1. 명절 연휴에 수고가 많습니다. 나날이 발전하시는 것 같네요.
        유료 버전을 사용하면 쉽게 컬러 설정이 가능합니다😁😁😁

        가족과 친지들과 즐겁고 행복한 설 명절 연휴 보내시기 바랍니다.

      1. GeneratePress 유료 버전은 데스크톱과 모바일의 메뉴 색상을 다르게 설정할 수 있나요?

  2. 안녕하세요.

    뉴스페이퍼 테마에선 요소값이 뭘까요?...
    아무리 찾아보고 적용해도 모르겠습니다.ㅜㅜ

    1. 워드프레스 뉴스페이퍼 테마의 경우 다음 요소를 추가하여 테스트해보시겠어요?

      #td-top-mobile-toggle

      테스트를 해보지 않았기 때문에 제대로 작동할지는 모르겠습니다. 잘 안 되는 경우 알려주시면 시간이 될 때 테스트해보겠습니다.

댓글 남기기

* 이메일 주소는 공개되지 않습니다.