Когда использовать Bootstrap для вашей темы WordPress (а когда нет)

Выполните в Google поиск по «WordPress Theme with Bootstrap», и вы получите сотни результатов. К ним относятся руководства, рассказывающие о том, как использовать Bootstrap для создания своей темы, а также коммерчески и бесплатно доступные темы с использованием платформы Bootstrap.

Ищите «Bootstrap» в репозитории тем WordPress, и вы получите 199 результатов. Это большой выбор.

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

Здесь я расскажу о плюсах и минусах использования Bootstrap для создания тем WordPress и поможет вам определить, когда использование Bootstrap поможет вашему рабочему процессу, а когда — нет.

Что такое Bootstrap?

Сайт Bootstrap описывает Bootstrap как:

самая популярная среда HTML, CSS и JS для разработки адаптивных мобильных проектов в Интернете.

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

• Bootstrap в первую очередь отзывчив и мобильн.
• Он использует HTML, CSS и JavaScript.

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

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

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

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

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

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

Преимущества Theming With Bootstrap

Самая популярность Bootstrap в качестве основы для тем WordPress указывает на то, что у него определенно есть место. Итак, давайте посмотрим на некоторые преимущества использования Bootstrap.

Это отзывчиво и мобильно-сначала

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

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

Преимущества этого подхода включают в себя:

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

Он использует современный, чистый и привлекательный дизайн

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

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

Хорошо играет с HTML5

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

Это дает вам легкий доступ к сценариям

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

• переходы
• модальности
• выпадающие
• всплывающие подсказки
• Popovers
• кнопки

… и более. Это может ускорить вашу разработку, а также гарантирует, что все ваши скрипты будут хорошо играть друг с другом. Если вы собираетесь использовать более одного или двух из них, Bootstrap может значительно облегчить разработку вашей темы; однако, если вы собираетесь использовать только один или два, возможно, будет более эффективный подход с меньшим количеством добавленного кода.

Недостатки тематики с бутстрапом

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

Есть чему поучиться

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

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

В дополнение к этому, есть классы для глифов, для кнопок и многое другое.

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

Использует фиксированные медиазапросы

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

Это медиа-запросы:

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

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

Это добавляет раздувание

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

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

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

Это может препятствовать творческому дизайну

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

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

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

Bootstrap и WordPress очень разные

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

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

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

Резюме

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

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

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

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

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

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

В конечном итоге решение остается за вами!