워드프레스(Wordpress) 5.0.3 메뉴 설정

워드프레스로 블로그나 사이트를 만들때 우리는 메뉴를 구상하고 그것을 바탕으로 카테고리 구성과 페이지 작성을 합니다. 그리고 이것들을 토대로 워드프레스로 메뉴를 실제로 구성합니다.

워드프레스 메뉴 구성의 실제를 알아봅시다.

메뉴 구성 전 홈페이지 화면

Twenty Fifteen 테마 로그인 화면

위 화면은 워드프레스로 메뉴를 구성하기 전 홈페이지의 화면입니다. 보시다시피 메뉴가 존재하지 않습니다. 이 테마는 메뉴가 좌측에 생성됩니다.

워드프레스는 주메뉴와 소셜 메뉴를 지원하고 있습니다. 차례대로 알아보겠습니다.

주메뉴 생성

테마 디자인 - 메뉴 화면에 들어가 위 그림처럼 메뉴 이름을 적고 메뉴 생성 버튼을 눌러줍니다.

위 그림은 메뉴 생성 직후의 기본 화면입니다. 이 상태에서 메뉴를 구성하게 됩니다. 워드프레스가 지원하는 메뉴 구성은 아래와 같습니다.

페이지 / 글 / 사용자 정의 링크 / 카테고리

페이지는 운영자가 방문자에게 일방적으로 제공하는 정보를 담은 웹문서를 뜻합니다. 이것은 주로 무언가를 소개하거나 사이트 이용시 이용자들이 반드시 알아야 하는 내용을 알릴 때 쓰는 형식으로 보통 자주 업데이트 되지 않는 경우에 적절한 형식입니다.

글은 워드프레스로 발행한 글을 메뉴에 적용할 때 씁니다. 페이지와 큰 차이점은 없으나 내용을 자주 업데이트하거나 이전 정보를 남길 필요가 있을 때, 내용 관리를 보다 편하게 하려고 할 때 사용하면 좋습니다.

사용자 정의 링크는 말 그대로 사이트 내외부의 링크를 연결시킬 때 씁니다.

카테고리는 메뉴에 특정 카테고리를 연결할 때 사용합니다. 이것을 사용하려면 카테고리가 이미 존재해야 합니다.

페이지 메뉴 생성

위 그림처럼 페이지 항목에서 모두 보기 탭을 선택하고 필요한 페이지를 선택하고 메뉴 추가 버튼을 눌러줍니다.

그러면 위와 같이 오른쪽 메뉴 구조에 선택한 페이지가 추가된 것을 확인할 수 있습니다. 각 메뉴 항목은 누르면 설정 항목이 펼쳐지고 다시 한번 누르면 접히게 됩니다.

각 메뉴 항목을 모두 펼친 화면입니다.

홈

홈은 페이지에 등록되어 있지만 실제로는 사용자 정의 링크입니다. 메뉴 구조에서 홈 항목을 봐도 자용자 정의 링크로 정의되어 있습니다.

홈은 블로그나 사이트의 홈페이지 즉 기본 도메인 접속 시 나타나는 화면입니다. 홈페이지 주소를 정의해주어 블로그나 사이트 어느 곳에 있더라도 바로 메인화면으로 돌아올 수 있도록 해주는 기능을 합니다.

일반 페이지

내비게이션 라벨은 해당 메뉴의 이름을 정해주는 영역입니다.

글 메뉴 생성

글은 워드프레스로 발행한 글을 메뉴에 추가할 때 씁니다. 모두 보기 탭 항목에서 메뉴에 추가할 글을 선택하고 메뉴에 추가 버튼을 눌러줍니다.

메뉴 구조에 선택한 글이 추가된 것을 확인할 수 있습니다.

사용자 정의 링크 메뉴 생성

사용자 정의 링크는 메뉴에 링크를 추가할 때 씁니다. 여기서는 예시로 티스토리를 추가해봅니다.

티스토리 링크가 메뉴에 추가된 것을 확인할 수 있습니다.

