WordPress에서 메뉴 탐색을 만들고 편집하는 방법

게시 됨: 2020-09-24

탐색 메뉴는 웹사이트에서 가장 중요한 요소 중 하나입니다. 그렇지 않으면 방문자는 필요한 콘텐츠에 도달할 수 없고 제공하는 콘텐츠를 이해하지 못하며 일반적으로 사이트에 대해 혼란스러운 상태에 있게 됩니다. 불행히도 WordPress 메뉴 시스템은 CMS(콘텐츠 관리 시스템)에서 가장 직관적인 부분이 아닙니다. 우리는 그것을 이해하고 WP 탐색 시스템을 가장 잘 탐색하는 방법을 보여주고자 합니다. 귀하와 귀하의 사용자가 가능한 최고의 경험을 할 수 있도록.

WordPress 메뉴를 만들기 전에

이제 WP 메뉴 구조를 살펴보기 전에 잠시 시간을 내어 이를 계획해 보겠습니다. 메뉴를 만드는 것은 간단하지만( 모양 – 메뉴 로 이동하여 클릭 시작) 유용한 메뉴를 만드는 것은 조금 더 심도 있습니다. 기본적으로 다음 두 가지 질문을 스스로에게 하십시오.

  • 나는 누구를 위한 메뉴인가?
  • 방문자가 어디로 가길 원합니까?

나는 누구를 위해 메뉴를 만들고 있는가? , 어리석은 것처럼 보일 수 있습니다. 답은 의심할 여지 없이 "귀하의 사용자"이기 때문입니다. 하지만 그렇게 간단하지 않습니다. 사용자마다 필요한 것이 다릅니다. 신규 사용자에게 재방문 페이지와 동일한 페이지가 필요합니까? 로그인한 회원은 로그인하지 않은 회원과 동일한 메뉴를 볼 수 있나요?

이 특정 메뉴를 사용할 사람들을 생각하면 간단하게 유지할 수 있습니다. 보는 사람들을 압도할 페이지로 가득 채우는 것을 피할 수 있습니다. 워드프레스 메뉴의 가장 큰 장점은 여러 버전을 만들고 다른 위치에 표시할 수 있다는 것입니다.

두 번째 질문은 다음과 같습니다 . 방문자가 어디로 가기를 원합니까? 어떤 사용자에게 어떤 메뉴가 필요한지 함께 손잡고 해당 사용자를 어디로 데려갈 것인지 결정하면 어떤 종류의 메뉴를 만들지 결정됩니다.

실제 사례로서의 ElegantThemes.com

예를 들어, 우리는 얼마 전에 여기 우아한 테마에서 헤더 메뉴를 재설계했습니다. 우리는 Facebook 그룹, Divi 테마 사용자 및 Meetup 네트워크로 트래픽을 유도하는 데 집중하고 싶었습니다. Divi 자체에 추가하지만 그것은 말할 필요도 없습니다. 이를 위해 기존의 보다 강력한 버전과 비교하여 사용자에게 소수의 옵션만 제공하도록 메뉴 구조를 단순화했습니다.

divi 워드프레스 메뉴 Divi 위로 마우스를 가져 가면 테마 기능뿐만 아니라 강조하고 싶었던 소셜 네트워크에 대한 링크가 표시됩니다. 모든 제품 은 또한 Divi를 주력 제품으로 표시하며 사람들이 멤버십 옵션을 볼 때 가격 도 표시됩니다. 계정 은 신규 사용자 패러다임의 외부에 있지만 신규 사용자가 멤버십에 빠르게 액세스할 수 있도록 하고 신규 회원 가입 옵션을 제공합니다. 연락처 도 모든 사람을 위한 것입니다.

보시다시피, 각각의 모든 메뉴 항목은 선택된 방문자 세그먼트를 우리가 가장 보고 싶은 페이지로 안내합니다. 즉, 블로그, 리소스, 개별 제품 페이지 등과 같은 장소로 연결되는 페이지 바닥글에 보다 완전한 메뉴가 있습니다.

외 바닥글 메뉴

헤더 메뉴도 여전히 존재합니다. 그러나 페이지 하단의 메뉴는 원하는 것을 찾기 위해 다른 메뉴(요즘 웹 표준처럼)를 찾을 줄 아는 보다 구체적인 요구 사항을 가진 사람들이 사용할 것이라는 것을 알고 있습니다.

이를 염두에 두고 누구를 위해 메뉴를 만들고 그들이 무엇을 하기를 원하는지 파악했을 것입니다. 이제 WordPress 메뉴를 구축해 보겠습니다.

