Использование плагина Selector-Query для создания адаптивного дизайна

СКАЧАТЬ ИСХОДНЫЕ ФАЙЛЫ

СМОТРЕТЬ ДЕМО ОНЛАЙН

Практически все слышали о медиа-запросах (@media). Их постоянно используют в различных темах и шаблонах для CMS (и не только), чтобы реализовать адаптивный дизайн. Эта техника подходит для решения многих задач, однако, когда дело доходит до управления столбцами, как правило, требуется больший контроль, чтобы разметка не «поехала».

В этой статье, будет рассмотрен jQuery-плагин Selector-Query и его использование в темах для WordPress.

Что из себя представляет этот плагин? Это что-то вроде @media, но вместо ширины окна браузера в качестве точки отсчета, используется текущая ширина элемента.

Что такое @media?

Перед тем, как перейти к основной теме статьи, давайте разберемся, что такое медиа-запросы. По существу, правило @media позволяет подключать определенные CSS-стили, только когда ширина окна браузера имеет заданный диапазон.

Медиа-запросы это сердце адаптивного дизайна. Внутри единственной веб-страницы и CSS-файла, мы можем задать все нужные блоки, которые будут показываться при различных разрешениях экрана и на разных устройствах.

При использовании медиа-запросов, нет необходимости создавать две различные версии сайта – одну для настольных компьютеров, а другую для мобильных устройств.

Давайте коротко рассмотрим использование @media. Для настольных и планшетных компьютеров мы можем задать CSS-правила со следующим медиа-запросом (данное правило работает при ширине экрана от 768px и шире):

@media only screen and (min-width: 768px) {
    /* здесь стилевые правила */
}

Для меньших устройств, таких как смартфоны, мы можем использовать другой медиа-запрос (действует при ширине экрана 767px и уже):

@media only screen and (max-width: 767px) {
    /* здесь стилевые правила */
}

Требуется больший контроль

При разработке веб-сайтов, мы можем настроить наш дизайн так, чтобы он выглядел подходящим образом на экранах различной ширины, если воспользуемся медиа-запросами. Однако когда дело доходит до разработки тем для WordPress, требуется больше контроля.

Как разработчики темы, мы хотим, чтобы она была гибкой и, в то же время, хорошо выглядела. Мы добавим шорткоды (shortcodes) и многоколоночную разметку, и дадим пользователям свободу делать то, что они хотят.

Довольный заказчик – довольный исполнитель.

Пример: рекомендательный текст

Для примера представим, что наш заказчик хочет вставить шорткод для рекомендаций внутрь столбца с максимальной шириной. Также, предположим, что шорткод был разработан таким образом, чтобы размещаться рядом с другими рекомендациями (или любым другим контентом) внутри трех и более столбцов:

Для этого случая, будет лучше оформить шорткод в другом дизайне, поместив его в более широкий контейнер. Дизайн, изображенный на картинке ниже, будет более уместен для столбца с максимальной шириной:

К сожалению, в этом случае медиа-запросы бессильны. Почему? Все просто – ширина экрана не изменяется в зависимости от того, помещен ли шорткод в один или в три столбца!

Давайте подумаем, «Как обойтись использованием классов столбцов в CSS?» Вы можете воспользоваться следующим приемом:

.testimonial {
    /* стили для двух и более столбцов */
}
@media only screen and (min-width: 768px) {
    .one-column .testimonial {
        /* переопределенные стили для одного столбца */
    }
}

Код, представленный выше, выполняет поставленную задачу, однако есть более элегантное решение: Selector-Query.

Плагин Selector-Query

Это небольшое jQuery-расширение, которое применяет различные стили для элементов при их разной ширине.

По сути, данный плагин применяет различные классы к элементам, основываясь на их текущей ширине. Когда размеры окна браузера изменяются, классы также меняются в соответствии с новыми значениями ширины элементов. После чего, вы можете использовать это для изменения внешнего вида сайта.

Selector-Query ожидает возникновения события изменения размеров окна, затем получает ширину HTML-элемента и сверяет их со значениями из массива widthStops. Если ширина элемента меньше любого из значений массива, то ему присваивается определенный класс.