카테고리 메뉴 생성

카테고리를 메뉴에 생성하려면 카테고리를 미리 만들어 두어야 합니다. 추가하고자 하는 모든 카테고리를 선택하고 메뉴에 추가 버튼을 눌러주시면 됩니다.

그럼 모든 카테고리가 메뉴에 추가된 것을 볼 수 있습니다.

카테고리 메뉴 항목을 누르면 위 그림처럼 나타납니다.

메뉴 순서 변경 및 계층 설정

메뉴 순서 변경

순서를 바꾸고자 하는 메뉴를 마우스로 끌어다 위치시키고자 하는 곳에 놓으시면 됩니다. 여기서는 마우스 드래그 앤 드롭으로 티스토리 메뉴를 맨 아래로 위치시켰습니다.

메뉴 계층 설정

카테고리처럼 메뉴에도 계층이 있을 수 있습니다. 메뉴 계층은 아래 그림처럼 만들 수 있습니다

특정 메뉴 하위에 둘 메뉴를 드래그 앤 드롭으로 상위 메뉴 바로 아래에 위치시킨 후, 위 그림처럼 해당 메뉴를 마우스 왼쪽 버튼을 누른 채로 오른쪽으로 끌어다 놓기(드래그 앤 드롭) 하시면 됩니다.

메뉴를 다 추가한 이후 메뉴 설정 영역의 위치 표시 부분에서 주 메뉴 항목에 체크하고  메뉴 저장 버튼을 누른 다음 브라우저의 새창이나 새 탭으로 홈페이지에 접속해봅시다.

방금 구성했던 메뉴가 홈페이지에 표시된 것을 볼 수 있습니다.

상위 메뉴만 나타나네요. 하위 메뉴가 존재한 경우 해당 메뉴 오른쪽에 역삼각형 표시가 나타납니다. 하위 메뉴까지 나타나도록 해봅시다. 하위 메뉴가 있는 메뉴를 눌러주세요.

하위 메뉴까지 잘 표시됩니다.

소셜 메뉴 생성

메뉴 구성 단위를 여러 개 만들 수 있습니다. 우리는 위에서 주메뉴를 만들었으니 이제 소셜 메뉴를 만들어 봅시다.

메뉴 화면 상단에 위 그림과 같은 부분이 있습니다. 새로운 메뉴를 생성하세요. 링크를 눌러줍니다.

주 메뉴를 처음 생성할 때와 같은 화면이 나타납니다. 메뉴 이름을 입력하고 메뉴 생성 버튼을 눌러줍니다.

메뉴 생성 직후의 모습입니다. 주 메뉴 생성 모습과 비슷하죠?

소셜 링크 추가

소셜 메뉴는 주로 블로그나 사이트와 연계되는 사회관계망서비스(SNS)를 연결시키는 기능입니다. 트위터와 페이스북을 연결하는 방법을 알아봅시다.

트위터 연결

여기서는 예시로 국립국어원의 트위터를 연결해봅니다. 사용자 정의 링크에서 SNS 주소와 링크 이름을 적고 메뉴에 추가 버튼을 눌러줍니다.

페이스북 연결

국립국어원의 쉼표 , 마침표. 페이스북을 예시로 연결시킨 후의 모습이비니다.

소셜 링크들을 다 추가한 후, 메뉴 설정 - 위치 표시 영역에서 소셜 링크 메뉴 항목을 체크하고 메뉴 저장 버튼을 눌러줍니다.

그후 브라우저 새창이나 새탭에서 홈페이지에 접속해봅시다.

주 메뉴 아래 소셜 링크들이 생긴 것을 확인할 수 있습니다.

위 그림은 Twenty Fifteen 테마에서 적용된 모습입니다. 다른 테마에서는 어떻게 보이는지 확인해봅시다.

아래는 Twenty Seventeen 테마의 모습입니다.

다음 연재는 이전 연재에서 예고했던 카테고리 순서 변경법입니다.