Bootstrap и wordpress – Почему не выходит подключить bootstrap в дочерней теме(wordpress)? — Хабр Q&A

Заключение

Bootstrap предлагает огромный потенциал для создания красивых и адаптивных сайтов с WordPress и без него. В этой статье мы рассмотрели ведущие wordpress темы bootstrap, используемые Бутстрап в качестве основы для разработки. И, честно говоря, результаты просто удивительны.

Мы хотели бы услышать и посмотреть, как вы создали свой собственный сайт с темой Bootstrap. Собираетесь ли вы скачать любой bootstrap шаблон wordpress в этом посте? Возможно, вы уже используете тему, которую мы рассмотрели, и если это так, пожалуйста, не стесняйтесь оставлять свои отзывы в разделе комментариев.

когда применять и как сделать?

От автора: Введите в поисковике «cоздание темы для WordPress с помощью Bootstrap» или «как сделать тему для WordPress с Bootstrap» и получите сотни ссылок. Среди них будут руководства о том, как с помощью Bootstrap состряпать свою платную или бесплатную тему.

Если в репозитории тем WordPress произвести поиск по слову «Bootstrap», то найдется 199 результатов. Достаточно большой выбор, не так ли. Такое ощущение, что создание тем с помощью Bootstrap самый популярный на сегодня способ создания тем для WordPress. Но во всех ли случаях данный подход идеален?

Ниже я собрал все плюсы и минусы в создании тем на Bootstrap, которые помогут вам понять, когда данный метод существенно поможет вам, а когда только затруднит работу.

Что такое Bootstrap?

На сайте Bootstrap говорится так:

Bootstrap это самый популярный HTML, CSS, и JS фреймворк для создания адаптивных веб-сайтов по технике mobile first.

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля

Отсюда следует, что:

Bootstrap адаптивный и использует технику mobile first.

Он использует HTML, CSS и JavaScript.

Если вы достаточно внимательны, то заметили, что в списке не упоминается PHP. Bootstrap работает не как фреймворк тем: с ним не поставляются файлы шаблонов, которые вам будут нужны для создания темы. Вместо этого вы получаете набор и структуру стилей и скриптов, которые помогают сделать тему адаптивной, добавляют современных элементов взаимодействия, анимации и событий, которые работают на JS.

Изначально Bootstrap задумывался, как фреймворк для Twitter, который должен был облегчить работу разработчиков и сделать ее более эффективной и последовательной. Первое название было Twitter Blueprint, со временем, как в проект вовлекались все новые разработчики, и проект начал расти, его сменили на Bootstrap.

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

В те времена, когда я впервые столкнулся с Bootstrap, его основным преимуществом была полная адаптивность. Остальные фреймворки были в роли догоняющих, даже WordPress. Но в момент создания он не был адаптивен, таковым он стал в 2012 году. Техника mobile first была добавлена в 2013 году.

Если загрузить фреймворк, то вы увидите, что он состоит из набора файлов стилей (включая минифицированные версии), JS скриптов и глиф-иконок, которые находятся в файле шрифта. Эти файлы не заменяют файлы ваших тем. Вы должны подключить их в теме и вызывать необходимый инструментарий по мере надобности.

В этой статье я не буду вдаваться в подробности, как работать с Bootstrap. Вместо этого я расскажу вам о том, как данный фреймворк может помочь или наоборот затруднит работу с WordPress, а также в каких ситуациях его стоит и не стоит применять.

Преимущества Bootstrap в темах WordPress

Огромная популярность данного фреймворка говорит о том, что он, определенно, занял свою нишу. Так что давайте рассмотрим некоторые из преимуществ Bootstrap:

Он адаптивен и использует технику mobile first

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

В Bootstrap применяется 12-ти колоночная система сеток со своими классами, данные классы можно добавлять к своим элементам, чтобы добиться эффекта сетки. Преимущества:

Если вы совсем не знакомы с медиа запросами, то вам и не придется их писать.

Система сеток использует объектно-ориентированный CSS, предоставляя вам гибкую настройку в стилизации элементов темы.

Mobile first означает, что ваш CSS код будет намного чище и эффективнее, в отличие от обычного подхода.

Современный, ясный и привлекательный дизайн

По моему личному мнению шаблон и типографика Bootstrap очень привлекательны. Он не принесет вам наград в веб-дизайне, однако поможет создать современную тему с разборчивым и понятным интерфейсом. Ниже я представил список некоторых особенностей, которыми сам пользуюсь:

