워드프레스 카테고리 상단 노출 및 하위메뉴 설정하기

  • 핀터레스트  공유하기
  • 카카오톡 공유하기
  • 네이버블로그 공유하기
  • 네이버밴드 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • URL 복사하기

이번 글에서는 워드프레스를 운영하면서 카테고리를 만들었을 때, 이 카테고리 설정을 통해 어떻게 상단 네이게이션 바에 노출시킬 수 있는지에 대해 설명을 드릴까 합니다. 그리고 메뉴가 많아졌을 때 상위 메뉴와 하위메뉴 계층을 나눠서 마우스 오버시 드롭다운 방식으로 노출할 수 있게 만드는 법에 대해 알려드리려고 합니다.


만약 워드프레스를 통한 수익형 블로그를 무료로 만들어보길 원하시면, 아래 경로로 쉽게 여러분의 워드프레스를 설치해 보세요. 3일 간 무료 체험을 통해 워드프레스의 매력을 한껏 경험해보실 수 있습니다. 클라우드웨이즈 가입시 워정공에서 드리는 다양한 혜택도 있으니 확인해보세요

카테고리 생성, 만들기

먼저 카테고리를 만드는 법은 어렵지 않습니다. 관리자 창 좌측에 글 밑에 카테고리로 들어가 주세요

카테고리 만들기
카테고리 만들기

새 카테고리 추가는 이곳에서 하시면 됩니다.

  • 이름 : 카테고리의 이름을 설정합니다
  • 슬러그 : 카테고리의 URL을 설정하는 곳입니다. 영문 소문자, 숫자, 하이픈만 포함합니다.
  • 부모 카테고리 : 여기서 하위카테고리의 부모를 설정하실 수 있습니다.
  • 설명 : 노출되는 부분이 별로 없긴 하지만 적어주세요

여기서 부모 카테고리 설정은 글 하단에서 설명드리겠습니다.

카테고리 만들기
카테고리 만들기

자 이런 식으로 작성해주시면 됩니다. 나중에 개별 글에서 발행 시 카테고리를 지정하시면 됩니다. 이후 카테고리를 삭제해도 해당 카테고리에 있던 글은 삭제되지 않습니다. 대신, 삭제된 카테고리에 있던 글은 기본 카테고리 카테고리 없음로 이동합니다. 기본 카테고리는 삭제할 수 없습니다.

글 발행 시 카테고리 지정하기

글 발행 단계에서 카테고리 지정은 우측 글탭 (링크확인) 에서 지정하시면 됩니다.

빠른 편집
빠른 편집

글 발행 이후 카테고리 변경을 하시려면 관리자창 글탭에서 빠른편집을 누르시면 카테고리 변경이 편합니다.

카테고리 변경
빠른편집 카테고리 변경

여기서 카테고리를 설정하다고 페이지 전면에 카테고리 표시가 나타나는 건 아닙니다. 노출은 별개로 설정해야 됩니다.

카테고리 상단 노출 설정하기

메뉴 상단 노출
메뉴 상단 노출

자 그럼 이제 이런 식으로 사이트 상단 네비게이션 바에 메뉴를 설정하고 노출하는 방법을 알려드리겠습니다. 일반적으로 사이트 상단의 네비게이션 바를 GNB라고 하죠. General Navigation Bar 또는 Global Navigation Bar를 줄여서 GNB라고 합니다.

외모
외모 (외모 > 디자인으로 변경)

관리자창 좌측 디자인에서 메뉴로 들어갑니다.

  • 디자인 – 메뉴
메뉴 추가
메뉴추가

자 그럼 이제 크게 메뉴추가와 메뉴 구조가 보이실거에요. 간단하게 설명드리면 좌측에는 상단 메뉴에 추가할 수 있는 종류를 골라서 선택하는 창이고, 우측은 그 위치와 노출명, 상하관계를 설정하는 곳입니다. 즉 왼쪽에서 항목을 선택하기만 하고 실질적인 노출되는 구조는 오른쪽에서 설정한다고 보시면 됩니다.

메뉴추가

그럼 좌측 메뉴추가 부분의 개별 항목 설명을 드려보겠습니다.
페이지 / 글 / 사용자 정의 링크 / 카테고리 이렇게 네 개가 보이죠.

  • 페이지 : 워드프레스에는 기본적으로 글과 다른 페이지 개념(정적 페이지, static page)이 있습니다.
    홈 화면 구성을 하거나, 개별적인 페이지 구성에 쓰입니다. 지금 이 사이트 대문인 워정공 설명서도 페이지로 만들어져 있습니다. 물론 화려한 이미지를 동반한 표지디자인도 제작 가능합니다.
  • 글 : 개별 글도 메뉴로 올릴 수 있습니다. 물론 글의 제목이 길기 때문에 짧게 수정도 가능해요
  • 사용자 정의 링크 : 외부 링크 페이지를 넣어서 메뉴로 뺄 수 있습니다.
  • 카테고리 : 가장 일반적인 형태인 카테고리 입니다. 우측 메뉴구조에서 하위 드롭다운 메뉴를 설정할 수 있습니다.

메뉴 구조

그럼 우측 메뉴 구조를 보겠습니다.

