WordPress에 메가 메뉴를 추가하는 방법(+5 최고의 플러그인)

메뉴는 웹사이트의 디자인과 기능에 중요한 역할을 합니다. 방문자가 페이지를 탐색하는 데 도움이 되며 전반적인 사용성을 개선할 수 있습니다. 그러나 콘텐츠가 많을 때 혼잡하거나 혼란스러워 보이지 않으면서 콘텐츠를 표시하는 방법을 찾는 것은 어려울 수 있습니다.

이것이 메가 메뉴가 필요한 곳입니다. WordPress 메가 메뉴는 웹사이트를 보다 전문적으로 보이게 하고 사람들이 원하는 콘텐츠를 더 쉽게 찾도록 도와줍니다. 또한 웹 사이트에 추가하는 데 사용할 수 있는 여러 가지 방법이 있습니다.

이 게시물에서는 메가 메뉴가 무엇인지, 워드프레스에서 메가 메뉴를 사용할 때의 이점에 대해 설명합니다. 그런 다음 하나를 만드는 옵션을 안내하고 최고의 메가 메뉴 플러그인 옵션 5개를 탐색합니다.

WordPress의 메가 메뉴는 무엇입니까?

WordPress 메뉴는 웹사이트 페이지를 구성하고 표시하는 데 사용하는 구조입니다. 일반적으로 사이트 상단에 있지만 측면에 있거나 다른 독특한 방식으로 표시될 수도 있습니다.

기본 제공 메뉴 시스템에 액세스하려면 WordPress 사이트에 로그인하여 시작할 수 있습니다. 그런 다음 관리 대시보드에서 모양 → 메뉴 로 이동합니다.

기본적으로 WordPress는 페이지 목록을 표시하는 표준 메뉴를 사용하며 때로는 1열 드롭다운이 있습니다. 이미지, 설명 등과 같은 추가 정보나 콘텐츠는 없습니다. 그저 일련의 목록일 뿐입니다. 일반적으로 매우 간단하고 간단하지만 포함할 수 있는 페이지 수나 볼륨 또는 정보에 관해서는 제한이 있습니다. 다음은 WooCommerce의 예입니다.

메가 메뉴는 사용자가 한 곳에서 많은 양의 콘텐츠에 액세스할 수 있는 일종의 드롭다운 메뉴입니다. 메가 메뉴는 전자 상거래 웹사이트에서 자주 사용되며 다른 유형에서도 점점 인기를 얻고 있습니다. Nalgene 사이트에서 제품 사진, 슬라이더 및 기타 콘텐츠를 수평 스타일에 가깝게 보여주는 예를 볼 수 있습니다.

주요 차이점은 메가 메뉴에는 일반적으로 여러 열의 콘텐츠가 있는 반면 기존의 드롭다운 메뉴에는 하나의 열만 있다는 것입니다. 이것은 훨씬 더 강력하고 포괄적인 메뉴를 허용하며 많은 정보가 있는 웹사이트에서 특히 유용할 수 있습니다.

WordPress에서 메가 메뉴를 사용하는 이유는 무엇입니까?

메가 메뉴를 사용하는 이점 중 하나는 특정 콘텐츠로 이동하는 데 필요한 클릭 수를 줄일 수 있다는 것입니다. 이것은 귀하의 웹사이트에서 특정한 것을 찾는 방문자에게 유용할 뿐만 아니라 처음 방문자가 귀하의 사이트를 보다 효율적으로 탐색할 수 있도록 도와줌으로써 사용자 경험을 향상시킵니다.

메가 메뉴는 웹사이트의 모양과 느낌을 개선하고 특정 콘텐츠를 홍보하거나 방문자가 취하기를 원하는 행동을 장려하는 데에도 사용할 수 있습니다. 또한 사용자 정의가 가능하므로 나머지 브랜드와 조화를 이루어 시각적으로 매력적인 경험을 제공할 수 있습니다.

WordPress 메가 메뉴를 만드는 방법

WordPress에서 메가 메뉴를 만드는 방법에는 몇 가지가 있습니다. 한 가지 옵션은 사용자 지정 코드를 추가하여 수동으로 수행하는 것입니다. 다른 (빠르고 쉬운) 옵션은 플러그인을 사용하는 것입니다. 이 두 가지 방법을 모두 사용하여 WordPress에 메가 메뉴를 추가하는 방법을 살펴보겠습니다.