Тег small для вторичного текста в заголовках

Стилизация цитат и кавычек

Стилизация таблиц выглядит намного лучше, чем в большинстве тем WordPress

Отличная совместимость с HTML5

Помимо собственных классов для стилизации, в Bootstrap также присутствуют стили для полного набора HTML5 тегов. Стилизовать данные элементы с нуля крайне утомительно, так что фреймворк сэкономит вам кучу времени и сил, а также улучшит семантику вашей темы.

Облегченный доступ к скриптам

Для того, чтобы не использовать плагины неизвестного происхождения, в Bootstrap встроен достаточно обширный набор часто используемых скриптов. Среди них скрипты для создания:

Плавных переходов

Модальных окон

Выпадающих списков

Тултипов

Поповеров

Кнопок

… и еще много чего. Все это ускорит процесс разработки, а также обеспечит прекрасную слаженную работу всех скриптов. Если вы будете использовать все элементы по полной (более двух из списка), тогда процесс разработки, действительно, ускорится. Но если вам требуется один или всего два элемента интерфейса, то существует более эффективные способы с меньшим количеством кода.

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля

Недостатки тем на Bootstrap

Тем не менее, все плюсы не перевешивают его недостатки, и я не считаю Bootstrap правильным выбором для тем WordPress.

Большие объемы изучаемой информации

Я уже упоминал о системе сеток в стилях Bootstrap, а также о множестве классов, которые можно использовать для стилизации. Если вы хотите изучить их все, это отлично. А что делать, если вам не нужно столько новой информации. Если вам не нужен настолько сложный шаблон, и вы используете всего парочку стилей, вы обнаружите, что потратили непропорционально много времени на изучение всей документации из-за пары классов.

Только стили для системы сеток на маленьких экранах занимают 155 строк: слишком много. А еще классы для глиф-иконок, кнопок и т.д.

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

В фреймворке используются статические медиа запросы

Медиа запросы в Bootstrap используют размеры экранов и устройства, которые со временем устаревают. Ниже примеры медиа запросов:

/* Очень маленькие устройства (телефоны, меньше 768px) */ /* По умолчани в Bootstrap медиа запросы отсутствуют */ /* Маленькие устройства (планшеты, 768px и выше) */ @media (min-width: @screen-sm-min) { … } /* Средние устройства (настольный ПК, 992px и выше) */ @media (min-width: @screen-md-min) { … } /* Большие устройства (Большие настольные экраны, 1200px и выше) */ @media (min-width: @screen-lg-min) { … }

За последний год разработчики ушли от фиксированных разрешений в медиа запросах в сторону разрешений экранов, основанных на дизайне. Данные медиа запросы пока что еще работают с дизайном Bootstrap (не вызывают проблем с любым поддерживаемым устройством или браузером). Однако более гибкий способ это кодировать запросы вручную.

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

Он раздувает код

Думаю, вы ждали, когда я это скажу – стандартный ответ всех противников новых фреймворков или инструментов.
Bootstrap, бесспорно, предоставляет огромный функционал и множество стилей, которые можно использовать в ваших темах, и это его плюс. Но с другой стороны, если вы будете использовать всего пару элементов из всего набора, это означает, что вы только зря добавили весь этот код.

Файлы минифицированы, что, несомненно, уменьшает их вес. Но даже так, вы действительно уверены, что вам нужен весь этот неиспользуемый код в ваших темах?

Исчезает творческий подход в дизайне

Добавьте Bootstrap в вашу тему, вызовите его стили и бац! У вас готовый полностью адаптивный шаблон, который выглядит просто хорошо. Большинство из нас добавит парочку новых цветов и все.

Это значит, что ваш дизайн будет полностью построен на заложенных в Bootstrap возможностях, а не на том, что требуется вам. У меня было множество заказчиков, и перед тем, как начать обсуждать дизайн сайта, я спрашивал их о целях сайта, основной аудитории и т.д. Все эти направляющие вопросы влияют на конечный дизайн с точки зрения визуального и пользовательского интерфейсов.

Основная опасность кроется в том, что в Bootstrap получаются почти одинаковые темы. За последние годы разработчики тем на WordPress успешно отбиваются от нападок с лозунгами «по темам сразу понятно, что это WordPress». А с Bootstrap пока что обстановка хуже, все темы на Bootstrap «выглядят, как Bootstrap».

Bootstrap и WordPress сильно отличаются

Основной, перевешивающий все остальное, фактор в том, что Bootstrap проектировался не под WordPress, и работают они совсем по-разному.

