WordPress 블로그에 반응형 메뉴를 만들고 싶습니까?

요즘 모바일 사용자가 데스크톱 사용자보다 많습니다. 반응 형 모바일 메뉴를 추가하면 사용자가 웹 사이트를 더 쉽게 탐색 할 수 있습니다.

이 자습서에서는 WordPress에서 반응 형 메뉴를 쉽게 만드는 방법을 보여줍니다.

그러나 이전에 WordPress discover를 설치 한 적이 없다면 WordPress에 설치할 플러그인 수. et 어떻게 찾아 설치하고 블로그에 워드 프레스 테마를 활성화하려면 

그런 다음 왜 우리가 여기 있는지 다시 돌아옵니다.

반응 형 모바일 워드 프레스 메뉴를 만드는 방법

여기서는 초보자를위한 플러그인을 사용한 방법과 고급 사용자를위한 코딩 방법을 모두 보여줌으로써 심도있게 진행하는 문제가 될 것입니다.

첫 번째 방법 : WordPress 플러그인으로 모바일 메뉴 만들기

이 방법은 특별한 코딩 기술이 필요하지 않기 때문에 초보자에게 더 쉽고 권장됩니다.

이 방법에서는 메뉴 (햄버거 아이콘) 모바일 화면에서 슬라이드합니다.

반응형 메뉴 만들기


가장 먼저해야 할 일은 설치하고 활성화하는 것입니다. WordPress 반응 형 메뉴 플러그인 . 자세한 내용은 WordPress 플러그인 설치 방법에 대한 가이드를 확인하세요. .

플러그인을 활성화 한 후 플러그인은 메뉴에 " 응답 메뉴 ". 클릭하면 설정 페이지로 이동합니다. 워드 프레스 플러그인.

WordPress 반응 형 대시 보드 메뉴 플러그인

먼저 모바일 메뉴가 표시 될 크기를 입력해야합니다. 기본값은 800px이며 대부분의 웹 사이트에서 작동합니다.

그런 다음 모바일에서 사용하려는 메뉴를 선택해야합니다.

화면의 마지막 옵션을 사용하면 메뉴에 CSS 클래스를 제공 할 수 있습니다. 이렇게하면 플러그인이 작은 화면에서 반응하지 않는 메뉴를 숨길 수 있습니다.

«를 클릭하는 것을 잊지 마십시오 업데이트 옵션 설정을 저장합니다.

우리는 또한 당신이 우리를 발견하는 것이 좋습니다 블로그에 메뉴를 만드는 10 WordPress 플러그인

이제 웹 사이트를 방문하고 브라우저 화면의 크기를 조정하여 반응 형 메뉴가 작동하는지 확인할 수 있습니다.

사이트에서 액션 메뉴 응답 - 투 - 모바일

플러그인« 응답 메뉴 »반응 형 메뉴의 동작과 모양을 수정할 수있는 다른 많은 옵션을 제공합니다. 플러그인의 설정 페이지에서 이러한 옵션을 탐색하고 필요에 따라 조정할 수 있습니다.

2 방법 : 모바일 메뉴를 수동으로 추가하는 방법

모바일 화면에 메뉴를 표시하는 데 사용되는 가장 일반적인 방법 중 하나는 레버리지를 사용하는 것입니다.

이 방법을 사용하려면 WordPress 파일에 사용자 지정 코드를 추가해야합니다.

이전 자습서 중 하나에서 워드 프레스 플러그인을 만드는 방법.

먼저 메모장과 같은 텍스트 편집기를 열고이 코드를 붙여 넣어야합니다.