수동으로 메가 메뉴 만들기(플러그인 없이)

사이트 파일 작업에 익숙하다면 매우 독특한 것을 만드는 데 좋은 옵션이 될 수 있습니다.

이 작업을 수행하기 전에 WordPress 사이트를 백업하는 것이 중요합니다. 라이브로 푸시하기 전에 메가 메뉴를 구축하고 테스트하기 위해 스테이징 사이트를 만드는 것을 고려할 수도 있습니다. 이렇게 하면 라이브 사이트의 기능을 중단시키는 문제를 방지하는 데 도움이 됩니다.

먼저 WordPress 대시보드에서 모양 → 메뉴 로 이동하고 메뉴 이름을 지정합니다.

메뉴 만들기 버튼을 클릭합니다. 메가 메뉴에 포함할 페이지를 끌어다 놓아 필요한 경우 하위 메뉴로 들여씁니다.

완료되면 메뉴 저장 을 선택할 수 있습니다.

그런 다음 cPanel의 파일 관리자로 이동하거나 FTP(파일 전송 프로토콜) 클라이언트를 사용하여 웹사이트 파일에 연결합니다. / wp-content → /themes → /your-theme-or-child-theme → /style.css로 이동하여 테마의 스타일시트를 찾으세요. 맨 아래에 다음 코드 줄을 추가합니다.

 .main-navigation ul:hover li ul, .main-navigation ul:hover li ul li ul { display: inherit; }

이렇게 하면 누군가가 최상위 항목 위로 마우스를 가져갈 때 하위 메뉴 항목이 나타납니다. 이제 각 하위 수준 항목이 전체 너비로 표시되고 항목 섹션이 나란히 표시되도록 코드를 사용자 지정하여 시각적으로 좀 더 매력적으로 만듭니다. 다음 코드를 추가하세요.

 .main-navigation { position: relative; } .main-navigation li { position: static; } .main-navigation ul li:hover ul { display: inherit; position: absolute; left: 0; right: 0; width: 100%; } .main-navigation ul li:hover ul li ul { display: inherit; position: relative; left: 0; } .main-navigation ul li:hover ul li { float: left; position: static; display: block; padding-top: 1em; } .main-navigation ul li:hover ul li ul li { float: none; padding-top: 0; }

그런 다음 브랜드 및 사이트의 나머지 부분에 따라 원하는 방식으로 스타일을 지정하여 사용할 수 있습니다. 예를 들어 메가 메뉴의 배경색을 바꾸거나 특정 항목을 굵게 표시할 수 있습니다. 열 간격을 조정하거나 사진과 같은 추가 요소를 추가할 수도 있습니다. 개발자이거나 어느 정도의 코드 경험이 있는 경우 메가 메뉴를 원하는 대로 만들 수 있습니다!

더 자세한 가이드를 원하십니까? Tuts+는 전체 연습을 제공합니다.

플러그인 없이 메가 메뉴를 만드는 또 다른 옵션은 테마의 내장 옵션을 확인하는 것입니다. Hestia 테마와 같은 일부는 기본적으로 메가 메뉴 옵션을 포함합니다. 하지만 항상 그런 것은 아닙니다.

WordPress 플러그인으로 메가 메뉴 만들기

사이트 파일을 편집하는 것이 불편하거나 테마에 내장된 메가 메뉴 옵션이 없는 경우 WordPress에서 메가 메뉴를 만드는 데 사용할 수 있는 또 다른 방법은 플러그인을 사용하는 것입니다. 다음 섹션에서 논의할 많은 옵션이 있습니다.

수동으로 만드는 것보다 안전한 옵션이지만 변경하기 전에 WordPress 사이트를 백업해야 합니다.

플러그인의 특정 기능은 사용하기로 결정한 도구에 따라 다릅니다. 그러나 전반적으로 개념은 동일할 것입니다.

Max Mega Menu를 예로 사용하겠습니다. 시작하려면 WordPress 웹사이트에서 플러그인을 설치하고 활성화할 수 있습니다.

다음으로 모양 → 메뉴 로 이동하여 메가 메뉴 기능을 활성화해야 합니다. 원하는 메뉴 위치를 선택한 다음 활성화 옆에 있는 상자를 클릭합니다.

완료되면 변경 사항을 저장합니다. 메가 메뉴 모양 및 설정을 사용자 지정하려면 메가 메뉴 → 메뉴 테마 로 이동할 수 있습니다.