Часто от фреймворка тем WordPress можно добиться почти всего того же, что и в Bootstrap, однако он делался специально под WordPress. Он недорогой и не имеет такое количество кода: к примеру, тема Wonderflux бесплатна и с открытым исходным кодом. В ней есть адаптивная система сеток (как в Bootstrap, только кода меньше), а также библиотека функций и фишек, которых нет в Bootstrap.

Пример несовместимости Bootstrap и wordPress это дизайн меню. С подключенным Bootstrap меню WordPress по умолчанию уже работать не будет: придется создавать пользовательский nav walker. Это не сложно, если вы разбираетесь в коде, но уже лишняя работа.

Обобщение

В Bootstrap, определенно, есть свои плюсы. Особенно в том случае, если вы хотите получить привлекательный, ясный и адаптивный шаблон вашего сайта с большим набором JS эффектов. Данный подход ускорит процесс разработки.

Тем не менее, если вы хотите выжать из Bootstrap все, придется потратить много времени на изучение. А там есть, что учить. Если вы не будете использовать все, может оно того не стоит.

Подводя итог, я бы рекомендовал использовать Bootstrap в следующих случаях:

Если вы действительно готовы потратить время на изучение всех возможностей Bootstrap

Если вы собираетесь использовать много свойств, как система сеток и скрипты

Если вы не веб-дизайнер и вам нужен готовый дизайн

Если вам нужен адаптивный дизайн, но вы не умеете писать медиа запросы

И не используйте Bootstrap в следующих обстоятельствах:

Если вам нужна большая гибкость в разрешениях экранов, дизайне в целом или в макете

Если вы используете всего один скрипт или не используете систему сеток

Если вам нужно быстро пофиксить что-то

Если существует тема WordPress, функционал которой удовлетворяет вашим требованиям

В конечном итоге выбор за вами!

Автор: Rachel McCollin

Источник: http://code.tutsplus.com/

Редакция: Команда webformyself.

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Почему Bootstrap плохо совместим с темами оформления WordPress

С момента своего выхода в 2011 году Bootstrap почти моментально стал самым популярным фронтенд фреймворком на Github. Разработчики стали использовать его при создании тем, что достаточно удивительно. На самом деле он не очень хорошо подходит для разработки тем на WordPress. Давайте разбираться.

Смотрите также:

Bootstrap — не совсем подходящий инструмент для wordpress

Для справки (Wikipedia):

Twitter Bootstrap — свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML и CSS шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейсов, включая JavaScript расширения.

Изначально Bootstrap создавался для Twitter в качестве бэкенд-инструмента, с помощью которого разработчики смогли бы создавать интерфейсы для приложений. До этого использовалось много других библиотек, но полученные в результате интерфейсы практически не поддерживались.

Учитывая этот факт, создание Bootstrap должно было помочь разработчикам сосредоточиться исключительно на коде в бэкенде и совершенно не беспокоится о фронтенде. Как вы понимаете, для WordPress фронтенд, то есть внешний вид сайта, играет очень большую роль. Соответственно использование Bootstrap противоречит задачам WordPress.

Bootstrap функционирует не так, как нужно WordPress

Темы на WordPress создаются с помощью набора функций, которые используются в файле шаблона. За счет вывода HTML этих функций разработчики имеют возможность создавать эффективный код для работы с разным видом контента.

Что касается Bootstrap, то в нем используется свой подход к структурированию HTML, и он не совсем совместим с тем, что используется в WordPress. Поэтому разработчикам приходится дополнительно создавать код для того, чтобы наладить это несоответствие при функционировании с WordPress.

Хорошим примером этого является навигационное меню. Вместо использования wp_nav_menu() разработчикам пришлось создать классы Custom Walker, которые меняют отображение HTML с помощью функции. И таким образом могут быть использованы Bootstrap CSS и Javascript. Такой подход требует создания большего количества кода, а это требует больше времени.

Bootstrap очень раздутый

Код фреймворка никогда не сравнится по своей эффективности с кодом, созданным для конкретной цели. Фреймворки создаются для общих целей и становятся раздутыми. Очень часто необходимо добавлять несколько классов CSS в элементы HTM для достижения желанного визуального результата. Но случается так, что для создания дизайна темы нужен не только код CSS, но и код всего фреймворка.

Bootstrap не приветствует хороший дизайн

