베스트셀링 인기 워드프레스 테마 Top 30 자세한 정보

워드프레스 메뉴와 헤더를 고정하자 - Sticky Menu & Sticky Header 플러그인

Last Updated: 2021년 9월 7일 | 7개 댓글
  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

워드프레스에서 메뉴와 헤더를 고정하고 싶은 경우 테마의 기능을 사용하거나 CSS 코드로 고정하거나 혹은 플러그인을 사용할 수 있습니다. 테마에서 헤더나 메뉴 고정 기능을 제공하지 않으면 myStickymenu와 Sticky Menu & Sticky Header와 같은 무료 플러그인을 사용하면 쉽게 헤더를 고정할 수 있습니다.

아바다, 엔폴드, 뉴스페이퍼 등 일부 테마에서는 헤더를 고정하는 기능을 테마 옵션을 통해 제공합니다. 이 사이트에 설치된 GeneratePress 테마에서도 유료 버전에서는 Sticky Navigation 기능을 제공합니다. 현재 이 블로그에 헤더 고정 기능이 적용되어 있습니다.

[ 이 글은 2015년에 작성되었지만 최신 버전에 맞게 내용을 전면적으로 수정하여 다시 발행되었습니다. ]

워드프레스 메뉴와 헤더를 고정하자 - Sticky Menu & Sticky Header 플러그인

워드프레스 메뉴와 헤더를 고정하자 - Sticky Menu & Sticky Header 플러그인

이전 글에서 myStickymenu 플러그인을 사용하여 메뉴를 상단에 고정하는 방법을 살펴보았습니다. 이 글에서는 메뉴와 헤더를 상단에 고정하는 플러그인인 Sticky Menu & Sticky Header(이전 명칭 Sticky Menu (or Anything!) on Scroll))에 대해 살펴보겠습니다.

제목에서 알 수 있듯이 이 플러그인은 메뉴뿐만 아니라 모든 요소를 고정할 수 있는 플러그인입니다.

먼저는 테마에서 헤더와 메뉴를 고정하는 기능을 제공하는지 체크해보시기 바랍니다. 헤더와 사이드바 등의 고정 기능은 유료 버전에서 보통 제공됩니다. 심플한 사이드바 고정은 CSS 코드를 사용하여 구현하는 것도 가능합니다. 예를 들어, GeneratePress 테마에서 사이드바를 고정하려면 다음과 같은 코드를 사용할 수 있습니다.

// Make the GeneratePress sidebar sticky
// GeneratePress 테마 사이드바 고정
@media (min-width: 769px) {
    #right-sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
}

아스트라 테마에서는 다음과 같은 코드를 사용할 수 있습니다.

// Fix sidebar in WordPress Astra theme
// 아스트라 테마에서 사이드바 고정
/* 사이드바 고정 */
@media screen and (min-width: 769px) {
#secondary {
    position: sticky;
    position: -webkit-sticky;
    top: 30px;
}
}

Sticky Menu & Sticky Header 설정

이 플러그인은 알림판 > 플러그인 > 새로 추가에서 "Sticky Menu & Sticky Header"를 검색하여 설치할 수 있습니다. 이 플러그인을 설치하고 활성화하면 알림판의 설정 메뉴 아래에 "Sticky Menu (or Anything!)"이라는 메뉴가 추가됩니다.

워드프레스 헤더 고정 플러그인
  1. Sticky Element: (required)에는 고정할 요소를 입력하는 란입니다. 아이디(ID) 또는 클래스(class) 요소를 추가할 수 있습니다. 예: #main-navigation 또는 .main-mun-1
  2. Space between top of page and sticky element: (optional)에는 고정하는 요소와 상단과의 거리를 설정합니다.
  3. Sticky element opacity when scrolling: (optional) - 스크롤 시 붙박이 요소의 투명도를 설정합니다. 이 기능은 PRO 버전에서만 지원됩니다.
  4. Check for Admin Toolbar: 사용자가 로그인했을 때 상단의 관리자 툴바(Admin Toolbar) 때문에 메뉴 일부가 가리는 경우 이 옵션을 체크합니다.
  5. Effects: 효과 (PRO 버전 전용)
  6. Background Color When Sticky: 고정 시 배경색 설정 (프로 버전 전용). 이 옵션은 유료 버전에서만 제공됩니다.
  7. Custom CSS: 커스텀 CSS (PRO 버전에서만 사용 가능)
  8. Do not stick element when screen is smaller than: (optional): 작은 화면에서 고정하지 않을 경우 픽셀을 설정하면 설정된 크기 이하의 화면에서는 고정되지 않습니다.
  9. Do not stick element when screen is larger than: (optional): 큰 화면에서 고정하지 않을 경우 픽셀을 설정하면 설정된 크기 이상의 화면에서는 고정되지 않습니다.

