Привет читателям! Я решил попробовать сверстать свою тему для wordpress, с применением фреймворка bootstrap 4. И конечно, как и на любом сайте, необходимо сделать удобную, а главное адаптивную навигацию (navbar bootstrap 4). Писать про версию три не буду, поскольку делаю сайт на bootstrap 4, а эти версии значительно отличаются, да и я уже привык работать с четверкой. Желающие, могут присоединиться к разработке будущей бесплатной темы на GutHub, изучить исходники, попробовать сделать свою тему и поделиться ею в комментариях. И так, больше кода — меньше текста.

Navbar bootstrap 4 wordpress

Найти саму панель навигации можно найти на сайте https://getbootstrap.com. В общей картине сайта на html она выглядит довольно просто:

Мне, как человеку, который отлично знает html5, но не сильно разбирается в php, сделать такое меню на вордпресе сложно. Но я попытался и все получилось, все работает.

Navbar bootstrap 4 wordpress

Первое с чего стоит начать, это записать код в файлик function.php. В нем мы детально расписываем пункты нашей навигации и регистрируем её для настройки в редакторе темы.


Сохранили и закрыли.

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

Готово! На этом установка navbar bootstrap 4 завершена.
Demo tWPonB4 — чистая тема (голый шаблон) с открытым исходным кодом на bootstrap 4 для cms wordpress, которая предоставляется по лицензии GNU General Public License.

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

Автор: Андрей Шарапов