워드프레스 GeneratePress 테마 메가 메뉴 만드는 방법

아바다 테마 등 일부 다목적 워드프레스 테마에서는 메마 메뉴 기능을 제공합니다. 하지만 모두가 이 기능을 필요한 것이 아니고 상당한 양의 CSS 코드를 추가해야 하기 때문에 GeneratePress는 기본적으로 메가 메뉴를 제공하지 않습니다. 이 글에서는 GeneratePress 테마에서 심플한 메가 메뉴를 만드는 방법에 대해 살펴보겠습니다.

워드프레스 GeneratePress 테마 메가 메뉴 만드는 방법

메가 메뉴(Mega Menu)를 원하시는 분이 종종 계시지만 먼저는 주지해야 할 점은 메가 메뉴는 SEO(검색엔진최적화)에 그다지 좋지 않다는 점입니다. SEO에 유리한 내비게이션 메뉴 구조에 대하여 여기에서 확인할 수 있습니다.

그럼에도 불구하고 메가 메뉴를 원하는 경우 워드프레스에서는 아바다, 엔폴드, 뉴스페이퍼 등의 테마에서는 자체적으로 제공되는 기능을 사용할 수 있고, 메가 메뉴 기능이 없는 경우에는 플러그인을 사용할 수 있습니다.

GeneratePress 테마를 사용하는 경우 심플한 메가 메뉴를 비교적 수월하게 만들 수 있습니다. 약간의 CSS 코드를 추가하고 메뉴 구조를 올바르게 구성하면 됩니다.

심플한 메가 메뉴 만들기 (단계 요약)

기본적인 단계는 다음과 같습니다.

워드프레스 GeneratePress 테마 메가 메뉴 샘플

GeneratePress 테마에서는 약간의 CSS 코드를 추가하고 메뉴 구조를 올바르게 구성하여 어렵지 않게 심플한 메가 메뉴를 구현할 수 있습니다.

1. CSS 코드 추가하기

먼저 외모 > 사용자 정의하기 > 추가 CSS로 이동하여 아래에서 제시하는 CSS 코드를 추가합니다.

2. 메가 메뉴 구조 만들기

외모 > 메뉴에서 새로운 메뉴를 만들거나 기존 메뉴를 사용하여 메뉴 구조를 메가 메뉴에 맞게 구성합니다. 기본적으로 메인 부모 항목 - 자식 항목(헤딩) - 손자 항목(개별 링크) 구조를 가지게 됩니다.

3. 부모 메뉴 항목에 CSS 클래스 추가하기

마지막 단계로 메인 부모 항목에 mega-menu 클래스를 추가합니다. 메뉴 항목에 CSS 클래스를 추가하는 필드가 표시되지 않는 경우 화면 옵션을 클릭하여 CSS 클래스 입력 필드를 표시하도록 활성화할 수 있습니다.

GeneratePress 테마에서 심플한 메가 메뉴를 만드는 방법(상세 단계)

이제 위에서 설명한 단계를 상세히 살펴보도록 하겠습니다.

외모 > 사용자 정의하기 > 추가 CSS로 이동하여 맨 아래에 다음과 같은 CSS 코드를 추가합니다.

/* 제너레이트프레스 테마에 심플한 메가 메뉴 구성하기 */
/* To build a simple Mega Menu in GeneratePress */

@media (min-width: 769px) {
    nav .main-nav .mega-menu {
        position: static;
    }

    nav .main-nav .mega-menu > ul {
        position: absolute;
        width: 100%;
        left: 0 !important;
        display: flex;
        flex-wrap: wrap;
    }

    nav .main-nav .mega-menu > ul > li > a {
        font-weight: bold;
    }

    nav .main-nav .mega-menu>ul>li {
        display: inline-block;
        width: 25%;
        vertical-align: top;
    }

    nav .main-nav .mega-menu.mega-menu-col-2>ul>li {
        width: 50%;
    }

    nav .main-nav .mega-menu.mega-menu-col-3>ul>li {
        width: 33.3333%;
    }

    nav .main-nav .mega-menu.mega-menu-col-5>ul>li {
        width: 20%;
    }

    nav .main-nav .mega-menu > ul > li:hover > a,
    nav .main-nav .mega-menu > ul > li:focus > a,
    nav .main-nav .mega-menu > ul > li[class*="current-"] > a,
    nav .main-nav .mega-menu ul ul {
        background-color: transparent !important;
        color: inherit;
    }

    nav .main-nav .mega-menu ul .sub-menu {
        position: static;
        display: block;
        opacity: 1;
        visibility: visible;
        width: 100%;
        box-shadow: 0 0 0;
        left: 0;
        height: auto;
        pointer-events: auto;
        transform: scale(1);
    }

    nav .main-nav .mega-menu ul.toggled-on .sub-menu {
        pointer-events: auto;
    }

    nav .main-nav .mega-menu .sub-menu .menu-item-has-children .dropdown-menu-toggle {
        display: none;
    }
}

