Bootstrap WordPress
Опубликовано: 01.09.2018
Обзор Bootstrap
Bootstrap представляет собой фронтенд фреймворк для создания веб интерфейсов. В нём используются технологии HTML, CSS и JS.
Предыдущая версия — Bootstrap 3.
Новая бета версия — Bootstrap 4.
Источники:
к содержанию ↑
Bootstrap 3 или 4
В новом проекте, конечно, лучше использовать Bootstrap 4.
Наиболее значительные улучшения:
поддержка flexbox по умолчанию (ie8 пришлось дропнуть); перешли от Less к Sass; добавили в сетку новый ряд для больших экранов (xl); изменили медиа запросы (вместо @media (min-width: @screen-sm-min) {}, можно писать @include media-breakpoint-up(sm) {}; убрали компоненты panels, thumbnails, и wells. Вместо них пришел cards; Reboot — новая нормализация/сброс стилей;Были изменены, убраны добавлены классы практически во всех компонентах.
Список всех изменений можно посмотреть здесь — https://v4-alpha.getbootstrap.com/migration/ .
к содержанию ↑
Bootstrap и WordPress
Bootstrap можно установить многими способами, каждый из которых описан на официальном сайте.
Например, можно скачать скомпилированные файлы или просто скопировать ссылку на CDN и вставить в заголовок своего сайта.
Для WordPress вы найдете готовые сниппеты с хуком wp_enqueue_scripts для подключения скриптов.Самый верный способ — взять готовую Bootstrap тему. Если вы конечно не верстаете шаблон самостоятельно.
Еще лучше, если в тему встроен менеджер задач (Gulp) для работы с Sass, потому что это реально добавляет гибкости. Пользоваться этими инструментами не сложнее, чем научиться работать с Bootstrap.
к содержанию ↑
Темы для WordPress
Лучшие темы с интегрированным фреймворком Bootstrap.
Understrap — код на github , и дочерняя тема . Базируется на стартовой теме Underscores, использует Bootstrap 4 + Sass. Тема с рейтингом свыше тысячи звезд и активно развивается.roots.io/sage — стартовая тема, которая использует принципы и инструменты современной веб разработки. Отлично подходит для тех, кто занимается созданием сайтов.
MaterialWP — Основана на Underscores, Material Design, и Bootstrap. К сожалению, новых коммитов в код не поступает. Но, проекты на которых она основана, продолжают свою активную жизнь: _s (Underscores) и Material Design for Bootstrap . Поэтому при желании можно собрать, это интересная связка.
github.com/SimonPadbury — в профиле этого разработчика можно найти проекты bst, b4st и wbst. Стартовые темы, соответственно, на Bootstrap 3, Bootstrap 4, Bootstrap + WooCommerce.
Unite — кастомизируемая тема, использует Bootstrap 3 + Options Framework, поддерживает WooCommerce, плиточную галерею при активном модуле Jetpack. Тема подходит для женской тематики, для путешествий и другие темы связанные с фотографиями.
Аналогичная тема от этого же автора Sparkling .
Вообще, рекомендую посмотреть другие красивые Bootstrap шаблоны в его профиле на Github .
Kratos — приятная Boostrap 3 тема с большим количеством настроек (Options Framework). Минус в том, что настройки в админке на китайском языке, поэтому их нужно предварительно перевести.Первые четыре пункта указывают на стартовые темы, по типу собери себе сам.
Остальные предлагают готовый дизайн на Bootstrap 3, с легковесным фреймворком Options, который также дает хорошую возможность настроить сайт под себя.Искать премиум темы на маркете советую с осторожностью. Их просто «шпигуют» функционалом настолько, что становится трудно ими пользоваться, поддерживать, а также как правило страдают чистота кода и производительность.
Хотите красивый дизайн? Купите HTML шаблон, и натяните его на движок WordPress самостоятельно (можно использовать Understrap). Будете в выигрыше.
Умеете немного верстать? Выучив сетку и некоторые компоненты Bootstrap, с применением инструментов Sass, Gulp вы сможете собрать собственный дизайн, с хорошей HTML разметкой и оптимизацией.
По использованию данных технологий давно протоптаны дорожки, и в интернете есть море информации, которая поможет решить большинство возникающих вопросов на старте.
А чтобы этих вопросов изначально не возникало, очень рекомендую посмотреть внушительный список ресурсов для Bootstrap:
