WordPress에서 사용자 정의 메뉴 구조를 만드는 방법

WordPress에는 메뉴를 생성하는 자동 내장 탐색 구조가 있습니다. 여기에는 페이지와 카테고리가 포함됩니다. 카테고리 내에서 페이지나 게시물을 만드는 것 외에 다른 작업을 수행할 필요 없이 기본 메뉴에 배치됩니다. 이것은 페이지와 카테고리가 몇 개 밖에 없는 경우에 효과적이지만 잠시 후 손에 잡히지 않을 수 있습니다. 또한 탐색을 자동으로 처리할 수 있다고 해서 허용해야 하는 것은 아닙니다.

WordPress는 사용자의 입력 없이 자동으로 메뉴를 처리하지만 메뉴 구조를 최대한 활용하려면 사용자 정의 메뉴를 만들 수 있습니다. 사용자 정의 메뉴를 사용하면 탐색 구조를 완전히 제어할 수 있으며 사이트를 보다 깔끔하고 전문적인 모양으로 만들 수 있습니다.

메뉴의 종류

여러 종류의 메뉴가 있습니다. 사용할 수 있는 메뉴 유형은 테마의 기능에 따라 다릅니다. 인기있는 메뉴 유형은 다음과 같습니다.

• 기본 메뉴 – 헤더 아래에 나타납니다. 여기에는 홈, 정보, 연락처, 블로그, 포트폴리오 등 웹사이트 유형에 따라 방문자가 기대하는 기본 탐색 및 페이지가 포함되어야 합니다.
• 보조 메뉴 – 헤더 위에 나타납니다. 여기에는 독자에게 편리한 위치에 제공하려는 링크와 페이지가 포함되어야 하지만 기본 탐색 구조에 반드시 있어야 하는 것은 아닙니다. 튜토리얼, 장바구니 등과 같은 항목이 될 수 있습니다.
• 사이드바 – 사용자 정의 메뉴 위젯을 사용하여 사용자 정의 메뉴를 사이드바에 배치할 수 있습니다. 원하는 만큼 위젯을 사용하고 그 안에 메뉴를 배치할 수 있습니다.
• 바닥글 – 바닥글만을 위한 메뉴를 만들 수 있습니다. 이 메뉴는 일반적으로 기본 메뉴보다 정보가 적습니다. 사이트의 필요에 따라 일반적으로 집, 정보, 연락처, 블로그 등이 포함됩니다. 사이트에 채용 정보, 제휴 프로그램 및 자매 사이트가 포함되어 있는 경우 여기에도 포함될 수 있습니다.
• 소셜 링크 메뉴 – 소셜 미디어 링크를 사이드바에 배치하는 Twenty Fifteen과 같은 테마에서 찾을 수 있는 특별 메뉴입니다. 테마가 소셜 네트워크를 인식하면 적절한 아이콘을 제공합니다. 그렇지 않은 경우 이름이 텍스트로 표시됩니다(링크에 레이블을 지정한 방법에 따라).

기본 및 보조 메뉴는 WordPress 테마 중에서 가장 인기가 있습니다. 그것들에 들어가는 것은 당신의 사이트의 초점에 달려 있습니다. 사이트의 주요 초점은 기본 메뉴에 나타나야 합니다. 방문자에게 의미가 있어야 하고 방문자가 보기를 기대하는 것이어야 합니다.

예를 들어 상점이 있는 경우 장바구니가 기본 메뉴에 있어야 합니다. 포트폴리오 사이트가 있지만 일부 품목을 판매하는 경우 포트폴리오는 기본 메뉴에 있어야 하고 장바구니는 보조 메뉴에 있어야 합니다. 논리적으로 맞는 위치에 대해 생각하고 그에 따라 배치하십시오.

나만의 맞춤 메뉴 만들기

WordPress를 사용하면 손으로 사용자 정의 메뉴를 쉽게 만들 수 있습니다. 백엔드에서 메뉴를 생성, 조정 및 적용할 수 있으며 프론트 엔드에서 메뉴를 선택하여 라이브 시작 전에 보고 테스트할 수 있습니다.

백엔드에서 메뉴 만들기

백엔드에서 모양으로 이동하여 메뉴를 선택합니다. 프런트 엔드에서 사용자 지정으로 이동하여 탐색을 선택합니다.

메뉴 화면에서 새 메뉴 만들기를 선택하고 메뉴에 이름을 지정한 다음 메뉴 만들기 버튼을 클릭합니다.

이제 탐색 구조를 추가할 준비가 되었습니다. 왼쪽에는 페이지, 사용자 정의 링크 및 카테고리 상자가 있습니다. 이 모든 것을 사용자 정의 메뉴의 링크로 사용할 수 있습니다. 중간에 몇 가지 옵션이 있습니다. 모든 새 페이지가 메뉴 구조에 자동으로 추가되도록 허용하거나 더 많은 제어 권한을 갖고 페이지와 카테고리를 직접 선택하려면 이 옵션을 선택하지 않은 상태로 둘 수 있습니다.

