튜토리얼: WordPress 웹사이트를 위한 메가 메뉴를 만드는 방법

오늘 은 워드프레스 웹사이트에 메가 메뉴를 만드는 방법을 배웁니다. 메가 메뉴를 사용하면 페이지 로드 시간을 늘릴 수 있지만 사용자 경험을 크게 향상시킬 수 있습니다. 또한 웹 사이트가 다르게 보이도록 도와줍니다.

군중 속에서 눈에 띄는 기술은 마스터하기가 쉽지 않습니다. 그러나 WordPress에 사용할 수 있는 타사 솔루션 덕분에 전문적인 화장을 하기 위해 힘든 길을 걷지 않아도 됩니다.

기능을 처리할 수 있는 타사 플러그인을 사용할 수 있으며 전체 테마를 변경할 수 있는 경우 기본 제공 기능을 찾는 것도 실행 가능한 솔루션이 될 수 있습니다.

이 경우 플러그인 메서드를 찾습니다. 그러나 특정 테마와의 호환성 측면으로 인해 모든 상황에서 작동하지 않을 수 있습니다. 몇 가지 플러그인을 추천할 것이지만 최종 결정을 내리기 전에 호환성 탭을 찾아볼 수 있습니다.

그래도 테마 옵션을 사용하는 것이 안전하고 웹 사이트를 추가 플러그인 없이 유지하기 때문에 권장합니다. 메가 메뉴 기능으로 모던한 테마를 쉽게 찾을 수 있습니다.

이제 더 이상 귀중한 시간을 낭비하지 않고 사용 가능한 옵션을 살펴보겠습니다.

메가 메뉴란 정확히 무엇인가요?

모든 WordPress 테마에는 기본 제공 탐색이 포함되어 있으며 기본 제공 메뉴 도구를 통해 사용자 정의할 수 있습니다. 그러나 기능이 제한되어 있고 전체적인 모양이 밋밋합니다. 간단히 말해서 전통적인 것은 둔해 보입니다.

웹 디자인의 발전과 함께 디자이너들은 탐색 영역을 개선하는 데 주력하기 시작했고, 이번에 메가 메뉴라는 용어가 만들어졌습니다. 더 나은 그래픽, 시각 효과 및 애니메이션으로 방문자를 끌어들이고 그에게 놀라운 효과를 주는 전통적인 메뉴의 고급 형태입니다.

메가 메뉴를 만드는 플러그인

이 기능이 테마에서 지원되지 않는 경우 최고의 메가 메뉴 플러그인이라고 하는 최고의 타사 솔루션이 있습니다.

#1 최대 메가 메뉴

유료 버전으로도 제공되는 무료 솔루션으로 고급 기능을 잠금 해제하고 300,000명 이상의 활성 사용자가 사용하고 있습니다. 간단한 드래그 앤 드롭 도구와 함께 작동하므로 웹마스터가 코드를 전혀 작성하지 않고도 개발 부분을 신속하게 처리할 수 있습니다. 모든 효과와 구성을 설정하고 원하는 결과를 얻을 수 있는 간단한 도구 상자가 들어 있습니다.

전체 세부 정보 및 다운로드

#2 WP 스티키

WP Sticky는 페이지에서 메뉴를 고정하려는 경우 완벽한 플러그인입니다. 메뉴가 고정되어 있으면 사용자가 웹사이트를 탐색하는 동안 해당 메뉴가 제자리에 유지됩니다. 결과적으로 메뉴는 항상 쉽게 액세스할 수 있고 내용에서 벗어나지 않으며 시각적으로 즐겁습니다.

또한 WP Sticky를 사용하면 원하는 만큼 스티커 요소를 만들 수 있으므로 메뉴에만 국한되지 않아도 됩니다. 또한 이 플러그인을 사용하면 경험이 없는 코드 작성자가 아니더라도 걱정할 필요가 없습니다. WP Sticky는 코딩이 필요하지 않으며 화면에서 바로 요소를 선택하기만 하면 됩니다.

예를 들어 메뉴를 선택하면 위치, 높이, 너비 및 불투명도를 구성할 수 있습니다. 각 페이지 또는 게시물에서 특정 요소를 원하는지 또는 특정 게시물 또는 페이지에서 제외할지 여부를 선택할 수도 있습니다.

#3 우버메뉴

CodeCanyon의 프리미엄 플러그인이자 인기 있는 플러그인으로 경쟁업체에서는 거의 사용할 수 없는 기능을 제공합니다. 디자인은 여기의 주요 매력이며 사용자 정의를 위해 수많은 옵션을 사용할 수 있습니다. 개발자는 최신 WordPress 버전과 항상 호환되도록 정기적인 업데이트를 제공하고 전용 지원도 제공합니다.

전체 세부 정보 및 다운로드

#4 메가 메인 메뉴

아이콘을 표시하는 것이 주요 목표였다면 여기에서 마지막 권장 사항을 확인하십시오. 개발자의 전담 지원도 포함하는 패키지로 제공되는 프리미엄 솔루션입니다. 다른 사용자 정의 옵션과 함께 1600개 이상의 벡터 아이콘과 600개 이상의 Google 글꼴이 포함되어 있습니다. 시작하는 것은 매우 간단하고 UI는 빠르게 상호 작용하고 작업을 빠르게 완료합니다.

전체 세부 정보 및 다운로드

WooRockets.com의 #5 메가 메뉴

공개를 위해 Github에서 사용할 수 있는 무료 제품입니다. WordPress와 완벽하게 작동하며 라이브 미리보기와 같은 기능을 갖춘 전용 빌더를 제공합니다. 수직 및 수평 방향 모두 최종 제품에서 지원되며 사용자 정의 CSS도 지원합니다.

#6 NOO 메뉴

사용이 매우 간편하고 신속하게 처리할 수 있는 즉, 시간이 덜 소요되는 프리미엄 제품을 찾고 있다면 여기를 살펴봐야 합니다. 주로 모바일 장치에서 모듈의 기능에 중점을 두고 응답성 측면에서 더 나은 스코어카드를 얻을 수 있도록 합니다. 또한 직관적인 대화형 UI 덕분에 터치스크린 장치를 완벽하게 지원합니다.

#7 DW 메가 메뉴

방금 확인한 플러그인과 비교할 때 이것은 새롭지만 기회를 가질 가치가 있습니다. 여기에는 가격이 부과되지 않으며 제공하는 최고의 기능은 메뉴 영역에서 사용할 HTML 임베딩 및 단축 코드를 지원한다는 것입니다. 위젯도 지원하며 적절한 문서와 함께 제공됩니다.

WordPress 웹 사이트의 메가 메뉴를 만드는 방법

위 스택에서 선택하는 플러그인에 따라 정확한 방법이 달라집니다. 모든 경우에 플러그인에 의해 메가 메뉴로 변환될 기존 메뉴를 만들어야 합니다.

그럼 워드프레스에서 메뉴를 만드는 방법을 알아보겠습니다. 이것은 사용된 테마 및 플러그인과 상관없이 모든 최신 설치에서 작동합니다.

1단계 – 웹사이트의 대시보드 영역에 로그인하고 모양 탭에서 메뉴 를 클릭합니다.

2단계 – ' 새 메뉴 만들기 ' 링크를 클릭하고 기본 또는 맨 위 또는 바닥글과 같은 이름을 입력합니다. 메뉴 만들기 ' 버튼을 누릅니다.

3단계 – 이제 새로 생성된 메뉴가 활성화되고 해당 영역에 대한 카테고리 또는 태그 또는 사용자 정의 링크를 가져올 수 있습니다. 여기에서 끌어서 놓기 기능이 작동하며 요소를 재정렬할 수 있습니다.

4단계 – 마지막으로 선택 영역 아래에서 메뉴 위치를 선택하라는 메시지가 표시됩니다. 하나(테마에 따라 다름)를 선택하고 ' 메뉴 저장 ' 버튼을 클릭하여 라이브로 만듭니다.

동일한 영역에서 기존 항목을 편집할 수 있으며 이러한 모든 작업은 Live Customizer 도구에서도 수행할 수 있습니다.

개별 플러그인은 서로 약간씩 다르게 작동하지만 핵심 프로세스는 동일합니다. 메뉴가 작동하면 한두 번의 클릭으로 메가 메뉴로 변환할 수 있습니다. 나중에 개인 취향에 따라 사용자 정의 할 수 있습니다.

결론

이것은 완벽한 솔루션을 얻기 위해 추천할 수 있는 절차와 플러그인에 관한 모든 것이었습니다.

WP Sticky 플러그인을 사용해 볼 것을 권장하지만 어떤 것을 결정했는지 알려주십시오. 귀하의 피드백은 이 가이드를 더욱 개선하는 데 도움이 될 것입니다. 이제 이 튜토리얼을 모든 소셜 네트워크와 공유할 시간입니다. 평화!

*최종 업데이트 01/06/2020