웹사이트의 특정 위치(주로 상단이나 하단)에 메뉴를 고정시키고 싶을 때 사용할 수 있는 플러그인이다. 상단의 고정 메뉴는 워드프레스의 테마에서 기본적으로 지원하는 경우도 있지만, 별다른 기능없이 그냥 깔끔한 페이지 구성에 메뉴만 고정시키고 싶을 때 유용하게 사용할 수 있다.
아래의 이미지 중에서 WP Bottom Menu 를 보면 감이 잡힐 것이다.
상단에 위치한 두 개의 플러그인은 WP Bottom Menu의 이미지처럼 모바일 환경에서 하단에 고정된 메뉴를 만들 수 있다. Fixed Bottom Menu와 WP Bottom Menu의 가장 큰 차이점이라면 WP Bottom Menu는 접속자의 기기가 모바일이건 데스크탑이건 구분하지 않고 무조건 하단에 메뉴를 보여준다는 것이다. (데스크탑 환경에서 비활성화 기능이 없다는 것이 아쉬웠다.) 결과물은 둘 다 비슷하지만 WP Bottom Menu가 조금 더 자연스럽고 깔끔하게 보여주는 것으로 기억된다. 아이콘을 삽입하기도 편하다. 하지만 모바일이 아닌 데스크탑 환경에서의 하단 고정메뉴는 부담스러운 것이 사실이며...이러한 이유로 사용을 꺼리게 되었었다.
오늘 다시 설치해보니 WP Bottom Menu의 Setting에 아래와 같이 Active The Menu (px)와 Active for amy screen size? 가 새롭게 추가되었다. (두어달 전에는 없던 기능이다)
기본값은 위와 같아서 화면의 가로 해상도가 1000px 이하가 되면 하단에 메뉴가 보이기 시작하며, 다시 1000px 이상이 되면 메뉴는 사라진다. 물론 Active for any screen size?의 체크박스를 선택하면 화면 해상도와는 무관하게 무조건 하단의 메뉴가 나타난다. Active The Menu(px)의 값을 480으로 설정하고 그 아래의 모든 스크린 사이즈에서의 활성화를 체크 해제한다면 모바일 접속일 때에만 하단에 메뉴를 보여줄 수 있다. 가로 480px 이하의 해상도를 모바일이라고 간주할 수 있는 이유는 지난번 포스팅에서 간단(?)하게 정리했으니 참고하자.
2021.02.14 - [Wordpress/plugin] - [워드프레스-PC와 모바일의 화면을 다르게 설정하기]
[워드프레스-PC와 모바일의 화면을 다르게 설정하기]
워드프레스로 만든 사이트- PC로 접속했을 때와 모바일로 접속했을 때를 구분하여 다른 내용을 보여주고 싶을 때.... BOLD BUILDER - wordpress page builder plugin 워드프레스 대부분의 테마들은 반응형 웹
aegypius.tistory.com
메뉴에 아이콘을 넣을 수도 있으며 위의 그림에서와 같이 FontAwesome은 v4.7이상을 지원하지 않는게 조금 아쉽다. 물론 Custom SVG도 지원하지만 이건 좀 귀찮다. 참고로 FontAwesome 4.7버전에서 사용할 수 있는 아이콘의 목록은 아래에 사이트에서 찾아볼 수 있을 것이다. "fa-아이콘이름"을 입력하기만 하면 그대로 출력되니 편하다.
https://fontawesome.com/v4.7/icons/
Font Awesome Icons
Get 1535 icons right now with FA Free, plus another 7020 icons with Pro, which also gets you another 53 icon category packs as we finish them! Our all-new SVG with JavaScript gives you all the power of SVG without the usual hassle. Ligatures for easier des
fontawesome.com
Hide Menu에서는 원하는 페이지에서 메뉴를 숨기는 설정을 할 수 있다. 모든 페이지에서 메뉴를 보여주고 싶다면 None을 선택하면 될 것이다. 몇 개의 페이지에서만 메뉴가 필요없다면 각각의 페이지들을 Ctrl을 누른 상태로 선택한 후에 공개 버튼을 누르면 설정된다.
Fixed Bottom Menu도 WP Bottom Menu와 거의 같은 기능을 제공한다. 개인적으로는 Fixed Bottom Menu보다 WP Bottom Menu의 손을 들어주고 싶다.
맨 위에서 잠깐 보였던 Sticky Menu, Sticky Header(on anything!) on Scroll 플러그인은 워드프레스의 메뉴를 상단에 고정시키는 플러그인이다. 이건 다음에 포스팅 해 보려고 한다.
[2022.08.09]
WP Bottom Menu가 2.0 이상으로 업데이트되면서 Font Awesome 4.7을 포함한 6.11 까지 지원하게 되었다.
살짝 아쉬운 점은 Menu Item의 Link 주소를 한글로 입력하면 Customize 메뉴의 Menu Hover/Active Text Color나 Menu Hover/Active Icon Color의 값이 아닌 Menu Text Color와 Menu Icon Color의 값으로만 표현된다. 한글을 puny code로 변환하여 link값을 넣으면 정상작동한다.
[2024.04.22]
워드프레스 상단 메뉴의 고정(스티키메뉴, 플로팅메뉴)은 최근에 작성한 아래의 글을 참고하자.
2024.04.05 - [Wordpress] - 투명한 헤더(메뉴)를 만들고 상단에 고정하기(create a sticky transparent Header)
'Wordpress > plugin' 카테고리의 다른 글
| All in One SEO (AIOSEO) (0) | 2021.06.15 |
|---|---|
| Advanced Editor Tools (TinyMCE Advanced) (0) | 2021.06.14 |
| [워드프레스-PC와 모바일의 화면을 다르게 설정하기] (0) | 2021.02.14 |
| [Visual Footer Credit Remover] (간편하게) 워드프레스 푸터 삭제 및 편집 (0) | 2021.02.08 |
| [Mangboard] 워드프레스 게시판 플러그인 - 망보드 (0) | 2020.08.17 |
댓글