wordpress как сделать меню bootstrap
Navbar bootstrap 4 wordpress
by Andrej — Category WordPress on 27/02/2018
Привет читателям!
Я решил попробовать сверстать свою тему для wordpress, с применением фреймворка bootstrap 4. И конечно, как и на любом сайте, необходимо сделать удобную, а главное адаптивную навигацию (navbar bootstrap 4). Писать про версию три не буду, поскольку делаю сайт на bootstrap 4, а эти версии значительно отличаются, да и я уже привык работать с четверкой. И так, больше кода — меньше текста.
Найти саму панель навигации можно найти на сайте getbootstrap.com.
В общей картине сайта на html она выглядит довольно просто:
Мне, как человеку, который хорошо знает html5, но не сильно разбирается в php, сделать такое меню на вордпресе сложно. Но я попытался и все получилось, все работает.
Navbar bootstrap 4 wordpress
Первое с чего стоит начать, это записать код в файлик functions.php. В нем мы детально расписываем пункты нашей навигации и регистрируем её для настройки в редакторе темы.
Сохранили и закрыли.
Вторым пунктом переходим к файлу header.php, куда мы будем вставлять нашу навигацию.
Готово!
На этом установка navbar bootstrap 4 завершена.
В этой статье мы не разобрали верстку формы поиска. Если у Вас остались вопросы, пишите в комментариях.
Возможно Вас также заинтересует…
При создании сайта мы все сталкиваемся с необходимостью разместить иконку сайта, логотип компании в нужном…
Несколько раз пытался я внести в данный файл свои изменения, но практически каждая вторая моя…
Бессчётное количество обучающих материалов по дизайну, образовательных онлайн и оффлайн семинаров не могут сказать как…
Как сделать Bootstrap меню для WordPress?! (вертикальное и обычное)
Сейчас я делаю новую тему для своего интернет-магазина shop.tool-ha.ru, хочу чтобы там всё было круто woocommerce, bootstrap, полный адаптив. Для большего удобства навигации я хочу сделать боковое меню. А так как всё это на bootstrap то естественно встал вопрос о «как это сделать». Реализация на мой взгляд получилась отличной. Посмотрите!
Сперва мне нужен выпадающий блок. ссылка на реализацию блока в bootstrap. Там все просто. Скопировал — вставил.
На стилях я тоже не хочу долго останавливаться по ряду причин. Ну во-первый это многие знаю, а во-вторых это не так уж сложно. Единственно я обращу внимание «самых маленьких» на пару вещей.
font-size: 1rem; — можете использовать px, rem, em. Всё что вам угодно
Далее самое главное
Это код вывода вертикального меню. Его нужно разместить внутри container>row>col-lg-3 (или например col-md-4)
Меню Bootstrap целиком
Вы так же можете вывести и всё меню bootstrap, горизонтально например, используя следующий код
Поддержи Xakplant
Я давно хочу развить видеоверсию, но пока этого не получается из-за нехватки ресурсов. Сейчас я собираю деньги на новый компьютер и микрофон. Поддержи xaklant и ты увидишь полезные видео быстрее.
Как сделать 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.
Шаг второй
Кладём в папку с нашей темой скаченный файл и подключаем его
Не забудьте поменять адресс если у вас не такой как на примере. Если вы слабо понимаете что тут написано вот вам маленькая справка: 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 и ты увидишь полезные видео быстрее.
Как использовать Бутстрап для блога на Вордпресс
Что такое Bootstrap?
Бутстрап – это бесплатный фреймворк на базе css и JavaScript, предоставляющий целый ряд встроенных инструментов для создания адаптивных веб-сайтов, а точнее их front-end разработки. Изначально был создан для внутреннего использования компанией Twitter и носил название «Twitter Bootstrap», но в дальнейшем вырос в самостоятельный проект. Данная библиотека может быть использована в работе как со статическими html-файлами, так и с различными системами управления контентом, в которых поддерживаются внешние стили.
Вы можете самостоятельно отредактировать или даже создать, используя возможности Bootstrap, WordPress тему для своего блога. Для этого в арсенале фреймворка предусмотрено все необходимое и определены базовые стили для основных компонентов, которые могут быть использованы на сайте: навигации и форм, модальных окон и уведомлений, аккордеонов и каруселей, выпадающих списков и многого другого.
В интернете можно встретить множество разноплановых ресурсов, сделанных с помощью этой библиотеки. Читателям же моего блога, вероятнее всего, будут интересны Bootstrap шаблоны для WordPress. В Рунете вы найдете большое количество тем на основе фреймворка, в том числе и бесплатных. Они отличаются стильным дизайном и функциональностью.
Что же делает Бутстрап популярным среди разработчиков? Давайте рассмотрим ряд неоспоримых плюсов, которые мы получаем в работе с ним:
Основным минусом в работе с библиотекой может стать только то, что при редактировании или создании адаптивной темы Вордпресс Бутстрап-компоненты не могут быть просто добавлены из консоли CMS. Их использование потребует вставки дополнительного кода или установки вспомогательных плагинов.
Подключение фреймворка к Вордпрессу
Для начала скачиваем библиотеку с официального сайта — https://getbootstrap.com : жмем «Download Bootstrap» и в открывшейся вкладке «Getting started» выбираем вариант «Download Bootstrap». На текущий момент стабильной версией остается Bootstrap 3, но уже выпущена в режиме тестирования четвертая версия. Она имеет некоторые отличия от нынешней, но если вы изучите Бутстрап 3, то обновленный вариант фреймворка не вызовет никаких вопросов.
Распаковываем архив и видим 3 основных папки: css, js, fonts. Файлы, содержащие в своем названии «min» ничем не отличаются от одноименных без этой частицы. Она обозначает, что код записан без пробелов, в одну строку, для уменьшения веса файла без потерь в функционале. Такой формат нечитабелен, но как раз он зачастую и подключается к проекту. Это позитивно влияет на увеличение скорости загрузки сайта на Вордпресс. В папках css и js лежат соответственно файлы стилей и скриптов, а в папке fonts – те самые векторные иконки, которые упоминались выше. По сути, мы видим здесь один шрифт, представленный в нескольких форматах.
Один из удобных способов размещение файлов фреймворка в проекте – создание отдельной папки. Для этого в корне сайта в каталоге wp-content – themes – название_вашей_темы формируется папка libs, где в дальнейшем могут находиться другие библиотеки, используемые в проекте. И уже в ней – папка bootstrap, куда мы и копируем все содержимое, извлеченное из архива.
Как мы уже отмечали ранее, существует возможность выкачать только отдельный функционал Бутстрапа, например сетку или иконки. Это реализовывается на странице официального сайта «Customize».
Здесь необходимо снять галочки с тех компонентов и плагинов библиотеки, которые вы не хотите подключать к проекту. А затем, прокрутив страницу вниз, загрузить кастомизированный вариант Bootstrap, нажав «Compile and Download».
Дополнительно, для переопределения бутстраповских стилей и «родных» стилей темы, можно создать в папке шаблона в каталоге css файл style.css. Если вы не знакомы со структурой шаблона Вордпресс, статья о том, как редактировать тему WordPress обязательна к прочтению.
Чтобы подключить Bootstrap к WordPress, открываем в текстовом редакторе файл functions.php, который лежит в каталоге вашего активного шаблона. Находим функцию подключения скриптов (она может называться, например, function twentysixteen_scripts ()<>, по названию темы) и вставляем следующий код:
— данная строка подключает минимизированный файл стилей фреймворка. Первый параметр функции (‘bootstrap— style‘) – произвольное название подключаемого объекта.
Продолжаем вставлять код:
— аналогичным образом подключаем наш собственный файл стилей, в котором сможем изменять правила Bootstrap. Обратите внимание, для того, чтобы это стало возможным, наши стили должны подгружаться после стилей фреймворка. Т.е. необходимо разместить эту строку кода так, чтобы она находилась после кода, отвечающего за подключение стилей библиотеки.
И последняя строка, которая нам понадобится для подключения Bootstrap к WordPress:
— в конце мы подключаем минимизированный файл скриптов. Здесь нам понадобится третий параметр функции – array (), который отвечает за очередность подключения скриптов. Дело в том, что Бутстрап зависит от библиотеки jQuery. Если на момент, когда сервер будет подгружать наш фреймворк, jQuery еще не будет подключено к проекту, скрипты Бутстрапа не сработают. Саму библиотеку jQuery нам загружать не надо, поскольку Вордпресс делает это автоматически. Но чтобы подключение происходило в необходимой нам последовательности, мы определим, что js-скрипты Bootstrap должны всегда идти после jQuery. Именно это и делает строка array (‘jquery’).
Если же вы создаете Бутстрап-тему для WordPress с нуля или просто не хотите смешивать все скрипты в одном месте, предлагаю вам создать отдельную функцию для подключения Bootstrap 3 к WordPress. В конце файла functions.php расположите следующий код:
— где load_bootstrap() – произвольное название созданной нами функции, а последняя строка дает ее движку на выполнение.
Основные возможности Бутстрапа и как это работает
Чтобы понять, каким образом возможно взаимодействие WordPress и Bootstrap, давайте разберем сам принцип работы фреймворка.
Итак, в файле стилей Бутстрапа прописаны специальные классы, которые добавляются в html-разметку, определяя тем самым отображение или поведение элементов.
Разметка: контейнеры и ячейки. Структура разметки Bootstrap основывается на блочной системе вложенных элементов. Контейнеры наивысшего порядка, выступающие оберткой, формируются методом добавления к ним классов .container или .container-fluid, в зависимости от того, хотим мы получить блок с адаптивной фиксированной шириной или «резиновый».
Уровнем ниже располагаются вложенные блоки с классом .row. Эти структурные элементы представляют собой строки, которые организовывают горизонтальные группы ячеек.
Контент размещается в ячейках. Каждая строка разбита на 12 ячеек – html-элементов с классами .col –lg-*, col- md-*, col- sm-*, col- xs-*. Эти классы определяют ширину ячеек для телефонов (xs), планшетов (sm), десктопных девайсов с небольшим монитором (md), для экраном с большим расширением (lg). А вот какая цифра в пикселях подразумевается под каждым из этих расширений:
Вместо звездочки в названии класса указывается число от 1 до 12, равное количеству ячеек, которое должен занимать элемент. Но сумма всех ячеек в пределах одной строки не должна превышать 12. Вот пример кода:
А вот так он будет выглядеть в браузере:
Подробно и с примерами, как работать с сеткой Бутстрап, описано в документации фреймворка на официальном сайте в разделе «CSS» — «Grid system».
Таблицы. Фреймворком предусмотрен ряд классов для элементов «table», позволяющих с легкостью стилизовать таблицы:
Кнопки. Для создании стильных кнопок Бутстрап тоже предлагает ряд классов формата .btn-*, где вместо звездочки можно подставить любое значение из скриншота ниже и получить соответствующую кнопку:
Вот так, например, необходимо прописать ваш элемент «button», чтобы получить зеленую кнопку в стиле Bootstrap 3: Success
Изображения. Для элементов «img» тоже есть интересные решения:
Это всего лишь малая часть возможностей Бутстрапа. Фреймворком предусмотрены классы для работы с типографикой, иконками, формами, всплывающими подсказками, навигацией и многим другим. Если вы оценили, какие преимущества может дать функционал Bootstrap для WordPress-блога, обязательно изучите документацию по данной библиотеке.
Как сформировать меню Bootstrap на Вордпресс
Мы с вами уже знаем, как подключить Bootstrap к WordPress, и теперь можем рассмотреть пример практического применения фреймворка для блога. Для этого мы заменим существующее меню активной темы адаптивной навигацией Бутстрап. Я буду использовать в примере тестовый шаблон на базе темы Вордпресс «Twenty Siхteen», где у меня уже создано двухуровневое меню.
Находим код меню «Default navbar», предлагаемый на официальном сайте фреймворка в разделе «Components» — «Navbar»:
Редактируем по необходимости. Я уберу, например, ссылку на логотип (Brand), форму и список с классом .navbar- right. А эту часть :
— заменяем следующим кодом:
Конечный результат навигации размещаем в соответствующем файле вместо существующей. У меня это файл header.php:
В строке ‘menu‘ => ‘top_menu‘ указывается меню, которое вы назначили основным в админпанели. ‘depth‘ => 2 – уровень вложенности для тех случаев, если есть выпадающие пункты. ‘menu_class‘ => ‘nav navbar— nav‘ – здесь указываются классы меню из Бутстрапа, которые мы использовали.
Извлекаем файлы из архива и в папке «wp-bootstrap-navwalker-master» копируем необходимый файл.
wp_bootstrap_navwalker.php размещаем в папке нашей темы. Возвращаемся к файлу functions.php и в начале подключаем скачанный класс:
//Register custom navigation walker
Наша адаптивная навигация Бутстрап для Вордпресс-шаблона готова. Дальше дело остается за стилями. Вот такое меню получилось у меня:
При наведении раскрывается выпадающий список, а на маленьких экранах ссылки навигации скрываются и вызываются при помощи иконки меню.
Все детали подключения Bootstrap к WordPress и создания меню на основе фреймворка можно узнать из видео:
Если же вам некогда изучать все нюансы работы с библиотекой на WordPress, воспользуйтесь плагинами Bootstrap, самые популярные из которых – WordPress Twitter Bootstrap CSS и Easy Bootstrap Shortcode.
На этом наше знакомство с фреймворком окончено. Сегодня мы узнали, как произвести подключение Bootstrap к WordPress, об основных преимуществах данной библиотеки и о функционале фреймворка, который может помочь нам в создании современной адаптивной темы. Изучайте туториалы и экспериментируйте!
Навигационная панель Bootstrap для WordPress-темы
1. Код для навигационной панели на основе фреймворка Bootstrap
Вот исходный код с документационной страницы Bootstrap:
Давайте изучим его повнимательнее, чтобы понять, какие именно части кода нам пригодятся в дальнейшей работе.
2. Интегрируем мокап в шаблон
На этом этапе нам надо в уже установленный движок WordPress добавить разрабатываемую тему.
2.1. Подготовка темы для добавления навигационного меню
Открываем файл functions.php и регистрируем навигационную панель, если до сих пор этого не сделали:
Регистрируем файлы фреймоврка и jQuery:
2.2. Работаем с меню
Переходим в меню по ссылке Внешний вид → Меню. Создаем новое меню под названием «Primary» и добавляем в него новые элементы. Переходим затем во вкладку Управление областями и назначаем для расположения «Primary» меню с таким же названием, а затем сохраняем все сделанные изменения.
2.3. Интегрируем навигационную панель и полученный мокап в шаблон оформления сайта
Открываем файл header.php и скопируем в него навигационную панель в формате мокапа так, чтобы она появилась в желаемом расположении на сайте. Теперь заменяем части скопированного мокапа функциями из шаблона WordPress. Для начала размещаем корректную ссылку на логотип. Правим следующую строку:
Далее согласовываем вывод меню вместо того, что задано в мокапе.
Для следующих строк кода:
производим замену на:
И вот, компонент навигационной панели получил свой интегрированный фреймворк.
Заключение
В этом пошаговом руководстве мы рассмотрели процесс интеграции навигационной панели на основе фреймворка Bootstrap CSS в тему оформления на движке WordPress. Для ускорения процедур по разработке собственной новой темы вы можете просто скачать исходные файлы и вставить в свою тему, а затем провести мелкие правки там, где они необходимы.