Хотите создать адаптивное меню в своем блоге WordPress?

В наши дни количество пользователей мобильных устройств превышает количество пользователей настольных компьютеров. Добавление адаптивного меню упрощает навигацию по вашему сайту.

В этом уроке мы покажем вам, как легко создать адаптивное меню на WordPress.

Но раньше, если вы никогда не устанавливали WordPress, откройте для себя Сколько плагинов для установки на WordPress. et Как найти, установить и активировать WordPress тему на своем блоге 

Тогда вернемся к тому, почему мы здесь.

В этом разделе мы подробно рассмотрим как метод с использованием плагина для начинающих, так и метод программирования для опытных пользователей.

Первый способ: создать мобильное меню с плагином WordPress

Этот метод проще и рекомендуется для начинающих, потому что он не требует специальных навыков кодирования.

В этом методе мы создадим меню (со значком гамбургера), который скользит по экрану мобильного устройства.

Первое, что вам нужно сделать, это установить и активировать Плагин WordPress Responsive Menu , Для получения более подробной информации, Ознакомьтесь с нашим руководством по установке плагина для WordPress. .

После активации плагина плагин добавит в меню новый пункт под названием « Отзывчивый Меню ". Нажав на нее, вы попадете на страницу настроек плагина WordPress.

Сначала необходимо указать размер экрана, при котором должно отображаться мобильное меню. Значение по умолчанию — 800 пикселей, что должно подойти для большинства веб-сайтов.

После этого вам нужно выбрать меню, которое вы хотите использовать на мобильном телефоне.

Последняя опция на экране позволяет задать CSS-класс для вашего меню. Это позволит плагину скрывать неадаптивное меню на маленьких экранах.

Не забудьте нажать на « параметры обновления Чтобы сохранить ваши настройки.

Мы также предлагаем вам ознакомиться с нашими 10 WordPress плагины для создания меню в вашем блоге

Теперь вы можете зайти на свой веб-сайт и изменить размер экрана браузера, чтобы увидеть адаптивное меню в действии.

Плагин « Отзывчивый Меню Этот плагин предлагает множество других опций, позволяющих изменять поведение и внешний вид адаптивного меню. Вы можете изучить эти параметры на странице настроек плагина и настроить их по своему усмотрению.

Метод 2: Как добавить мобильное меню вручную

Один из наиболее распространенных способов отображения меню на экранах мобильных устройств — использование рычага.

Этот метод требует, чтобы вы добавили пользовательский код в ваши файлы WordPress.

В одном из наших предыдущих уроков мы покажем вам как создать плагин WordPress.

Сначала вам нужно открыть текстовый редактор, например, Блокнот, и вставить этот код.

(function () {nav var = document.getElementById ('site-navigation'), кнопка, меню; if (! nav) {return;} button = nav.getElementsByTagName ('button') [0]; menu = 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 ('toggled -on ',' ');} else {button.className + =' toggled-on '; menu.className + =' toggled-on ';}};}) (jQuery);

Теперь вы должны сохранить этот файл с именем " navigation.js На вашем столе.

Затем вам нужно открыть FTP-клиент для загрузки этого файла в папку "/ wp-content / themes / your-theme / js /" на вашем веб-сайте WordPress.

Заменить выражение " ваш-тема с указанием имени папки вашей текущей темы WordPress. Если в каталоге вашей темы нет папки js, вам необходимо её создать.

После загрузки JavaScript-файла следующим шагом будет обеспечение загрузки JavaScript-файлов на вашем сайте WordPress. Вам потребуется добавить следующий код в файл: functions.php Вашей темы WordPress.

