Как добавить скользящее меню в тему WordPress

Недавно один из наших пользователей спросил нас, как им заменить их навигационное меню на скользящее панельное меню на jQuery? Скользящее меню может сильно улучшить пользовательский опыт на мобильных сайтах. В этой статье мы покажем вам, как добавить скользящее меню в тему WordPress.

Внимание: Данная статья требует существенных знаний HTML и CSS.

Замена стандартного меню на скользящее

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

Первым делом вам нужно открыть редактор на вашем компьютере и создать новый файл. Скопируйте и вставьте код:

(function($) {
$('#toggle').toggle( 
    function() {
        $('#popout').animate({ left: 0 }, 'slow', function() {
            $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');
        });
    }, 
    function() {
        $('#popout').animate({ left: -250 }, 'slow', function() {
            $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');
        });
    }
);
})(jQuery);

Замените example.com своим доменным именем, а также замените your-themeназванием вашей темы. Сохраните этот файл как slidepanel.js на своём рабочем столе. Этот код использует jQuery для включения скользящего меню, а также создаёт анимацию перехода.

Откройте FTP клиент, например Filezilla и подключитесь к своему сайту. Далее, перейдите в папку вашей темы. Если в есть папка js, то откройте её, если нету, то создайте её и загрузите файл slidepanel.js в эту папку.

Следующим делом, вам надо создать или найти иконку меню. Обычно используют такую иконку с тремя линиями. Вы можете создать её, используя PhotoShop или же найти её в интернете. Для данной статьи, мы используем иконку размером 27х23 пикселя. Как только у вас будет иконка, переименуйте её в menu.png и загрузите в папку с картинками в директории вашей темы.

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

wp_enqueue_script( 'wpb_slidepanel', get_template_directory_uri() . '/js/slidepanel.js', array('jquery'), '20131010', true );

Всё настроено, осталось изменить стандартное меню темы. Обычно большинство меню навигации находится в файле темы header.php. Откройтеheader.php и найдите похожую строку:

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

Цель — завернуть навигационное меню в HTML код, чтобы показывать ваше навигационную панель на маленьких экранах. Мы вставим его между <div id="toggle"> и <div id="popout">. Вот так:

<div id="toggle"><img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="Show" /></div>




<div id="popout">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</div>

Замените example.com на ваше имя домена и your-theme на имя папки вашей темы. Сохраните изменения.

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

@media screen and (min-width: 769px) { 
#toggle {
display:none;
}

} 

@media screen and (max-width: 768px) { 
#popout {
position: fixed;
height: 100%;
width: 250px;
background: rgb(25, 25, 25);
background: rgba(25, 25, 25, .9);
color: white;
top: 0px;
left: -250px;
overflow:auto;
}


#toggle {
float: right;
position: fixed;
top: 60px;
right: 45px;
width: 28px;
height: 24px;

}

.nav-menu li { 
border-bottom:1px solid #eee; 
padding:20px;
width:100%;
}

.nav-menu li:hover { 
background:#CCC;
}

.nav-menu li a { 
color:#FFF;
text-decoration:none;
width:100%;
}
} 

Помните, что навигационное меню вашей темы может использовать другие CSS классы и это может вызвать конфликт. Вы можете отладить данные проблемы, используя средство Chrome Inspector, чтобы обнаружить, какие классы css конфликтуют с вашими стилями. Поиграйтесь с CSS, чтобы достичь желаемого результата.

Наша специальность — разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации — [email protected], +371 29394520