WordPress 메뉴 사용자 지정을 위한 팁, 트릭 및 최고의 플러그인
게시 됨: 2018-04-04메뉴는 모든 웹사이트에서 가장 중요한 부분 중 하나입니다. 그들은 어디에나 있으며 블로그를 통해 사용자를 안내합니다. WordPress에 탐색 메뉴를 추가하는 것은 비교적 쉽지만 웹사이트에 맞게 사용자 정의하기 위해 할 수 있는 일이 훨씬 더 많습니다.
메뉴에 표시하고 싶은 작은 아이콘이든 완전히 다른 시스템에서 처리할 수 있는 아이콘이든 이 가이드에는 모든 것이 있습니다. 이 가이드에서 준비한 팁, 트릭 및 최고의 메뉴 플러그인을 확인하세요.
- WordPress 메뉴에 아이콘 추가
- 메뉴에 로그인/로그아웃 버튼 추가
- 원하는 곳에 WordPress 메뉴 표시
- WordPress 메뉴에 검색 상자를 추가하는 방법
- 탐색 메뉴를 페이지 상단에 고정하는 방법
- 플러그인으로 고정 탐색 메뉴 만들기
- WordPress에서 최상위 메뉴 항목을 제거하는 방법
- WordPress용 상위 4개 메뉴 플러그인
- 최고의 WordPress 모바일 메뉴 플러그인
WordPress 메뉴에 아이콘 추가
WordPress에서 메뉴를 만드는 것은 결코 쉬운 일이 아닙니다. 페이지를 생성하고 홈페이지 옆에 추가하기만 하면 됩니다. 기본 탐색 메뉴는 클릭 몇 번으로 완료되지만 매우 평범해 보일 것입니다.
시각적으로 멋진 탐색 메뉴를 만드는 데 도움이 되는 수많은 플러그인이 있습니다. 물론 방법을 알고 있다면 직접 코딩할 수도 있지만 아이콘을 추가하여 일반 메뉴를 보다 사용자 친화적으로 만드는 더 간단한 방법이 있습니다.
아이콘은 우리가 없이는 살 수 없는 것이 되었습니다 . 워드프레스 대시보드, 데스크탑, 스마트폰과 태블릿에서 무언가를 검색할 때 아이콘 사용에 익숙할 것입니다. 새 응용 프로그램을 몇 번만 사용하면 함께 제공되는 모든 설명 텍스트보다 해당 아이콘을 더 많이 기억할 수 있습니다. 그렇다면 메뉴 항목 옆에 아이콘을 놓고 사람들이 쉽게 사이트를 탐색할 수 있도록 하지 않겠습니까?
메뉴 아이콘
가격: 무료
그렇게 하는 방법을 모르더라도 걱정하지 마십시오. 그래서 여기 있습니다. 가이드의 이 부분에서는 사용자 정의 코딩에 대해 신경 쓰지 않겠지만 몇 분 안에 구성할 수 있는 깔끔한 무료 플러그인을 간단히 보여드리겠습니다 .
- 플러그인 -> 새로 추가로 이동
- "메뉴 아이콘"을 검색하십시오.
- 플러그인 설치 및 활성화
- 모양 -> 메뉴로 이동합니다.
- 탐색 메뉴 열기
- 메뉴 구조에서 아이콘을 선택하려는 페이지를 선택하십시오.
- 아이콘을 선택하고 위치와 크기를 편집합니다.
- 메뉴 저장
그게 다야! 이제 메뉴에서 원하는 멋진 아이콘을 찾아 새로운 디자인을 즐기십시오. 아이콘으로 작업하는 동안 WordPress 블로그에도 파비콘을 쉽게 추가할 수 있다는 것을 잊지 마십시오.
메뉴에 로그인/로그아웃 버튼 추가
우리가 좋아하는 많은 WordPress의 기능 중 하나는 새로운 사용자를 등록하는 쉬운 방법입니다. 인기 있는 플랫폼에서 다양한 사용자 역할을 제어하는 것이 이보다 더 쉬울 수는 없습니다. 할당할 수 있는 이미 등록된 역할이 있으며 사이트의 필요에 따라 수많은 사용자 지정 사용자 역할을 만들 수도 있습니다.
등록은 빠르고 쉽지만 사용자를 관리하는 것은 어려운 작업일 수 있습니다 . 그러나 웹 사이트에서 가능한 한 좋은 경험을 하려면 모든 것을 가능하게 해야 합니다.
그들을 위해 할 수 있는 많은 일 중 하나는 사이트에 로그인하고 로그아웃하는 쉬운 방법을 활성화하는 것입니다. 로그인/로그아웃 링크를 항상 사용자가 사용할 수 있도록 하려면 해당 링크를 기본 메뉴에 바로 배치할 수 있습니다. 첫째, 메뉴에 이러한 링크가 있으면 매우 실용적이고 두 번째로 사용자는 로그인 및 로그아웃에 동일한 방식을 사용하는 다양한 다른 응용 프로그램 의 기능에 익숙해졌을 것입니다 .
이 경우 다른 플러그인을 가져올 필요가 없습니다. 이 기사의 이 부분에서 보여드릴 간단한 WordPress 기능은 훌륭한 작업을 수행할 수 있습니다 . 메뉴에 올바른 링크가 자동으로 배치됩니다. 즉, 사용자가 로그아웃된 동안 "로그인" 링크를 받게 되며 그 반대의 경우도 마찬가지입니다. 귀하와 사용자 모두 로그인 버튼에 대해 다시 걱정할 필요가 없습니다.
이 간단하면서도 깔끔한 로그인 기능을 메뉴에 추가할 준비가 되었으면 다음을 수행해야 합니다.
- 함수.php를 엽니다.
- 다음을 복사하여 붙여넣습니다.
기능 add_login_logout_link($items, $args) {
$loginoutlink = wp_loginout('index.php', false);
$items .= '<li>'. $loginoutlink .'</li>';
$items 반환;
}
add_filter('wp_nav_menu_items',
'추가 로그인_로그아웃_링크', 10, 2);- 변경 사항을 저장하다
대부분의 스니펫과 마찬가지로 함수를 복사하여 파일에 붙여넣기만 하면 됩니다. 완료되면 계속해서 홈페이지를 새로고침할 수 있습니다. 아직 로그인되어 있으므로 메인 메뉴의 마지막 지점에 "로그아웃" 링크가 표시됩니다. 전체 기능을 확인해야 하므로 로그아웃했다가 다시 로그인하여 모든 것이 정상인지 확인하십시오.
이제 이 작은 기능을 완료했으므로 로그인에 성공한 후 사용자를 다른 페이지로 쉽게 리디렉션하거나 로그인하거나 로그아웃한 사용자에게만 콘텐츠를 표시할 수 있다는 것을 잊지 마십시오.
또한 사용자 정의 메뉴가 있으므로 사용자 정의 단축 코드를 제공하여 사이트의 어느 곳에서나 표시하는 데 관심이 있을 수 있습니다.
우리는 이와 같은 작은 조각으로 WordPress를 사용자 정의하는 것을 좋아합니다. 여러분은 어떻습니까?
원하는 곳에 WordPress 메뉴 표시
WordPress가 버전 3.0에 도달한 후 많은 것들이 사용하기 쉬워졌습니다. 다양한 새로운 기능 중에서 탐색 메뉴를 만드는 것은 누구나 액세스할 수 있게 되었으며 오늘날에는 누구나 마우스 버튼을 몇 번만 클릭하여 자신만의 메뉴를 만들 수 있습니다.
게시물, 페이지, 카테고리 또는 외부 링크를 쉽게 연결할 수 있는 메뉴를 만드는 것은 케이크 조각이지만 사이트의 다른 위치에 메뉴를 표시하는 것은 WordPress 개발에 관심이 없는 사람들에게는 조금 더 큰 문제일 수 있습니다 .
사용 중인 WordPress 테마에 따라 탐색을 찾는 데 익숙한 페이지 상단에 새로 생성된 메뉴를 쉽게 표시할 수 있습니다 . 메뉴를 사이드바에 배치하거나 바닥글 영역 바로 아래에 배치할 수 있지만 게시물, 페이지 또는 위젯에도 메뉴를 표시하려면 어떻게 해야 할까요?
아니요, 링크를 복제하기 위해 사용자 지정 목록을 만들거나 전체 HTML 코드를 다시 입력할 필요가 없습니다. 단축 코드를 활용하고 원하는 곳에 기존 메뉴를 배치할 수 있습니다!
다음 줄에서 그 방법을 보여드릴 것이며 새로운 '단축 코드 메뉴' 기능이 마음에 드실 거라고 확신합니다.
단축 코드를 생성하고 원하는 곳에 WordPress 메뉴를 표시하십시오.
- functions.php 파일 열기
- 단축 코드를 등록할 코드를 복사하여 붙여넣습니다.
function menu_function($atts, $content = null) {
발췌(
shortcode_atts(
배열( '이름' => null, ),
$atts
)
);
반환 wp_nav_menu(
정렬(
'메뉴' => $이름,
'에코' => 거짓
)
);
}
add_shortcode('메뉴', '메뉴_기능');- 변경 사항을 저장하다
변경 사항을 저장한 직후 원하는 위치에 WordPress 메뉴를 표시할 수 있습니다. 사용하려는 메뉴의 이름을 지정해야 하는 단축 코드를 기록 하기만 하면 됩니다.
[메뉴 이름 = "메인 메뉴"]
대부분의 경우 메인 메뉴에는 "메인 메뉴"라는 이름이 붙어 있습니다. 그러나 다른 메뉴를 사용하려는 경우 단축 코드에 해당 이름을 입력하기만 하면 됩니다. 모든 메뉴 이름을 암기할 필요는 없습니다. 대신 모양 -> 메뉴로 이동하여 메뉴 목록을 탐색하거나 새 메뉴를 만드십시오.
이제 거의 모든 곳에서 WordPress 메뉴를 표시할 수 있으므로 WordPress 기반 웹사이트에서 사용할 수많은 탐색을 만들 수 있습니다. 하나는 게시물에, 다른 하나는 템플릿 파일, 텍스트 위젯 등에 있을 수 있습니다.
WordPress 메뉴에 검색 상자를 추가하는 방법
기능을 제거하지 않는 한 WordPress를 사용하면 방문자가 전체 사이트를 검색할 수 있습니다. 이 멋진 기능에 대해 여러 번 언급했으며 검색 페이지로 할 수 있는 다양한 작업을 보여주었습니다. 예를 들어 검색 결과가 하나뿐인 경우 사용자를 게시물로 쉽게 리디렉션하거나 맞춤 Google 검색을 설정할 수도 있습니다.
표준 WP 위젯을 탐색했다면 사이드바에 배치할 준비가 된 검색 위젯이 있다는 것을 보았을 것입니다. 하지만 대신 메뉴 옆에 검색 상자가 나타나게 하려면 어떻게 해야 할까요?
다음 줄에서는 일상적인 검색 상자를 탐색 메뉴에 넣는 기능을 보여줍니다.
메뉴에 검색창 추가:
- 함수.php를 엽니다.
- 다음을 복사하여 붙여넣습니다.
add_filter( 'wp_nav_menu_items','add_search_box',
10, 2);
함수 add_search_box( $items, $args ) {
$items .= '<li>' . get_search_form(거짓) .
'</li>';
$items 반환;
}- 변경 사항을 저장하다
코드가 제대로 작동하는지 확인하려면 사이트에 탐색 메뉴가 이미 추가되어 있는지 확인하십시오.
코드는 매우 간단하며 유일한 기능은 탐색 메뉴에 검색 상자를 추가하는 것 입니다. 대부분의 경우 검색 상자가 원하는 위치에 정렬되지 않을 것입니다. 즉, 검색 상자를 넣을 위치를 WordPress에 알려야 합니다.
- 코드의 세 번째 줄에 있는 <li> 태그에 클래스를 추가합니다.
$items .= '<li class=”searchbox-position”>' . get_search_form(거짓) . '</li>'
- 변경 사항을 저장하다
- 스타일.css 열기
- CSS 코드를 복사하여 붙여넣습니다.
.searchbox 위치 {
여백 상단: 15px;
여백 오른쪽: 20px;
}- 코드를 원하는 대로 변경
- 변경 사항을 저장하다
메뉴 옆에 상자가 완벽하게 중첩되어 있기를 바랍니다. 원하는 위치에 상자를 맞추는 데 많은 시간이 걸리지 않습니다. 검색 상자 자체의 스타일을 지정하고 기능을 즐기는 것을 잊지 마십시오.
메뉴와 검색 상자를 더 잘 제어하려면 메뉴에 아이콘을 추가하는 방법과 검색어를 받아쓰는 방문자를 위해 음성 검색 옵션을 추가하는 방법을 확인하세요. 메뉴와 검색 옵션으로 할 수 있는 일이 훨씬 더 많으므로 검색 상자를 테스트하고 새로운 것을 배우십시오.
탐색 메뉴를 페이지 상단에 고정하는 방법
탐색 메뉴가 페이지 상단에 표시되어 스크롤 모험의 모든 단계를 따라가는 웹사이트를 본 적이 있을 것입니다. 해당 기능은 WordPress 웹 사이트에서 원하는 것일 수 있으며 가이드의 이 부분에서 만드는 방법을 보여드리겠습니다.
메뉴가 항상 손이 닿는 범위 내에서 사용할 수 있는 기능적 측면이 있을 뿐만 아니라 매우 아름답고 유동적으로 보일 수도 있습니다.
CSS에 대한 지식이 있다면 메뉴를 고정시키는 데 문제가 없을 것입니다. Style.css 파일에 코드를 추가하기만 하면 새 메뉴 기능을 즐길 수 있습니다.
- 스타일시트(style.php)를 엽니다.
- .nav-menu 또는 .genesis-nav-menu (또는 사용 중인 테마에 따라 유사) 찾기
- 기본 메뉴 컨테이너에 다음 코드를 사용합니다.
.nav 메뉴 {
위치: 고정;
배경: #333;
상단: 0px;
오른쪽: 0px;
왼쪽: 0px;
Z-인덱스:99;
}코드에서 짐작할 수 있듯이 중요한 부분은 메뉴의 위치를 수정해야 하는 두 번째 줄에 있습니다 . 그런 다음 위쪽, 오른쪽 및 왼쪽 요소를 0픽셀로 설정하거나 페이지의 위쪽 또는 왼쪽 및 오른쪽 여백에서 원하는 거리로 이동할 수 있습니다(예: top: 10px는 메뉴를 10픽셀 떨어진 위치에 배치합니다. 사이트의 상단 여백).
- 파일을 업데이트하고 고정 탐색 메뉴를 즐기세요
코드를 어지럽히는 것이 싫다면 플러그인을 사용하여 메뉴를 고정할 수 있습니다.
플러그인으로 고정 탐색 메뉴 만들기
테마에서 CSS 코드 한 줄만 변경하여 고정 탐색 메뉴를 만드는 방법을 배웠습니다. 그러나 이것이 아무리 쉬울지라도 모든 사람이 WordPress 파일을 살펴보고 코드를 직접 편집하는 것을 좋아하지는 않습니다. 당신이 그런 유형의 사람이거나 메뉴를 더 많이 제어해야 하는 경우에도 걱정하지 마십시오. 플러그인을 사용하여 메뉴를 쉽게 설정하고 고정할 수 있습니다 . 기사의 이 부분에서 우리는 당신에게 최고 중 일부를 보여줄 것입니다.
UberMenu 고정 확장 프로그램
가격: $8
UberMenu Sticky Extension은 UberMenu 플러그인용 애드온입니다. 즉, 확장 기능이 작동하려면 이 플러그인을 먼저 설치해야 합니다. 확장은 모든 것을 간단하게 만듭니다. 설치가 끝나면 메뉴를 고정할 준비가 된 것입니다. 메뉴를 어디에 배치하든 사용자가 스크롤을 시작하면 메뉴가 페이지 상단에 고정되어 쉽게 액세스할 수 있습니다.
모바일 사용자가 메뉴의 모든 부분에 액세스할 수 있도록 하기 위해 모바일 장치가 감지되면 고정 옵션이 꺼집니다. 여기에 추가할 내용이 많지 않습니다. 공식 사이트에서 데모를 확인하고 이미 UberMenu가 있는 경우 계속해서 메뉴를 고정하세요.
myStickymenu
가격: 무료 – 데모
이 플러그인은 Twenty Thirteen 테마에서 사용하도록 설계되었습니다. 하지만 약간만 수정하면 원하는 테마에 사용할 수 있습니다. 기본적으로 테마의 탐색 CSS 클래스 ".navbar"를 사용합니다. 따라서 다른 테마에서 사용 하려면 해당 테마 에서 탐색 메뉴를 설명하는 데 사용하는 클래스를 찾고 해당 클래스 의 이름을 변경해야 합니다.
테마가 반응형이면 플러그인도 반응형입니다. 더 수정하고 싶다면 사용자 정의 CSS 스타일을 입력하고 고정 메뉴를 더욱 개인화할 수 있습니다.
스크롤에 고정 메뉴(또는 무엇이든!)
가격: 무료
이 플러그인을 사용하면 메뉴를 맨 위에 놓고 고정할 수 있습니다. 하지만 그 뿐만 아니라 플러그인을 사용하면 요소에 적합한 선택기 를 찾는 것만으로 모든 요소를 고정할 수 있습니다 . 즉, 사용자가 웹사이트를 스크롤하는 동안 로고 또는 전체 헤더를 페이지 상단에 고정할 수 있습니다. 모든 것이 작동하도록 하려면 HTML과 CSS에 대해 약간 알아야 올바른 선택기를 찾을 수 있습니다.
WordPress에서 최상위 메뉴 항목을 제거하는 방법
WordPress는 사용자 정의가 가능하다는 것을 이미 알고 있을 것입니다. 코딩 방법을 알고 있거나 최소한 올바른 플러그인을 찾는 경우 백엔드와 프론트엔드를 변환하고 방문자와 작성자에게도 고유한 웹사이트를 선보일 수 있습니다.
이 부분에서는 WordPress 관리 페이지에서 최상위 메뉴 항목을 제거할 수 있는 간단한 코드를 보여줍니다.
아래에서 찾을 수 있는 코드는 admins 대신 모든 사용자에게 모든 최상위 메뉴 항목을 제거합니다 . 계속하기 전에 이 스니펫은 메뉴 항목만 제거하지만 설정 페이지의 올바른 경로를 알고 있는 사람은 해당 항목을 계속 사용할 수 있다는 점을 알아야 합니다. 특정 메뉴 페이지에 대한 액세스를 완전히 제한하려면 사용자 기능을 변경해야 합니다.
최상위 메뉴 항목 제거:
- functions.php 파일을 엽니다.
- 다음 코드를 복사하여 붙여넣습니다.
if (!current_user_can( 'manage_options' )) {
add_action( 'admin_menu', 'my_remove_menus', 999 );
}
함수 my_remove_menus() {
remove_menu_page( 'index.php' ); //계기반
remove_menu_page( 'edit.php' ); //게시물
remove_menu_page( 'upload.php' ); //미디어
remove_menu_page( 'edit.php?post_type=page' ); //페이지
remove_menu_page( 'edit-comments.php' ); //코멘트
remove_menu_page( 'themes.php' ); //모습
remove_menu_page( 'plugins.php' ); //플러그인
remove_menu_page( 'users.php' ); //사용자
remove_menu_page( '도구.php' ); //도구
remove_menu_page( '옵션-일반.php' ); //설정
}- 변경 사항을 저장하다
이 코드는 원하지 않는 모든 최상위 메뉴를 제거하므로 필요에 따라 코드를 자유롭게 수정하십시오. 각 "remove_menu_page" 줄은 한 페이지를 제거하는 역할을 합니다(대괄호와 코드 줄 옆의 주석에 설명되어 있음). 메뉴에서 부재하고 싶은 페이지를 추가하거나 제거하고 변경 사항을 한 번 더 저장하기만 하면 됩니다.
메뉴에서 최상위 페이지를 제거하는 방법을 배웠으므로 최상위 페이지 아래에 있는 일부 하위 페이지만 제거할 수 있습니다.
WordPress용 상위 4개 메뉴 플러그인
새 웹사이트 구축을 시작했다면 조만간 메뉴가 필요할 것입니다. WordPress의 표준 메뉴 옵션을 사용하여 만들 수 있지만 더 전문적인 메뉴를 원하면 HTML 및 CSS 코드를 알아야 합니다. 이는 또한 완벽하게 작동하고 동시에 아름답게 보이도록 모든 것을 디자인하는 데 시간을 할애하게 될 것임을 의미합니다.
그러나 더 빠른 솔루션이 필요하거나 자신만의 멋진 메뉴를 코딩하는 방법을 모르는 경우 WordPress를 사용하면 몇 번의 클릭만으로 멋진 메뉴를 만들 수 있도록 설계된 훌륭한 플러그인을 설치할 수 있습니다. 특별한 순서 없이 다음은 WordPress를 위한 최고의 메뉴 플러그인입니다.
우버 메뉴
가격: $20 – 데모
43,000개 이상의 판매를 기록한 Uber Menu는 WordPress에서 가장 인기 있는 플러그인 중 하나입니다 . 데모 사이트를 열고 이 플러그인으로 만든 메뉴가 어떻게 생겼는지 보면 왜 그렇게 인기가 있는지 이해할 수 있을 것입니다. 그리고 일단 당신이 그것의 기능을 나열하기 시작하면, 당신은 아마도 당신 자신을 위해 하나를 원할 것입니다.
Uber 메뉴로 만든 메뉴는 모바일 방문자를 위해 반응형이며 터치가 가능합니다. 아름다운 레이아웃을 만들고 아이콘, 이미지, 비디오 및 지도를 메뉴에 배치할 수 있습니다. 전체 양식을 하위 메뉴에 배치할 수 있으므로 추가 페이지를 추가하지 않고도 연락처 양식을 만들 수 있습니다. 플러그인은 사용자 정의가 가능하며 라이브 미리 보기를 통해 50가지 이상의 스타일 설정을 사용할 수 있습니다. 다른 콘텐츠에서 자동으로 하위 메뉴를 만들고 메뉴 아래에 탭을 만드는 등의 작업을 할 수 있습니다.
- 동적 아이템 생성
- 탭 하위 메뉴
- 향상된 사용자 인터페이스
Morph: 맞춤형 플라이아웃 WordPress 메뉴
가격: $20 – 데모
Morph는 모바일 장치용으로 설계된 플라이아웃 메뉴입니다. 그러나 데모 페이지에서 볼 수 있듯이 개인용 컴퓨터에서 열면 데스크탑에서도 정말 멋지게 보입니다.
이 플러그인을 사용하면 메뉴를 숨기고 간단한 클릭으로 불러올 수 있습니다 . 메뉴 영역에서 표준 드롭다운 메뉴를 만들고 사진을 추가하고 검색 버튼을 추가할 수 있으며 전체 영역이 위젯화되어 필요하고 원하는 모든 것을 포함할 수 있습니다. 플러그인은 사용자 정의가 가능하므로 원하는 색상을 선택하고, 이미지 높이를 변경하고, 필요에 맞게 요소를 추가 또는 제거할 수 있습니다. 모바일 기기에서 사용하려는 경우 메뉴가 표시될 해상도를 쉽게 설정할 수 있습니다.
- 데스크톱 및 모바일 장치 모두에서 잘 작동합니다.
- 사용자 정의 가능한 요소 추가/제거
- 모든 요소에 의해 트리거될 수 있음
영웅 메뉴
가격: $19 – 데모
간단한 메뉴를 원하든 복잡한 "메가 메뉴"를 원하든 영웅 메뉴 플러그인으로 만들 수 있습니다. 생성하는 모든 메뉴는 반응형이며 모든 장치에서 멋지게 보입니다. 메가 메뉴를 만들기로 선택하면 항목을 표시하거나 숨길 수 있으므로 작은 화면의 레이아웃에 대해 걱정할 필요가 없습니다.
Android, iOS 및 Windows Phone에 대한 특수 터치 지원이 있습니다. 끌어서 놓기 기술을 사용하여 추가 요소를 쉽게 추가 할 수 있는 전체 너비 또는 고정 너비 탐색 모음을 선택합니다. 60개 이상의 사전 설정 색 구성표가 있으며 무료 Google 글꼴을 각각 자유롭게 사용할 수 있습니다. 메뉴를 고정하고 활성화 거리를 선택하세요... 이 훌륭한 플러그인은 훨씬 더 많은 것을 제공할 수 있으므로 CodeCanyon에서 전체 기능 목록을 확인하십시오.
- 드래그 앤 드롭 메뉴 구조 빌더
- 간단한 메뉴 또는 복잡한 메가 메뉴 만들기
- 특별한 모바일 내비게이션
멀티 엑스 바
가격: $16 – 데모
Multi-X 막대는 모듈식 플러그인이며 탐색 막대에 원하는 모든 것을 배치할 수 있습니다. 메뉴 항목 외에도 연락처 양식, 검색 양식, 소셜 공유 아이콘, 위젯 영역 등의 항목을 최대 8개까지 막대에 배치할 수 있습니다 .
선택할 수 있는 두 가지 테마와 그라디언트가 자동으로 계산되는 동안 자신의 색상을 설정할 수 있는 사용자 지정 테마가 있습니다. 탐색 모음은 고정 또는 스크롤 가능한 메뉴로 배치할 수 있습니다. 개발자라면 Multi-X bar에서 새 플러그인을 만들려는 경우 준비된 후크 세트가 있다는 것을 알고 싶을 것입니다. 이 플러그인은 훨씬 더 많은 것을 제공하므로 CodeCanyon의 모든 기능을 살펴보십시오.
- 8개의 임베디드 기능 모듈
- 2가지 색상 테마 + 사용자 정의 테마
- 상단 또는 하단 위치
최고의 WordPress 모바일 메뉴 플러그인
우리 모두는 기술이 얼마나 발전했는지 알고 있습니다. 스마트폰과 태블릿은 피할 수 없는 존재가 되었으며 모바일 장치 소유자의 수가 증가하고 있습니다. Wi-Fi 네트워크는 우리 도시의 모든 지역을 포괄하며, Wi-Fi 네트워크가 없는 경우 공급자를 통해 언제든지 모바일 장치를 인터넷에 연결할 수 있습니다. 이것이 의미하는 바는 모바일 웹 서퍼의 수가 그 어느 때보다 많고 웹사이트를 운영하는 경우 이들을 돌봐야 한다는 것입니다.
모바일 사이트를 구축 중이거나 사이트를 개선 하려면 모든 화면 크기에 적용되고 모바일 사용자가 더 쉽게 탐색할 수 있도록 하는 특별한 모바일 메뉴를 구축해야 합니다 .
WordPress를 사용하면 이 작업이 생각보다 그렇게 어렵지 않습니다. 코드를 작성하거나 메뉴를 설정하는 방법을 알 필요가 없습니다. 필요에 따라 쉽게 설치하고 사용자 정의할 수 있는 플러그인만 있으면 됩니다.
가이드의 이 부분에서는 WordPress 웹사이트를 위한 모바일 메뉴를 만들 수 있는 최고의 프리미엄 플러그인을 보여드리겠습니다. 그럼 아래로 스크롤하여 살펴보겠습니다.
촉각
가격: $18 – 데모
이 프리미엄 플러그인은 모바일 메뉴가 포함된 깔끔한 모바일 헤더를 생성합니다. 애니메이션은 매우 간단하며 스마트폰 화면에서 정말 멋지고 유동적으로 보일 수 있습니다. Tactile 을 사용하면 다단계 아코디언 메뉴를 만들거나 스와이프할 수 있는 단일 수준 수평 메뉴를 만들거나 웹사이트로 날아갈 수 있는 위젯 사이드바를 만들 수 있습니다 .
모든 것이 사용자 정의가 가능하므로 원하는 색상으로 요소를 칠하고 배경을 변경하고 색상, 불투명도 등을 설정할 수 있습니다. 메뉴는 절대적으로 고정되거나 배치될 수 있습니다. 모바일 장치를 더 많이 제어하려면 이 메뉴가 활성화될 해상도를 설정할 수 있습니다.
- 여러 메뉴 유형
- 검색 기능
- 고정/절대 위치 지정
탭탭
가격: $10 – 데모
TapTap은 WordPress 웹사이트를 위한 고유한 모바일 메뉴를 만들 수 있는 기능을 제공합니다. 데모 사이트에서 볼 수 있듯이 상상하는 거의 모든 것을 만들 수 있고 메뉴가 정말 깔끔하게 보일 것입니다. 이 플러그인을 사용하면 다단계 메뉴를 만들고, 표시할 요소를 결정하고, 설명을 추가하거나 통합 검색 옵션을 활성화할 수 있습니다 .
두 가지 메뉴 버튼 디자인과 선택할 수 있는 몇 가지 애니메이션이 있습니다. 메뉴의 위치는 고정되거나 절대 위치를 사용할 수 있습니다. 배경 스타일을 선택하고 다양한 스타일 옵션을 사용하여 메뉴를 테마에 완벽하게 맞출 수 있습니다. 마지막으로 TapTap을 사용하면 자체적으로 표시할 해상도를 선택할 수 있습니다. 모바일 탐색 메뉴에서 무엇을 더 바랄 수 있습니까?
- 다단계 메뉴
- 2개의 메뉴 버튼 디자인 및 애니메이션
- 고정/절대 위치 지정
모비
가격: $16 – 데모
Mobi는 모바일 웹사이트를 도울 수 있는 간단하면서도 훌륭한 WordPress 플러그인입니다. 이 추가 기능을 사용하면 반응형 테마의 탐색 기능이 훨씬 향상됩니다. 직관적인 드래그 앤 드롭 메뉴 빌더를 사용하여 메뉴를 만든 후에는 사이트 상단이나 하단에 배치할 수 있습니다.
모든 메뉴 항목을 사용자 정의할 수 있으며 탐색 모음에 소셜 미디어 아이콘을 자유롭게 추가할 수 있습니다. 700개 이상의 아이콘 글꼴이 있으며 Google 글꼴 중 하나를 사용하여 디자인을 완성할 수 있습니다. 필요한 경우 게스트 및 로그인한 사용자에 대한 사용자 가시성을 제어할 수 있습니다.
- 드래그 앤 드롭 사용자 정의
- 상단 또는 하단 메뉴 위치 지정
- 게스트 및 로그인한 사용자에 대한 사용자 가시성
와 메뉴
가격: $44 – 데모
Wah-menu는 iPad 터치 탐색을 위해 특별히 설계된 모바일 웹사이트에 적합한 도킹 가능한 메뉴 입니다. 이 프리미엄 플러그인을 사용하면 WordPress 웹사이트 측면에 잘 맞는 최대 8개의 메뉴 링크를 추가할 수 있습니다.
메뉴에서 특정 아이콘을 클릭하면 HTML, 포함된 비디오, 지도 및 원하는 거의 모든 것을 허용하는 하위 메뉴가 나타납니다. 플러그인은 사용자 정의가 가능하므로 8가지 강조 색상 중에서 선택하고 메뉴 너비, 아이콘, 링크 등을 가지고 놀 수 있습니다. 메뉴 생성은 WYSIWYG 편집기를 사용하면 매우 쉽습니다. 어두운 테마를 사용하든 밝은 테마를 사용하든 상관없이 멋지게 보일 것입니다.
- 위지윅 에디터
- HTML, 포함된 비디오 등을 지원하는 하위 메뉴
- 아웃 또는 도킹 상태 옵션
경로 스타일 메뉴
가격: $12 – 데모
이 프리미엄 플러그인은 메뉴 생성 전용 플러그인과 약간 다릅니다. 경로 스타일 메뉴는 클래식 메뉴 모음이나 사이드바 메뉴 대신 버튼 을 만듭니다 . 버튼을 활성화하면 원 안에 있는 버튼 주위에 메뉴가 표시되고 원하는 방향으로 인라인으로 확장하거나 아이콘을 호로 구성할 수도 있습니다.
메뉴 수준이 여러 개인 경우 버튼은 사용자가 기본 메뉴로 다시 이동할 수 있도록 하는 뒤로 버튼을 생성합니다. 수많은 사용자 정의 옵션이 있고 메뉴를 만들 수 있습니다. WordPress 표준 메뉴 편집기를 사용하면 됩니다. 독특한 모바일 메뉴를 찾고 계시다면 Path Style Menu를 이용해보세요.
- 버튼 주위에 메뉴 만들기
- 고도로 사용자 정의 가능
- 메뉴 편집을 위해 표준 WP 메뉴 사용
스크롤 내비
가격: $10 – 데모
몇 가지 훌륭한 기능을 제공하고 웹사이트에서 멋지게 보일 수 있는 또 다른 고유한 메뉴 플러그인입니다. Scrollnav는 여러 메뉴 옵션이 포함된 원으로 구성됩니다 . 버튼 중간에 홈페이지 링크가 있고, 상단 링크는 논리적으로 페이지 상단으로 이동하며, 검색 상자, 사용자 정의 메뉴 및 원의 사용자 정의 링크 부분이 있습니다.
사용자 정의 메뉴는 하위 메뉴가 있는 전체 메뉴를 만들기에 충분한 공간을 제공하며 보기에도 좋고 모바일 웹사이트에 필요한 공간을 제공합니다. 선택할 수 있는 여러 가지 색 구성표가 있으며 모든 것이 구성하기 쉽습니다. 이 작은 플러그인이 어떻게 작동하는지 보려면 데모 사이트를 반드시 확인해야 합니다.
- 다양한 기능을 가진 원형 버튼
- 사용자 정의 메뉴 및 사용자 정의 링크 부분
- 여러 가지 색 구성표
스크롤 메뉴
가격: $24 – 데모
이 간단한 프리미엄 플러그인은 iOS 및 Android 터치 탐색용으로 제작된 멋진 사이드바 메뉴를 제공합니다. 메뉴를 만들면 페이지의 다른 부분으로 연결되고 자동으로 스크롤되는 아이콘이 표시됩니다.
ScrollTo는 전체 탐색 메뉴 가 아니지만 동일한 페이지의 다른 부분으로만 스크롤된다는 점에 유의해야 합니다. 750개 이상의 아이콘 중에서 선택하거나 자신의 이미지를 메뉴 항목으로 사용할 수 있으며 광고를 위한 추가 공간이 있습니다. 모든 것이 작동하도록 하려면 지침을 따를 수 있도록 기본적인 HTML 지식이 있어야 합니다. 시간이 몇 분 더 걸릴 수 있지만 최종 결과는 좋아 보입니다.
- 터치 가능
- 750개 이상의 아이콘 + 사용자 정의 이미지
- 추가 광고 공간
결론
메뉴 없이는 웹사이트를 운영하기 어렵다는 사실을 이제 아셨기를 바랍니다. 한 페이지짜리 호출기를 실행하더라도 여전히 섹션 간에 탐색이 필요합니다. 따라서 이미 여기에 있는 동안 시간을 내서 WordPress 메뉴를 사용자 정의하고 가능한 한 최상의 메뉴를 만드십시오.