페이지

아직 열려 있지 않은 경우 왼쪽 창에서 페이지 탭을 선택합니다. 메뉴에 페이지를 추가하려면 원하는 페이지를 모두 선택하고 메뉴에 추가를 클릭합니다.

다르게 정렬하려면 이동하려는 메뉴 항목을 새 위치로 끌어다 놓기만 하면 됩니다. 하위 항목으로 지정하려는 항목 아래 오른쪽으로 끌어다 놓아 다른 메뉴 항목의 하위 항목으로 만들 수도 있습니다.

오른쪽에 있는 화살표를 선택하여 항목을 열고 이름 및 위치를 변경하는 등의 조정을 수행할 수 있습니다. 여기에서 메뉴 구조에서 항목을 제거할 수도 있습니다.

사용자 정의 링크

사용자 지정 링크를 추가하려면 왼쪽 창에서 사용자 지정 링크를 열고 원하는 URL을 추가한 다음 메뉴에 추가를 선택합니다. 원하는 모든 종류의 링크를 만들고 메뉴 구조의 일부로 만들 수 있습니다. 이것은 소셜 링크 메뉴에 대한 링크를 만드는 방법이기도 합니다.

그런 다음 메뉴 구조에서 원하는 위치로 끌어다 놓을 수 있습니다.

카테고리

왼쪽 창에서 페이지를 선택하고 추가하는 것과 같은 방식으로 카테고리를 선택하고 추가합니다. 메뉴에서 페이지 및 링크와 동일한 방식으로 작동합니다.

메뉴 저장

새 메뉴 구조가 마음에 들면 저장한 다음 사용할 수 있습니다.

위치 관리

백엔드에서 메뉴를 사용하는 방법에는 두 가지가 있습니다.

메뉴 설정

메뉴를 만든 화면의 메뉴 설정 아래에 확인란 그룹이 있습니다. 아무 메뉴나 선택한 다음 사용할 위치를 선택할 수 있습니다. 원하는 만큼 선택할 수 있습니다. 저장하는 것을 잊지 마십시오.

위치 관리

위치 관리 탭을 선택합니다. 여기에서 드롭다운 상자에서 사용할 메뉴를 선택할 수 있습니다. 모두 사용할 필요는 없습니다. 방금 저장을 누르고 메뉴 구조를 업데이트한 위치에서 사용할 메뉴를 선택했습니다.

위젯

WordPress에는 사이드바에 끌어다 놓을 수 있는 사용자 정의 메뉴 위젯도 있습니다. 여기에서 메뉴를 선택할 수 있습니다.

테스트

여기 내 테스트 메뉴와 사이드바 위젯이 있습니다. 다음으로 해야 할 일은 각 항목을 테스트하여 원활하고 직관적으로 작동하는지 확인하는 것입니다. 이 단계를 잊지 마십시오. 메뉴가 의도한 대로 작동하는지 테스트하는 것은 매우 중요합니다. 분명히 이것들은 웹사이트에서 사용해야 하는 메뉴 제목이 아닙니다.

WYSIWYG 보기에 ​​프런트 엔드 사용

프런트 엔드에서 메뉴 구조를 수정하려면 모양으로 이동하여 사용자 지정을 선택합니다. 프런트 엔드에 도달하면 탐색을 선택합니다. 여기에서 메뉴를 선택할 수 있습니다. 이 보기의 장점은 변경 사항을 저장하기 직전에 볼 수 있다는 것입니다. 이렇게 하면 커밋하기 전에 마음에 드는지 결정할 수 있습니다. 불행히도 이 시스템에서는 생성할 수 없습니다.

Divi와 같은 테마로 모양과 느낌 사용자 정의

우아한 테마의 Divi 2.4와 같은 일부 테마는 도구를 제공하므로 프런트 엔드에서 메뉴의 모양과 느낌을 조정하고 그 영향을 즉시 확인할 수 있습니다. 이렇게 하면 방문자가 저장하기 전에 보게 될 내용을 알 수 있습니다.

Divi의 메뉴 조정을 살펴보겠습니다. 이와 동일한 조정을 수행하여 각 메뉴 항목의 모양과 느낌을 변경할 수 있습니다.

추가 사용자 정의 – 플러그인을 사용하여 메뉴 수정

새로운 기능, 모양 및 기능으로 사용자 정의 메뉴를 수정하는 데 도움이 되는 WordPress용 플러그인이 많이 있습니다. CSS 조정을 많이 추가하고 반응형으로 만들고 심지어 더 빠르게 만듭니다. 다음은 몇 가지 인기 있는 플러그인을 살펴보겠습니다.

사용자 정의 메뉴 마법사 위젯

이 무료 플러그인은 단축 코드를 사용하여 사이드바 또는 콘텐츠에서 사용할 수 있는 사용자 정의 메뉴 위젯을 추가합니다. 메뉴 매개변수를 완전히 제어하고 사용자 정의 메뉴의 특정 부분을 사용할 수 있습니다. 또한 몇 가지 사용자 정의 클래스를 추가합니다.

