워드프레스 무료 테마를 사용하면 테마 외모를 꾸미는데 한계가 있습니다. GeneratePress 무료 테마에서 할 수 있는 메뉴바 만드는 방법에 대해 알려드리도록 하겠습니다. 워드프레스 메뉴바를 만들면 조금이나마 깔끔한 페이지를 꾸밀 수 있습니다.
목차
1. 워드프레스 메뉴바 만들기
웹사이트 페이지에서 메뉴바는 중요한 역할을 합니다. 즉, 그 웹사이트가 제공하고자 하는 정보 주제를 카테고리로 나타내어 주기 때문에 웹사이트에 대한 깔끔하고, 좋은 인상을 줄 수 있습니다.
GeneratePress 무료 테마에서 만들 수 있는 워드프레스 메뉴바에 대한 설명을 드리도록 하겠습니다.
아래 그림의 빨간 부분, 메뉴바를 만드는 방법입니다.
1-1. 워드프레스 카테고리 구성 만들기
먼저 워드프레스 메뉴바에 들어가는 메뉴, 즉 카테고리 구성을 만들어야 합니다. 본인이 하고자 하는 주제에 대한 카테고리 설정을 하셔야 합니다.
먼저 워드프레스 메인 페이지에서 글-카테고리를 클릭합니다.
카테고리를 클릭하면 새 카테고리 추가 화면을 확인할 수 있습니다. 여기에 본인이 운영할 웹사이트 주제에 대한 카테고리를 만들고 새 카테고리 추가를 클릭해 줍니다. 본인이 원하는 주제에 대한 카테고리를 하나씩 만들면 됩니다. 슬러그나 설명란에 카테고리에 대한 설명을 넣어주시면 구글 SEO에 도움이 됩니다.
1-2. 워드프레스 메뉴 만들기
워드프레스 카테고리를 만들었습니다. 그다음 카데고리를 하나로 묶어주는 메뉴 구조를 만드는 작업을 진행해야 합니다.
그러기 위해서 워드프레스 메인페이지에서 외모-메뉴를 클릭해 줍니다.
메뉴를 클릭한 후 1번 메뉴 추가 카테고리 클릭하여 이동한 후 내가 만든 카테고리를 선택하고, 메뉴에 추가를 클릭합니다.
그리고 2번에 본인이 원하는 메뉴이름을 만들어 줍니다. 아무 이름으로 해도 상관없습니다.
이름을 다 만들었으면 3번 메뉴 저장 버튼을 클릭해 줍니다.
1-3. 워드프레스 사용자 정의하기 설정
워드프레스 메뉴바를 구성하기 위해서 워드프레스 외모-사용자 정의하기를 클릭해 테마 디자인 변경을 위한 페이지로 이동을 합니다.
사용자 정의하기를 클릭하면 위와 같은 화면이 나타나게 됩니다. GeneratePress 무료 테마에서 우리가 만든 카테고리는 우측 상단 파란 박스 Sample Page 자리에 나타나게 됩니다.
먼저 Sample Page를 홈페이지 글씨의 하단 중앙부로 옮긴 후 우리가 만든 카테고리를 불러와야 합니다.
Sample Page를 중앙부로 옮기기 위해서 좌측 빨간 박스 Layout을 클릭해 줍니다. Layout을 클릭하면 아래와 같은 화면이 나타나는데 먼저, 워드프레스 페이지 구성에 대해 설명부터 해 드리겠습니다.
Layout을 클릭하면 제일 첫번째 나오는 Container는 화면 전체를 나타냅니다.
두번째 Header는 우리가 만드는 홈페이지의 제목이 들어가는 부분입니다. 글로 적어도 되고 이미지를 넣어도 되는 부분입니다.
세번째 Primary Navigation은 오늘 우리가 만드는 메뉴바, 즉 카테고리가 들어가는 부분입니다.
네번째 Sidebars는 각 종 위젯이 배치되는 부분입니다.
다섯번째 Footer는 페이지의 가장 아랫부분입니다.
여섯번째 Blog는 우리가 글을 작성한 후 메인 페이지에 내가 쓴 글이 요약되어 나타나는 부분입니다.
우리는 세번째 Primary Navigation 부분을 작업 할 예정입니다.
이제 Sample Page를 위 그림과 같이 중앙 하단으로 옮기는 작업을 진행하도록 하겠습니다. 사이트 제목 하단 중앙으로 옮기기 위해서 먼저, Header를 클릭해 줍니다.
Header를 클릭하면 위 화면 좌측과 같이 나타나게 됩니다. Sample Page를 사이트 제목 아래로 이동시키기 위해서 Header Presets : Navigation After로 변경합니다.
그리고 Header영역의 폭을 Blog 및 Sidebars 영역의 폭과 동일하게 맞추기 위해 Header Width : Contained 로 변경해 줍니다.
사이트의 제목을 가운데로 이동시키기 위해서 Header Alignment : Center 로 변경해 줍니다.
이제부터 Primary Navigation 부분으로 이동해 설정을 계속 하도록 하겠습니다. Header에서 뒤로 이동하기를 클릭해 줍니다.
뒤로 가기 후 Primary Navigation을 클릭해 줍니다.
첫번째 Navigation Width : Contained 를 선택하면 Header 영역과 동일한 폭으로 변경됩니다.
세번째 Navigation Alignment : Center 를 선택하여 Sample Page 글씨를 가운데 정렬시킵니다.
마지막 Navigation Search : Enable를 선택하면 Sample Page 글씨 옆 돋보기 그림이 생기며 검색 기능이 활성화 됩니다. 나머지 메뉴들도 하나씩 선택해 보며 어떻게 변경되는지 확인해 보시면 됩니다.
이제 메뉴바에 내가 만든 카테고리를 넣어보도록 하겠습니다. Primary Navigation에서 뒤로가기 Layout에서 뒤로가기 한 후 메뉴를 선택하면 앞쪽에서 내가 만들었던 메뉴 이름이 나오고 그 메뉴 이름을 클릭합니다.
1번 메뉴 클릭 후 2번 앞에서 본인이 만들었던 메뉴 이름 클릭 후 3번 Primary Menu 앞 박스에 체크를 하면 본인이 만들었던 카테고리가 Primary Navigation 영역에 Sample Page 대신 나타나게 됩니다.
이제 Primary Navigation 영역에 색상을 넣어 보도록 하겠습니다.
다시 뒤로 돌아와서 Colors를 클릭합니다. 그리고 Primary Navigation 글자 옆 방향 표시를 클릭합니다.
Primary Navigation아래 첫번째 Navigation Background에 3가지 색상이 있습니다. 순서대로 설명드리겠습니다.
첫번째 워드프레스 메뉴바 기본 바탕색입니다.
두번째 마우스 포인터가 그곳을 가리켰을 때 변경되는 색상입니다.
세번째 선택한 카테고리 페이지가 변경되고 지금 현재 이 카테고리가 선택되어 있다고 변경되는 색상입니다.
Navigation Text는 글자 색상을 변경하는 색상이며, 이 색상도 세가지로 구성되어 있습니다.
첫번째 워드프레스 메뉴바 기본 글씨 색상입니다.
두번째 마우스 포인터가 그곳을 가리켰을 때 변경되는 글씨 색상입니다.
세번째 선택한 카테고리 페이지가 변경되고 지금 현재 이 카테고리가 선택되어 있다고 변경되는 글씨 색상입니다.
모든 설정을 완료하게 되면 아래와 같은 워드프레스 메뉴바 화면이 나타나게 됩니다.
이번에는 워드프레스 GeneratePress 무료 테마에서 할 수 있는 간단한 워드프레스 메뉴바 디자인 설정을 알아봤습니다. 이제 대충 어떻게 워드프레스 디자인이 구성되는지 확인하셨을 거라 생각됩니다. 하나씩 변경하면서 본인에게 맞는 디자인으로 꾸며보시기 바랍니다.
그러나 무료 버전으로 할 수 있는 것이 거의 없기 때문에 최대한 심플하게 구성하는 것도 나쁘지 않습니다. 본인이 더 많은 디자인 요소를 반영하고 싶다면 일정 금액을 지불하고 유료 버전을 사용하셔야 됩니다.
굳이 돈 들이지 말고 일단 최대한 무료로 블로그를 운영해 보시고 추 후 유료 버전이 필요하실 때 변경하시기 바랍니다.
