[vc_row content_placement = "middle"css = ". vc_custom_1508940533685 {background-color : # f8f6f6! important;}"el_id = "themeforestpro"] [vc_column width = "3/4"css = ". vc_custom_1502759058885 {margin-bottom : 0p ! Important; border-bottom-width : 0px! Important; padding-bottom : 0px! Important;} "] [vc_column_text]

Divi : 사용하기 가장 쉬운 WordPress 테마

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] 다운로드 [/vcex_button][/ vc_column][/vc_row]

Divi : 모든 시간의 최고의 WordPress 테마!

901.000 다운로드Divi는 세계에서 가장 인기있는 WordPress 테마입니다. 그것은 완전하고, 사용하기 쉽고 62 무료 템플릿 이상을 제공합니다.

WordPress 블로그에서 반응 형 모바일 메뉴를 만드시겠습니까?

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

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

그러나 이전에 WordPress discover를 설치 한 적이 없다면 워드 프레스 블로그 7 단계를 설치하는 방법 et 어떻게 찾아 설치하고 블로그에 워드 프레스 테마를 활성화하려면 

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

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

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

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

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

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

반응 형 WordPress 메뉴 플러그인

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

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

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

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

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

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

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

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

Elementor로 웹 사이트를 쉽게 만들 수 있습니다

Elementor를 사용하면 쉽고 무료 전문적인 모습의 모든 웹 사이트 또는 블로그 디자인. 스스로 할 수 있는 웹사이트에 많은 비용을 지불하지 마십시오.

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

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

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

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 클라이언트를 열어야합니다.

당신의-테마 현재 WordPress 테마 폴더의 이름으로. 테마 디렉토리에 js 폴더가 없으면 새로 만들어야합니다.

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

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

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

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

메뉴 'primary', 'menu_class'=> 'nav-menu')); ?>

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

인터넷에서 제품을 판매하고 싶습니까?

WordPress에서 실제 및 디지털 제품을 판매하고 온라인 상점을 쉽게 만들 수 있는 최고의 전자 상거래 플러그인인 WooCommerce를 무료로 다운로드하십시오. 초보자에게 적합합니다.

또한 우리의 발견 가입 양식을 작성하기위한 5 개의 WordPress 플러그인

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

/ * 탐색 메뉴 * / .main-navigation {margin-top : 24px; margin-top : 1.714285714rem; 텍스트 정렬 : 가운데; } .main-navigation li {margin-top : 24px; margin-top : 1.714285714rem; 글꼴 크기 : 12px; 글꼴 크기 : 0.857142857rem; 줄 높이 : 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 @media 화면 및 (최소 너비 : 600px) {.main-navigation ul.nav-menu, .main-navigation div.nav-menu> ul {border-bottom : 1px solid # ededed; border-top : 1px solid #ededed; 디스플레이 : 인라인 블록! 중요; 텍스트 정렬 : 왼쪽; 너비 : 100 %; } .main-navigation ul {margin : 0; 텍스트 들여 쓰기 : 0; } .main-navigation li a, .main-navigation li {display : inline-block; 텍스트 장식 : 없음; } .main-navigation li a {border-bottom : 0; 색상 : # 6a6a6a; 라인 높이 : 3.692307692; 텍스트 변환 : 대문자; 공백 : nowrap; } .main-navigation li a : hover, .main-navigation li a : focus {color : # 000; } .main-navigation li {margin : 0 40px 0 0; 여백 : 0 2.857142857rem 0; 위치 : 상대; } .main-navigation li ul {margin : 0; 패딩 : 0; 위치 : 절대; 상단 : 0 %; Z- 색인 : 100; 높이 : 1px; 너비 : 1px; 오버플로 : 숨김; 클립 : rect (1px, 1px, 1px, 1px); } .main-navigation li ul ul {top : 1; 왼쪽 : 0 %; } .main-navigation ul li : hover> ul, .main-navigation ul li : focus> ul, .main-navigation .focus> ul {border-left : 100; 클립 : 상속; 오버플로 : 상속; 높이 : 상속; 너비 : 상속; } .main-navigation li ul li a {배경 : #efefef; border-bottom : 0px solid #ededed; 디스플레이 : 블록; 글꼴 크기 : 1px; 글꼴 크기 : 11rem; 라인 높이 : 0.785714286; 패딩 : 2.181818182px 8px; 패딩 : 10rem 0.571428571rem; 너비 : 0.714285714px; 너비 : 180rem; 공백 : 정상; } .main-navigation li ul li a : hover, .main-navigation li ul li a : focus {background : # e12.85714286e3e3; 색상 : # 3; } .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 : # 444; 글꼴 두께 : 굵게; } .menu-toggle {디스플레이 : 없음; }}

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

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

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

다른 WordPress 플러그인을 사용하여 현대적인 모양을 제공하고 블로그 또는 웹 사이트의 그립을 최적화 할 수 있습니다.

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

1. UberMenu

UberMenu는 사용자 지정이 가능하고 반응이 좋으며 사용자가 액세스 할 수있는 메가 메뉴를 만드는 데 전념하는 WordPress 플러그인입니다. 특별한 구성없이 설치 후 작동합니다.

Ubermenu wordpress 메가 메뉴 플러그인

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

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

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

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

2. LMM

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

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

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

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

3. 8Degree Fly 메뉴

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

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

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

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

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

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

다른 추천 자료

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

결론

그게 다야! 이 튜토리얼에서는 모바일 사용자를위한 메뉴를 만들 수 있기를 바랍니다. 주저하지 말라. 소셜 네트워크에서 친구들과 팁을 공유하십시오..

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

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

...

6 주식
4
짹짹
레지스터2