워드프레스 Flatsome 테마: 플라이아웃 (Flyout) 메뉴 문제

인기 워드프레스 테마 중 하나인 Flatsome 테마는 워드프레스에서 쇼핑물 사이트를 제작할 때 많이 사용됩니다. 플랫썸 테마에는 메가 메뉴 기능이 탑재되어 있습니다. 경우에 따라 일반적인 드롭다운 형식의 메뉴(플라이아웃 메뉴)를 원하는 경우가 있을 수 있습니다. Flatsome 테마에서는 메가 메뉴를 비활성화하고 플라이아웃 메뉴로 표시하는 기능이 지원되지 않습니다.

워드프레스 Flatsome 테마 플라이아웃 (Flyout) 메뉴 문제

플랫섬 테마는 주간 베스트셀링 테마 리스트에 꾸준히 이름을 올리고 있는 다목적 우커머스 테마(Multi-Purpose Responsive WooCommerce Theme)입니다.

워드프레스 쇼핑몰을 만들 때 플랫섬 테마를 사용하면 편리할 수 있습니다. 참고로 쇼핑몰과 함께 회사 사이트, 블로그 등을 함께 운영하려는 경우 아바다, 엔폴드, Divi 등과 같은 인기 다목적 테마도 고려해볼 수 있습니다.

플랫섬 테마에는 메가 메뉴 기능이 기본적으로 통합되어 있습니다. 이 때문에 일반적인 드롭다운 메뉴를 구현할 수 없습니다. 예를 들어, 다음과 같이 하위 메뉴 항목이 있는 드롭다운 형식으로 메뉴를 구성할 경우:

다음과 같이 기대했던 것과 다른 모양으로 메뉴가 표시됩니다.

플라이아웃 (Flyout) 메뉴를 구현하려는 경우 다음 그림과 같이 1차 레벨의 하위 메뉴 항목 만으로 구성할 수 있습니다.

그러면 다음과 같이 깔금하게 메뉴가 표시됩니다.

2차 하위 메뉴 항목을 추가하려는 경우, 이와 관련하여 플랫섬에서는 "Main Menu" 요소 대신 "Nav Icon"을 사용할 수 있다는 답변을 주고 있습니다. 하지만 "Nav Icon"으로 바꿀 경우에는 일반적인 메뉴 형식이 아닌 아이콘으로 내비게이션 메뉴가 표시됩니다.

메뉴 아이콘으로 변경하려면 워드프레스 관리자 페이지 > 테마 디자인 > 사용자 정의하기 > Header > Header Mobile Menu / Overlay로 이동하시기 바랍니다. 

위의 그림과 같이 "Main Menu"를 제거하고 대신 "Nav Icon"을 끌어다 놓을 수 있습니다. 하지만 그럴 경우 상기 그림과 같이 메뉴가 아이콘 형식으로 표시되고, 메뉴 아이콘을 누르면 세로로 메뉴가 펼쳐집니다.

다른 방법으로 "Main Menu" 대신 "HTML"을 추가하여 직접 HTML과 CSS로 메뉴를 만들 수 있습니다.

하지만 이 방식은 워드프레스에서 일반적이지 않습니다. 원할 경우 구글을 검색하여 적절한 HTML 메뉴 소스를 찾아서 적용해볼 수 있습니다. 이 방식을 채택할 경우 워드프레스 관리자 페이지 > 테마 디자인 > 메뉴에서 지정하는 메뉴는 사용할 수 없습니다. 대신, 직접 HTML로 하드 코딩을 해야 하고, 모바일에 대해서도 적절히 대응해야 합니다. 이런 소스를 구글을 통해 구할 수 있을 것입니다.

Flatsome에서는 일반적인 메뉴 구조(플라이아웃 메뉴)를 지원하지 않으므로 서드파티 플러그인 사용을 제시하고 있다.

일반적인 메뉴 구조를 구현하기 위해 플러그인을 사용한다는 것은 별로 바람직해 보이지 않습니다. Flatsome에서 Mega Menu 기능을 활성화/비활성화할 수 있는 기능을 제공해주면 좋겠다는 생각이 드네요.

마치며

이상으로 워드프레스 Flatsome 테마에서 플라이아웃 메뉴와 관련된 문제에 대해 살펴보았습니다. 참고로 메뉴를 복잡하게 구성하는 것은 SEO에 좋지 않습니다. 가능한 한 꼭 필요한 메뉴 항목만으로 심플하게 구성하는 것이 바람직합니다.

SEO(검색엔진최적화)에 유리한 웹사이트 메뉴 구조

참고

https://avada.tistory.com/1856

워드프레스 플랫섬 테마 (Flatsome Theme) 계정 옵션 설정

https://avada.tistory.com/1872

워드프레스 Divi 테마용 무료 PR회사 레이아웃 팩