WordPress 메뉴를 만드는 방법

WordPress 대시보드의 모양 – 메뉴 로 이동합니다. 다음과 같이 표시되어야 합니다.

페이지 수정

이 페이지는 WordPress에서 가장 사용자 친화적인 부분은 아니지만 위에서 논의한 내용과 관련된 몇 가지 부분을 볼 수 있습니다.

메뉴 이름 은 참고용입니다. 어떤 사용자도 이것을 볼 수 없습니다. 적절한 이름을 지정하여 어떤 메뉴가 어디로 가는지 추적하십시오. 왼쪽에 페이지, 게시물, 사용자 정의 링크카테고리가 표시 됩니다. 일부 테마에는 여기에 더 많은 옵션이 포함되어 있습니다. 당신의 것이 될 수도 있고 아닐 수도 있습니다. 메뉴 항목은 개별 게시물이나 페이지, 카테고리 링크가 될 수 있습니다. 또한 사용자 지정 링크를 사용하면 무엇이든 연결할 수 있습니다. https://를 기억 하십시오. 그렇지 않으면 링크가 중단될 수 있습니다.

메뉴 설정 에서 페이지 자동 추가를 비활성화 상태로 유지하는 것이 좋습니다. 이 옵션은 사이트에서 생성된 모든 새 페이지를 WordPress 메뉴에 추가합니다. 대부분의 사람들은 이 확인란을 선택하지 않습니다.

이제 각 테마는 WordPress 메뉴를 표시할 수 있는 위치에 따라 레이아웃이 다르기 때문에 표시 위치 옵션은 테마마다 다릅니다. 그러나 이것은 메뉴가 전체에 나타날 수 있는 사이트 내의 위치입니다. 화면 상단의 위치 관리 탭에서 메뉴 위치를 더 이상 미세 조정할 수 없습니다.

wp 메뉴 위치

그런 다음 메뉴 자체에 원하는 콘텐츠를 추가합니다. 옆에 있는 확인란을 선택하고 메뉴에 추가 를 클릭하기만 하면 됩니다 . 그렇게 하면 메뉴 구조 아래에 추가됩니다. 화살표를 클릭하면 탐색 레이블 과 같은 다른 옵션이 표시됩니다 .

탐색에 항목 넣기

탐색 레이블 은 사용자에게 표시됩니다. 메뉴에 나타나는 부분입니다. 따라서 페이지 제목이 너무 긴 경우 여기에서 줄일 수 있습니다.

이제 WordPress 메뉴를 만드는 데 가장 중요한 부분(그리고 아마도 모든 플랫폼에서 가장 잊혀진 작업 중 하나)은 화면 오른쪽에 있는 메뉴 저장 을 클릭하는 것입니다.

당신이 그들을 만드는 데 보낸 시간을 소중히 생각한다면 당신의 워드 프레스 메뉴를 저장

저장되면 메뉴가 라이브로 전환됩니다. 사이트에 이미 표시되어 있는 경우 변경 사항이 즉시 적용됩니다.

드롭다운 WordPress 메뉴를 만드는 방법

대부분의 경우 위의 단계는 WordPress에서 드롭다운 메뉴를 만드는 것과 동일합니다. 그러나 하위 메뉴를 표시하려면 따라야 하는 또 다른 단계가 있습니다.

메뉴 구조 섹션에서 각 항목을 끌 수 있습니다. 드롭다운 메뉴를 만들려면 원하는 항목을 클릭 하고 상위 항목으로 원하는 항목으로 끌어다 놓기만 하면 됩니다 . WordPress는 항목을 다른 사람에게 가져오면 다음 항목을 원한다는 것을 알 만큼 충분히 똑똑합니다. 그런 다음 중첩하면 프런트 엔드에 드롭다운 메뉴가 생성됩니다.

사용자 정의 WordPress 메뉴 구조 만들기

드롭다운에서 원하는 만큼 항목에 대해 이 작업을 반복합니다. 중첩 계층 구조는 이해하기 쉽습니다. 구조에 새 레벨이 생성될 때마다 메뉴에 추가 드롭다운이 생성됩니다.

사용자 정의 WordPress 메뉴 구조 만들기

프론트 엔드에서 다음과 유사하게 보일 것입니다.

WordPress의 드롭다운 옵션

이제 이 단계에서는 존재하는 메뉴 항목을 사용하고 있다고 가정합니다. 그러나 드롭다운 메뉴를 실행하는 항목이 탐색 가능한 링크가 되지 않도록 하려면 URL 대신 # 이 있는 사용자 지정 링크 를 생성하면 됩니다.

