휴대폰에서 메뉴 버튼을 누르면 오른쪽에서 밀려 나오는 전체 메뉴를 깔끔한 카드형 디자인으로 바꿔 주는 플러그인입니다. 워드프레스 메뉴를 그대로 불러와 2열 카드로 보여 주고, 상담 버튼·대표 전화·카톡 상담·회원 로그인까지 한 화면에 담습니다.
01주요 기능
이 플러그인으로 할 수 있는 일입니다.
- 2열 카드 메뉴
1단계 메뉴를 2열 카드로 촘촘하게 보여 줘 긴 스크롤 없이 한눈에 들어옵니다.
- 하위 메뉴 펼치기
하위 메뉴가 있는 카드를 누르면 한 줄 전체로 넓어지며 하위 메뉴가 2열로 펼쳐집니다. 한 번에 하나만 펼쳐집니다.
- 현재 페이지 표시
지금 보고 있는 페이지의 메뉴가 포인트 색 테두리로 표시되고, 그 메뉴가 펼쳐진 채로 열립니다.
- 알아서 정리되는 메뉴
상위 메뉴 주소가 하위 목록에 없으면 「○○ 전체 보기」를 맨 위에 넣어 주고, 아래 버튼과 같은 주소의 메뉴는 목록에서 뺍니다.
- 상담 버튼 2개
진한 색 주 버튼과 테두리 보조 버튼을 메뉴 아래에 둡니다(예: 견적 상담 신청, 무료 점검).
- 대표 전화 · 추가 전화 · 카톡 상담
대표 전화는 크게 보이고 누르면 바로 전화가 걸립니다. 휴일 상담 번호와 카카오톡 채널 버튼도 함께 둘 수 있습니다.
- 회원 영역
메뉴 위쪽에 로그인/회원가입, 로그인한 회원에게는 「○○님 반갑습니다」와 마이페이지·로그아웃 버튼을 보여 줍니다.
- 손에 익은 동작
오른쪽으로 밀거나 바깥을 누르거나 닫기 버튼으로 닫히고, 열려 있는 동안 뒤 화면은 스크롤되지 않습니다. 같은 페이지 안 링크를 누르면 닫히며 이동합니다.
- 워드프레스 메뉴 그대로
모양 › 메뉴에서 만든 메뉴를 그대로 씁니다. 메뉴를 고치면 모바일 메뉴에도 바로 반영됩니다.
02방문자에게는 이렇게 보입니다
- 위쪽에 로고(또는 사이트 이름)와 둥근 닫기 버튼, 로고가 흰색이면 포인트 색 배경
- 회원 줄: 「로그인하고 더 많은 서비스를 이용하세요」와 로그인·회원가입 버튼
- 1단계 메뉴 2열 카드, 펼친 카드 안에 하위 메뉴 2열 목록
- 주 버튼·보조 버튼 2개
- 대표 전화(큰 번호와 전화 버튼), 추가 전화, 노란 카톡 상담 버튼
- 맨 아래 영문 슬로건과 저작권 문구
03관리자에서 이렇게 설정합니다
코딩 없이 관리자 화면에서 고르고 적기만 하면 됩니다.
- 메뉴 고르기
'DF 모바일 메뉴'에서 '모바일 메뉴 사용'을 켜고, '보여줄 메뉴'에서 모양 › 메뉴에서 만든 메뉴를 고릅니다. 자동 선택이면 이름에 '메인'이 들어간 메뉴를 먼저 씁니다.
- 로고·색 정하기
'로고 이미지 주소'와 '포인트 색상'을 넣고, 로고가 흰색이면 '로고 영역 진한 배경'을 켭니다.
- 회원·버튼·연락처
'회원' 구역에서 로그인·회원가입·마이페이지 주소를, '버튼 · 연락처' 구역에서 주 버튼·보조 버튼 이름과 주소, 대표 전화, 추가 전화, 카카오톡 상담 주소, 하단 문구를 넣습니다.
- 저장 후 휴대폰에서 확인
'설정 저장'을 누르고 휴대폰에서 새로고침해 메뉴 버튼을 눌러 봅니다. 아바다가 아닌 테마는 으로 메뉴 버튼을 넣습니다.
관리자 설정 화면 예시
04설정할 수 있는 항목
관리자 화면에서 바꿀 수 있는 옵션을 모두 정리했습니다.
| 사용 | 끄면 원래 테마(아바다)의 모바일 메뉴가 그대로 열립니다.기본값: 켬 |
|---|---|
| 보여줄 메뉴 | 모양 › 메뉴에서 만든 메뉴 중 하나기본값: 자동 선택 |
| 적용 화면 너비 | 이 너비(px) 이하 화면에서만 작동합니다.기본값: 1024px |
| 포인트 색상 | 현재 페이지 표시, 주 버튼, 전화번호 색입니다.기본값: #1e3a8a |
| 로고 이미지 주소 | 비워 두면 사이트 이름이 글자로 나옵니다.기본값: 비어 있음 |
| 로고 영역 진한 배경 | 로고가 흰색이면 켭니다. 메뉴 위쪽이 포인트 색 배경이 됩니다.기본값: 끔 |
| 메뉴 버튼 선택자 | 어떤 버튼을 누를 때 열지 정합니다. 아바다 오프캔버스 버튼은 기본값 그대로 둡니다.기본값: 아바다 오프캔버스 버튼 |
| 회원 영역 표시 | 메뉴 위쪽에 로그인/마이페이지 버튼을 보여 줍니다.기본값: 켬 |
| 로그인 · 회원가입 · 마이페이지 주소 | 로그인 주소를 비우면 워드프레스 기본 로그인, 회원가입 주소를 비우면 회원가입 버튼이 숨겨집니다.기본값: 비어 있음 |
| 주 버튼 · 보조 버튼 | 버튼 이름과 주소입니다. 이름을 비우면 숨깁니다.기본값: 비어 있음 |
| 대표 전화 | 이름(예: 대표전화)과 번호. 크게 보이며 누르면 전화가 걸립니다.기본값: 대표전화 |
| 추가 전화 | 휴일 상담 번호 등. 비우면 숨깁니다.기본값: 비어 있음 |
| 카카오톡 상담 주소 | 카카오톡 채널 또는 오픈채팅 주소. 비우면 숨깁니다.기본값: 비어 있음 |
| 하단 문구 | 영문 슬로건과 저작권 문구(메뉴 맨 아래 작은 글씨)기본값: © 사이트 이름 |
05페이지에 넣는 방법
원하는 페이지 본문에 아래 숏코드를 붙여 넣으면 됩니다.
아바다가 아닌 테마에서 머리글에 메뉴(햄버거) 버튼을 넣습니다. 누르면 모바일 메뉴가 열립니다.
06추천 대상 · 휴대폰 화면
이런 곳에 알맞습니다
- 테마 기본 모바일 메뉴가 길게 한 줄로 늘어져 보기 불편한 사이트
- 메뉴가 많아 하위 메뉴를 찾기 어려운 회사·기관 홈페이지
- 휴대폰 방문자를 상담 신청·전화로 바로 잇고 싶은 곳
- 아바다(Avada) 테마로 만든 사이트
휴대폰에서는
화면 오른쪽에서 폭의 약 88%(최대 400px)로 밀려 나오는 전체 메뉴입니다. 1단계 메뉴는 2열 카드, 하위 메뉴는 펼친 카드 안 2열 목록으로 보이고, 오른쪽으로 밀면 닫힙니다.
07구매 전에 많이 묻는 질문
아바다 테마가 아니어도 쓸 수 있나요?
됩니다. 아바다는 기존 메뉴 버튼을 그대로 쓰고, 다른 테마는 숏코드로 메뉴 버튼을 넣거나 '메뉴 버튼 선택자'에 테마 버튼을 적으면 됩니다.
PC 화면에도 영향이 있나요?
없습니다. '적용 화면 너비'(기본 1024px) 이하에서만 작동하고, 화면이 넓어지면 저절로 닫힙니다.
메뉴를 따로 다시 만들어야 하나요?
아니요. 모양 › 메뉴에 있는 메뉴를 그대로 불러옵니다. 3단계 이하 메뉴도 하위 목록에 한꺼번에 펼쳐 보여 줍니다.
전화번호나 카톡 버튼은 빼도 되나요?
네. 번호·주소·버튼 이름을 비우면 그 항목은 화면에서 사라집니다.
원래 메뉴로 되돌리려면요?
'사용'을 끄고 저장하면 테마의 원래 모바일 메뉴가 다시 열립니다.
08알아 두세요
- 페이지 편집기(아바다 빌더) 편집 화면에서는 열리지 않습니다.
- 메뉴 항목 순서와 이름은 워드프레스 모양 › 메뉴에서 고칩니다.
- 주 버튼·보조 버튼과 같은 주소의 메뉴 항목은 중복을 막기 위해 목록에서 빠집니다.
