когда нечего делать, а творческая душа требует реализации и хочется что-то сделать или написать, то я пишу сюда или делаю что-то на этом сайте. Кому интересна web-разработка, wordpress и то что рядом с этим, то заходите на мой сайт и читайте всякое...
Как сделать bootstrap 4 меню для Wordpress (инструкция в 4 шага)
Йоу-йоу. Сделал себе новую тему для сайта и перенёс проект с pc-health.me на xakplnat.ru.
Xakplant сделан полностью и только лишь на bootstrap 4 без написания каких-либо стилей. Навыки по bs4 нужно было оттачивать и вот решил сделать это на своём сайте. Наверно вы уже заметили, что в шапке красуется отличное нативное бутстраповское меню родом из 4-й версии. В этой статья я расскажу вам как сделать bootstrap 4 меню на WordPress.
NavWalker
Navwalker это такой класс который расширяется от объекта Walker_Nav_Menu и нужен для того чтобы видоизменить меню стандарными методами. Таких walker’ов в интернете много, но нам нужен определённый.
Шаг первый
Наш первый шаг — скачиваем нужный нам navwalker по этой ссылке с github. Если на момент прочтения вами этой статьи на github’е не будет этого файла то скачайте с моего сайте WP_Bootstrap_Navwalker.
Шаг второй
Кладём в папку с нашей темой скаченный файл и подключаем его
// Подключение bootstrap navwlker
if ( ! file_exists( get_template_directory() . '/wp-bootstrap-navwalker.php' ) ) {
// file does not exist... return an error.
return new WP_Error( 'wp-bootstrap-navwalker-missing', __( 'It appears the wp-bootstrap-navwalker.php file may be missing.', 'wp-bootstrap-navwalker' ) );
} else {
// file exists... require it.
require_once get_template_directory . 'wp-bootstrap-navwalker.php';
}
Не забудьте поменять адресс если у вас не такой как на примере. Если вы слабо понимаете что тут написано вот вам маленькая справка: get_template_directory() это путь до папки с родительской темой и от неё нужно писать путь дальше. Если у вас дочерняя тема то вам за место get_template_directory() нужно поставить get_stylesheet_directory() или get_stylesheet_directory_uri().
Шаг третий. Вызываем меню в header.php
На странице программиста, который написал нужный нам walker есть пример, но я объясню другой пример т.к. в его примере не учтено, что нужно добавить еще и строку поиска в меню. В моём примере в файле header.php пишем следующие:
Обратите внимание на некоторые вещи. ‘depth’ => 2 говорит о том что вложенность меню будет 2 уровня т.к. bootstrap по умолчанию поддерживает именно это количество уровней вложенности. Еще я вызвал в меню форму поиска.
Шаг 4. Форма поиска
Форма поиска храниться в корне темы в файле searchform.php. Для того чтобы форма стала такой же как у bootstrap 4 содержимое файла searchform.php нужно заменить моим кодом:
вот такой небольшой, но очень полезный материал для разработчиков wp тем. Однажды я наверное напишу как я сделал пагинацию на своём сайте.
Думаю это будет интересно, а пока подписывайтесь на меня в инстаграме, во вконтакте (ссылки в подвале), пользуйтесь моим сервисом строки, ищите вхождения ключевых фраз. Поддержите проект, зарегистрируйтесь по реферальной ссылке на хостинге beget, он действительно классный, о нём вы можете прочитать в этом отзыве.
Поддержи Xakplant
Я давно хочу развить видеоверсию, но пока этого не получается из-за нехватки ресурсов. Сейчас я собираю деньги на новый компьютер и микрофон. Поддержи xaklant и ты увидишь полезные видео быстрее.