티스토리 뷰

반응형

   워드프레스로 홈페이지를 만들 때 방문하는 사람들이 편하게 웹사이트를 이용할 수 있게 하려면 가장 먼저 생각해야 할 것 중 하나가 메뉴 버튼입니다. 메뉴 버튼을 잘 활용하면 방문자들에게 편리함을 제공할 뿐만 아니라 웹사이트 체류 시간을 늘리는 한 방법으로도 사용할 수 있습니다. 


   이번 포스팅 내용을 잘 배워두시면 메뉴 기능의 가장 기본이 되는 홈 버튼은 물론이고 웹사이트 내 각종 페이지로 연결해주는 버튼, 제휴 사이트나 광고 중인 사이트로 이동하게 할수 있는 버튼 등 다양한 메뉴 추가 방법을 습득할 수 있습니다.


[처음부터 다시보기]  #1 워드프레스 소개

[이전 글 다시보기] #8 워드프레스 새 글 발행하기




워드프레스 홈페이지 만들기 - 메뉴 추가하기


#9 워드프레스 홈페이지 만들기 - 메뉴 추가하기


1. 아직 메뉴 설정을 하지 않았기 때문에 워드프레스 홈페이지에 접속하면 기본 메뉴만 나타나있습니다.

테마에 따라 다르겠지만 제가 선택한 테마는 'About'이라는 메뉴가 기본 메뉴로 설정되어 있습니다.

지금부터 다양한 워드프레스 메뉴를 추가해보도록 하겠습니다.


워드프레스 메뉴 추가 하기


2. 워드프레스 홈페이지 관리자 메뉴로 들어가 외모 - 메뉴를 클릭합니다.


메뉴 버튼 설정하기


3. 아직 아무런 설정도 하지 않았기 때문에 관리 중인 메뉴 이름도 없고

위 사진과 같이 메뉴를 생성할 수 있는 도구가 비활성화되어 있습니다.

새로운 메뉴를 생성하고 추가하기 위해선 먼저 메뉴를 담을 메뉴판이 필요합니다.

메뉴판 생성을 위해 중앙 상단 메뉴 이름에 메뉴판 이름을 적고 우측 메뉴 생성을 클릭합니다.

(여기서 적는 메뉴 이름은 관리자가 메뉴 모음을 관리할 때 사용하는 이름으로 방문자에겐 보이지 않습니다)


워드프레스 메뉴 추가하는 법


4. 메뉴판이 생성되면 좌측에 메뉴를 생성할 수 있는 도구가 활성화됩니다.

메뉴 버튼페이지, 글, 사용자 정의 링크, 카테고리를 이용해 만들 수 있습니다.


워드프레스 새로운 메뉴 추가


5. 제가 선택한 테마는 홈버튼이 없었기 때문에 가장 먼저 홈으로 가는 메뉴 버튼을 만들어 보도록 하겠습니다.

홈 버튼을 만들기 위해선 메뉴 생성 도구 중 사용자 정의 링크를 클릭합니다.

홈 버튼이기 때문에 URL워드프레스 홈페이지 주소를 적고

링크 텍스트에는 이라 적은 뒤 메뉴에 추가 버튼을 누릅니다.


워드프레스 홈페이지 만들기


6. 위 사진과 같이 3번에서 생성했던 메뉴판에 이라는 메뉴가 추가되었습니다.


메뉴 버튼 누르면 작성한 글로 이동하게 하는법


7. 페이지, 글, 카테고리를 클릭하면 이미 작성한 글이나 페이지, 카테고리를 하나의 메뉴로 만들 수 있습니다.

예를 들어 글을 클릭하면 워드프레스를 이용해 작성했던 모든 글이 나타나게 됩니다.

그중 메뉴 버튼을 클릭했을 때 연결되길 원하는 글이 있으면 체크한 후 메뉴에 추가를 누르면 됩니다.

(페이지와 카테고리에서도 위와 방법은 같습니다)


카테고리 메뉴 추가


8. 한 번 더 카테고리로 예를 들어보자면

지난 시간 워드프레스 새 글 쓰기 포스팅에서 추가했던

워드프레스 홈페이지 만들기 카테고리가 있습니다.

카테고리를 체크하고 메뉴에 추가 버튼을 누를 수도 있고

