Как создать адаптивное меню навигации в WordPress
Опубликовано: 2021-07-22Путь к созданию адаптивного навигационного меню в WordPress открыт. Существует множество способов сделать это благодаря гибкости, предлагаемой WordPress.
Сегодня я покажу вам, как создать простое и отзывчивое навигационное меню. Lean, потому что мы собираемся достичь всего этого менее чем за 8 килобайт, а значит, потому что это будет невероятно эффективное меню навигации. Мы просто будем отражать ваше текущее меню навигации, чтобы вам не приходилось поддерживать два разных. Убив двух зайцев одним выстрелом, мы создадим одно меню, чтобы управлять ими всеми.
Прежде чем мы начнем, мы предлагаем вам получить некоторые базовые знания о фронтенд-разработке. (Нам требуется только знакомство, а не профессионализм, поэтому, пожалуйста, не паникуйте.) Базовые знания HTML, CSS, jQuery и WordPress были бы идеальными. Это руководство от начального до среднего, так как оно включает в себя изменение файлов темы WordPress.
Вам также потребуется доступ к следующим файлам темы WordPress:
-
functions.php -
header.php -
footer.php -
Style.css
Прежде чем вносить какие-либо изменения, обязательно запустите резервную копию своего сайта или сначала протестируйте изменения в локальной среде. Вы всегда хотите иметь возможность вернуться к исходным файлам.
Мы собираемся использовать bigSlide.js, крошечный плагин jQuery для создания слайд-панелей за пределами экрана. На веб-сайте плагина он описывается как «крошечный (сжатый ~ 1 КБ) плагин 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 и добавьте класс push в первый div сразу после тега body. Этот раздел обычно выглядит так:
<body <?php body_class(); ?>><div class="hfeed site">.Итак, после добавления вы должны получить:
<div class="hfeed site push">. 5. Находясь внутри header.php , найдите site-navigation . Это будет либо класс, либо идентификатор в зависимости от вашей темы. В большинстве тем WordPress это должно выглядеть примерно так:
&amp;amp;amp;amp;amp;amp;lt;nav class="site-navigation primary-navigation" role="navigation"&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;?php wp_nav_menu( array( 'theme_location' =&amp;amp;amp;amp;amp;amp;gt; 'primary', 'menu_class' =&amp;amp;amp;amp;amp;amp;gt; 'nav-menu', 'menu_id' =&amp;amp;amp;amp;amp;amp;gt; 'primary-menu' ) ); ?&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;/nav&amp;amp;amp;amp;amp;amp;gt; 6. Добавьте следующий фрагмент непосредственно перед </nav> . Вы должны закончить с этим:
&amp;amp;amp;amp;amp;amp;lt;nav class="site-navigation primary-navigation" role="navigation"&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;?php wp_nav_menu( array( 'theme_location' =&amp;amp;amp;amp;amp;amp;gt; 'primary', 'menu_class' =&amp;amp;amp;amp;amp;amp;gt; 'nav-menu', 'menu_id' =&amp;amp;amp;amp;amp;amp;gt; 'primary-menu' ) ); ?&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;a href="#responsive-menu" class="menu-link"&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;#9776;&amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;/nav&amp;amp;amp;amp;amp;amp;gt;Здесь мы создаем значок гамбургера, который будет использоваться для запуска мобильного меню.
7. Откройте footer.php и найдите <?php wp_footer(); ?> <?php wp_footer(); ?> . Сразу после этой строки добавьте следующий фрагмент:
&amp;amp;amp;amp;amp;amp;lt;div class="panel mobile-menu"&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;?php wp_nav_menu( array('theme_location' =&amp;amp;amp;amp;amp;amp;gt; 'primary',) );?&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;script&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;lt;/script&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. Но из-за различных вариантов использования и макетов заголовков вам, возможно, придется внести некоторые коррективы.
В конечном счете, основные принципы остаются прежними. Смысл в том, что на экране размером 900 пикселей или меньше вы скроете основную навигацию по умолчанию и вместо этого отобразите значок гамбургера.
При нажатии или касании значка гамбургера меню, которое мы продублировали в нижнем колонтитуле, открывается в виде приложения, похожего на боковую панель.
Если вы застряли, пожалуйста, оставьте комментарий ниже. Я буду более чем счастлив помочь. Удачного кодирования!