Добавление бокового меню в тему WordPress

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

Примечание. Это учебник среднего уровня, требующий достаточных знаний HTML и CSS.

Замена меню по умолчанию на боковое меню

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

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

(function ($) {
$('#toggle').toggle (
function () {
$('#popout').animate ({ left: 0 }, 'slow', function () {
$('#toggle').html ('');
});
},
function () {
$('#popout').animate ({ left: -250 }, 'slow', function () {
$('#toggle').html ('');
});
}
);
})(jQuery);

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

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

Следующим шагом является разработка или поиск значка меню навигации. Чаще всего используется значок меню с тремя строками. Вы можете создать его с помощью Photoshop или найти одно из множества существующих изображений в Google или Яндекс.

Для этого урока мы используем значок меню 27×23 px. Как только вы создали или нашли свой значок меню, переименуйте его в 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, чтобы скрыть значок меню для пользователей с большими экранами и отобразить его пользователям с меньшими экранами. Нам также нужно отрегулировать положение иконки меню и внешний вид слайд-панели. Скопируйте и вставьте этот 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, и они могут конфликтовать с этим стилем CSS. Однако вы можете устранить эти проблемы с помощью инструмента Chrome Inspector, чтобы выяснить, какие классы CSS конфликтуют в вашей таблице стилей. Поиграйте с CSS, чтобы соответствовать вашему стилю и потребностям.

Мы надеемся, что этот урок помог вам добавить боковое меню в WordPress с помощью jQuery. А у нас на этом все. Всем пока!

С уважением Вячеслав и Валерия!