메뉴 구조
메뉴 구조

좌측에서 추가한 아이템들이 우측에 쭈욱 보이게 됩니다. 워정공 설명서 같은 경우는 페이지로 제작이 되어 있는데 글의 제목과 달리 짧게 내비게이션 레이블(노출명)을 설정할 수 있습니다. 지우고 싶으면 제거를 누르시면 되요.

그리고 드래그를 통해서 노출 순서를 정할 수 있습니다.

카테고리 만들기 09

가장 하단의 워프설치서비스 라는 메뉴는 하나의 글을 메뉴로 예시로 가져온겁니다. 노출되는 레이블은 짧게 변경했구요. 이제 어떻게 하는지 이해가 되시죠?

하위 메뉴 드롭다운 설정하기

부모 카테고리 설정

자 그럼 이제 메뉴가 많아졌을 때 하위메뉴 구성하는 방법을 알려드리도록 하겠습니다. 두가지 작업이 필요한데요. 먼저 해야할 것은 좌측 메뉴의 ‘글 – 카테고리 – 카테고리 편집’에서 부모 카테고리를 정하는 겁니다.

  • 글 – 카테고리 – 카테고리 편집
부모 카테고리
부모 카테고리

부모 카테고리를 설정하는 방법은 있었죠. 내가 정한 개념상의 하위카테고리로 들어가서 부모 카테고리를 설정해주시면 됩니다.

하지만 이곳에서 부모테마를 설정한다고 해서 사이트 상단에 자동으로 하위 드롭다운 메뉴가 생기지는 않습니다. 실제로 사이트에서 하위 드롭다운 메뉴가 노출되게 하는 설정은 위에서 설명드린 ‘디자인 – 메뉴 – 우측 메뉴구조’ 에서 하게 됩니다.

여기서 설정하는 ‘부모의 개념’은 내부적으로 페이지 간 관계만 설정하는 곳입니다. 외부에서 크롤링 봇이 사이트를 방문해서 돌아다닐 때, 구조적으로 페이지 간의 상하관계를 알 수 있게 해주는 거죠. 이렇게 정해진 하위메뉴는 나중에 브레드크럼에서 상하관계가 표시됩니다. 1 >> 2 >> 3 이런 식으로 하위의 하위까지 계속 설정해서 표시되는 거죠. 브레드 크럼이 궁금하신 분은 아랫글을 참조해주세요.

하위메뉴 드롭다운 설정하기

그럼 이제 네비게이션 바에서 어떻게 하위메뉴를 구성하는 지 보겠습니다.

우측 메뉴구조 에서 원하는 카테고리를 하나 마우스로 선택해서 살짝 오른쪽으로 드래그 해주세요

하위메뉴 설정
하위메뉴

이런 식으로 오른쪽으로 밀게되면 ‘기초코딩’ 카테고리가 ‘워드프레스’ 카테고리 밑으로 들어가게 표현되는 겁니다.

그리고 다른 예시를 위해 일반 카테고리가 아닌 특정 ‘글’을 메뉴로 추가한 다음에 ‘워드프레스’ 밑에 하위메뉴로 추가해 보겠습니다.

노출페이지
노출페이지

그럼 이런식으로 워드프레스 카테고리 밑에 두개의 메뉴가 더 들어갔습니다.

아가 ‘메뉴추가’ 에서 설명드렸듯이 카테고리, 페이지, 개별 글, 외부링크 까지 네비게이션 바에 맘대로 추가할 수 있다는 걸 보여드린겁니다.

그럼 하위의 2단계 하위메뉴까지 만들면 어떻게 노출이 되는지 한 번 볼게요.

하위메뉴 설정
2단계 하위메뉴 설정

마지막 ‘워프 설치 서비스’를 살짝 마우스 오른쪽 드래그 해서 더 밀어서 저장해보겠습니다.

하위메뉴 설정
하위메뉴 설정

그럼 ‘기초코딩’ 밑으로 ‘워프 설치 서비스’ 설정이 된겁니다.

네비게이션 바에서 마우스 오버를 하게 되면 ‘워드프레스 > 기초코딩 > 워프 설치 서비스’ 순으로 하위메뉴가 드롭다운 형식으로 표시가 됩니다.

하지만 중요한 건 외관상 그렇게 표현된거지, 봇이 인식하는 구조는 위에 설명드린 대로 부모카테고리 설정을 해야 제대로 브레드크럼에서 일치되게 표시된다는 점 기억해주세요. 실제 메뉴에서 노출되는 모습과 브레드크럼이 일치하지 않으면 방문자가 사이트 구조를 봤을 때 뭔가 헷갈리겠죠.

마무리

오늘은 이렇게 카테고리를 설정하고 페이지에서 원하는 대로 노출 세팅하는 방법까지 알려드렸습니다. 워드레스는 이렇게 쉽게 구조 자체를 커스터마이징 할 수 있는 게 가장 큰 장점인 것 같습니다. 원하는 대로 페이지를 멋지게 한 번 꾸며보세요

관련글

‘워드프레스 정보공유’ 사이트 본문 중 제휴링크를 통해 수수료를 제공받을 수 있습니다