여기에서 메뉴 스타일 지정을 위한 다양한 옵션을 찾을 수 있습니다. 메뉴 유형과 모양 및 기능을 수정할 수 있습니다.

5가지 최고의 WordPress 메가 메뉴 플러그인

메가 메뉴 WordPress 플러그인을 사용하기로 결정했다면 선택할 수 있는 옵션이 많이 있습니다. 당신이 그것들을 조사할 때 당신이 찾고 있는 특정 기능과 당신의 예산을 고려하는 것이 중요합니다. 이를 염두에 두고 5가지 최고의 WordPress 메가 메뉴 플러그인을 자세히 살펴보겠습니다.

1. 최대 메가 메뉴

Max Mega Menu는 WordPress 사이트에 고품질의 맞춤형 메뉴를 쉽게 추가할 수 있는 매우 인기 있는 플러그인입니다. 사용하기 쉬운 끌어서 놓기 빌더가 포함되어 있습니다. 또한 사이트의 다양한 위치에 대해 여러 메가 메뉴를 지원합니다.

Max Mega 메뉴의 주요 기능:

• 개별적으로 구성 가능한 여러 메뉴 위치
• 그리드 레이아웃 빌더
• 메뉴 호버 및 전환 옵션
• 드래그 앤 드롭 빌더
• 단축번호
• 메뉴 항목 아이콘
• 검색창
• 메뉴 로고

Max Mega 메뉴의 장점:

• 무료 및 프리미엄 옵션을 사용할 수 있습니다.
• 가볍고 깨끗한 코드입니다.
• 여기에는 WooCommerce 및 Easy Digital Downloads에 대한 지원이 포함됩니다.
• 메가 메뉴를 여러 위치에 배치할 수 있습니다.
• 위젯을 사용하여 지도, 연락처 양식 등을 추가할 수 있습니다.
• 메가 메뉴를 처음부터 만들거나 기존 메뉴를 사용할 수도 있습니다.
• 키보드 탐색은 접근성을 향상시킵니다.

최대 메가 메뉴의 단점:

• 고급 사용자 지정 옵션은 프로 라이선스에서만 사용할 수 있습니다.
• 프리미엄 플랜에는 무료 평가판이 없습니다.

사용 용이성 :

Max Mega 메뉴는 사용하기 매우 쉽습니다. 기존 메뉴를 메가 메뉴로 자동 변환합니다. 그것은 탐색하기 쉬운 사용자 친화적 인 인터페이스를 가지고 있습니다. 프로 라이선스에는 업데이트 및 우선 지원도 포함됩니다.

가격 :

Max Mega Menu는 사용자 정의 옵션이 제한된 무료 버전을 제공합니다. 고급 기능이 포함된 Pro 플랜은 단일 사이트 라이선스에 대해 $29부터 시작합니다. 여기에는 1년의 지원도 포함됩니다.

2. 쿼드 메뉴

QuadMenu는 경험 수준에 관계없이 사용하기 쉬운 또 다른 인기 있는 메가 메뉴 플러그인입니다. 이 유연한 도구에는 직관적인 드래그 앤 드롭 빌더와 WordPress용 메뉴 및 하위 메뉴 구축을 위한 다양한 스타일 및 사용자 지정 옵션이 포함되어 있습니다.

QuadMenu의 주요 기능 :

• 드래그 앤 드롭 빌더
• 여러 메뉴 위치
• 캔버스 외부, 고정 및 세로 메뉴
• 링크 정렬 옵션
• 플로트 드롭다운 메뉴
• Font Awesome 아이콘 및 Google 글꼴
• 드롭다운 애니메이션
• 다양한 필터
• 디스플레이 위젯

QuadMenu의 장점:

• 무료 버전과 프리미엄 버전이 있습니다.
• 초보자와 개발자에게 적합합니다.
• 그것은 자식 테마를 지원합니다.
• 자동 및 수동 메뉴 통합이 있습니다.
• 직관적이고 사용하기 쉽습니다.
• 프로 버전에서 사용할 수 있는 탭 및 캐러셀 메뉴가 있습니다.

QuadMenu의 단점:

• 고급 스타일링 옵션을 사용하려면 프로 라이선스가 필요합니다.
• 라이브 미리보기 옵션이 제한되어 있습니다.

사용 용이성 :