(함수 () {nav var = document.getElementById ( '사이트 탐색'), 버튼, 메뉴; if (! nav) {return;} button = nav.getElementsByTagName ( 'button') [0]; 메뉴 = nav. getElementsByTagName ( 'ul') [0]; if (! button) {return;} // 메뉴가 없거나 비어있는 경우 버튼 숨기기 (! menu ||! menu.childNodes.length) {button.style.display = 'none'; return;} button.onclick = function () {if (-1 === menu.className.indexOf ( 'nav-menu')) {menu.className = 'nav-menu';} if (- 1! == button.className.indexOf ( 'toggled-on')) {button.className = button.className.replace ( 'toggled-on', ''); menu.className = menu.className.replace ( '토글 됨 -on ',' ');} else {button.className + ='토글 온 '; menu.className + ='토글 온 ';}};}) (jQuery);

이제이 파일을 " navigation.js 책상 위에

그런 다음이 파일을 워드 프레스 웹 사이트의 "/ wp-content / themes / your-theme / js /"위치로 다운로드하려면 FTP 클라이언트를 열어야합니다.

당신의-테마 » 귀하의 폴더 이름으로 워드 프레스 테마 현재의. 테마 디렉토리에 js 폴더가 없으면 하나 만들어야 합니다.

JavaScript 파일을 업로드 한 후 다음 단계는 WordPress 웹 사이트에서 JavaScript 파일을로드하는지 확인하는 것입니다. "에 다음 코드를 추가해야합니다. functions.php " 당신의 워드 프레스 테마.

다른 것을 발견하십시오 functions.php 파일로 무엇을 할 수 있습니까?

 wp_enqueue_script ( 'bpc_togglemenu'get_template_directory_uri () /js/navigation.js '어레이 ('JQuery와 ') 20160909'참.);

이제 탐색 메뉴를 추가해야 합니다. 워드 프레스 테마. 일반적으로 탐색 메뉴는 “ header.php 당신의 워드 프레스 테마.

<nav id="site-navigation" class="main-navigation" role="navigation">
            <button class="menu-toggle">Menu</button>
            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>

WordPress 테마에 의해 정의된 메뉴 위치를 " 일차 ". 그렇지 않으면 WordPress 테마에서 정의한 위치를 사용하십시오.

마지막 단계는 일부 CSS를 추가하여 메뉴가 모바일 장치에서 볼 때 전환 할 올바른 CSS 클래스를 사용하도록하는 것입니다.

/* Navigation Menu */
.main-navigation {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    text-align: center;
}
.main-navigation li {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 1.42857143;
}
.main-navigation a {
    color: #5e5e5e;
}
.main-navigation a:hover,
.main-navigation a:focus {
    color: #21759b;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
    display: none;
}

.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
    display: inline-block;
}

// CSS to use on mobile devices

@media screen and (min-width: 600px) {

.main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
        border-bottom: 1px solid #ededed;
        border-top: 1px solid #ededed;
        display: inline-block !important;
        text-align: left;
        width: 100%;
    }
    .main-navigation ul {
        margin: 0;
        text-indent: 0;
    }
    .main-navigation li a,
    .main-navigation li {
        display: inline-block;
        text-decoration: none;
    }
    .main-navigation li a {
        border-bottom: 0;
        color: #6a6a6a;
        line-height: 3.692307692;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .main-navigation li a:hover,
    .main-navigation li a:focus {
        color: #000;
    }
    .main-navigation li {
        margin: 0 40px 0 0;
        margin: 0 2.857142857rem 0 0;
        position: relative;
    }
    .main-navigation li ul {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 100%;
        z-index: 1;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
    }
    .main-navigation li ul ul {
        top: 0;
        left: 100%;
    }
    .main-navigation ul li:hover > ul,
    .main-navigation ul li:focus > ul,
    .main-navigation .focus > ul {
        border-left: 0;
        clip: inherit;
        overflow: inherit;
        height: inherit;
        width: inherit;
    }
    .main-navigation li ul li a {
        background: #efefef;
        border-bottom: 1px solid #ededed;
        display: block;
        font-size: 11px;
        font-size: 0.785714286rem;
        line-height: 2.181818182;
        padding: 8px 10px;
        padding: 0.571428571rem 0.714285714rem;
        width: 180px;
        width: 12.85714286rem;
        white-space: normal;
    }
    .main-navigation li ul li a:hover,
    .main-navigation li ul li a:focus {
        background: #e3e3e3;
        color: #444;
    }
    .main-navigation .current-menu-item > a,
    .main-navigation .current-menu-ancestor > a,
    .main-navigation .current_page_item > a,
    .main-navigation .current_page_ancestor > a {
        color: #636363;
        font-weight: bold;
    }
    .menu-toggle {
        display: none;
    }
    
    }

이제 웹 사이트를 방문하여 브라우저 화면의 크기를 조정하여 반응 형 메뉴가 토글되는지 확인할 수 있습니다.

흔들 메뉴 - 워드 프레스 - 자습서

프리미엄 워드 프레스 플러그인도 만나보세요  

당신은 다른 것을 사용할 수 있습니다 워드 프레스 플러그인 현대적인 외관을 제공하고 블로그 또는 웹사이트의 처리를 최적화합니다.

우리는 여기에 당신을 도울 수있는 프리미엄 WordPress 플러그인을 제공합니다.

1. UberMenu

우버메뉴는 워드 프레스 플러그인 사용자 정의가 가능하고 반응이 빠르며 사용자가 액세스할 수 있는 메가 메뉴를 만드는 데 전념합니다. 특정 구성 없이 설치 후 작동합니다.

Ubermenu wordpress 메가 메뉴 플러그인

사용하기 쉬운 플러그인이지만 고도로 사용자 정의 가능하고 창의적인 메가 메뉴 레이아웃을 만들 수있을만큼 강력합니다.

우리를 참조하십시오 블로그에서 가격표를 작성하는 9 개의 WordPress 플러그인

3 가지 메뉴 템플릿, 완벽하게 반응하는 레이아웃, 모바일 장치 (iPhone, iPad, Android)와의 호환성, 터치 지원 등을 찾을 수 있습니다.

다운로드 | 데모 | 웹 호스팅

2. LMM

LMM이라고도 불리는 Liquida 메가 메뉴는 워드 프레스 플러그인 사용자와 개발자를 위해 설계되었습니다. WP 대시보드에 통합된 간단하고 직관적인 인터페이스를 갖추고 있어 프로그래밍 기술 없이도 무제한의 메가 메뉴를 생성하고 사용자 정의할 수 있습니다.

부트 스트랩을 기반으로 한 Lmm 워드 프레스 반응 형 메가 메뉴

일반 사용자이든 고급 사용자이든 수십 가지 기능이 제공됩니다. 기능으로서 자동 및 수동 통합, 다중 사이트 지원, 어린이 테마 관리, 메뉴에 대한 완전히 사용자 정의 가능한 스타일, 사용자 정의 가능한 메뉴 위치, 고정 메뉴 등…

다운로드 | 데모 | 웹 호스팅

3. 8Degree Fly 메뉴

8Degree Fly Menu는 웹 사이트에 캔버스 메뉴를 추가하여 정보를 쉽게 강조하고 쉽게 볼 수 있도록하는 프리미엄 WordPress 플러그인입니다. 기본 WordPress 메뉴 기능을 사용하여 메뉴를 만듭니다.

워드 프레스를위한 캔버스 메뉴 플러그인에서 반응하는 8도 플라이 메뉴

아이콘, 메뉴 슬로건, 의사 그룹화 헤더 및 긴 설명과 같은 추가 요소를 기본 메뉴 항목에 추가 할 수 있습니다.

읽기 : 사이드 바 및 고정 헤더를 최적화하는 10 개의 WordPress 플러그인

또한 WYSIWYG 편집기가 제공되어 사용자에게 친숙한 방식으로 긴 설명을 이해하는 데 도움이되며이 편집기를 사용하면 단축 코드도 사용할 수 있습니다.

다운로드 | 데모 | 웹 호스팅

다른 추천 자료

또한 귀하의 웹 사이트 및 블로그에 대한 이해와 통제를 위해 아래 자료를 참조하십시오.

결론

그래서 ! 이 튜토리얼은 여기까지입니다. 모바일 사용자를 위한 메뉴를 만들 수 있기를 바랍니다. 부담없이 소셜 네트워크에서 친구들과 팁을 공유하십시오..

그러나 귀하는 우리와 상담 할 수 있습니다. 능숙, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작.

그러나 그 동안 귀하의 commentaires 전용 섹션의 제안.

...