Чому Bootstrap погано сумісний із темами оформлення WordPress

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

Дивіться також:

• Які тренди у веб-дизайні очікувати у 2015 році
• 5 порад при виборі відповідної теми на WordPress
• Готова WordPress тема чи своя власна? Плюси і мінуси
• Поради для початківців розробку сайту на WordPress
• Робити WordPress сайт для кожного клієнта з нуля? Або застосувати готові інструменти?
• Скільки з цих 5-ти помилок ви робите при розробці теми на WordPress?

Bootstrap - не зовсім підходящий інструмент для Wordpress

Для довідки (Wikipedia):

Завантаження Twitter — вільний набір інструментів для створення сайтів та веб-застосунків. Включає 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/