워드프레스 아스트라 테마 모바일 메뉴 레이아웃 변경 (햄버거 메뉴 vs. PC용 메뉴)

워드프레스 아스트라 테마를 사용하는 경우 모바일 기기에서는 햄버거 메뉴가 표시됩니다. 모바일에서도 PC 버전과 동일한 레이아웃의 메뉴를 표시하기를 원하는 경우 Astra 테마의 Header Builder에서 구성이 가능합니다. 이 글에서는 아스트라 테마 모바일 메뉴 레이아웃을 변경하는 방법에 대해 살펴보겠습니다.

워드프레스 아스트라 테마 Header Builder

Astra 버전 3.0.0에서 Header Footer 빌더 기능이 추가되었습니다. 아스트라의 Header Builder와 Footer Builder를 사용하여 직관적으로 헤더와 푸터를 구성할 수 있게 되었습니다.

아스트라 헤더 빌더를 사용하여 모바일 헤더를 만드는 방법에 대한 자세한 내용을 "How To Create Mobile Header With Astra Header Builder?"에서 확인할 수 있습니다.

Header Builder를 사용하여 모바일 헤더를 PC나 태블릿 헤더와 다르게 만들 수 있습니다. 헤더 빌더를 사용하여 모바일 헤더에 햄버거 메뉴 대신 데스크톱에서 표시되는 레이아웃의 메뉴를 표시할 수 있습니다. 하지만 데스크톱 헤더에서는 햄버거 메뉴를 표시하는 옵션은 없는 것 같습니다.

이전 버전의 Astra 테마에서는 Header > Primary Menu > MOBILE MENU에서 Menu Breakpoint(메뉴 분기점) 값을 변경하여 모바일 기기에서 햄버거 메뉴 대신 PC용 메뉴를 표시할 수 있습니다.

메뉴 분기점 기능은 이제 무료 버전에서는 제공되지 않고, 유료 버전에서 비슷한 기능이 제공된다고 합니다(아래 "아스트라 테마의 모바일 분기점 옵션" 참고).

참고로 GeneratePress 테마에서는 Mobile Menu Breakpoint(모바일 메뉴 분기점) 세팅을 조정하여 PC에서도 모바일용 메뉴를 사용하도록 설정할 수 있거나 모바일에서 PC용 메뉴를 사용하도록 설정하는 것이 가능합니다("GeneratePress 테마로 워드프레스 블로그 세팅 예시 (How to Customize GP)" 참고).

아스트라 테마의 Header Builder를 사용하여 모바일 메뉴 레이아웃 변경하기 - 모바일에서 햄버거 메뉴 대신 PC용 메뉴 사용하기

아스트라 테마에서는 외모 > 사용자 정의하기 > Header Builder에서 데스크톱/태블릿/모바일용 헤더를 구성할 수 있습니다.

모바일 기기에서 햄버거 메뉴 대신 PC에서 표시되는 메뉴 레이아웃을 사용하고 싶은 경우 Header Builder 화면에서 하단의 모바일 기기 아이콘을 클릭하고 다음과 비슷하게 헤더를 구성하면 됩니다.

워드프레스 아스트라 테마 모바일 메뉴 레이아웃 변경 (햄버거 메뉴 vs. PC용 메뉴)

위의 그림에서와 같이 Toggle Button (토글 버튼) 요소를 삭제하고 주 메뉴를 배치하면 모바일 장치에서도 PC와 동일한 레이아웃의 메뉴를 표시할 수 있습니다.

그리고 주 메뉴 요소를 클릭하여 속성에서 "Stack on Mobile" 옵션을 해제하도록 합니다.

아스트라 테마 Header Builder 사용하기

Stack on Mobile 옵션을 활성화하면 메뉴가 세로로 쌓이는 형식으로 표시됩니다. 위의 화면에서 이 옵션을 활성화/비활성화하여 메뉴가 어떻게 표시되는지 사용자 정의하기 화면에서 확인할 수 있습니다.

Design 탭을 클릭하여 메뉴 배경색과 글자색, 내부 여백, 외부 여백 등의 디자인 요소를 설정할 수 있습니다.

모바일 기기에서도 메뉴를 PC에서와 동일한 레이아웃으로 표시할 경우 메뉴 항목이 많으면 메뉴가 여러 라인에 걸쳐 표시되어 어색하게 표시될 수 있습니다. 모바일 기기에서 햄버거 레이아웃 대신 일반적인 레이아웃의 메뉴를 표시하는 경우 메뉴 항목 개수를 최소화하는 것이 보기에 좋을 것 같습니다.

아스트라 테마의 모바일 분기점 옵션

