지난 3개의 블로그 포스팅을 통해 사이트 설치, 데모 버전 설치, 페이지 수정, 원하는 섹션 추가 기능을 살펴보았다. 이번 편에서는 메뉴 구성에 대한 설명과 어떻게 메뉴를 설정하는지 다루어 보고자 한다. 이번 블로그를 통해서 원하는 메뉴를 구성하고, 어떻게 메뉴를 원하는 페이지와 연결하여 클릭 시에 해당 페이지로 이동할 수 있도록 하는지 작성하겠다.
메뉴를 설정하는 원리
위에서도 언급했지만, 워드프레스에서 메뉴를 설정하고 연결하는 방법은 원하는 메뉴를 먼저 만들고 해당 메뉴에 미리 만들어둔 페이지들을 연결하는 방식으로 진행된다. 사실 꼭 페이지에 연결하지 않아도 된다. 만약 메뉴를 클릭했을 때, 이미 만들어둔 페이지가 아니라 외부에 있는 다른 사이트와 연결하고자 한다면 페이지와 연결하는 대신에 외부 링크를 메뉴 설정 시에 입력하여 해당 링크로 이동하게도 할 수 있다. 그럼 이제 어떻게 메뉴를 구성하는지 알아보자
메뉴 구성 1단계
Apperance 메뉴로 이동하면 하단 텝에 Menus 라는 탭이 있다. 여기가 메뉴를 변경하고 수정할 수 있는 곳이다. 여기있는 메뉴를 변경하게 되면 실제로 사이트에서 보여지는 메뉴가 변경된다. 메뉴가 어떻게 구성되어 있는지 먼서 소개하도록 하겠다.
워드프레스로 만들어지는 웹사이트는 메뉴라는 개념이 단순히 웹사이트에 들어갔을 때 가장 상단에 보이는 메뉴만을 뜻하지 않는다. 여러가지 테마를 가지고 웹사이트를 만들다보면 상단 메뉴, 푸터, 사이드 바까지 굉장히 많은 메뉴를 가지고 있는 테마들이 있다. 그렇다면 어떤 메뉴가 방문자들이 웹사이트를 방문했을 때 가장 먼저 상단에 보여지는 메뉴이고, 어디서 수정을 해야하는지 헷갈리는 경우가 있다. 그럴 때 위의 이미지 처럼 메뉴 탭에서 상단에 빨간 박스로 표시해둔 부분을 확인한다. 그럼 Main-menu 라고 표시되어 있는 항목이 있다. 바로 그 항목이 우리가 일반적으로 생각하는 메뉴이다. Phlox 테마의 경우, 처음 메뉴 탭에 들어가면 필자는 footer-menu 라는 항목이 가장 먼저 보여졌다. 처음 워드프레스로 작업을 하는 초보자라면 메뉴 탭에 들어왔는데, 기본적으로 하단에 보여지는 메뉴로 보여지는 구성이 메인 화면의 메뉴와 다른 것을 발견하고 당황스러울 수 있다. 이럴 때 바로 위에 이미지에 빨간 표시가 된 메뉴 선택 탭을 통해 메인 메뉴를 선택해 주면 된다. 메인 메뉴 선택 후에는 그 옆에 있는 select 라는 버튼 클릭을 통해 수정할 메뉴를 변경해준다.
메인 메뉴 변경
메인 메뉴를 선택해서 select 버튼을 클릭해주면 하단에 보이는 박스들이 있다. 이 박스에 보이는 메뉴를 잘 보면 지금 제작하고 있는 사이트에 들어갔을 때 상단에 보여지는 메뉴와 동일한 텍스트이고, 순서도 똑같은 것을 확인할 수 있다. 메뉴를 구성하는 방법은 생각보다 간단하다. 우선 페이지 기준으로 메뉴를 만들 수도 있다. 좌측 빨간 표시가 된 박스를 확인하면 Pages, Posts, Custom Links, Categories 등으로 나눠진 드롭다운 메뉴가 보인다. 지금 상단 예시 이미지에서는 Page가 선택이 되어 있는데, 여기서 원하는 페이지를 선택하여 Add to Menu 버튼을 클릭하면 우측에 빨간 박스로 표시된 부분에 적용되어 실제로 방문자에게 보여지는 메뉴로 사용할 수 있다. 실제로 많은 페이지가 있으나, 위의 예시에서는 Pages 밑으로 Most Recent 탭이 선택되어 있어 가장 최근에 추가된 몇 가지 페이지 밖에 보이지 않는다. View All을 선택해서 공개되어 있는 모든 페이지를 확인하여 원하는 페이지를 메뉴로 구성할 수 있다. 그렇게 우측에 메뉴를 추가 하고 Save Menu를 누르면 실제 화면에 메뉴가 적용된다.
Post 또한 같은 원리로 메뉴 추가를 할 수 있다. 다만 Posts는 저번에 설명한 것처럼 블로그에 들어가는 글의 개념이기에 메뉴로 구성하게 되면 바로 연결한 블로그 포스트로 연결이된다. Categories는 블로그 Posts들이 분류된 카테고리 기준으로 메뉴를 추가할 수 있는 기능이다. 예를 들어서 '워드프레스' 라는 카테고리에 글들이 여러편 있다면, 해당 카테고리를 메뉴로 연결 시, '워드프레스' 카테고리에 들어있는 모든 글들을 확인할 수 있는 메뉴가 생성되는 것이다.
마지막으로 Custom Links 이다. 커스텀 링크는 블로그 초반에 설명했던 것처럼 외부 링크를 연결하여 메뉴에 집어넣는 것이다. 위의 예시와 같이 메뉴를 클릭했을 시, 이동하고자하는 링크와, 메뉴로 보여질 텍스트를 입력하여 Add to Menu를 클릭하게 되면 우측 메뉴 리스트에 추가가 되는 구조이다. 이렇게 설정하면 유튜브 링크로 바로 메뉴가 연결되어 외부로 이동하게 된다. 모든 메뉴를 설정하고 나서 꼭 우측하단에 있는 Save Menu를 클릭해주는 것을 잊지말자.
필자는 위의 메뉴에서 Home 메뉴는 불필요하여 제거하고 유튜브 보기라는 메뉴를 추가해보았다. 메뉴가 많아지면 메뉴 안에서 줄바꿈이 일어나거나 메뉴가 보기 좋지 않게 나타나기 때문에 가능하면 적정한 메뉴 수를 유지해주는 것이 좋다. 위에 보면 새롭게 만든 '유튜브 보기' 메뉴가 들어가 있다.
원하는 메뉴를 하나씩 설정해서 넣어보고 조금씩 조금씩 사이트를 원하는 모습으로 수정해 나가면 최종적으로 보기 좋은 웹사이트가 완성될 것이다. 지금까지 총 4편의 블로그로 가장 기본적으로 무료 테마를 가지고 웹사이트를 만들어 가는 방법을 설명했다. 다음 편에서도 이어서 웹사이트를 만드는 팁과 함께 기본적으로 셋팅해 나가야하는 항목들에 대해서 설명할 수 있도록 하겠다. 지금까지 4편의 블로그를 통해 확인한 제작 과정중에 진행에 막힘이 있었다면 댓글을 문의하면 답변할 수 있는 선에서 최대한 답변을 할 수 있도록 하겠다.
2022.05.21 - [워드프레스] - 워드프레스 무료 테마 Phlox로 웹사이트 만들기 1편 - 10분만에 사이트 세팅하기
워드프레스 무료 테마 Phlox로 웹사이트 만들기 1편 - 10분만에 사이트 세팅하기
20분 만에 워드프레스로 웹사이트를 만들 수 있을까? 그것도 무료로? 답변부터 하자면 가능하다. 다만 여기서 전제 조건은 이미 예시로 보이는 무료 테마를 선택해서 데모 버전을 설치해서 웹사
woongspov.com
2022.05.22 - [워드프레스] - 워드프레스 무료 테마 Phlox로 웹사이트 만들기 2편 - 홈 페이지 수정
워드프레스 무료 테마 Phlox로 웹사이트 만들기 2편 - 홈 페이지 수정
이 전편 블로그에서 무료 테마인 Phlox를 설치하고, 원하는 데모 웹 사이트 설치까지 완료했다. 이번 편에서는 메인 홈페이지에 보여지는 화면을 변경하는 작업을 어떻게 하는지 작성해 보도록
woongspov.com
2022.05.23 - [워드프레스] - 워드프레스 무료 테마 Phlox로 웹사이트 만들기 3편 - 새로운 섹션을 추가하여 원하는 사이트 만들기
워드프레스 무료 테마 Phlox로 웹사이트 만들기 3편 - 새로운 섹션을 추가하여 원하는 사이트 만들
워드프레스 Pholx 무료 테마를 설치하고 기본적인 페이지를 수정하면서 웹사이트를 만드는 방법에 대해서 지난 1편과 2편 블로그 간단히 소개를 했었다. 지난 두 편의 블로그에서 설명했듯이, 무
woongspov.com
'워드프레스' 카테고리의 다른 글
| 워드프레스 무료 테마 Phlox로 웹사이트 만들기 6편 - 블로그 메뉴와 블로그 연결하기. 블로그 활용법. (0) | 2022.05.28 |
|---|---|
| 워드프레스 무료 테마 Phlox로 웹사이트 만들기 5편 - 상단 메뉴 바 로고, SNS 버튼 변경하기(무료 로고 만드는 방법 팁) (0) | 2022.05.27 |
| 워드프레스 무료 테마 Phlox로 웹사이트 만들기 3편 - 새로운 섹션을 추가하여 원하는 사이트 만들기 (0) | 2022.05.23 |
| 워드프레스 무료 테마 Phlox로 웹사이트 만들기 2편 - 홈 페이지 수정 (0) | 2022.05.22 |
| 워드프레스 무료 테마 Phlox로 웹사이트 만들기 1편 - 10분만에 사이트 세팅하기 (0) | 2022.05.21 |
댓글