해시태그가 있는 자리 표시자 URL

그렇게 하면 메뉴 항목이 생성되지만 클릭하면 드롭다운 메뉴가 확장되는 것 외에는 아무 작업도 수행되지 않습니다.

WordPress 사이트에서 여러 메뉴를 사용하는 방법

이전에 논의한 내용으로 돌아가서 표시하는 각 메뉴에 초점이 맞춰져 있는지 확인하고 싶습니다. 때로는 메가 메뉴가 사이트 탐색에 가장 적합한 선택입니다. 예를 들어, 아마존은 메가 메뉴를 잘 활용하는 사이트의 좋은 예입니다. 그러나 메가 메뉴를 사용하는 대부분의 사이트에서는 필요하지 않습니다. 그들은 불필요하게 사이트 탐색을 복잡하게 만듭니다.

그러나 사이트가 크고 구획화될 수 있는 경우 사이트 전체에서 여러 메뉴를 사용하는 것이 거의 항상 더 나은 옵션입니다. 사용자가 선택해야 하는 선택이 적을수록 사용자가 원하는 선택을 할 가능성이 높아집니다.

이제 예를 들어 블로그 사이드바에만 표시되는 메뉴를 만들어 사용자를 안내한다고 가정해 보겠습니다. 메뉴 이름을 추적하기 위해 S idebar Widget 과 같은 이름으로 지정할 수 있습니다. 그러나 표시 위치 또는 위치 관리 탭을 보면 사이드바 옵션이 없을 수 있습니다.

사용자 정의 WordPress 메뉴 구조 만들기

즉, 메뉴를 수동으로 배치해야 합니다. WordPress 대시보드에서 모양 – 위젯으로 이동 하여 탐색 메뉴 위젯을 찾으십시오.

사이드바 메뉴

대부분의 경우 테마에는 일반 사이드바 옵션이 있습니다. 탐색 메뉴 위젯은 기본적으로 WordPress입니다. 따라서 이것은 테마에 관계없이 작동합니다. 그러나 테마에는 메뉴 위젯에 대한 다른 것이 있을 수 있으며 기본 단계는 계속 적용됩니다.

드롭다운 메뉴 항목과 마찬가지로 클릭하여 사이드바 영역으로 드래그합니다. 위젯이 WordPress에서 작동하는 방식 때문에 위젯이 사이트에 즉시 나타납니다. 그러나 표시할 메뉴를 선택하지 않았으므로 공백으로 표시됩니다.

위젯 사이드바 메뉴

제목 을 선택하면 메뉴 위에 헤드라인으로 표시됩니다. 메뉴 선택 옵션은 표시하려는 특정 메뉴를 선택하는 곳입니다. 가시성 링크를 클릭하고 위에 보이는 추가 상자를 열 수도 있습니다. 이 새로운 상자는 조건부 가시성에 대한 옵션을 제공합니다. 이를 위해 이 메뉴가 팟캐스트로 분류된 게시물에만 표시되기를 원할 수 있으므로 저장 을 클릭하면 변경 사항이 적용됩니다.

divi 사이드바 테마 빌더 메뉴

그것이 그들의 전부입니다. 헤더 메뉴의 드롭다운으로 생성한 모든 항목은 사이드바 위젯에 중첩 메뉴로 나타납니다. 따라서 #을 사용하여 자리 표시자 URL을 만든 경우 이 메뉴에서 클릭할 수 없는 링크가 됩니다. 그에 따라 WordPress 메뉴 생성을 계획하십시오.

WordPress 메뉴로 마무리

WordPress 메뉴 시스템은 위협적일 필요가 없습니다. 때때로 다소 불분명해 보일 수 있지만, 보시다시피 쉽게 탐색할 수 있는 프로세스이며 수행 방법을 알면 매우 강력할 수 있습니다. 하지만 계속해서 자신만의 사이트 탐색을 만들 때 메뉴가 만능이 아니라는 점을 기억하십시오. 사이트에서 누가 어떤 페이지를 찾고 싶은지 고려하고 그 경험을 만들기 위한 메뉴 시스템을 만드십시오. 모든 페이지와 게시물 및 링크가 동일한 메뉴에 나타날 필요는 없습니다. WordPress 메뉴의 경우 덜 확실히 더 많을 수 있습니다.

WordPress 메뉴를 어떻게 구성합니까? 귀하의 사이트에는 얼마나 많은 메뉴가 있습니까?

Julia Tim의 기사 특집 이미지 / Shutterstock.com