Самая популярная функция Bootstrap – это полностью адаптивная грид-система twelve column. Добавляя классы в верстку HTML, разработчики могут создавать веб-сайты, которые адаптируются под экран любого разрешения. Но, к сожалению, предопределенная грид разметка по сетке не поможет создать отличный дизайн.

Использование стандартного разрешения не поддерживает, к примеру, миниатюры изображений и любые другие адаптации под устройства. Неважно, используете ли вы шрифты с засечками или без засечек, грид-структура остается неизменной. В результате получается плохая читабельность текста и непривлекательное оформление страницы.

Альтернативный подход

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

И только когда вы определитесь с этим, можете приступать к внутренней работе. Соберите контент для создания нескольких тестовых записей и начните с ним работать. Вы увидите, что сосредоточившись на контенте с самого начала, можно создать остальные элементы дизайна вокруг него и достичь максимально привлекательного результата.

Что касается технической стороны, лучше используйте начальную тему с markup-разметкой для быстрого погружения в процесс работы. Можете использовать библиотеки и сниппеты кода, которые позволят сократить время разработки. Стандартные темы WordPress, как правило, отлично подходят для извлечения фрагментов кода.

Источник: themeshaper.com

Смотрите также:

Плагин WordPress Twitter BootStrap CSS

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

Перед установкой плагина WordPress Twitter BootStrap CSS на реальный сайт рекомендуется изначально испробовать его на локальном сервере. Это нужно для тестирования и в случае избежания проблем.

Twitter BootStrap представляет собой основы CSS и JavaScript структуры, позволяя максимально улучшить собственный дизайн и улучшить функциональность личного проекта. Данный элемент был разработан двумя пользователями, зовут которых Mark Otto и Jacob Thornton, для твиттера. Поначалу использовали его для заполнения пустоты между внутренними элементами. Немного позже Twitter BootStrap выпустили в качестве отдельного инструмента, у которого был открыт исходный код. Это невероятно красиво, а самое главное просто и совместимо со всеми существующими браузерами.

Для начала вам потребуется установить и активировать плагин под названием WordPress Twitter BootStrap CSS. После чего выберите в панели администратора пункт меню — Twitter Bootstrap, что позволит перейти на страницу самого плагина.

Кроме этого, в панели администратора под пунктом меню “Twitter Bootstrap” присутствует ссылочка для открытия настроек Bootstrap CSS. После нажатия на неё откроется страница с настройками, которые необходимо использовать зависимо от собственных интересов. Также присутствует возможность выбора использования той или иной версии Bootstrap CSS. Ниже присутствуют функции специально для продвинутых пользователей.

Когда вы ознакомились с настройками, попробуйте добавить какие-нибудь элементы Bootstrap CSS в личных записях блога. Для этого требуется вставить специализированный код в отдельный материал или же на полноценную страницу с содержанием.

Наглядный пример использования аналогичных кодов на сайте:

[TBS_BUTTON color="primary" link="http://example.com"]Download[/TBS_BUTTON]
[TBS_BUTTON color="danger" link="http://example.com"]Cancel[/TBS_BUTTON]
[TBS_BUTTON color="success" link="http://example.com"]Learn more[/TBS_BUTTON]

Кнопки.

Иконки.

Присутствует много всевозможных CSS элементов, которые легко возможно добавить в личные записи. Всплывающие подсказки, раздвигающиеся меню, разнообразные выскакивающие окна, индикаторы выполнения зада и так далее. Для этого плагина написана документация, где подробно рассказывается о других возможностях. Если вас интересуют иконки, можно перейти на официальный сайт Twitter Bootstrap и ознакомиться с различными иконками.

Больше информации о коротких кодах и о самом плагине.
icontrolwp.com/our-wordpress-plugins/wordpress-shortcodes-demo/

Иконки.
getbootstrap.com/2.3.2/base-css.html#icons

Источник: wpbeginner.com/plugins/how-to-add-twitter-bootstrap-css-in-wordpress-using-shortcodes/

Navbar bootstrap 4 wordpress — Андрей Шарапов

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

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

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

Navbar bootstrap 4 wordpress

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

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

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

Возможно Вас также заинтересует…

• Альтернатива functions.php

  Несколько раз пытался я внести в данный файл свои изменения, но практически каждая вторая моя…

• Как развиваться дизайнеру

  Бессчётное количество обучающих материалов по дизайну, образовательных онлайн и оффлайн семинаров не могут сказать как…

• Настройка WooCommerce PayPal

  Мы продолжаем создавать свой интернет-магазин с помощью супер плагина Woocommerce ! Сегодня мы будем разбирать…