WordPress 테마에 슬라이드 패널 메뉴를 추가하는 방법

WordPress 개발자 또는 WordPress 테마 디자이너인 경우 메뉴 옵션을 제어하기 위해 테마 편집기에 사용자 지정 메뉴를 추가할 수 있습니다. 그러나 WordPress 관리 대시보드 에는 기본적으로 슬라이드 패널 메뉴 옵션이 없습니다 . 즉, 이 기능을 테마에 추가하려면 타사 플러그인이나 템플릿을 사용해야 합니다. 그래서 오늘은 워드프레스 테마에 슬라이드 패널 메뉴를 추가하는 방법에 대해 알아보도록 하겠습니다.

WordPress 테마의 슬라이드 패널 메뉴: 포함하는 이유는 무엇입니까?

측면 패널을 포함하는 것이 중요한 데에는 여러 가지 이유가 있습니다. 첫 번째 이유는 직관적인 메뉴를 개발하는 데 시간을 할애하면 방문자가 WordPress 사이트를 더 쉽게 탐색할 수 있기 때문입니다. 두 번째 이유는 슬라이드 패널이 모바일 기기에 필요하기 때문입니다. 따라서 웹사이트가 휴대기기에서 제대로 작동 하도록 하려면 이러한 기능이 있는지 확인해야 합니다. 그러나 많은 사이트 사용자가 모바일 장치를 사용하는 경우 WordPress를 사용하기 전에 이러한 작은 디스플레이에서 메뉴의 레이아웃을 테스트하는 것이 필수적입니다. 다행히 모바일 장치에서 볼 때 많은 WordPress 테마의 기본 스타일이 모바일 친화적인 메뉴를 표시합니다. WordPress 테마의 전체 화면 반응형 메뉴 또는 동적 슬라이드 패널 메뉴는 모바일 탐색을 더욱 개인화하는 데 좋은 터치가 될 수 있습니다. 이러한 이유로 WordPress 테마에 슬라이딩 패널 메뉴의 통합을 살펴보겠습니다.

1단계: 반응형 메뉴 플러그인 설치

반응형 메뉴 플러그인을 설치하고 활성화하는 것이 첫 번째 단계입니다. 이 플러그인 에는 유료 버전과 무료 버전 의 두 가지 버전이 있습니다. Responsive Menu의 유료 버전은 조건부 논리 및 더 많은 테마 옵션과 같은 멋진 추가 기능을 제공하지만 이 튜토리얼에서는 오픈 소스 플러그인을 사용할 것입니다. 반응형 메뉴를 켜면 반응형 메뉴 > 메뉴로 이동합니다. 거기에 있는 즉시 도구 모음으로 이동하여 "새 메뉴 만들기" 버튼을 누르십시오. 새 메뉴에 이름을 지정하고 작업을 저장합니다. 비어 있다고 표시되더라도 걱정하지 마십시오.

2단계: 테마 선택

새로운 반응형 메뉴는 네 가지 디자인 옵션을 제공합니다. 원하는 경우 더 많은 테마를 구입할 수 있습니다. 이 튜토리얼은 시스템 선택 테마를 사용합니다. 그런 다음 "다음" 옵션을 선택하여 계속 진행할 수 있습니다. 아직 수행하지 않은 경우 반응형 메뉴에 이름을 지정한 다음 WordPress 대시보드 에서 사이드바에 표시할 메뉴 유형을 선택합니다. 이 튜토리얼을 위해 '탐색' 옵션을 선택했습니다.

방문자에게 새 슬라이드 패널 메뉴만 표시하려면 WordPress 테마와 함께 표시되는 기본 메뉴를 숨기도록 선택할 수도 있습니다. 이렇게 하려면 "테마 메뉴 숨기기" 영역을 사용하여 일부 CSS 코드를 입력합니다. 선택한 테마에 적합한 코드를 입력하는 방법에 대한 자세한 내용을 보려면 "더 알아보기" 버튼을 클릭하십시오. Pro 에디션은 사용자를 위한 몇 가지 사용자 정의 옵션을 추가합니다.

3단계: 설정

매개변수를 원하는 대로 조정한 후 "메뉴 만들기" 버튼을 클릭하여 메뉴를 생성할 수 있습니다. 이 작업을 완료하면 오른쪽에 사이트 미리보기가 표시 되며 하단에는 모바일, 태블릿 또는 데스크톱 모드로 전환할 수 있는 옵션이 있습니다. 왼쪽에는 개인화를 위한 추가 설정이 표시됩니다. 메뉴 옵션 위에 표시되는 언어를 기록해 둡니다. 메뉴의 제목과 플러그인의 레이블인 "추가 콘텐츠" 줄이 여기에 표시됩니다.

사이드 메뉴에서 "모바일 메뉴"를 선택한 다음 "컨테이너"를 선택하여 텍스트를 변경하거나 숨깁니다. Title Text 영역에는 "Main Menu"에서 "Navigation"까지 무엇이든 입력할 수 있습니다. 제목 표시줄을 비활성화하려면 "제목"이라고 표시된 스위치를 끄기 위치로 전환하면 됩니다. 완료하면 '추가 콘텐츠' 옵션으로 이동합니다. 이 기능을 비활성화하거나 텍스트를 다른 것으로 바꿀 수 있는 옵션이 있습니다. 메뉴를 사용자 정의한 후에는 페이지 하단의 "업데이트" 버튼을 클릭하는 것을 잊지 마십시오.

시작하기 전에 사전 테스트를 수행하는 것이 중요합니다. 모든 것이 제대로 작동하는지 확인하려면 일반적으로 사이트에 액세스하는 데 사용하는 브라우저가 아닌 다른 브라우저를 사용하는 것이 좋습니다. 이 예에서는 Google Chrome 브라우저를 사용했습니다. 모바일 장치에서 사이트에 액세스하기 위해 "Android용 Internet Explorer"라는 앱을 다운로드했습니다. 우리는 이 사이트 의 URL을 복사 하여 앱에 붙여넣었고 그 결과는 놀라웠습니다. 메뉴가 가로 방향과 세로 방향 모두에서 제대로 형식이 지정되었으며 모든 링크가 예상대로 작동하는 것을 발견했습니다. 그러나 모바일 장치의 경우 마일리지가 다를 수 있습니다. 메뉴를 게시하기 전에 가능한 한 많은 장치와 브라우저에서 메뉴를 테스트하는 것이 좋습니다. 문제를 발견했다면 지금이 문제를 해결할 때입니다.

5단계: 실시간 스트리밍

메뉴를 테스트하고 모든 것이 계획대로 작동하는 것에 만족하면 대중에게 제공할 때입니다. 사이트의 오른쪽 상단 모서리에 있는 메뉴 아이콘을 클릭하고 드롭다운 메뉴에서 "메뉴 설정"을 선택합니다. 목록 상단에 "모바일 메뉴"라는 제목 의 항목 목록이 표시됩니다. 여기에 모바일 메뉴 플러그인 페이지의 웹 주소를 입력합니다. 완료되면 "변경 사항 저장"을 클릭하고 변경 사항이 적용될 때까지 몇 초간 기다리십시오. 그게 다야!

결론

이제 WordPress 테마에 슬라이드 패널 메뉴를 추가하는 방법을 알았으니 자신의 사이트로 이동하여 사용해 보십시오. 이제 추가 메뉴로 웹사이트를 업데이트하고 싶다면 방법을 알고 계실 것 입니다. 이 기사가 새로운 기술을 배우는 데 도움이 되었고 압도당하지 않았기를 바랍니다.