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

0

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

Non-responsive mobile 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에서 메뉴 아이콘(로고), 색상 등을 조정하시면 사이트 분위기에 맞게 연출이 가능합니다.

*일부 글에 제휴링크가 포함될 수 있습니다.기부를 통해 블로그 운영을 후원하실 수 있습니다.

Related Posts

댓글 남기기