Как подключить bootstrap к wordpress
Используем фреймворк Bootstrap для создания адаптивной темы WordPress
Самая сложная задача при создании адаптивной темы для WordPress или любого адаптивного сайта в целом заключается в кодировании CSS-файла. Этот файл определяет основное представление темы и устанавливает, будет ли тема адаптивной или нет. Однако можно ведь взять уже готовую таблицу стилей, наполненную всеми основными возможностями, и это заметно упростит дальнейшую работу! Учитывая данный факт, давайте посмотрим, как можно спроектировать готовую тему WordPress на базе адаптивного фреймворка Bootstrap. Однако сначала давайте в целом поговорим о нем.
Что представляет собой фреймворк Twitter Bootstrap?
Bootstrap – это open source фреймворк, созданный на базе JavaScript и CSS и оперирующий отдельным языком, представляющим собой расширение каскадных таблиц – LESS. Фреймворк обладает множеством встроенных инструментов, которые могут использоваться вместе с HTML или с любыми системами управления контентом (включая WordPress), поддерживающими внешние стили. Таким образом, его можно применять для создания любых веб-сайтов. Фреймворк содержит в себе определение базовых стилей для всех основных возможностей, применяющихся на сайтах: для аккордеонов, уведомлений, выпадающих списков, групп кнопок, каруселей, лейблов, списков, модальных окон, навигационных панелей, навигационных вкладок, заголовков страниц, прогресс-баров, миниатюр, подсказок и т.д.
Все эти компоненты могут легко использоваться при создании адаптивной темы WordPress, однако они требуют дополнительного кодирования либо установки специальных плагинов, поскольку сам по себе WordPress не имеет никаких средств для добавления компонентов Bootstrap через консоль.
Поскольку фреймворк написан на CSS и JavaScript, в нем легко могут разобраться различные веб-разработчики, потому он активно используется дизайнерами, девелоперами, профессионалами и новичками. Однако стоит заметить, что Bootstrap не имеет полной поддержки всех возможностей HTML5 и CSS3. Это не выглядит значительной проблемой, поскольку большая часть браузеров не поддерживает последние стандарты CSS и HTML.
Шаг 1. Загружаем Bootstrap.
Первый шаг на пути создания адаптивной темы WordPress – загрузка фреймворка Bootstrap. Актуальная на данный момент версия Bootstrap может быть загружена отсюда. Интересная особенность: вы можете изменять загружаемый файл в зависимости от своих требований и целей. Мы советуем вам скачать уже настроенную версию по данной ссылке. Не будем расширять руководство, рассказывая о том, что стоит включить, а что исключить из загружаемого файла – просто проверьте, все ли вам требуется, и загрузите файл. Размер файла составляет примерно 300-500 Кб. Извлеките Bootstrap в папку с аналогичным названием и поместите ее в папку с вашей темой, к которой вы хотите добавить возможности Bootstrap.
Ваша папка Bootstrap будет содержать в себе три папки с названиями css, js и img. Что в них содержится, можно определить по их названию. Если вы скачивали измененную версию фреймворка по ссылке, предложенной выше, то в таком случае у вас будет два CSS-файла в папке css: bootstrap.css и bootstrap.min.css. Если вы качали фреймворк из других источников, убедитесь в том, что ваша папка css содержит в себе файл bootstrap-responsive.css, который необходим для создания адаптивного веб-сайта.
Шаг 2. Подключение Bootstrap в хэдере.
После загрузки Bootstrap нам понадобится подключить его в PHP-файле WordPress, который содержит в себе описания Doctype и Meta. В большинстве тем это файл header.php, однако в некоторых редчайших случаях это может быть также index.php. Если вы создаете вашу тему с нуля, лучше всего подключить Bootstrap в хэдере.
Важный момент: несмотря на то, что Bootstrap не поддерживает на 100% HTML5, он использует именно эту версию языка, поэтому стоит скорректировать соответствующим образом ваше объявления DOCTYPE. Вы можете объявить Bootstrap в хэдере следующим образом:
Этот код позволяет подключить Bootstrap к HTML и PHP.
Примечание: если вы скачивали не измененную версию фреймворка, то в таком случае вам надо подключить дополнительную стилевую таблицу. Просто добавьте следующую строку кода сразу после тегов META:
Шаг 3. Импорт Bootstrap-стилей.
На данном шаге мы должны импортировать CSS в основной файл style.css используемой темы. Вы можете импортировать стили следующим образом:
Этот код должен следовать сразу после информационного комментария (заголовка) в style.css, перед любым другим кодом. После импорта вы можете добавить любой CSS-код и любую стилизацию, которая вам необходима, однако убедитесь в том, что компоненты, присутствующие в bootstrap.css, не будут перекрываться вашими новыми стилями (если вы намеренно не желаете сделать это).
Шаг 4. Резиновый и фиксированный макет.
Этот код создаст два блока, первый из которых будет включать в себя 4 колонки в первой строке, а второй – 8 колонок в следующей строке. Тег
добавит кнопку в самом конце блока контента. Как вы могли заметить, я добавил внутри строки с 8 колонками еще одну строку. Это один из способов создания вложенных колонок.
Фреймворк поддерживает два вида сеточных макетов – резиновый и фиксированный. Вы можете использовать любой из них, просто изменив
для резинового макета и
для фиксированного макета. Пример:
Аналогичным образом вы можете создать двухколоночную резиновую сетку с помощью тега
. Это хороший вариант для создания страниц, имеющих два разных столбца. Правда, в WordPress вы можете добавить сайдбар и без лишних танцев с бубном, однако стоит держать в памяти указанную возможность Bootstrap.
Шаг 5. Адаптивные классы и интересные варианты их использования.
Кроме того, вы можете использовать следующие медиа-запросы в CSS-файле для обработки определенного стиля в соответствии с заданным размером экрана:
Заключение
Как было отмечено выше, Bootstrap обладает разнообразными возможностями, однако требует хороших знаний в области HTML и CSS, чтобы в полной мере раскрыть свою мощь. Он позволяет сэкономить время, которое обычно тратится на ручное создание всех компонентов с нуля. Если вы не слишком хорошо разбираетесь в программировании, доверьте эту работу опытным разработчикам тем WordPress.
Как подключить Bootstrap к WordPress через CDN
Правильное подключение Twitter Bootstrap 4 к WordPress (CDN integrity)
Стили и скрипты Bootstrap могут повлиять на общее оформление вашего сайта. Применяйте их только убедившись, что установленная тема WordPress полностью совместима с данным набором инструментов.
При подключении Фреймворка Twitter Bootstrap 4 к движку WordPress можно использовать CDN. Это удобно тем, что кроме высокой скорости загрузки Bootstrap будет проще обновить, не заливая каждый раз файлы физически на свой хостинг.
Используйте атрибут целостности «integrity», это позволит не беспокоиться о совместимости версий. Все изменения будут под контролем веб-мастера.
Пример подключения Bootstrap 4:
Интеграцию целостности можно добавить к уже зарегистрированным выше скриптам при помощи фильтров style_loader_tag для CSS-стилей и script_loader_tag для JS-скриптов.
Этот код не является обязательным для работы Bootstrap, но добавит надёжности вашему сайту. Браузер пользователя проверит загружаемые файлы на предмет их повреждения или подмены:
Добавьте эти функции в файл functions.php текущей темы.
Вычисление хэш-суммы файлов
Это небольшое дополнение, в котором я расскажу откуда взялся код в переменной $hash. Для упрощения задачи можно воспользоваться сервисом https://cdnjs.com/libraries/twitter-bootstrap/4.6.0 и просто скопировать требуемые коды. Чтобы подробнее объяснить структуру, добавлю ручной вариант их создания.
Для вычисления кода sha512 потребуется доступ к консоли Bash в операционной системе Linux. Можно получить доступ по SSH у своего хостинг-провайдера и подключиться при помощи программы Putty. На хостинге может присутствовать и собственная консоль, поинтересуйтесь у тех. поддержки.
Посмотрим на примере файла стилей «bootstrap.min.css». Команда получения Hash удалённого файла выглядит следующим образом:
Простое подключение bootstrap к самым популярным движкам Joomla и WordPress
Приветствую всех читателей текущей публикации. Очень часто у начинающих веб-разработчиков возникает вопрос: «Как осуществляется Bootstrap подключение к CMS?». Поэтому чтобы дать ответы на подобные вопросы, я решил написать данную статью.
Я подробно расскажу, как подключить фреймворк к WordPress и Joomla!, объясню, что такое кастомизация и для чего она нужна. Ну что ж, приступим!
Подключение Bootstrap к Joomla
На самом деле подключение фреймворка к движкам осуществляется достаточно просто. А в ситуации с Joomla Бутстрап уже включен в сборку и подключается автоматически. Так, он используется в админпанелях движка.
Однако тут есть одно НО. Версия фреймворка, которая используется в этой CMS, устаревшая. Поэтому вам желательно подключить последнюю версию Bootstrap. И тут важно не заменить старую на новую, так как админка может полететь, а использовать их совместно (конфликта не будет).
Чтобы элементы фреймворка заработали, необходимо выполнить несколько действий:
Если вам необходимо также добавить скрипт библиотеки jQuery, то прописывайте его перед указанными скриптами.
Вот и все необходимые действия. Я привел один из самых простых и действующих способов, который не требует огромного количества настроек и шагов. В принципе, примерно идентичным образом фреймворк можно подключить к любому известному движку.
Подключение Bootstrap к WordPress
Чтобы не дублировать прошлый вариант подключения Бутстрапа, я расскажу, как пользоваться онлайн-хранилищами. Как вы уже, наверное, знаете, не обязательно скачивать файлы описываемого инструмента. Иногда достаточно воспользоваться ссылками на CDN.
Для этого в хедере файла с названием index.php вам необходимо по таким же правилам, как и в предыдущем варианте (описание стилей, скрипты js и jQuery, скрыпты Bootstrap), вставить строки:
Для CMS WordPress существует и другой способ:
Несколько слов о Customize 
В случае, когда вы точно знаете, какие элементы фреймворка вам нужны, а какие вы вообще не используете или когда изначально вам хочется поменять базовые значения параметров, стоит использовать Customize ( http://getbootstrap.com/customize/ ).
С ее помощью можно выбрать перечень компонентов, утилит, плагинов, настроек css и другие элементы из файлов Less. К примеру, можно отключить иконки и символы, известные под названием Glyphicons (если не знаете, как они выглядят, то посмотрите в Google или по этой ссылке).
К тому же в отдельных диалоговых окнах можно задать другие значения цветов, шрифтов, отступов и т.д., которые впоследствии станут параметрами по умолчанию.
На этом моя статья подошла к концу. Подписывайтесь на обновления моего обучающего блога и рассказывайте о нем друзьям. Желаю удачи! Пока-пока!
Как подключить Bootstrap к WordPress?
Дата публикации: 2016-09-21
От автора: всем привет. В прошлой статье мы рассмотрели подключение фреймворка к веб-странице, но если мы говорим о том, как подключить Bootstrap к WordPress, то здесь все выглядит немного по-другому. Давайте же рассмотрим, как сделать подключение правильно.
Итак, создадим перед собой задачу. У нас есть шаблон на wordpress, к нему нужно подключить bootstrap. Как это сделать? Казалось бы, чего тут сложного, подойдет тот же код, который мы использовали для подключения к веб-странице. Но не тут то было, если вы попытаетесь в header.php, в котором в wordpress-шаблоне выводится секция head, добавить тот самый код:
Ничего не выйдет, стили фреймворка не подключатся. Почему и что нам с этим делать? Во-первых, посмотрите на путь, ведущий к таблице стилей. Давайте вспомним, что wordpress читает путь начиная с корневой папки сайта, а не шаблона, у нас же путь прописан только относительно шаблона. Реальный же путь, по которому находится файл, выглядит так:
Фреймворк Bootstrap 5. Быстрый старт
Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля
Итак, стили не подключаются потому, что просто неправильно задан путь. Во-вторых, в wordpress есть специальные функции, которые позволяют правильным образом подключать скрипты и стили. Я предлагаю вам как раз воспользоваться этой функцией и подключить файлы фреймворка оптимальным образом. Для этого нам нужно будет написать некоторый код в functions.php в нашем активном шаблоне.
Чтобы его отредактировать, соединитесь с сайтом по ftp и перейдите в каталог с активной темой, найдите там соответствующий файл. Предлагаю вам сохранить его резервную копию на всякий случай. Теперь откройте его с помощью удобного вам редактора. Можно не изучать особо его содержимое, все равно, если вы не знакомы с wordpress-функциями, то ничего не поймете, разве только из комментариев разработчика.
Пройдите в самый конец, сюда мы и будем добавлять код, который подключит фреймворк к движку.
Поскольку мы тут не изучаем wordpress-функции, я просто дам вам готовый код, который сразу подключит js и css-файлы фреймворка. Ниже я позволю себе немного объяснить этот код.
Итак, нам нужно будет написать новую функцию, назовем ее произвольно, я предлагаю так – load_bootstrap, чтобы сразу было понятно. Внутри функции прописываем две wordpress-функции. Первая отвечает за подключение скриптов, вторая – за css-стили. Сами функции абсолютно идентично работают и имеют 2 обязательных параметра:
Название функции. Его можно написать произвольно. Опять же, я предлагаю назвать так, чтобы было сразу все понятно.
Путь к подключаемому файлу. Очень важно задать его правильно, если вы просто пропишите js/bootstrap.js, то ничего работать не будет, так как я уже говорил, что wordpress ищет файлы от корня сайта, а в корне папки js просто нет, она присутствует в нашем шаблоне, куда вы заранее должны скинуть файлы фреймворка.
Собственно, чтобы правильно задать путь, нужно получить путь к папке с активным шаблоном, а потом уже дописать сам путь к скрипту в этом шаблоне. Как это сделать? Тут нам поможет функция get_template_directory_uri(). Прописываем ее и пристыковываем путь к файлу.
Если вам нужно подключить больше файлов, то просто с новой строки заново пишем функцию wp_enqueue_script или style, указываем в параметрах название и путь.
На этом составление функции, которая будет подключать наши файлы фреймворка, закончено. Но если сейчас вы захотите начать пользоваться возможностями фреймворка, то еще рано. Нам необходимо дать движку эту функцию на выполнение. Это как раз и делает последняя строчка вышеуказанного кода, которая начинается с функции add_action.
В ней мы должны указать 2 параметра: первый будет неизменен в нашем случае, это функция wp_enqueue_scripts. Именно с s на конце, это важно! Вторым параметром нужно указать название нашей общей функции, в которой мы подключаем наш js и css-файл.
Итак, мы рассмотрели с вами правильное подключение bootstrap к wordpress. Если в будущем вам нужно будет подключить новые файлы фреймворка, не нужно будет писать для этого новую функцию, а всего лишь добавьте или измените нужные строки кода в уже имеющейся у вас функции load_bootstrap().
Благодаря тому, что мы сделали все таким образом, подключение фреймворка будет работать при изменении доменного имени, при изменении имени шаблона и т.д. Что ж, вы можете начинать использовать фреймворк для своих целей, на этом я заканчиваю эту статью. Если вы хотите в максимально короткие сроки освоить bootstrap, рекомендую вам пройти наш платный курс по этому фреймворку, в котором вы сможете сверстать 2 сайта, лендинг, то есть одностраничный сайт, а также получить хорошую теоретическую подготовку.
Фреймворк Bootstrap 5. Быстрый старт
Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля
Фреймворк Bootstrap 5. Быстрый старт
Изучите основы Bootstrap 5 на практическом примере по верстке интернет-магазина с нуля!
Как использовать Бутстрап для блога на Вордпресс
Что такое 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, об основных преимуществах данной библиотеки и о функционале фреймворка, который может помочь нам в создании современной адаптивной темы. Изучайте туториалы и экспериментируйте!