워드프레스

WordPress 메뉴 만들기 — 헤더·푸터·모바일 메뉴 설계

  • 언웹스
  • 업데이트
  • 6분 분량
목차
  1. 메뉴 vs 블록 메뉴
  2. 메뉴 만들기 — 5단계
  3. 1. 메뉴 페이지 진입
  4. 2. 메뉴 이름 정하기
  5. 3. 메뉴 항목 추가
  6. 4. 메뉴 항목 순서·계층
  7. 5. 메뉴 위치 지정
  8. 메뉴 항목 옵션
  9. 옵션이 안 보이면
  10. 외부 링크 추가
  11. 카테고리 메뉴 — 동적
  12. 메뉴 위치별 활용
  13. Primary Menu (헤더)
  14. Footer Menu
  15. Mobile Menu
  16. 메뉴 디자인 — 자식 테마
  17. 모바일 햄버거 메뉴
  18. 메가 메뉴 — 큰 사이트용
  19. 사이트맵 메뉴
  20. 권한·접근 제어
  21. 다국어 메뉴
  22. SEO 영향
  23. 좋은 메뉴 = SEO 좋음
  24. 안 좋은 메뉴 = SEO 나쁨
  25. 정기 점검 (월 1회)
  26. 자주 하는 실수
  27. FAQ
  28. 관련 가이드

WordPress 메뉴는 사이트 어디든 자유롭게 배치할 수 있는 네비게이션 시스템입니다. 헤더·푸터·사이드바·모바일 등 여러 위치에 다른 메뉴 운영 가능. 사용자 경험을 좌우하는 핵심 요소.

메뉴 vs 블록 메뉴

WordPress 6+부터 두 시스템 공존:

클래식 메뉴 (Menus) 블록 메뉴 (Navigation Block)
위치 외모 > 메뉴 사이트 편집기 (FSE 테마)
호환 모든 테마 블록 테마만
편집 GUI 위주 블록 에디터처럼

본 가이드는 클래식 메뉴 중심. 대부분 테마가 이걸 사용.

메뉴 만들기 — 5단계

1. 메뉴 페이지 진입

좌측 메뉴 외모 > 메뉴.

2. 메뉴 이름 정하기

내부 관리용 (사용자에게 표시 X). 예: 주 메뉴, 푸터 메뉴, 모바일 메뉴.

3. 메뉴 항목 추가

좌측 패널에서 추가 가능한 항목:

  • 페이지: 사이트 페이지 직접 선택
  • 글: 특정 글 링크
  • 사용자 정의 링크: 외부 URL
  • 카테고리: 카테고리 페이지
  • 태그: 태그 페이지

각 항목 체크 → 메뉴에 추가.

4. 메뉴 항목 순서·계층

드래그 앤 드롭으로 순서 변경.

들여쓰기로 하위 메뉴(드롭다운):

회사 소개
  └ 비전
  └ 팀 소개
  └ 연혁

5. 메뉴 위치 지정

테마에 따라 사용 가능 위치 다름. 흔한 위치:
– Primary Menu: 헤더
– Footer Menu: 푸터
– Mobile Menu: 모바일 전용 (테마 지원 시)
– Top Bar Menu: 상단 바

체크 후 저장.

메뉴 항목 옵션

각 항목 클릭 → 펼침:

  • 네비게이션 라벨: 표시 이름
  • 타이틀 속성: 마우스 호버 시 툴팁
  • 링크 대상: 같은 창 / 새 창
  • CSS 클래스: 디자인 커스텀 (자식 테마에서 정의)
  • 링크 관계 (XFN): SEO/소셜 메타
  • 설명: 메뉴 아래 보조 텍스트 (테마 지원 시)

옵션이 안 보이면

상단 화면 옵션 → 고급 메뉴 속성 체크.

외부 링크 추가

좌측 패널 사용자 정의 링크:
– URL: https://blog.unwebs.co.kr
– 링크 텍스트: 블로그
– 메뉴에 추가

외부 사이트도 자유롭게.

카테고리 메뉴 — 동적

카테고리를 메뉴에 추가 → 카테고리 아카이브로 연결.

주메뉴
├─ 홈
├─ 회사 소개 (페이지)
├─ 서비스 (페이지)
├─ 공지사항 (카테고리: news)
├─ 블로그 (카테고리: blog)
└─ 문의 (페이지)

블로그 카테고리에 새 글 발행 시 자동으로 메뉴에서 도달 가능.

메뉴 위치별 활용

Primary Menu (헤더)

  • 가장 자주 보임
  • 5~7개 핵심 항목 권장
  • 너무 많으면 모바일에서 어수선
  • 보조 정보
  • 개인정보 처리방침, 이용약관, 사이트맵 등
  • 회사 정보·연락처

Mobile Menu

  • PC와 다른 우선순위 가능
  • 검색·계정·전화 같은 즉시 액션
  • 햄버거(≡) 아이콘으로 접힘

