WordPress에서 반응형 탐색 메뉴를 만드는 방법

게시 됨: 2021-07-22

WordPress에서 반응형 탐색 메뉴를 만드는 방법은 끝이 없습니다. WordPress가 제공하는 유연성 덕분에 이를 수행하는 방법은 셀 수 없이 많습니다.

오늘은 간결하고 의미 있는 반응형 탐색 메뉴를 만드는 방법을 보여 드리겠습니다. 이 모든 것을 8KB 미만으로 달성하고 믿을 수 없을 정도로 효율적인 탐색 메뉴가 될 것이기 때문에 린(Lean)하십시오. 두 개의 다른 메뉴를 유지할 필요가 없도록 현재 탐색 메뉴를 미러링하기만 하면 됩니다. 하나의 돌로 두 마리의 새를 죽이면 하나의 메뉴를 만들어 그들을 모두 지배할 것입니다.

반응형 탐색 인 wp

시작하기 전에 기본적인 프론트엔드 개발 지식이 있는 것이 좋습니다. (숙련도가 아닌 친숙함만 요구하므로 당황하지 마십시오.) 기본 HTML, CSS, jQuery 및 WordPress 지식이 이상적입니다. 이것은 WordPress 테마 파일의 수정을 포함하기 때문에 초급에서 중급 튜토리얼입니다.

다음 WordPress 테마 파일에도 액세스해야 합니다.

  • functions.php
  • header.php
  • footer.php
  • Style.css

수정하기 전에 사이트 백업을 실행하거나 먼저 로컬 환경에서 변경 사항을 테스트하십시오. 항상 원본 파일로 되돌릴 수 있는 방법이 필요합니다.

무료 로컬 개발 앱인 Local을 사용하면 워크플로를 간소화하고 사이트를 안전하게 실험할 수 있습니다. 오늘 시도하십시오!
"Creative Minds Powerful Words"라고 적힌 "Sharp Minds"라는 회사의 웹사이트 홈페이지를 보여주는 램프가 있는 책상 위의 노트북

우리는 오프 스크린 슬라이드 패널을 만들기 위한 작은 jQuery 플러그인인 bigSlide.js를 사용할 것입니다. 플러그인 웹사이트에는 "오프스크린 슬라이드 패널 탐색을 생성하기 위한 아주 작은(~1kb 압축) jQuery 플러그인"으로 설명되어 있습니다. 이것은 우리의 간결하고 평균적인 반응형 탐색 목표와 일치합니다.

일하러 가자.

1. bigSlide.js의 최신 압축 버전을 다운로드합니다. 파일을 테마의 /js 폴더에 복사합니다.

2. 원하는 코드 편집기에서 functions.php 를 엽니다. wp_enqueue_script 를 검색합니다. wp_enqueue_script 는 WordPress에 스크립트를 추가하는 표준 방법이므로 여러 인스턴스를 볼 수 있습니다.

3. wp_enqueue_script 의 마지막 인스턴스 바로 뒤에 다음 스니펫을 추가하고 저장합니다.

 wp_enqueue_script( 'my-responive-menu', get_template_directory_uri() . '/js/bigSlide.min.js', array(), '20161214', true );

4. header.php 를 열고 body 태그 바로 뒤에 있는 첫 번째 div에 클래스 push 를 추가합니다. 이 섹션은 일반적으로 다음과 같습니다.

 <body <?php body_class(); ?>><div class="hfeed site">.

따라서 추가한 후에는 다음과 같이 끝나야 합니다.

 <div class="hfeed site push">.

5. header.php 안에 있는 동안 site-navigation 을 검색합니다. 이것은 테마에 따라 클래스 또는 ID가 됩니다. 대부분의 WordPress 테마에서 다음과 같이 표시되어야 합니다.

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

6. </nav> 바로 앞에 다음 스니펫을 추가합니다. 다음과 같이 끝내야 합니다.

 &amp;amp;amp;amp;amp;amp;amp;lt;nav class="site-navigation primary-navigation" role="navigation"&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;lt;?php wp_nav_menu( array( 'theme_location' =&amp;amp;amp;amp;amp;amp;amp;gt; 'primary', 'menu_class' =&amp;amp;amp;amp;amp;amp;amp;gt; 'nav-menu', 'menu_id' =&amp;amp;amp;amp;amp;amp;amp;gt; 'primary-menu' ) ); ?&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;lt;a href="#responsive-menu" class="menu-link"&amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;#9776;&amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;lt;/nav&amp;amp;amp;amp;amp;amp;amp;gt;

여기에서 모바일 메뉴를 실행하는 데 사용할 햄버거 아이콘을 만들고 있습니다.

오른쪽에 햄버거 메뉴가 있는 "Sharp Words" 웹사이트의 스크린샷

7. footer.php 를 열고 <?php wp_footer(); ?> 를 검색합니다. <?php wp_footer(); ?> . 이 줄 바로 뒤에 다음 스니펫을 추가합니다.

 &amp;amp;amp;amp;amp;amp;amp;lt;div class="panel mobile-menu"&amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;lt;?php wp_nav_menu( array('theme_location' =&amp;amp;amp;amp;amp;amp;amp;gt; 'primary',) );?&amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;lt;script&amp;amp;amp;amp;amp;amp;amp;gt; jQuery('.menu-link').bigSlide({ menu: '.mobile-menu', speed: 300, side:"right", easyClose:true});&amp;amp;amp;amp;amp;amp;amp;lt;/script&amp;amp;amp;amp;amp;amp;amp;gt;

기본적으로 바닥글에 숨겨진 중복 탐색 메뉴를 만들고 있습니다.

8. 마지막으로 style.css 를 열고 마지막 줄 바로 뒤에 다음 코드 조각을 추가합니다.

 .panel{ position: fixed; right: -15.625em; width: 15.625em; background:#222;} .push{position:relative;} .menu-link{display:none;color:#fff;background:#333;border-radius:4px;padding:2px 12px;float:right;} .mobile-menu a{display:block;color:#fff;padding:10px 15px;} .mobile-menu a:hover{background-color:#555;} .mobile-menu li{border-bottom:1px #444 solid;} @media only screen and (max-width:900px) { #primary-menu{display:none;} .mobile-menu #primary-menu{display:block;} .menu-link{display:inline-block;} }

여기서는 어두운 색 구성표를 사용했지만 필요에 따라 색상을 자유롭게 변경할 수 있습니다.

이 접근 방식은 거의 모든 표준 WordPress 테마에서 작동합니다. 그러나 다양한 사용 사례와 헤더 레이아웃으로 인해 몇 가지 조정이 필요할 수 있습니다.

궁극적으로 기본은 동일하게 유지됩니다. 그 근거는 900px 이하의 화면 크기에서 기본 기본 탐색을 숨기고 대신 햄버거 아이콘을 표시하기 때문입니다.

햄버거 아이콘을 클릭하거나 탭하면 바닥글에 복사한 메뉴가 사이드 패널과 같은 앱으로 열립니다.

반응형 탐색 메뉴 모바일 슬라이드

막히면 아래에 의견을 남겨주세요. 기꺼이 도와드리겠습니다. 즐거운 코딩!