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

워드프레스 메뉴와 헤더를 고정하자

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

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

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

Sticky Menu (or Anything!) on Scroll 설정

이 플러그인을 설치하고 활성화하면 알림판의 설정 메뉴 아래에 "Sticky Menu (or Anything!) Settings"라는 메뉴가 추가됩니다.
Sticky menu settings

  • (1)에는 고정할 요소를 입력하는 란입니다. 아이디(ID) 또는 클래스(class) 요소를 추가할 수 있습니다.
  • (2) 고정하는 요소와 상단과의 거리를 설정합니다.
  • (3) 작은 화면에서 고정하지 않을 경우 픽셀을 설정하면 설정된 크기 이하의 화면에서는 고정되지 않습니다.
  • (4) 큰 화면에서 고정하지 않을 경우 픽셀을 설정하면 설정된 크기 이상의 화면에서는 고정되지 않습니다.
  • (5) Z-index 값 설정.

메뉴 고정하기

먼저 고정 메뉴를 한 번 만들어볼까요? 위 화면에서 (1)란에 메뉴에 해당하는 요소 이름을 입력하고 나머지 설정(옵션)을 지정하면 메뉴가 고정됩니다. 저는 #site-navigation을 입력하고(테스트 테마: Accesspress Lite) 나머지 설정은 그대로 두겠습니다. 그러면 실제 화면을 보면 다음과 같이 메뉴가 고정되어 있음을 알 수 있습니다.
Sticky menu in action
myStickymenu 플러그인과 달리 색상을 지정하는 옵션은 없네요.

헤더 고정하기

다음으로 헤더를 한 번 고정해보겠습니다. 요소를 입력하는 란에 #masthead를 입력하면(요소 이름은 테마에 따라 다를 수 있음) 다음과 같이 헤더 부분의 로고와 그 아래에 있는 메뉴가 함께 고정되었습니다.
sticky header in wordpress

요소명에 #top-header를 입력하면 아래와 같이 메뉴를 제외한 헤더 부분이 고정됩니다.
Fix header without menu

다른 요소 고정하기

앞에서 말씀 드렸듯이 이 플러그인은 메뉴와 헤더뿐만 아니라 거의 모든 요소를 고정할 수 있습니다. (헤더나 메뉴 외에 고정할 요소가 더 있을지는 모르겠지만요.) 테스트로 헤더 아래의 슬라이드를 한번 고정해볼까요?

Accesspress Lite 테마에서 (1)란에 #slider-banner를 입력하면 메뉴 아래의 슬라이드가 고정됩니다.
Fix slide in wordpress
깔끔하게 슬라이드가 고정되어 나타나네요.

마치며

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

      응답