메뉴 디자인 — 자식 테마

CSS 커스텀:

/* 메인 메뉴 */
#primary-menu li a {
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* 활성 메뉴 항목 */
.current-menu-item a {
  color: #2563eb;
}

/* 드롭다운 메뉴 */
.sub-menu {
  background: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

각 메뉴 항목에 CSS 클래스 부여하면 개별 디자인 가능 (예: 강조 CTA 버튼).

모바일 햄버거 메뉴

대부분 모던 테마가 모바일 자동 햄버거. 없으면:

플러그인:
– WP Mobile Menu — 모바일 전용 메뉴 + 햄버거
– Max Mega Menu — 메가 메뉴 + 모바일 지원

메가 메뉴 — 큰 사이트용

카테고리·상품이 많으면 일반 드롭다운 부족. 메가 메뉴는 여러 컬럼·이미지·서브 카테고리.

플러그인 Max Mega Menu 또는 WP Mega Menu.

작은 사이트엔 오버킬. 메뉴 항목 30개+ 일 때만.

사이트맵 메뉴

방문자용 사이트맵 페이지 (SEO sitemap.xml과 별개):

페이지 만들기 → 모든 카테고리·페이지 링크 정리 → 푸터 메뉴에 추가.

자동 생성하려면 플러그인 Simple Sitemap 사용.

권한·접근 제어

특정 메뉴를 로그인한 회원에게만 표시:

플러그인 Nav Menu Roles — 사용자 역할별 메뉴 표시 조절.

활용:
– 로그인 안 한 사용자: 로그인·회원가입
– 로그인 회원: 내 계정·로그아웃
– 관리자만: 관리자 패널 링크

다국어 메뉴

다국어 사이트 (WPML·Polylang):
– 언어별 다른 메뉴 운영
– 동일 메뉴를 언어 자동 전환

SEO 영향

좋은 메뉴 = SEO 좋음

  • 사이트 구조 명확히 → 크롤러가 잘 발견
  • 모든 중요 페이지가 메뉴에서 도달 가능
  • 앵커 텍스트가 키워드 (자연스럽게)

안 좋은 메뉴 = SEO 나쁨

  • 메뉴 너무 많아 어디가 중요한지 불분명
  • 핵심 페이지가 깊이 3단계 이상
  • 메뉴에 키워드 박제 ("수원 이비인후과 예약 수원 인계동")

정기 점검 (월 1회)

  • 죽은 링크 확인 (404 페이지)
  • 신규 페이지 메뉴 추가 검토
  • 사용자 행동 분석 (어떤 메뉴를 안 누르는지)

실전 노트. 저희도 최근 서비스 안내 페이지 두 개를 한 페이지의 앵커 섹션으로 통합하면서, 옛 주소는 301로 새 위치에 연결하고 사이트맵에서 제외하는 것까지 마친 뒤에야 메뉴를 정리했습니다. 메뉴에서 지우는 것은 시작일 뿐입니다. 옛 URL의 뒤처리(리다이렉트·사이트맵·내부 링크)까지가 삭제 작업의 끝입니다.

자주 하는 실수

  • 메뉴 항목 너무 많음: 5~7개 핵심만
  • 계층 3단계+: 사용자가 길을 잃음
  • 위치 지정 안 함: 메뉴 만들고 위치 지정 안 해 표시 X
  • 저장 안 누름: 메뉴 편집 후 반드시 메뉴 저장 클릭
  • 모바일 미고려: PC에선 잘 보이지만 모바일 햄버거에서 어수선

FAQ

Q. 메뉴를 만들었는데 사이트에 안 보입니다.
A. 메뉴 위치 지정 안 한 경우 흔함. 외모 > 메뉴 > 메뉴 설정에서 위치 체크 후 저장.

Q. 메뉴 항목에 아이콘 넣고 싶습니다.
A. 테마가 지원하면 옵션. 아니면 플러그인 Menu Icons 또는 CSS로 직접 (각 항목에 CSS 클래스 부여 → before 가상요소).

Q. 사이드바 메뉴를 만들 수 있나요?
A. 가능. 외모 > 위젯에서 메뉴 위젯 추가 → 사이드바에 메뉴 표시.

Q. 특정 글에서만 다른 메뉴 표시?
A. 플러그인 Menu Items Visibility Control — 페이지·역할별 메뉴 항목 표시 제어.

Q. 메뉴 깊이 4단계 가능?
A. 기본 가능하지만 권장 X. UX·SEO 양쪽에 안 좋음. 3단계 이내.

관련 가이드

이 가이드가 도움이 되셨다면

홈페이지 제작·SEO 상담을 받아보세요

3분 문의접수로 무료 상담을 받아보실 수 있습니다.

프로젝트 문의 서비스 자세히 보기