Блог про WordPress. Статьи о технической оптимизации, защите, и разработке сайтов.
Главная страница » Bootstrap WordPress

Bootstrap WordPress

Обзор 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:

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

%d такие блоггеры, как: