Створення теми для WordPress за допомогою Bootstrap: коли застосовувати?

26

Від автора: Введіть у пошуковику «створення теми для WordPress за допомогою Bootstrap» або «як зробити тему для WordPress з Bootstrap» і отримаєте сотні посилань. Серед них будуть керівництва про те, як з допомогою Bootstrap сфабрикувати свою платну чи безкоштовну тему.

Якщо в репозиторії тим WordPress здійснити пошук по слову «Bootstrap», то знайдеться 199 результатів. Досить великий вибір, чи не так. Таке відчуття, що створення тем за допомогою Bootstrap найпопулярніший на сьогодні спосіб створення тем для WordPress. Але в усіх випадках цей підхід ідеальний?

Нижче я зібрав всі плюси і мінуси у створенні тим на Bootstrap, які допоможуть вам зрозуміти, коли цей метод істотно допоможе вам, а коли тільки ускладнить роботу.

Що таке Bootstrap?

На сайті Bootstrap говориться так:

Bootstrap це найпопулярніший HTML, CSS, JS-фреймворк для створення адаптивних веб-сайтів по техніці mobile first.

Звідси випливає, що:

Bootstrap адаптивний та використовує техніку mobile first.

Він використовує HTML, CSS і JavaScript.

Якщо ви досить уважні, то помітили, що в списку не згадується PHP. Bootstrap працює не як фреймворк тим: з ним не поставляються файли шаблонів, які вам будуть потрібні для створення теми. Замість цього ви отримуєте набір і структуру стилів і скриптів, які допомагають зробити тему адаптивної, додають сучасних елементів взаємодії, анімації та подій, які працюють на JS.

Спочатку Bootstrap замислювався, як фреймворк для Twitter, який повинен був полегшити роботу розробників і зробити її більш ефективною і послідовною. Перша назва було Twitter Blueprint, з часом, як у проект залучалися все нові розробники, і проект почав зростати, його змінили на Bootstrap.

Випущений він був з відкритим вихідним кодом в 2011 році, і з тих пір використовувався у великій кількості веб-додатків, включаючи теми WordPress.

В ті часи, коли я вперше зіткнувся з Bootstrap, його основною перевагою була повна адаптивність. Інші фреймворки були в ролі наздоганяючих, навіть WordPress. Але в момент створення він не був адаптивний, таким він став у 2012 році. Техніка mobile first була додана в 2013 році.

Якщо завантажити фреймворк, то ви побачите, що він складається з набору файлів стилів (включаючи минифицированные версії), JS-скриптів та гліф іконок, які знаходяться у файлі шрифту. Ці файли не замінюють файли ваших тем. Ви повинні підключити їх в темі і викликати необхідний інструментарій у міру потреби.

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

Переваги Bootstrap в темах WordPress

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

Він адаптивний і використовує техніку mobile first

У Bootstrap за замовчуванням ви отримуєте адаптивний сайт з повною адаптацією під мобільні пристрої. Якщо ви щосили намагаєтеся зробити вашу тему адаптивної і самі пишете до неї стилі і медіа запити, даний фреймворк заощадить масу часу.

У Bootstrap застосовується 12-ти колоночная система сіток зі своїми класами, дані класи можна додавати до своїх елементах, щоб домогтися ефекту сітки. Переваги:

Якщо ви зовсім не знайомі з медіа запитами, то вам і не доведеться їх писати.

Система сіток використовує об’єктно-орієнтований CSS, надаючи вам гнучку настройку стилізації елементів теми.

Mobile first означає, що ваш CSS-код буде набагато чистіше і ефективніше, на відміну від звичайного підходу.

Сучасний, ясний і привабливий дизайн

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

Тег small для вторинного тексту в заголовках

Стилізація та лапок цитат

Стилізація таблиць виглядає набагато краще, ніж у більшості тем WordPress

Відмінна сумісність з HTML5

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

Полегшений доступ до скриптів

Для того, щоб не використовувати плагіни невідомого походження, в Bootstrap вбудований достатньо великий набір часто використовуваних скриптів. Серед них скрипти для створення:

Плавних переходів

Модальних вікон

Випадаючих списків

Тултипов

Поповеров

Кнопок

… і ще багато чого. Все це прискорить процес розробки, а також забезпечить прекрасну злагоджену роботу всіх скриптів. Якщо ви будете використовувати всі елементи повної (більше двох із списку), тоді процес розробки, дійсно, прискориться. Але якщо вам потрібно один або два елементи інтерфейсу, то існує більш ефективні способи з меншою кількістю коду.

Недоліки тим на Bootstrap

Тим не менш, всі плюси не переважають його недоліки, і я не вважаю Bootstrap правильним вибором для WordPress.

Великі обсяги досліджуваної інформації

Я вже згадував про систему сіток в стилях Bootstrap, а також про безліч класів, які можна використовувати для стилізації. Якщо ви хочете вивчити їх все, це відмінно. А що робити, якщо вам не потрібно стільки нової інформації. Якщо вам не потрібен настільки складний шаблон, і ви використовуєте всього кілька стилів, ви виявите, що витратили непропорційно багато часу на вивчення всієї документації з-за пари класів.

Стилі для системи сіток на маленьких екранах займають 155 рядків: занадто багато. А ще класи для гліф іконок, кнопок і т. д.

