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

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

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

• Какие тренды в веб-дизайне ожидать в 2015 году
• 5 советов при выборе подходящей темы на WordPress
• Готовая WordPress тема или своя собственная? Плюсы и минусы
• Советы для начинающих разработку сайта на WordPress
• Делать WordPress сайт для каждого клиента с нуля? Или применить готовые инструменты?
• Сколько из этих 5-ти ошибок вы совершаете при разработке темы на 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

Алексей Шевченко

редактор wpcafe

Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/