Advanced settings 탭을 선택하면 고급 옵션을 설정할 수 있습니다.

워드프레스 헤더 고정 플러그인 - 고급 기능

고급 탭에서는 Z-index 값을 설정할 수 있습니다. Z-index에 대한 자세한 내용은 W3Schools 문서를 참고해보세요. 다음 옵션은 PRO 버전에서만 지원됩니다.

  • Push-up element(푸시업 요소)
  • Legacy mode(리거시 모드)
  • Don't use sticky on selected pages/posts(선택한 페이지/포스트에서는 고정하지 않기)

예시: 아스트라 테마 헤더 고정하기

예시로 인기 워드프레스 테마 중 하나인 Astra 테마의 헤더를 고정하는 방법을 살펴보겠습니다. 참고로 아스트라 테마에서 헤더를 고정하는 기능은 Astra 테마의 유료 버전에서 제공됩니다. 유료 버전을 구입하지 않고 헤더를 고정하고 싶은 경우 이 글에서 소개하는 플러그인을 활용할 수 있습니다.

Astra 헤더를 고정하려면 알림판 > 설정 > Sticky Menu (or Anything!) 페이지로 이동한 다음, Sticky Element: (required) 부분에 다음 CSS 클래스를 입력합니다.

.site-header

변경 사항을 저장하고 사이트를 새로 고침하면 헤더가 고정되어 있는 것을 확인할 수 있습니다.

마치며

사용하는 테마에서 헤더/메뉴를 고정하는 옵션을 제공하는 경우 해당 옵션을 사용하여 헤더나 메뉴를 고정할 수 있지만, 테마에서 그런 기능이 제공되지 않으면 이 글에서 소개한 플러그인을 사용할 수 있습니다. 아바다, 엔폴드, Divi, 뉴스페이퍼, GeneratePress 등의 테마에서 헤더/내비게이션을 고정하는 방법은 "워드프레스 헤더 고정하기 (+아바다, 엔폴드, Divi, 뉴스페이퍼, GeneratePress 테마 등)"에서 확인할 수 있습니다.

Sticky Menu (or Anything!) on Scroll을 사용하면 워드프레스에서 메뉴와 헤더뿐만 아니라 거의 모든 요소를 상단에 고정할 수 있습니다. 테스트해 본 결과 테마에 따라 myStickymenu나 Sticky Menu (or Anything!) on Scroll 중에서 더 적합한 것을 사용하시면 될 것 같습니다. myStickymenu는 몇 가지 옵션이 제공되지만 메뉴만 고정 가능하지만 Sticky Menu (or Anything!) on Scroll은 모든 요소를 고정할 수 있다는 점에서 괜찮은 플러그인 같습니다.

참고



7 개 댓글

Leave a Comment

  1. 위설명란 "STICKY MENU (OR ANYTHING!) ON SCROLL 설정"
    에서 아래 "아이디(ID) / 클래스(Class)" 에 요소를 추가 하라고 되있는데요
    ID와Class는 어떻게 확인할수 있나요? 입력하려고 해도 ID와Class가 뭔지 몰라서요.

    (1)에는 고정할 요소를 입력하는 란입니다. "아이디(ID) 또는 클래스(class)" 요소를 추가할 수 있습니다.

    응답
    • CSS에서 사용되는 ID와 클래스를 지정하면 됩니다. CSS 아이디/클래스에 대한 내용은 CSS 관련 책을 참고하거나 구글링하면 다양한 문서를 찾을 수 있습니다. ID/클래스는 CSS 관련 책에서 가장 먼저 설명하는 기초적인 사항입니다.

      응답
    • 안녕하세요, 한소희님. 테마에서 헤더나 메뉴를 고정하는 기능을 제공하지 않나요?
      테마에서 제공하는 경우 테마 기능을 사용하는 것이 좋습니다.

      이 블로그의 경우 테마( GeneratePress)에서 제공하는 Sticky 기능을 사용하여 헤더를 고정했습니다.

      응답
    • 안녕하세요, 이우일님.

      #masthead는 테마에 따라 다르고 구글 크롬의 개발자도구를 이용하여 쉽게 확인이 가능합니다.

      이 글에 소개된 플러그인을 사용하여 메뉴를 고정시키고, 푸터는 간단한 CSS로 고정시킬 수 있을 것입니다. 다음 글을 참고해보세요:

      https://www.thewordcracker.com/miscellaneous/sticky-fixed-bottom-div-element/

      그리고 푸터를 고정하는 것과 관련하여 다음 글도 참고해볼 수 있습니다.

      https://avada.tistory.com/1397

      응답