Якщо у вашій темі буде задіяно кількість стилів пропорційно витраченому на вивчення документації часу, то даний фреймворк варто використовувати. В іншому випадку, якщо вам потрібно створити пару колонок і додати дизайну адаптивності, це занадто.

У фреймворку використовуються статичні медіа запити

Медіа запити в Bootstrap використовують розміри екранів і пристрої, які з часом застарівають. Нижче приклади медіа-запитів:

/* Дуже маленькі пристрої (телефони, менше 768px) */
/* За умолчани в Bootstrap медіа запити відсутні */
/* Маленькі пристрої (планшети, 768px і вище) */
@media (min-width: @screen-sm-min) { … }
/* Середні пристрою (настільний ПК, 992px і вище) */
@media (min-width: @screen-md-min) { … }
/* Великі пристрою (Великі настільні екрани, 1200 px і вище) */
@media (min-width: @screen-lg-min) { … }

За останній рік розробники пішли від фіксованих дозволів в медіа запитах в бік дозволів екранів, заснованих на дизайні. Дані медіа запити поки що ще працюють з дизайном Bootstrap (не викликають проблем з будь-яким підтримуваний пристроєм або браузером). Однак більш гнучкий спосіб це кодувати запити вручну.

Якщо б вам довелося додати проміжний медіа запит, це означало б додати ще 155 рядків до ваших стилям. Все для того, щоб запрацювала система сіток, а ще потрібно адаптувати дані стилі для нового дозволу – завдання не з простих!

Він роздмухує код

Думаю, ви чекали, коли я це скажу – стандартний відповідь всіх супротивників нових фреймворків або інструментів.
Bootstrap, безперечно, надає величезний функціонал і безліч стилів, які можна використовувати у ваших темах, і це його плюс. Але з іншого боку, якщо ви будете використовувати всього пару елементів з усього набору, це означає, що ви тільки дарма додали весь цей код.

Файли минифицированы, що, безсумнівно, зменшує їх вагу. Але навіть так, ви дійсно впевнені, що вам потрібен весь цей невикористаний код у ваших темах?

Зникає творчий підхід в дизайні

Додайте Bootstrap в вашу тему, викличте його стилі і бац! У вас готовий повністю адаптивний шаблон, який виглядає просто добре. Більшість з нас додасть парочку нових кольорів і все.

Це означає, що ваш дизайн буде повністю побудований на закладених в Bootstrap можливостях, а не на тому, що потрібно вам. У мене було безліч замовників, і перед тим, як почати обговорювати дизайн сайту, я питав їх про цілі сайту, основної аудиторії і т. д. Всі ці напрямні питання впливають на кінцевий дизайн з точки зору візуального і користувацьких інтерфейсів.

Основна небезпека криється в тому, що в Bootstrap виходять майже однакові теми. За останні роки розробники тим на WordPress успішно відбиваються від нападок з гаслами «за темами відразу зрозуміло, що це WordPress». А з Bootstrap поки що обстановка гірше, всі теми на Bootstrap «виглядають, як Bootstrap».

Bootstrap і WordPress сильно відрізняються

Основний, перевешивающий все інше, чинник у тому, що Bootstrap проектувався не під WordPress, і працюють вони зовсім по-різному.

Часто від фреймворку тим WordPress можна досягти майже всього того ж, що і в Bootstrap, однак він робився спеціально під WordPress. Він недорогий і не має таку кількість коду: наприклад, тема Wonderflux безкоштовна і з відкритим вихідним кодом. У ній є адаптивна система сіток (як у Bootstrap, тільки менше коду), а також бібліотека функцій і фішок, яких немає в Bootstrap.

Приклад несумісності Bootstrap і wordPress це дизайн меню. З підключеним Bootstrap меню за замовчуванням WordPress вже працювати не буде: доведеться створювати користувальницький nav walker. Це не складно, якщо ви розбираєтеся в коді, але вже зайва робота.

Узагальнення

У Bootstrap, безумовно, є свої плюси. Особливо в тому випадку, якщо ви хочете отримати привабливий, ясний і адаптивний шаблон вашого сайту з великим набором JS ефектів. Даний підхід прискорить процес розробки.

Тим не менше, якщо ви хочете вичавити з Bootstrap все, доведеться витратити багато часу на вивчення. А там є, що вчити. Якщо ви не будете використовувати все, може воно того не варто.

Підводячи підсумок, я б рекомендував використовувати Bootstrap в наступних випадках:

Якщо ви дійсно готові витратити час на вивчення всіх можливостей Bootstrap

Якщо ви збираєтеся використовувати багато властивостей, як система сіток і скрипти

Якщо ви не веб-дизайнер і вам потрібний готовий дизайн

Якщо вам потрібен адаптивний дизайн, але ви не вмієте писати медіа запити

І не використовуйте Bootstrap в наступних обставин:

Якщо вам потрібна більша гнучкість у дозволах екранів, дизайн в цілому або в макеті

Якщо ви використовуєте всього один скрипт або не використовуєте систему сіток

Якщо вам потрібно швидко пофіксити щось

Якщо існує тема WordPress, функціонал якої задовольняє вашим вимогам

У кінцевому підсумку вибір за вами!