그보다 하위 카테고리인 #1 카테고리 추가하기를 체크해 메뉴에 추가할 수도 있습니다.


워드프레스 다양한 메뉴 추가하기


    • 사용자정의 링크 : 다양한 URL주소를 메뉴 버튼으로 만들 수 있습니다. 홈페이지 URL뿐만 아니라 제휴 사이트로 방문자를 이동시키거나 광고를 받아 광고 페이지로 연결하는 등 다양하게 응용해 사용할 수 있습니다.

    • : 워드프레스로 작성했던 글 중 하나로 연결하는 메뉴를 만들 수 있습니다. (이름은 메뉴에 추가한 뒤 수정할 수 있습니다)

    • 페이지 : 글과 마찬가지로 작성했던 페이지 중 하나로 연결 시키는 메뉴를 만들 수 있습니다. 주로 기업 홈페이의 메뉴 버튼은 페이지를 메뉴화한 것입니다. (ex. 홈 - 기업 소개 - 고객 서비스)


워드프레스 메뉴 순서 바꾸기


9. 다양한 메뉴를 설정해 추가하면 우측 메뉴판에 추가되게 됩니다.

추가된 메뉴들은 마우스로 드래그해 순서를 바꿀 수 있습니다.


워드프레스 메뉴 세부 설정하기


10. 또한, 메뉴 우측 드롭 다운 버튼(▼)을 누르면 위와 같이 세부 옵션을 설정할 수 있는 메뉴가 나타납니다.

    • 네비게이션 라벨 : 실제로 메뉴 버튼에서 보일 이름을 설정할 수 있습니다.

    • 이동 : 드래그 이외에도 이동 버튼을 클릭해서 메뉴의 순서를 바꿀 수 있습니다.

    • 원본 : 이 메뉴의 원본을 나타냅니다.

    • 삭제 : 메뉴를 메뉴판에서 삭제합니다.

    • 취소 : 변경된 사항을 취소합니다.


워드프레스 메인 메뉴 설정하기


11. 메뉴를 추가하고 메뉴판 설정도 모두 마쳤다면

메뉴판을 어느 곳에 위치시킬지만 설정해주면 모든 세팅이 완료됩니다.

테마에 따라 메뉴판을 위치시킬 수 있는 곳이 다르게 나타나지만 대부분

Primary Menu(기본 메뉴), Header Menu(상단 메뉴), Footer Menu(하단 메뉴)

중에서 선택할 수 있습니다.

전 기본 메뉴(Primary Menu)를 선택하고 메뉴 저장을 클릭했습니다.


워드프레스 메뉴 설정하는 방법


12. 메뉴 설정이 완료되고 워드프레스 홈페이지 화면으로 이동했습니다.

위 사진과 같이 , 워드프레스 홈페이지 만들기, 큰일 할 남자 블로그 메뉴가 추가되었습니다.


워드프레스 홈페이지 제작


13. 위에서 포스팅한 2번~10번 까지의 과정워드프레스 메뉴판을 생성하는 방법입니다.

11번처럼 굳이 당장 생성한 메뉴판을 메뉴에 넣지 않아도 저장만 해놓으면 새로운 메뉴판을 여러 개 만들 수 있습니다.

만들어진 메뉴판은 워드프레스 관리자 메뉴 외모 - 메뉴 - 위치 관리하기 탭에서 각 메뉴에 따라 설정해줄 수 있습니다.




   이번 포스팅 '#9 워드프레스 홈페이지 만들기 - 메뉴 추가하기'는 원리를 이해하고 직접 몇 번 해보다 보면 금방 익숙해질 수 있지만 처음 접하면 용어가 중복되고 헷갈리기 때문에 누구나 어려워하는 내용입니다. 하지만 후에 워드프레스로 웹사이트를 제작하고 운영하려면 가장 기본적으로 다뤄야 하는 것 중 하나이므로 계속해서 만져보며 익숙해져야 합니다.


   다음 시간 주제는 '#10 워드프레스 홈페이지 만들기 - 새 페이지 추가'로 워드프레스를 이용해 새로운 페이지를 추가하는 방법을 배우고 홈페이지를 간단한 비즈니스 사이트처럼 꾸며보도록 하겠습니다.


하나하나 따라오시느라 수고 많으셨습니다. 감사합니다.

반응형
댓글
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/04   »
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
글 보관함