모바일 지원 반응형 WordPress 메뉴를 만드는 방법

독자를 위한 특별 WordPress 호스팅 제안, 모바일 지원 WordPress 메뉴 생성 방법. 모바일용 반응형 워드프레스 메뉴를 만들고 싶으신가요? 모바일 사용자는 많은 웹 사이트에서 데스크톱 사용자를 지나치게 압도했습니다. 모바일 반응형 메뉴를 추가하면 사용자가 웹사이트를 더 쉽게 관리할 수 있습니다. 이 기사에서는 전문가가 모바일 지원 반응형 WordPress 메뉴를 쉽게 구축하는 방법을 설명합니다.

모바일 반응형 WordPress 메뉴 만들기

이것은 깊이 있는 튜토리얼입니다. 초보자를 위한 플러그인 방법(코딩 없음)과 고급 사용자를 위한 코딩 방법을 모두 보여줍니다.

이 튜토리얼이 끝나면 슬라이드인 모바일 메뉴, 드롭다운 모바일 메뉴 및 토글 모바일 메뉴를 만드는 방법을 배우게 됩니다.

준비가 된? 시작하자.

기술 1: 플러그인을 사용하여 WordPress에 반응형 메뉴 추가

이 기술은 클라이언트 코딩이 필요 없기 때문에 초보자에게 더 쉽고 더 좋습니다. 이 기술에서는 모바일 화면에서 슬라이드할 수 있는 햄버거 메뉴를 만듭니다.

반응형 메뉴 플러그인 데모

먼저 반응형 메뉴 플러그인을 사용하여 설치 및 활성화 프로세스를 수행해야 합니다. 자세한 내용을 보려면 WordPress 플러그인 설치에 대한 지침을 참조하십시오.

활성화 후 플러그인은 '반응형 메뉴'라는 새 메뉴 항목을 WordPress 관리 표시줄에 추가합니다. 클릭하면 플러그인 설정 페이지로 이동합니다.

반응형 메뉴 설정

먼저 플러그인이 반응형 메뉴를 표시하기 시작하는 이 순간에 화면 너비를 도입해야 합니다. 예약된 값은 대부분의 웹사이트에서 작동해야 하는 800px입니다.

그런 다음 반응형 메뉴로 활용하고 싶은 메뉴를 선택해야 합니다. 아직 메뉴가 설정되지 않았다면 출석 출석» 메뉴에서 만들 수 있습니다. 특정 지침은 WordPress에 탐색 메뉴를 추가하는 방법에 대한 지침을 참조하십시오.

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

설정을 저장하려면 '업데이트 옵션' 버튼을 클릭하는 것을 잊지 마십시오.

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

반응형 메뉴 플러그인 데모

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

방법 2: 플러그인을 사용하여 드롭다운 선택 메뉴 추가

반응형 메뉴를 추가하는 다른 방법은 드롭다운 선택 메뉴를 추가하는 것입니다. 이 기술은 코드 경험이 필요하지 않으므로 초보자에게 가장 적합한 방법입니다.

반응형 메뉴 선택

먼저 반응형 메뉴 플러그인을 사용하여 설치 및 활성화 프로세스를 수행해야 합니다. 자세한 내용을 보려면 WordPress 플러그인 설치에 대한 지침을 참조하십시오.

활성화 후 외모 » 반응형 플러그인 설정 구성을 선택해야 합니다.

메뉴 설정 선택

'테마 위치 활성화' 분할까지 아래로 스크롤해야 합니다. 기본적으로 플러그인은 모든 주제 위치에서 활성화됩니다. 특정 테마 위치에 대해 선택적으로 변환하여 변경할 수 있습니다.

변경 사항을 저장하려면 모든 설치 저장 키를 클릭해야 합니다.

현재 웹 사이트에 출석하고 브라우저 화면의 크기를 조정하여 직장에서 반응형 선택 메뉴를 볼 수 있습니다.

기법 3: 스위치 동작으로 모바일 나가는 반응형 메뉴 만들기

모바일 화면에 메뉴를 표시하기 위해 가장 많이 사용되는 기술 중 하나는 스위치 동작을 사용하는 것입니다.

이 기술을 사용하려면 WordPress 데이터 세트에 사용자 정의 키를 추가해야 합니다. 이전에 이것을 생성하지 않았다면 WordPress에서 인터넷의 스니펫을 붙여넣는 방법에 대한 지침을 살펴보십시오.

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

이 장난감 이후에는 메뉴가 휴대폰에서 볼 때 스위치가 작동하도록 올바른 CSS 클래스를 활용하도록 CSS를 추가해야 합니다.

기술 4: WordPress에 슬라이드인 모바일 메뉴 추가

다른 일반적인 방법은 슬라이드인 패널 메뉴를 사용하여 모바일 메뉴를 추가하는 것입니다(기술 1에서 볼 수 있듯이).

기술 4에서는 WordPress 테마 파일에 코드를 추가해야 하며 기술 1과 동일한 결과를 얻는 다른 방법일 뿐입니다.

우선 메모장과 같은 일반 텍스트 편집기를 열고 특수 코드를 빈 텍스트 파일에 추가해야 합니다.

example.com을 도메인의 개인 이름으로 바꾸고 테마를 실제 테마 디렉토리로 바꿔야 한다는 것을 기억하십시오. 이 파일을 바탕 화면에 slidepanel.js로 저장합니다.

그런 다음 메뉴의 아이콘으로 사용할 사진이 필요합니다.

메뉴 아이콘으로 가장 많이 활용되는 것은 햄버거 아이콘이다. 다양한 인터넷 사이트에서 이러한 사진을 많이 볼 수 있습니다. Google Material Icons 라이브러리의 메뉴 아이콘을 사용합니다.

이제 사용하려는 사진이 표시되면 menu.png로 저장합니다.

그런 다음 FTP 고객을 열고 Slidepanel.js 파일을 /wp-content/your-theme/js/ 폴더에 업로드해야 합니다.

테마 카탈로그에 JS 폴더가 없으면 tit를 설정한 다음 파일을 업로드해야 합니다.

이 과정이 끝나면 menu.png 파일을 /wp-content/themes/your-theme/images/ 폴더에 업로드해야 합니다.

파일이 업로드되면 이 순간에 추가하는 JavaScript 파일에 테마가 풍부하다는 것을 확신해야 합니다. JavaScript 파일을 대기열에 추가하여 여기에 도달합니다.

이 코드를 테마의 functions.php 파일에 추가하세요.

테마의 탐색 메뉴가 여전히 존재합니다. 슬라이드 패널 메뉴를 실행하는 데 필요한 HTML을 둘러싸고 있습니다.

마지막 단계는 CSS를 추가하여 더 큰 화면에서 메뉴 이미지 아이콘을 숨기는 것입니다. 메뉴 아이콘의 위치도 조정해야 합니다.

WordPress 테마에 따라 충돌을 피하기 위해 CSS를 조정해야 할 수도 있습니다.