С момента своего выхода в 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

Вам понравился материал?

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

15 комментариев

сначала новые
по рейтингу сначала новые по хронологии

Действительно почитайте комменты в оригинальной статье. И учитывайте время её публикации (2011 год)

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

Дмитрий

Ни одна нормальная студия не будет делать проект на WordPress. Он в n-ое количество раз более раздутый нежели bootstrap. Ибо на wp сейчас можно чуть ли не в космос летать.

Сетка не совместима с хорошим дизайном? Звучит даже не смешно, а абсурдно.

Андрей

АААА. Залил сайт на хостинг. Вордпресс перестал видеть все стили, скрипты bootstrap. Что делать? неужели все перепесывать с нуля????

Автор слабо представляет о чем пишет и статья несет скорее рекламный характер для Bamako.

chumachkin_m

Автор не программист - скорее всего дизайнер, отсюда спор бесполезен, так как автор не представляет технической кухни, а отталкивается совершенно от других мотивов.

ЗЫ.
Но никуда он не денется и как в свое время javascript завоевал мир, так и платформы на основе Grid потихоньку вытеснят более слабые решения.

Зашел почитал комментарии к английской версии статьи - в обще народ указал автору на ошибочность его мнения.
IMHO.

Эта статья - простой перевод. Вот оригинал - http://themeshaper.com/2014/08/19/why-bootstrap-is-a-bad-fit-for-wordpress-themes/

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

В чем ты Вы правы, но в чем то нет, я 5 лет занимаюсь профессиональной версткой, 3 года создаю темы Вордпресс, за 5 лет я имел дело с Бутстрап всего 3 раза и все три раза я столкнулся с ним по просьбе "помогите дизайн уехал", "все криво" и т.п. Недолюбливаю этот фреймворк с первых же дней знакомства с ним.
Он создан для разработчиков, которые:
1 - не умеют верстать,
2 - лень верстать,
3 - жаба душит оплачивать верстку,
4 - нужен каркас для начало проекта.
Ни одна адекватная студия, не будет свой серьезный заказ на нем делать.

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

Наберите меня на почту я думаю , что нам есть , что обсудить в кулуарах

chumachkin_m

У меня к вам несколько вопросов:
1. Bootstrap и Foundation вы их не любите равноценно или все же по разному?
2. Вы используете в своей работе LESS или SCSS и если да, то каким инструментом пользуетесь для работы, можете привести пример(маленький кусочек кода) как вы на них пишите.

По поводу ваших пунктов
1. Помните фильм "Красная жара"? - Какие ваши аргументы?(А. Шварценеггер)
2. Это как, в чем заключается лень?
3. Ну да, действительно, железный аргумент! (сарказм)
4. Каркас для каких проектов, для Wordpress проектов?

Ни одна адекватная студия не станет сейчас делать не grid верстку.

ЗЫ.
Пока ваши аргументы не убедительны.

Забавная история у тебя случилась, мне тебя жаль!!! :D