QuadMenu는 초보자와 개발자 모두에게 적합합니다. 끌어서 놓기 빌더를 사용하면 메가 메뉴를 빠르고 쉽게 만들고 사용자 지정할 수 있습니다.

가격:

QuadMenu에는 무료 버전이 있습니다. Pro 라이선스는 단일 사이트에 대해 $30부터 사용할 수 있습니다.

3. 우버 메뉴

프리미엄 메가 메뉴 빌더를 찾고 있다면 UberMenu를 확인해 볼 가치가 있습니다. 이 강력하고 기능이 풍부한 도구는 전문가 수준의 메가 메뉴를 빠르게 구축할 수 있는 정교한 그리드 시스템을 사용합니다.

UberMenu의 주요 기능 :

• 독특한 그리드 시스템
• 50가지 이상의 스타일 설정
• 동적 아이템 생성
• 게시물, 카테고리 등을 기반으로 하는 하위 메뉴
• 메뉴 내에 탭을 추가하는 옵션
• 터치 지원 메뉴
• 드롭다운 CSS3 전환
• 다중 메뉴 트리거(호버, 호버 의도 및 클릭)
• 다양한 메뉴 위치
• 유연한 레이아웃

UberMenu의 장점 :

• WordPress 사이트 소유자 사이에서 널리 사용되며 높은 평가를 받았습니다.
• 사용자 정의 HTML, 단축 코드 및 위젯을 추가하는 옵션이 있습니다.
• 기본 WordPress Customizer 인터페이스를 사용합니다.
• 무제한 메뉴 테마가 있습니다.

UberMenu의 단점 :

• 프리미엄 버전만 있습니다.
• 테마에 따라 CSS/PHP 프로그래밍 기술이 없으면 최선의 선택이 아닐 수 있습니다.

사용 용이성 :

UberMenu를 사용하는 것은 인터페이스가 네이티브 커스터마이저를 기반으로 하기 때문에 경험 많은 WordPress 사용자에게 쉬운 일입니다. 메뉴를 구축할 때 메뉴의 실시간 미리보기를 볼 수 있습니다. 그러나 WordPress 초보자에게는 직관적인 끌어서 놓기 빌더 인터페이스보다 탐색하기가 더 어려울 수 있습니다.

가격 :

단일 사이트에 대한 UberMenu 라이선스 비용은 $26입니다. 여기에는 6개월간의 개발자 지원이 포함됩니다.

4. 엘리먼트킷

Elementor 페이지 빌더에 익숙하고 사용하는 경우 ElementsKit은 고려해야 할 훌륭한 메가 메뉴 플러그인입니다. 이 도구에는 머리글 및 바닥글 작성기를 특징으로 하는 광범위한 사용자 지정 모듈 라이브러리가 포함되어 있습니다.

ElementsKit의 주요 기능 :

• 라이브 콘텐츠 인터페이스
• 커스텀 모듈 라이브러리
• 머리글 및 바닥글 작성기
• 시차 스크롤
• 200개 이상의 미리 디자인된 페이지 템플릿
• 카운트다운 타이머 위젯
• 드롭다운 애니메이션
• 캔버스 외부, 고정 및 세로 메뉴
• 글꼴 굉장 아이콘
• 밝고 어두운 테마
• 두 가지 모바일 메뉴 레이아웃
• 맞춤 CSS

ElementsKit의 장점 :

• Elementor 페이지 빌더와 완전히 통합됩니다.
• 끌어서 놓기 기능이 포함되어 있습니다.
• 그것은 초보자와 사용자 친화적입니다.
• 아이콘 및 배지 텍스트 색상에 대한 사용자 정의가 있습니다.
• WooCommerce 기능이 내장되어 있습니다.
• 고급 메가 메뉴 옵션을 제공합니다.

ElementsKit의 단점 :

• Elementor 페이지 빌더를 사용하지 않는 한 이상적이지 않습니다.
• 메가 메뉴 빌더 도구만 찾고 있다면 압도적일 수 있습니다.

사용 용이성 :

ElementKits는 간단하고 다양한 도구입니다. Elementor에 익숙하지 않은 경우 인터페이스에 익숙해지는 데 시간이 걸릴 수 있습니다. 그러나 이미 페이지 빌더 플러그인을 사용하고 있다면 이 추가 기능을 곧 사용하게 될 것입니다.

가격 :

ElementsKit은 무료 버전을 제공합니다. 프리미엄 라이선스는 단일 사이트에 대해 연간 $39부터 시작합니다.

