Используем фреймворк Bootstrap для создания адаптивной темы WordPress
Что представляет собой фреймворк Twitter Bootstrap?
Bootstrap – это open source фреймворк, созданный на базе JavaScript и CSS и оперирующий отдельным языком, представляющим собой расширение каскадных таблиц – LESS. Фреймворк обладает множеством встроенных инструментов, которые могут использоваться вместе с HTML или с любыми системами управления контентом (включая WordPress), поддерживающими внешние стили. Таким образом, его можно применять для создания любых веб-сайтов. Фреймворк содержит в себе определение базовых стилей для всех основных возможностей, применяющихся на сайтах: для аккордеонов, уведомлений, выпадающих списков, групп кнопок, каруселей, лейблов, списков, модальных окон, навигационных панелей, навигационных вкладок, заголовков страниц, прогресс-баров, миниатюр, подсказок и т.д.
Все эти компоненты могут легко использоваться при создании адаптивной темы WordPress, однако они требуют дополнительного кодирования либо установки специальных плагинов, поскольку сам по себе WordPress не имеет никаких средств для добавления компонентов Bootstrap через консоль.
Поскольку фреймворк написан на CSS и JavaScript, в нем легко могут разобраться различные веб-разработчики, потому он активно используется дизайнерами, девелоперами, профессионалами и новичками. Однако стоит заметить, что Bootstrap не имеет полной поддержки всех возможностей HTML5 и CSS3. Это не выглядит значительной проблемой, поскольку большая часть браузеров не поддерживает последние стандарты CSS и HTML.
Шаг 1. Загружаем Bootstrap.
Первый шаг на пути создания адаптивной темы WordPress – загрузка фреймворка Bootstrap. Актуальная на данный момент версия Bootstrap может быть загружена отсюда. Интересная особенность: вы можете изменять загружаемый файл в зависимости от своих требований и целей. Мы советуем вам скачать уже настроенную версию по данной ссылке. Не будем расширять руководство, рассказывая о том, что стоит включить, а что исключить из загружаемого файла – просто проверьте, все ли вам требуется, и загрузите файл. Размер файла составляет примерно 300-500 Кб. Извлеките Bootstrap в папку с аналогичным названием и поместите ее в папку с вашей темой, к которой вы хотите добавить возможности Bootstrap.
Ваша папка Bootstrap будет содержать в себе три папки с названиями css, js и img. Что в них содержится, можно определить по их названию. Если вы скачивали измененную версию фреймворка по ссылке, предложенной выше, то в таком случае у вас будет два CSS-файла в папке css: bootstrap.css и bootstrap.min.css. Если вы качали фреймворк из других источников, убедитесь в том, что ваша папка css содержит в себе файл bootstrap-responsive.css, который необходим для создания адаптивного веб-сайта.
Шаг 2. Подключение Bootstrap в хэдере.
После загрузки Bootstrap нам понадобится подключить его в PHP-файле WordPress, который содержит в себе описания Doctype и Meta. В большинстве тем это файл header.php, однако в некоторых редчайших случаях это может быть также index.php. Если вы создаете вашу тему с нуля, лучше всего подключить Bootstrap в хэдере.
Важный момент: несмотря на то, что Bootstrap не поддерживает на 100% HTML5, он использует именно эту версию языка, поэтому стоит скорректировать соответствующим образом ваше объявления DOCTYPE. Вы можете объявить Bootstrap в хэдере следующим образом:
<!DOCTYPE html>
<html>
<head>
<title>Responsive Bootstrap theme</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap declaration-->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
Этот код позволяет подключить Bootstrap к HTML и PHP.
Примечание: если вы скачивали не измененную версию фреймворка, то в таком случае вам надо подключить дополнительную стилевую таблицу. Просто добавьте следующую строку кода сразу после тегов META:
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet" media = "screen">
Шаг 3. Импорт Bootstrap-стилей.
На данном шаге мы должны импортировать CSS в основной файл style.css используемой темы. Вы можете импортировать стили следующим образом:
@import url('bootstrap/css/bootstrap.css');
/* if you have downloaded non customized version */
@import url('bootstrap/css/bootstrap-responsive.css');
Этот код должен следовать сразу после информационного комментария (заголовка) в style.css, перед любым другим кодом. После импорта вы можете добавить любой CSS-код и любую стилизацию, которая вам необходима, однако убедитесь в том, что компоненты, присутствующие в bootstrap.css, не будут перекрываться вашими новыми стилями (если вы намеренно не желаете сделать это).
Шаг 4. Резиновый и фиксированный макет.
Фреймворк Bootstrap использует 12-колоночную сетку шириной 940px, которая может адаптироваться к ширине экрана 724px и 1170px. Обратиться к каждой колонке можно с помощью класса .span*, где звездочка определяет соответствующее число колонок, которое будет включать в себя блок div.
Небольшой пример:
<div class="row">
<div class="span4">
<h2>Heading</h2>
<p>Lorem Ipsem </p>
<p><a class="btn" href="#">View details</a></p>
</div>
</div>
<div class="row">
<div class="span8">
<h2>Heading2</h2>
<p>Lorem Ipsem 2 </p>
<div class="row">
<div class="span6">Level 2</div>
<div class="span2">Level 2</div>
</div>
<p><a class="btn" href="#">View details 2</a></p>
</div>
</div>
Этот код создаст два блока, первый из которых будет включать в себя 4 колонки в первой строке, а второй – 8 колонок в следующей строке. Тег
<a class=”btn” href=”#”>
добавит кнопку в самом конце блока контента. Как вы могли заметить, я добавил внутри строки с 8 колонками еще одну строку. Это один из способов создания вложенных колонок.
Фреймворк поддерживает два вида сеточных макетов – резиновый и фиксированный. Вы можете использовать любой из них, просто изменив
<div class = “row”>
в примере выше на
<div class=”row-fluid”>
для резинового макета и
<div class=”container”>
для фиксированного макета. Пример:
<div class="row-fluid"> /* instead of class= row*/
<div class="span4">
<h2>Heading</h2>
<p>Lorem Ipsem </p>
<p><a class="btn" href="#">View details</a></p>
</div>
</div>
<div class="row-fluid">
<div class="span8">
<h2>Heading2</h2>
<p>Lorem Ipsem 2 </p>
<div class="row-fluid">
<div class="span6">Level 2</div>
<div class="span2">Level 2</div>
</div>
<p><a class="btn" href="#">View details 2</a></p>
</div>
</div>
Аналогичным образом вы можете создать двухколоночную резиновую сетку с помощью тега
<div class = “container-fluid”>
. Это хороший вариант для создания страниц, имеющих два разных столбца. Правда, в WordPress вы можете добавить сайдбар и без лишних танцев с бубном, однако стоит держать в памяти указанную возможность Bootstrap.
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<!—This will create a side bar-->
<!—after you add content obviously>
</div>
<div class="span7”>
<!—The body content Body content-->
</div>
</div>
</div>
Шаг 5. Адаптивные классы и интересные варианты их использования.
До настоящего момента мы вели речь только про макеты и сетки. Однако главная красота Bootstrap заключается в использовании адаптивного дизайна и адаптивных тегов. Фреймворк Bootstrap предлагает набор различных классов, которые могут применяться для проектирования адаптивной разметки. Самыми популярными классами являются .min-width и .max-width. Однако стоит упомянуть и другие, не менее полезные классы:
- .visible-phone: этот класс сделает компонент видимым только в том случае, если размер экрана будет меньше стандартного размера экрана для планшетов и настольных компьютеров. Стандартный размер экрана для планшетов варьируется от 768px к 979px. Все, что больше, относится к настольным компьютерам. Все, что меньше – к мобильным устройствам.
- .visible-tablet: аналогично предыдущему классу, делает компонент видимым для планшетов.
- .visible-desktop: делает компонент видимым для настольных компьютеров.
- .hidden-phone: скрывает определенные компоненты в мобильном представлении.
- .hidden-tablet: скрывает определенные компоненты в планшетном представлении.
- .hidden-desktop: скрывает определенные компоненты в десктопном представлении.
Кроме того, вы можете использовать следующие медиа-запросы в CSS-файле для обработки определенного стиля в соответствии с заданным размером экрана:
@media (min-width: 1200px)
{
/* Style specific to large desktops */
}
@media (min-width: 768px) and (max-width: 979px)
{
/* Style specific to desktops and landscape rendering in tablets*/
}
@media (max-width: 767px)
{
/* Style specific to portrait rendering in tablets */
}
@media (max-width: 480px)
{
/* Style specific to rendering in phones */
Заключение
Как было отмечено выше, Bootstrap обладает разнообразными возможностями, однако требует хороших знаний в области HTML и CSS, чтобы в полной мере раскрыть свою мощь. Он позволяет сэкономить время, которое обычно тратится на ручное создание всех компонентов с нуля. Если вы не слишком хорошо разбираетесь в программировании, доверьте эту работу опытным разработчикам тем WordPress.
Источник: www.wordpressintegration.com
