Когда Использовать Bootstrap для Вашей WordPress Темы (А Когда Нет)

Russian (Pусский) translation by Anton L (you can also view the original English article)

Сделайте запрос в Google - 'WordPress Темы с Bootstrap' и вы увидите сотни результатов. Там будут гайды объясняющие вам, как использовать Bootstrap для создания темы, а также платные и бесплатные темы на основе Bootstrap фреймворка.

Сделайте запрос 'Bootstrap' на странице официальных тем для WordPress и вы увидите 199 результатов. Большой выбор.

Как можно заметить разработка WordPress тем с Bootstrap довольно популярна. Но всегда-ли это лучших подход при разработке вашей темы?

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

Что такое Bootstrap?

Сайт Bootstrap'а даёт нам такой ответ:

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

Это говорит вам о паре вещей:

Bootstrap адаптивный и mobile first.
Он использует HTML, CSS и JavaScript.

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

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

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

Когда мне впервые довелось столкнуться с Bootstrap, его главным козырем была адаптивность, в то время большинство веб-сайтов (включая сайты на WordPress) всё ещё были, в большинстве своём, довольно статичные. Изначально он не был адаптивный: адаптивность добавили в 2012-ом, затем фреймворк был переработан основываясь на парадигме mobile-first в 2013-ом.

Если вы скачаете Bootstrap, вы увидите, что он состоит из набора таблиц стилей (включая минифицированные версии), JavaScript файлы и шрифтовые иконки (glyphicons), находящиеся в файлах шрифтов. Всё это не заменяет файлы вашей темы: вместо этого вы добавляете их в свои таблицы стилей и в файл functions, по мере необходимости.

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

Плюсы при Создании Тем с Bootstrap

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

Он Адаптивный и Mobile-First

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

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

Плюсы данного подхода включают:

Если вы не знакомы с медиа запросами (media queries), вам не придётся писать их самим.
Система сеток использует объектно-ориентированный CSS, предоставляя вам гибкие способы по стилизации элементов на ваших страницах.
С парадигмой mobile-first ваш CSS более чистый и эффективный, нежели стили при desktop-first подходе.

Он Использует Современный, Чистый и Привлекательный Дизайн

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

Использование элемента <small> для дополнительного текста в заголовках
Стили для цитат и блоков с цитатами (blockquotes)
Стилизация таблиц гораздо лучше, чем те, которые я видела в большинстве WordPress тем

Он Хорошо Совместим с HTML5

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

Он Даёт Вам Набор Готовых Скриптов

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

переходы (transitions)
модальные окна (modals)
выпадающие меню (dropdowns)
подсказки при наведении (tooltips)
подсказки при клике (popovers)
кнопки

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

Минусы при Создании Тем с Bootstrap

Однако я не думаю, что Bootstrap подойдёт каждому разработчику WordPress тем. Вот некоторые минусы Bootstrap при создании тем.

Много Учить

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

Только лишь стили адаптивной сетки, отвечающие за маленькие экраны, занимают 155 строчек кода: довольно много и большинство тем пожалуй не требует этого.

Прибавьте к этому классы шрифтовых иконок, кнопок и так далее.

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

Он Использует Фиксированные Медиа Запросы

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

Вот пример медиа запросов:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

За последние несколько лет, более популярным и практичным подходом при адаптивной вёрстке стал так называемый подход основанный на брейкпоинтах зависящих от дизайна (design-based breakpoints), вместо заранее, строго обозначенных медиа запросов. Пока эти медиа запросы отлично работают с дизайном основанном на Bootstrap и не вызовут никаких проблем, открой вы веб-сайт на поддерживаемых устройствах и в браузерах, у вас не будет той гибкость, которую вы имели-бы, написав свои собственные медиа запросы.

Если вы захотите добавить медиа запрос к вашим стилям, вам придётся модифицировать и подстраивать под ваш новый брейкпоинт, 155 строк отвечающих за лэйаут - не самое интересное занятие!

Он Добавляет Лишний Код

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

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

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

Он Может Мешать Творческому Процессу

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

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

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

Bootstrap и WordPress Очень Разные

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

Обычно фреймворк для создания WordPress тем даст вам всё, что есть в Bootstrap, и это будет более оптимальный метод работы для WordPress разработчика. Фреймворк не должен быть дорогим и обладать огромным количеством кода: к примеру Wonderflux - бесплатная тема с открытым исходным кодом, включает в себя адаптивную систему сеток (тоже самое, что и Bootstrap, но в разы минималистичнее), а также библиотеку функций и хуков, которую вы не получите с Bootstrap.

Пример того, как Bootstrap и WordPress несовместимы, можно найти в дизайне навигации. Навигация WordPress по умолчанию не будет работать с Bootstrap, вам придётся её кастомизировать. Это не так сложно сделать, если вы привыкли к коду WordPress, но в то же время добавляет один лишний шаг при создании темы.

Заключение

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

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

В заключении я хочу рассказать в каких ситуациях следует воспользоваться Bootstrap:

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

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

Если вам нужно больше гибкости относительно брейкпоинтов, дизайна и лэйаута
Если вы будете использовать только один скрипт, или если вам не нужна сетка
Если вам нужно быстро что-либо отладить, или добавить - Bootstrap тут не поможет
Если вы можете использовать фреймворк для создания WordPress тем, или начальную тему (starter theme), которые вам подходят и обладают набором хуков и функций

В конце концов решение за вами!