홈페이지를 운영하다 보면 새 페이지를 만들었는데 상단 메뉴에는 보이지 않아 당황하는 경우가 많습니다. 워드프레스에서 페이지 생성과 메뉴 등록은 별개의 작업이기 때문입니다. 메뉴는 코드 수정 없이 관리자 화면에서 몇 분이면 바꿀 수 있으니 순서대로 따라와 보세요.

메뉴 편집 화면 찾아가기

관리자(도메인 뒤에 /wp-admin)로 로그인한 뒤 외모 > 메뉴로 들어갑니다. 테마에 따라 ‘외모 > 사용자 정의하기 > 메뉴’에서 미리보기를 보며 편집할 수도 있습니다. 화면 왼쪽에는 추가할 수 있는 페이지·글·카테고리 목록이, 오른쪽에는 현재 메뉴 구조가 보입니다. 메뉴가 여러 개라면 상단의 ‘편집할 메뉴 선택’에서 주 메뉴(Primary)를 먼저 고르세요.

메뉴 항목은 7개 안쪽으로 유지하고 드롭다운은 2단계까지만 쓰는 편이 안전합니다. 끌어서 순서를 바꾼 뒤에는 저장 버튼을 눌렀는지 꼭 확인하세요. 저장 없이 화면을 닫아 변경이 날아가는 일이 의외로 잦습니다.

페이지 추가와 순서 변경

왼쪽 ‘페이지’ 박스에서 원하는 페이지에 체크하고 메뉴에 추가를 누르면 오른쪽 구조 맨 아래에 붙습니다. 순서는 항목을 마우스로 끌어서 위아래로 옮기면 끝입니다. 외부 링크나 네이버 블로그처럼 사이트 밖 주소를 넣고 싶다면 ‘사용자 정의 링크’에 URL과 메뉴 이름을 입력해 추가하면 됩니다. 워드프레스 메뉴 구조가 처음이라 용어가 낯설다면 워드프레스란 무엇인지 정리한 글(자세히 보기)을 먼저 읽어보시면 전체 그림이 잡힙니다.

하위 메뉴(드롭다운) 만들기

‘회사소개’ 아래에 ‘인사말’, ‘오시는길’을 넣고 싶다면 해당 항목을 끌어서 상위 항목보다 오른쪽으로 한 칸 들여쓰기 하면 됩니다. 저장 후 사이트에서 마우스를 올리면 드롭다운으로 펼쳐집니다. 하위 메뉴는 2단계까지만 쓰는 것이 좋습니다. 3단계부터는 모바일에서 누르기 어려워 오히려 이탈이 늘어납니다.

저장 전 모바일 메뉴까지 확인하세요

메뉴 설정 화면 하단 ‘메뉴 설정’에서 표시 위치(주 메뉴, 푸터 메뉴 등)를 체크하고 메뉴 저장을 눌러야 반영됩니다. 마지막으로 스마트폰이나 브라우저 창을 줄여 햄버거 버튼(≡)을 눌러보세요. PC에서는 멀쩡한데 모바일에서 메뉴가 겹치거나 안 펼쳐지는 경우가 의외로 많습니다.

※ PC에서 멀쩡한 메뉴도 모바일 햄버거 메뉴에서는 하위 항목이 접혀 안 보이거나 터치가 안 되는 경우가 있습니다. 수정 후에는 스마트폰 실기기에서 직접 눌러보고 마무리하는 습관이 필요합니다.

메뉴 구조만 정리해도 사이트가 한결 정돈되어 보입니다. 직접 만지기 부담스럽거나 테마 문제로 메뉴가 깨진다면 워드프레스 전문 제작사 IDC.KR의 유지보수 서비스(자세히 보기)에 맡겨 주세요. 메뉴 정리부터 정기 점검까지 한 번에 처리해 드립니다.