Откройте для себя что-нибудь еще Что вы можете сделать с файлом functions.php?

 wp_enqueue_script ( 'bpc_togglemenu' get_template_directory_uri () '' /js/navigation.js, массив (»JQuery '), 20160909', верно.);

Теперь нам нужно добавить навигационное меню в нашу тему WordPress. Обычно навигационное меню добавляется в " header.php Вашей темы WordPress.

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

Мы предполагаем, что расположение меню, определенное вашей темой WordPress, называется « первичный ". В противном случае используйте местоположение, определенное вашей темой WordPress.

Последний шаг — добавить CSS-код, чтобы наше меню использовало правильные CSS-классы для переключения при отображении на мобильных устройствах.

/* Navigation Menu */
.main-navigation {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    text-align: center;
}
.main-navigation li {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 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 to use on mobile devices

@media screen and (min-width: 600px) {

.main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
        border-bottom: 1px solid #ededed;
        border-top: 1px solid #ededed;
        display: inline-block !important;
        text-align: left;
        width: 100%;
    }
    .main-navigation ul {
        margin: 0;
        text-indent: 0;
    }
    .main-navigation li a,
    .main-navigation li {
        display: inline-block;
        text-decoration: none;
    }
    .main-navigation li a {
        border-bottom: 0;
        color: #6a6a6a;
        line-height: 3.692307692;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .main-navigation li a:hover,
    .main-navigation li a:focus {
        color: #000;
    }
    .main-navigation li {
        margin: 0 40px 0 0;
        margin: 0 2.857142857rem 0 0;
        position: relative;
    }
    .main-navigation li ul {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 100%;
        z-index: 1;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
    }
    .main-navigation li ul ul {
        top: 0;
        left: 100%;
    }
    .main-navigation ul li:hover > ul,
    .main-navigation ul li:focus > ul,
    .main-navigation .focus > ul {
        border-left: 0;
        clip: inherit;
        overflow: inherit;
        height: inherit;
        width: inherit;
    }
    .main-navigation li ul li a {
        background: #efefef;
        border-bottom: 1px solid #ededed;
        display: block;
        font-size: 11px;
        font-size: 0.785714286rem;
        line-height: 2.181818182;
        padding: 8px 10px;
        padding: 0.571428571rem 0.714285714rem;
        width: 180px;
        width: 12.85714286rem;
        white-space: normal;
    }
    .main-navigation li ul li a:hover,
    .main-navigation li ul li a:focus {
        background: #e3e3e3;
        color: #444;
    }
    .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: #636363;
        font-weight: bold;
    }
    .menu-toggle {
        display: none;
    }
    
    }

Теперь вы можете посетить свой веб-сайт и изменить размер экрана браузера, чтобы проверить, изменится ли адаптивное меню.

Откройте для себя также несколько премиальных плагинов WordPress  

Вы можете использовать другие плагины WordPress, чтобы придать современный вид и оптимизировать управление вашим блогом или веб-сайтом.

Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это.

1. UberMenu

UberMenu — это плагин для WordPress, предназначенный для создания настраиваемого, адаптивного и удобного для пользователя меню. Он начинает работать сразу после установки и не требует специальной настройки.

Это простой в использовании плагин, но достаточно мощный для создания настраиваемых и креативных конфигураций мега-меню.

Смотрите также наш 9 плагинов WordPress для создания ценовых сеток в блоге

Среди прочего, вы найдете: 3 шаблона меню, полностью адаптивный дизайн, совместимость с мобильными устройствами (iPhone, iPad, Android), поддержку сенсорных экранов и т.д.

скачать | Демонстрация | веб-хостинг

2. LMM

Liquida Mega Menu, также известный как LMM, — плагин WordPress, разработанный как для пользователей, так и для разработчиков. Он имеет простой и интуитивно понятный интерфейс, интегрированный в панель управления WP, что позволяет вам создавать и настраивать неограниченное количество мегаменю без каких-либо навыков программирования.

Программа обладает десятками функций, предназначенных как для обычных, так и для опытных пользователей. К этим функциям относятся, среди прочего: автоматическая и ручная интеграция. поддержка мультисайта, забота о детских темахПолностью настраиваемый стиль меню, настраиваемое расположение пунктов меню, фиксированное меню и т.д.

скачать | Демонстрация | веб-хостинг

3. Меню 8Degree Fly

8Degree Fly Menu — это премиальный плагин для WordPress, который позволяет добавить на ваш сайт меню-холст, придавая ему визуально привлекательный и удобный вид, выделяющий важную информацию. Он использует стандартную функциональность меню WordPress для создания своих меню.

Вы сможете добавить дополнительные элементы к элементам меню по умолчанию, такие как значки, слоганы меню, заголовок псевдогруппы и длинное описание.

Читайте также: 10 плагинов WordPress для оптимизации боковых панелей и липких заголовков

Он также поставляется с редактором WYSIWYG, который поможет вам понять ваше длинное описание в удобной для пользователя форме .В этом редакторе вы также можете использовать шорткоды.

скачать | Демонстрация | веб-хостинг

Другие рекомендуемые ресурсы

Мы также приглашаем вас ознакомиться с указанными ниже ресурсами, чтобы получить дополнительную информацию о вашем веб-сайте и блоге.

• Как переименовать изображения на WordPress блоге
• Как создать всплывающее меню на WordPress
• 8 WordPress плагины для создания мегаменю в вашем блоге
• Некоторые советы по созданию современного меню для вашего блога
• 6 WordPress плагины для управления категориями и подкатегориями в вашем блоге

Заключение

Вот и всё! На этом урок заканчивается. Надеюсь, он поможет вам создать меню для мобильных пользователей. Не стесняйтесь... поделитесь трюком с друзьями в социальных сетях.

Однако вы также сможете ознакомиться с нашими Ressources, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress.

А пока расскажите о своем Комментарии и предложения в специальном разделе.

...