Хотите создать адаптивное меню в своем блоге 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 следующий шаг - убедиться, что ваш веб-сайт WordPress загрузит файлы JavaScript. Вам нужно будет добавить следующий код в " 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.

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

...