아스트라 버전 2.4.0에서 모바일과 태블릿에 대한 반응형 분기점(Responsive Breakpoint)을 설정할 수 있는 기능이 제공되었습니다. How to Update Responsive Breakpoints for Tablet+Mobile in Astra? 글을 참고하여 모바일 분기점과 태블릿 분기점을 설정할 수 있었습니다. 예시:

// Update your custom mobile breakpoint below - like return 544;
add_filter( 'astra_mobile_breakpoint', function() {
    return 544;
});

하지만 최신 버전의 아스트라 테마에서는 이 방법이 더 이상 작동하지 않는 것 같습니다.

아스트라에 의하면 버전 3.3.0부터 Menu Breakpoint와 비슷한 기능을 도입했지만 무료 버전에서는 제공되지 않는다고 합니다. 그러므로 최신 아스트라 테마에서 메뉴 브레이크포인트 기능을 사용하여 모바일 메뉴 분기점을 설정하고 싶은 경우에는 아스트라 프로 버전을 사용해야 합니다.

We introduced something similar with Menu Breakpoint on v3.3.0. However, it is not available for the Astra theme (free).

참고


9개 댓글

  1. GeneratePress 무료 테마 같은 경우에 태블릿에서 PC용 메뉴 대신 햄버거 메뉴를 사용하는 방법이 있을까요?

      1. 네, 해결하셨다니 다행이네요. 개인적으로는 플러그인을 최소화하는 것을 선호합니다. 플러그인을 많이 설치하면 사이트 속도에도 영향을 미치고, 간혹 충돌이 발생하기도 합니다. 가능한 경우 꼭 필요한 플러그인만 설치하는 것이 바람직합니다. 즐거운 휴일 저녁 시간 보내시기 바랍니다.

  2. 번거롭게 해드려 죄송합니다. 하나만 더 문의 드려도 될까요?

    stonecastle00.cafe24.com 크롬으로 제작하다보니 크롬은 최적화가 되어있는데 익스플로러로 들어가서 보니깐 간격 하나도 안맞고 엉망 진창이네요.. 이럴경우 어떻게 해야 익스플로러 크롬 IE 모두 최적화가 되어 제작이 될까요?

    1. 안녕하세요, BNF님. IE는 내년 11월이면 완전히 지원이 중단됩니다. 이제는 개발자 커뮤니티에서도 익스플로러에 대한 대응은 하지 않는 추세입니다.

      https://cafe.naver.com/wphomepage/7862

      꼭 IE에 대하여 대응해야 한다면 크로스 브라우징 전문가를 고용하여 대응할 수 있지만, 비용 대비 효용성이 떨어질 것 같습니다.

      다음 기사를 참고해보세요. 2020년도 기사입니다.

      https://news.naver.com/main/read.naver?mode=LSD&mid=sec&sid1=105&oid=092&aid=0002196772

  3. 메일 답변보고 댓글남겨드립니다. 확인 감사합니다.

    호스팅 이전이 아니라 도메인 이전 관련해서 문의드립니다.
    카페 24 무료도메인으로 사용하다 홈페이지 제작 작업을 모두 마무리 지어 기존의 도메인으로 연결하여 도메인 이전작업을 하였습니다.
    연결은 잘 되오나 홈페이지의 다른 메뉴들을 들어가면
    "http://stonecastle00.cafe24.com/?page_id=561" 다시 기존 도메인 주소 페이지로 넘어가더라구요. 기존의 무료 도메인을 해제하고
    stonecastle.co.kr 이라는 새로운 도메인으로 연결하였으니 "http://stonecastle.co.kr/?page_id=561" 이렇게 url 이 뜨기를 바라는데
    자꾸 기존의 무료도메인 url 로 페이지가 뜨네요. 어떻게 해결하나요?

    1. 안녕하세요? 현재 사이트에서 이미지 URL 등에서도 카페24 임시 url이 사용되고 있습니다. 모든 카페24 임시 주소 URL을 새 도메인 URL로 바꾸어야 합니다. 다음 글에서 소개하는 플러그인을 사용하여 일괄 변경해보시기 바랍니다.

      https://www.thewordcracker.com/basic/velvet-blues-update-urls-to-update-urls-in-wordpress/

      https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%EC%82%AC%EC%9D%B4%ED%8A%B8-url-%EC%9D%BC%EA%B4%84-%EB%B3%80%EA%B2%BD%ED%95%98%EB%8A%94-go-live-update-urls-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8/

      플러그인으로 완벽하게 변경되지 않을 수도 있습니다. 그런 경우 수동으로 일일이 변경하거나 DB 작업을 통해 변경해야 할 수도 있습니다.

댓글 남기기

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