5. WP 메가 메뉴

WordPress에서 메가 메뉴를 구축하기 위한 간단하고 간단한 프리미엄 도구를 찾고 있다면 WP 메가 메뉴가 또 다른 확실한 옵션입니다. 이 플러그인은 사용하기 쉽고 다양한 사이트를 위한 고품질 메가 메뉴를 구축하는 데 필요한 모든 기본 기능을 제공합니다. 무료 도구의 경우 사용자 지정 및 스타일 지정을 위한 인상적인 옵션 세트도 함께 제공됩니다.

WP 메가 메뉴의 주요 기능 :

• 직관적인 탐색
• 드래그 앤 드롭 인터페이스
• 메뉴 테마 생성 및 저장 옵션
• 로고, 검색창 및 배경 이미지
• Google 글꼴 및 글꼴 굉장 아이콘
• 소셜 아이콘
• 메뉴 라벨링

WP 메가 메뉴의 장점 :

• 완전히 무료로 다운로드하여 사용할 수 있으며 프로 업그레이드가 가능합니다.
• 탐색하고 사용하기 쉽습니다.
• 다른 플러그인에는 프리미엄 버전에만 포함되는 기능이 있습니다.
• 여러 웹 사이트에서 사용할 메뉴 테마를 만들고 저장할 수 있는 옵션이 있습니다.

WP 메가 메뉴의 단점 :

• 다른 플러그인 옵션에 비해 개발자를 위해 설계된 도구가 부족합니다.
• 무료 버전에는 고정 또는 캔버스 외 옵션이 없습니다.

사용 용이성 :

WP Mega Menu는 다양한 옵션이 있는 초보자 친화적인 플러그인입니다. 이해하고 탐색하기 쉬운 직관적인 인터페이스와 함께 제공됩니다.

가격 :

WP 메가 메뉴는 무료입니다. 그러나 단일 라이선스에 대해 연간 $29부터 시작하는 프리미엄 플랜도 제공합니다.

WordPress의 최고 메가 메뉴 플러그인 비교

메가 메뉴 관련 자주 묻는 질문(FAQ)

이 시점에서 WordPress에서 메가 메뉴를 만들고 추가하는 방법을 확실히 이해하셨기를 바랍니다. 하지만 잠시 시간을 내어 몇 가지 자주 묻는 질문(FAQ)으로 마무리하겠습니다.

WordPress 메가 메뉴에 이미지와 아이콘을 추가할 수 있습니까?

예, WordPress 메가 메뉴에 이미지와 아이콘을 추가할 수 있습니다. 일부 플러그인에는 이에 대한 지원이 내장되어 있습니다. 또는 웹사이트의 코드를 편집하여 이미지와 아이콘을 추가할 수도 있습니다.

WordPress 사이드바에 메가 메뉴를 추가할 수 있습니까?

예, WordPress 사이드바에 메가 메뉴를 추가할 수 있습니다. 사이드바에 메가 메뉴를 추가하는 데 사용할 수 있는 몇 가지 플러그인이 있습니다. 메뉴를 위젯으로 표시할 수 있는 대부분의 플러그인은 사이드바에 추가할 수도 있습니다.

WordPress 메뉴 사용자 정의 시작

메뉴는 모든 사이트의 모양과 느낌을 개선하는 데 사용할 수 있기 때문에 웹사이트의 디자인과 기능에 필수적인 역할을 합니다. 따라서 콘텐츠와 페이지가 많은 대규모 WordPress 웹 사이트가 있는 경우 메가 메뉴 추가를 고려할 수 있습니다.

이 게시물에서 논의한 것처럼 WordPress에서 메가 메뉴를 만드는 데 사용할 수 있는 세 가지 주요 방법이 있습니다. 하나는 메가 메뉴를 추가하기 위해 테마의 옵션을 사용하는 것입니다. 두 번째는 수동으로 코딩하는 것입니다. 둘 다 가능하지 않거나 시간을 절약하려는 경우 Max Mega Menu, QuadMenu 또는 ElementsKit과 같은 메가 메뉴 플러그인을 사용해 볼 수 있습니다.

WordPress 사이트의 성능을 더욱 향상시키고 싶으십니까? Jetpack은 간편한 자동 백업 및 기타 WordPress 보안 기능을 제공하는 것 외에도 사이트의 속도와 UX를 향상시키는 데 도움이 될 수 있습니다!