Я чуть позже расскажу про widthStops подробнее и дам наглядный пример, а сейчас поговорим о том, как использовать данный плагин.

Использование Selector-Query

Для начала нужно подключить скрипт. Вы можете скачать его с GitHub repo и разместить в папке темы. Сохраните файл скрипта в папку js, чтобы не нарушать структуру темы.

После этого, можно добавить код в файл functions.php, чтобы задействовать Selector-Query внутри тега . Это сэкономит нам немного времени при загрузке страницы:

function wp_enqueue_script_selector_query() {
    wp_enqueue_script(
        'selector-query',
        get_stylesheet_directory_uri() . '/js/jquery.selectorquery.min.js',
        array( 'jquery' ),
        false,
        true
    );
}
add_action( 'wp_enqueue_scripts', 'wp_enqueue_script_selector_query' );

Использовать плагин предельно просто. Все что нужно, это вызвать метод selectorQuery для нужного элемента:

jQuery(document).ready(function($) {
    $('.selector').selectorQuery();
});

И все!

В дополнение к этому, плагин имеет две настраиваемые опции, которые применяются при запуске скрипта.

Вы можете задать их следующим образом:

$('.selector').selectorQuery({
    'widthStops': [320, 480, 640, 960, 1024, 1280], // массив значений ширины
    'classPrefix': 'max-' // префикс классов
});

Массив widthStops содержит значения ширин, которые используются, чтобы сверять их со значениями текущей ширины элемента. Префикс classPrefix используется совместно с widthStops, чтобы сгенерировать имя класса. Давайте рассмотрим пример, чтобы все прояснить.

Пример: переработанный код рекомендательного контента

Давайте переделаем вышеприведенный пример с использованием плагина Selector-Query, чтобы лучше понять как он работает и как получить преимущество при его использовании. Представим, что HTML-код рекомендации выглядит так:

<div class="testimonial">
    <img src='avatar.jpg' />
    <span>Здесь чья-то рекомендация</span>
</div>

Если контейнер с рекомендацией имеет ширину 1000px и использует значение по умолчанию из массива widthStops, плагин Selector-Query добавит два новых класса и мы получим следующее:

<div class="testimonial max-1024 max-1280">
    <img src='avatar.jpg' />
    <span>Здесь чья-то рекомендация</span>
</div>

Далее, если размер контейнера с рекомендацией уменьшится до 800px, то код будет выглядеть уже вот так:

<div class="testimonial max-960 max-1024 max-1280">
    <img src='avatar.jpg' />
    <span>Здесь чья-то рекомендация</span>
</div>

Мы можем использовать эти динамически добавляемые классы для стилизации рекомендаций при разных размерах области просмотра.

Например, класс .max-1024 можно использовать, чтобы стилизовать рекомендации при ширине экрана 1024 и выше, а класс .max-960, чтобы переопределять их внешний вид при меньших размерах.

Таким образом, мы можем создать вот такой вариант разметки:

Для этого используйте вот такой CSS-код:

/* Большая рекомендация */
.testimonial img {
    float: left;
    height: 200px;
    width: 200px;
}
.testimonial span {
    display: block;
    overflow: hidden;
}
/* Малая рекомендация */
.testimonial.max-640 img {
    float: none;
    display: block;
    margin: 0 auto;
}
/* Миниатюрная рекомендация */
.testimonial.max-480 img {
    height: 150px;
    width: 150px;
}

Самое большое преимущество в использовании плагина Selector-Query это то, что нам нет необходимости знать, где находится рекомендательный контент.

Стилизация происходит в зависимости от ширины элемента, в противовес CSS-варианту, где внешний вид «большой» рекомендации зависел от родительского элемента (помните, что мы использовали селектор .one-column .testimonial в примере выше?).

Заключение

В этой статье, мы изучили новый способ стилизации контента в зависимости от ширины окна браузера с использованием плагина Selector-Query. Надеюсь, что вы найдете применение полученным знаниям в процессе разработки своих проектов.

Если вы хотите увидеть пример использования плагина Selector-Query в действии, то запустите демонстрационный пример на GitHub.