커스텀 CSS 코드를 추가하는 방법에는 여러 가지가 있습니다. 차일드 테마를 만든 경우 차일드 테마 내의 style.css 파일에 추가하는 것도 가능합니다. 중요한 것은 시간이 지나면서 위의 코드를 삭제하거나 바꾸지 않는 것입니다. 상기 코드를 삭제하거나 업데이트할 경우 메가 메뉴가 제대로 작동하지 않을 것입니다.

다음으로 외모 > 메뉴로 이동하여 새로운 메뉴를 만들거나 기존 메뉴를 활용하여 메가 메뉴 구조로 바꾸어야 합니다.

  1. 기본적으로 메인 내비게이션 표시줄에 표시될 메인 부모 항목(main parent item)이 있어야 합니다.
  2. 메인 부모 항목 아래에는 일련의 자식 항목(child item)들이 위치하게 됩니다. 이러한 자식 항목들이 메가 메뉴 헤딩(소제목)이 됩니다.
  3. 자식 항목 아래에는 개별 링크로 표시될 손자 항목(grandchild item)들이 위치하게 됩니다.

예시:

제너레이트프레스 테마 메가 메뉴 구조 예시

위의 그림과 같이 구성하면 자식 항목인 하위 항목, 하위 항목, 쇼핑몰, 카테고리가 헤딩으로 표시되고, 그 아래에 손자 항목들이 표시됩니다.

페이지를 부모 항목과 하위 항목을 페이지로 추가한 경우, 해당 항목들도 링크가 가능해집니다. 만약 부모 항목이나 하위 항목이 링크가 되지 않도록 하고 싶은 경우에는 사용자 정의 링크로 메뉴 항목을 추가하면 됩니다("워드프레스에서 외부 링크 또는 특정 링크를 메뉴에 추가하기"에서 "특정 메뉴 항목의 링크 제거하기" 부분 참고).

마지막으로 부모 항목에 mega-menu 클래스를 추가하면 작업이 완료됩니다.

워드프레스 메뉴 항목 CSS 클래스 추가하기

CSS 클래스 입력 필드가 표시되지 않는 경우 "워드프레스 메뉴에 사용자 정의 CSS 클래스 추가 방법"을 참고하시기 바랍니다.

이제 메뉴를 저장하고 사이트를 새로 고침하면 메가 메뉴로 표시되는 것을 확인할 수 있습니다.

워드프레스 GeneratePress 테마 메가 메뉴 샘플

컬럼 개수 변경하기

기본적으로 위의 그림과 같이 4개 열로 메뉴가 표시가 표시됩니다.

부모 항목에 부가적으로 CSS 클래스를 추가하여 컬럼 개수(열 개수)를 조정할 수 있습니다.

다음과 같은 CSS 클래스를 사용할 수 있습니다.

mega-menu-col-2
mega-menu-col-3
mega-menu-col-4
mega-menu-col-5

예를 들어, 컬럼 개수를 2개로 표시하고 싶은 경우에는 mega-menu-col-2를 부모 항목의 CSS 클래스 필드에 더 추가하면 됩니다.

워드프레스 GeneratePress 메가메뉴 - 컬럼 개수 2개로 조정

마치며

이상으로 제너레이트프레스 테마에서 심플한 Mega Menu를 만드는 방법에 대해 살펴보았습니다. 플러그인을 사용하면 조금 더 편리하겠지만 사이트 속도에는 안 좋은 영향을 미칠 수 있고, 메가 메뉴가 SEO에 부정적이기 때문에 꼭 메가 메뉴를 원하는 경우 위와 같은 방법으로 단순하게 만드는 것도 고려해볼 수 있을 것 같습니다.

참고


3개 댓글

  1. 좋은 정보 감사합니다.
    아래는 그냥 제가 코드를 이해했는지 확인할려고 문의드리는 건데요..

    nav .main-nav .mega-menu>ul>li {
    display: inline-block;
    /* width: 25%; --> 아래 Column-4 추가 */
    vertical-align: top;
    }

    nav .main-nav .mega-menu.mega-menu-col-2>ul>li {
    width: 50%;
    }

    nav .main-nav .mega-menu.mega-menu-col-3>ul>li {
    width: 33.3333%;
    }

    /* Column-4 추가 */
    nav .main-nav .mega-menu.mega-menu-col-4>ul>li {
    width: 25%;
    }

    nav .main-nav .mega-menu.mega-menu-col-5>ul>li {
    width: 20%;
    }

    위 처럼 하고 "mega-menu-col-4"를 CSS 클래스(선택사항)에 추가해도 동일한 거죠? 물론 다른 Column 수를 Width만 조정해서 위로 올려도 되구요..

    1. 안녕하세요,술꼬장님. 위와 같이 바꾸신다면 부모 메뉴 항목의 CSS 클래스 필드에 "mega-menu mega-menu-col-4"를 입력하면 4컬럼으로 표시될 것 같습니다.

댓글 남기기

* 이메일 주소는 공개되지 않습니다.