메뉴의 특정 부분이나 전체 메뉴를 표시할 수 있습니다. 출력을 조건부로 만들 수도 있습니다. 지정한 수준 수에 따라 평면 또는 계층으로 표시됩니다. HTML로 출력을 수정할 수도 있습니다.

위젯 설정은 사용하기 쉽습니다. 드롭다운 상자에서 메뉴를 선택하고 필터, 대체, 출력, 컨테이너, 클래스, 링크 및 대안(다른 수준의 조건)을 선택합니다. 또한 메뉴를 콘텐츠에 붙여넣을 수 있도록 단축 코드를 제공합니다.

넥스트엔드 아코디언 메뉴

이 플러그인을 사용하면 각각 고유한 설정과 스킨이 있는 메뉴 수준, 색상, 애니메이션 등을 완벽하게 제어하여 아코디언 스타일 메뉴를 만들 수 있습니다. 글꼴, 배경, 색상, 이미지 등의 수준과 상태를 제어할 수 있습니다. 캐시를 사용하여 메뉴 시스템의 속도를 높이고 다양한 유형의 애니메이션을 제공하며 메뉴 수준에 제한이 없으며 30가지 설정을 제공합니다.

나는 아코디언 메뉴가 작동하는 방식을 좋아합니다. 사용하고 싶을 때 확장한 다음 화면에서 보고 싶지 않을 때 더 깔끔한 레이아웃을 제공하기 위해 숨길 수 있습니다. 플러그인은 사용 및 설정이 쉽습니다. 사용자 정의 콘텐츠 유형과 마찬가지로 메뉴를 만듭니다. 그런 다음 위젯을 사이드바로 드래그하고 위젯 내에서 메뉴를 선택할 수 있습니다.

세 가지 테마와 지원을 추가하는 Pro 버전도 있습니다. 가격은 $29부터 시작합니다.

반응형 메뉴

이 무료 플러그인에는 메뉴의 모양, 느낌, 작동 방식을 조정할 수 있는 70가지 옵션이 있습니다. 제목, CSS, 작업, 크기, 애니메이션, 스크립트 등을 조정할 수 있습니다. 그것은 모바일 장치에서 잘 작동하며 한쪽에서 메뉴를 당겨 메뉴의 위치를 ​​​​설정하는 기능이 있습니다. 메뉴의 CSS와 JavaScript도 축소합니다. 사용자 정의 HTML을 추가하고 설정을 가져오거나 내보낼 수도 있습니다.

설정에 많은 조정이 있지만 모두 이해하고 조정하기 쉽습니다. 고급 수준의 설정도 있지만 원하는 경우 무시할 수 있습니다. 여기에는 단축 코드가 포함되어 있으며 원하는 경우 테마에 PHP 코드를 추가할 수도 있습니다.

메뉴를 수정하는 기타 플러그인

다음은 내가 흥미롭게 찾은 다른 플러그인 목록입니다. 메뉴의 기능을 추가하거나 수정하고 다양한 방식으로 제어할 수 있습니다.

• 워드프레스 메가 메뉴
• CSS3 메가 드롭다운 메뉴
• WP 반응형 메뉴
• Font Awesome 4 메뉴
• 메뉴의 단축 코드
• 더 빠른 모양 – 메뉴
• 음식 및 음료 메뉴
• 간단한 소매 메뉴
• WordPress 메뉴 정화
• 위젯 메뉴라이저

훌륭한 메뉴 구조를 만들기 위한 팁

• 메뉴를 사용하여 탐색 구조를 정리하세요.
• 가능한 한 적은 수의 레벨을 사용하십시오. Primary와 Secondary의 관점에서 생각하십시오.
• 독자가 코드를 해독하지 않고도 이해할 수 있는 이름을 사용하십시오.
• 키스 방법을 사용하십시오. 기억하십시오. 단순할수록 좋습니다. 메뉴는 사용하기 쉽고 직관적이어야 합니다.
• 즐겨찾는 사이트의 메뉴 구조를 확인하고 좋아하는 것과 싫어하는 것을 확인하세요. 그런 다음 당신을 더 좋게 만드십시오.

마지막 생각들

사용자 정의 메뉴 구조를 추가하는 것은 쉽고 WordPress 사이트를 보다 전문적으로 보이게 하고 구조가 무작위로 보이는 것을 방지합니다. 자신만의 메뉴 세트를 만드는 데 몇 분 밖에 걸리지 않으며 라이브로 시작하기 전에 메뉴를 보고 시험해 볼 수 있습니다. 방문자는 사이트를 보다 빠르고 직관적으로 탐색할 수 있는 메뉴 구조를 높이 평가할 것입니다.

네 차례 야! 나만의 맞춤 메뉴 구조를 만드셨나요? 추가할 사항이 있습니까? 플러그인을 사용하여 메뉴를 수정합니까? 아래 의견에 대해 알려주십시오.