От автора: когда у нас есть свой сайт, мы не можем игнорировать мобильные устройства. К примеру, если вашими статьями поделились в социальных сетях, вероятнее всего, ссылки на них будут открыты через смартфон. Если вы хотите привлечь посетителей на свой сайт, вам нужно обеспечить им хорошую картинку на мобильных устройствах. Вам придется использовать адаптивные темы.
В WordPress 4.5 в кастомайзере тем был представлен новый адаптивный вид. В этой статье мы узнаем, что такое адаптивный вид в кастомайзере тем, почему он так полезен, и как с ним работать разработчику.
Что такое адаптивный режим просмотра
Адаптивный режим просмотра позволяет визуализировать сайт в формате, отличающемся от текущего. К примеру, прямо через браузер можно посмотреть, как ваш сайт будет отображаться на смартфонах. Настоящий смартфон для этого не нужен.
Очень удобно смотреть внесенные через кастомайзер изменения на устройствах с маленьким экраном, даже не сохраняя их. Если вам нужно протестировать сайт на мобильных устройствах, вы ничего не сломаете.
На самом деле, адаптивный вид уменьшает размер окна просмотра сайта. Почти то же самое происходит, когда вы изменяете размер окна браузера, или при использовании встроенной в браузер функции адаптивного просмотра.
Чтобы узнать, как ваш сайт будет выглядеть на устройствах с небольшим экраном, достаточно изменить размер окна (или размер видимой области просмотра в случае с адаптивным видом). Однако с кастомайзером тем возникает проблема: сайдбар также изменит размер (сам кастомайзер). Не очень практично, если нужно проверить сайт на очень маленьких экранах.
Преимущество адаптивного режима просмотра в кастомайзере тем в том, что изменяется только превью сайта: изменяется только то, что вы хотите проверить. Тесты можно проводить намного быстрее и проще.
Более того, обычные пользователи не всегда знают о встроенной в браузер функции адаптивного просмотр и не имеют привычки изменять размер окна браузера, чтобы проверить сайт. Благодаря своей простоте и точности, режим адаптивного просмотра в кастомайзере тем стал отличным инструментом.
Как использовать режим адаптивного просмотра
Чтобы использовать режим адаптивного просмотра, необходимо зайти в кастомайзер тем. Зайти в кастомайзер можно по ссылке «Customizer» в меню «Appearence» в панели администратора WP. Также после авторизации в кастомайзер можно перейти по кнопке «Customize» с любой страницы в верхнем меню.
Кастомайзер тем разбит на две части: превью сайта справа и сайдбар слева. В нижней части сайдбара расположены кнопки для включения режима адаптивного просмотра.
Нам доступно несколько форматов. По умолчанию это режим настольного компьютера, планшета (в портретном режиме) и смартфона (тоже в портретном режиме). Для активации режима необходимо кликнуть на соответствующую кнопку, после чего правая часть с превью сайта изменит размер. Вам ничего делать не нужно.
Давайте проясним, эти кнопки не изменяют размер самого сайта. С их помощью можно посмотреть, как будет выглядеть ваш сайт на маленьких устройствах. Если вы активируете режим смартфона, пользователь вашего сайта будет видеть полноценную версию!
Как выбрать доступные режимы просмотра
Если вы разрабатываете темы (для себя или для всех), вам нужно делать их адаптивными. Как разработчик, для теста адаптивности темы вы предпочтете использовать встроенный инструмент браузера, так как он более полный, чем режим адаптивного просмотра в кастомайзере тем.
Однако пользователи вашей темы предпочтут работать с адаптивным просмотром в кастомайзере, для них он удобнее. Вот поэтому вы не можете игнорировать эту функцию.
Для активации режима адаптивного просмотра вам не нужно делать ровным счетом ничего. Эта функция появляется у всех после обновления WP до версии 4.5 или выше. Однако вы можете настроить доступные режимы просмотра.
К примеру, если ваша тема не адаптивна, вы можете выключить режим адаптивного просмотра. Также можно отключить отдельные режимы. Если по каким-либо причинам ваша тема работает только на смартфонах, вы можете включить только этот вид и отключить десктопный. Также данную функцию можно использовать для выбора вида по умолчанию.
Управлять адаптивными режимами можно через фильтр customize_previewable_devices. В функцию фильтра передается один параметр (доступные режимы просмотра), а возвращаются все доступные виды. Ниже представлен стандартный код для файла темы functions.php:
|
1 2 3 4 5 |
<?php add_filter('customize_previewable_devices', function($devices){ return $devices; }); ?> |
Что то же самое, что:
|
1 2 3 4 5 6 |
<?php function manage_previewable_devices($devices) { return $devices; } add_filter('customize_previewable_devices', 'manage_previewable_devices'); ?> |
Чтобы управлять устройствами, нам нужно знать, что хранится в переменной $devices. Переменная представляет собой ассоциативный массив с режимами просмотра. По умолчанию массив имеет следующий вид:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
Array ( [desktop] => Array ( [label] => Enter desktop preview mode [default] => true ) [tablet] => Array ( [label] => Enter tablet preview mode ) [mobile] => Array ( [label] => Enter mobile preview mode ) ) |
Как только WP выполнить фильтр customize_previewable_devices, на экране выведется список видов из массива. В первой ячейке ключ default задан в true, т.е. этот вид будет установлен по умолчанию (даже если в других ячейках будет точно такой же ключ со значением true). Ячейка label не показывается на экране, даже в атрибуте title. Это поле используется скрин ридером. Вероятнее всего, вам даже не понадобится менять значения этих ячеек.
Для удаления режима просмотра необходимо стереть из массива соответствующую ячейку. К примеру, если необходимо отключить режим планшета, можно использовать строку ниже. Данная строка называется фильтром:
|
1 2 3 |
<?php unset($devices['tablet']); ?> |
Для полного отключения режима адаптивного просмотра верните пустой массив:
|
1 2 3 4 5 |
<?php $devices = array(); // ИЛИ: return array(); ?> |
Для изменения вида по умолчанию необходимо сделать две вещи: переключить значение default текущего вида по умолчанию в false, а нужному режиму просмотра задать атрибут default: true. К примеру, код ниже сделает мобильный вид видом по умолчанию.
|
1 2 3 4 |
<?php $devices['desktop']['default'] = false; $devices['mobile']['default'] = true; ?> |
Как настроить размер окна режима просмотра
Как и положено, десктопный режим занимает все доступное пространство. Но, может быть, вы хотите узнать размеры других режимов просмотра.
Мобильный режим просмотра имитирует экран в портретном режиме с размером 320 х 480 пикселей. Режим планшета имитирует экран в портретном режиме размером 6 х 9 дюймов (по диагонали от 10 до 11 дюймов).
Это значения по умолчанию. Они заданы в CSS файле, и их нельзя редактировать через фильтр, который мы использовали выше. Но если вы все же хотите изменить стандартные значения, это можно сделать с помощью своего CSS файла. В ядро WP лезть не нужно и не рекомендуется.
Создайте CSS файл в папке с темой. Я назову файл custom-responsive-views.css и помещу его в корень папки моей темы. Вы же можете выбрать свое название и директорию.
Зайдите в файл functions.php темы, подключите новый файл стилей при помощи экшена admin_enqueue_scripts.
|
1 2 3 4 5 |
<?php add_action('admin_enqueue_scripts', function() { wp_enqueue_style('custom-responsive-views', get_template_directory_uri() . '/custom-responsive-views.css'); }); ?> |
Теперь WP будет считывать этот файл и изменять стили. Разберем конкретный пример. Скажем, вы хотите показать режим планшета в вертикальном режиме. Для этого вам понадобится прописать код ниже в ваш CSS файл.
|
1 2 3 4 5 |
.preview-tablet .wp-full-overlay-main { margin: auto 0 auto -4.5in; width: 9in; height: 6in; } |
Не забудьте подстроить свойство margin, чтобы вид всегда отображался по центру. Если нужно изменить мобильный вид, используйте класс .preview-mobile вместо preview-tablet. Десктопный режим можно изменять с помощью класса .preview-desktop. Благодаря этим простым правилам CSS, вы можете прописать любой размер для выбранного режима просмотра. Ниже показан скриншот планшетного режима из моего CSS файла.
Как создать новый адаптивный режим просмотра
В отличие от встроенного инструмента, режим адаптивного просмотра в WP не позволяет изменять размер вида. То есть если пользователь захочет посмотреть сайт на устройстве с большим экраном, он не сможет увеличить мобильный вид.
Может быть, такая функция будет добавлена в будущем. Однако если вы все же хотите увеличить мобильный вид или создать вертикальный вид для планшета без необходимости вносить изменения в стандартные режимы просмотра, вы можете создать свои собственные виды.
Для этого давайте вернемся в колбэк функцию из фильтра customize_previewable_devices. Как мы наблюдали выше, WP показывает все вхождения массива $devices в виде кнопок. Чтобы создать новый вид, необходимо добавить свою ячейку в массив, как показано ниже.
|
1 2 3 4 5 |
<?php $devices['tablet-landscape'] = array( 'label' => 'Enter tablet preview mode (landscape)' ); ?> |
Можно сделать этот вид видом по умолчанию при помощи ключа default со значением true (не забудьте выключить этот же ключ в другом виде).
WP сгенерирует новую кнопку с соответствующей колбэк функцией в JS: по клику на кнопку превью автоматически будет подхватывать класс CSS. В примере выше вид подхватывал класс preview-tablet-landscape.
Тут возникает проблема: созданная нами кнопка почти не видна. Если знать где искать, ее можно найти, но нам же нужно что-то получше. Для правильного отображения необходимо добавить стилей. Для этого мы будем использовать созданный нами CSS файл.
Иконка в кнопке представляет собой псевдоэлемент :before. Найти кнопку можно по указанному имени. В примере выше за иконку отвечает строка .wp-full-overlay-footer .devices .preview-tablet-landscape:before. Вам нужно всего лишь указать свою иконку. Кнопки в WP используют шрифт-иконки Dashicons. Полный список иконок можно найти на WordPress Developer Resources. В нашем примере у нас планшет, возьмем иконку f471. CSS код:
|
1 2 3 |
.wp-full-overlay-footer .devices .preview-tablet-landscape:before { content: '\f471'; } |
Наш планшет находится в вертикальном режиме, а иконка в портретном. Тут нам поможет CSS: код ниже переворачивает иконку в вертикальный режим.
|
1 2 3 4 |
.wp-full-overlay-footer .devices .preview-tablet-landscape:before { transform: scaleX(-1) rotate(0.25turn); content: '\f471'; } |
Осталось сделать одну вещь – указать размеры вашего вида. Сделать это можно точно так же, как мы делали ранее в том же CSS файле. Ниже представлен CSS код для планшета в вертикальном режиме просмотра.
|
1 2 3 4 5 6 7 8 |
.preview-tablet-landscape .wp-full-overlay-main { margin: auto 0 auto -4.5in; width: 9in; height: 6in; max-height: 100%; max-width: 100%; left: 50%; } |
Как создать JavaScript триггер
Можно создать JS функцию, которая будет запускаться при изменении адаптивного вида. Функция полезна в случаях, если ваша тема реагирует на событие resize. В кастомайзере тем окно не изменяется, и это событие не сработает.
Тогда можно использовать функцию wp.customize.previewedDevice.bind(). Функция принимает аргумент – строка с новым видом. К примру, если вид изменился на мобильный, в строке будет mobile. В случае с нашим новым видом это будет tablet-landscape. Ниже пример, который показывает новый вид в консоли.
|
1 2 3 |
wp.customize.previewedDevice.bind(function(new_device) { console.log(Адаптивный режим просмотра был изменен на: ' + new_device); }); |
Этот код можно поместить в JS файл и подключить с помощью функции wp_enqueue_script(). Для вызова функции нам подойдет экшен admin_enqueue_scripts, который мы вызывали выше.
|
1 2 3 4 5 6 |
<?php add_action('admin_enqueue_scripts', function() { wp_enqueue_style('custom-responsive-views', get_template_directory_uri() . '/custom-responsive-views.css'); wp_enqueue_script('responsive-views-callback', get_template_directory_uri() . '/responsive-views-callback.js', array(), false, true); }); ?> |
Заключительные слова
Адаптивный режим просмотра в кастомайзере тем отлично подходит конечным пользователям, которые хотят просто увидеть изменения на всех устройствах. Довольно просто можно как отключить, так и создать новые режимы просмотра. Это первая версия данной функции. В будущих версиях мы можем увидеть что-то новое. Например, изменение размера окна.
Для тех, кому нужны примеры из статьи, я создал плагин, который можно загрузить по ссылке. Этот плагин я создал лишь по одной причине: создать плагин-пример гораздо легче и понятнее, чем тему-пример. Тем не менее, функционал плагина относится к темам. То есть данный функционал нужно всегда реализовывать в теме, а не плагине.
Автор: Jérémy Heleine
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
