Від автора: коли у нас є свій сайт, ми не можемо ігнорувати мобільні пристрої. Приміром, якщо вашими статтями поділилися в соціальних мережах, найімовірніше, посилання на них будуть відкриті через смартфон. Якщо ви хочете залучити відвідувачів на свій сайт, вам потрібно забезпечити їм гарну картинку на мобільних пристроях. Вам доведеться використовувати адаптивні теми.
В WordPress 4.5 кастомайзере тим був представлений новий адаптивний вигляд. У цій статті ми дізнаємося, що таке адаптивний вигляд кастомайзере тим, чому він такий корисний, і як з ним працювати розробнику.
Що таке адаптивний режим перегляду
Адаптивний режим перегляду дозволяє візуалізувати сайт у форматі, відмінному від поточного. Приміром, прямо через браузер можна подивитися, як ваш сайт буде відображатися на смартфонах. Цей смартфон для цього не потрібен.
Дуже зручно дивитися внесені через кастомайзер зміни на пристроях з маленьким екраном, навіть не зберігаючи їх. Якщо вам потрібно протестувати сайт на мобільних пристроях, ви нічого не зламаєте.
Насправді, адаптивний вид зменшує розмір вікна перегляду сайту. Майже те ж саме відбувається, коли ви змінюєте розмір вікна браузера, або при використанні вбудованої в браузер функції адаптивного перегляду.
Щоб дізнатися, як ваш сайт буде виглядати на пристроях з невеликим екраном, досить змінити розмір вікна (або розмір видимої області перегляду у випадку з адаптивним видом). Однак з кастомайзером тим виникає проблема: сайдбар також змінить розмір (сам кастомайзер). Не дуже практично, якщо потрібно перевірити сайт на дуже маленьких екранах.
Перевага адаптивного режиму перегляду в кастомайзере тим в те, що змінюється лише превью сайту: змінюється лише те, що ви хочете перевірити. Тести можна проводити набагато швидше і простіше.
Більше того, звичайні користувачі не завжди знають про вбудована в браузер функції адаптивного перегляд і не мають звички змінювати розмір вікна браузера, щоб перевірити сайт. Завдяки своїй простоті і точності, режим адаптивного перегляду в кастомайзере тим став відмінним інструментом.
Як використовувати режим адаптивного перегляду
Щоб використовувати режим адаптивного перегляду, необхідно зайти в кастомайзер тим. Зайти в кастомайзер можна за посиланням «Customizer» в меню «Appearence» в панелі адміністратора WP. Також після авторизації в кастомайзер можна перейти по кнопці «Customize» з будь-якої сторінки у верхньому меню.
Кастомайзер тим розбитий на дві частини: прев’ю сайту праворуч і сайдбар ліворуч. У нижній частині сайдбара розташовані кнопки для включення режиму адаптивного перегляду.
Нам доступно кілька форматів. За замовчуванням це режим настільного комп’ютера, планшета (в портретному режимі) і смартфона (теж в портретному режимі). Для активації режиму необхідно натиснути на відповідну кнопку, після чого права частина з превью сайту змінить розмір. Вам не потрібно нічого робити.
Давайте з’ясуємо, ці кнопки не змінюють розмір самого сайту. З їх допомогою можна подивитися, як буде виглядати ваш сайт на маленьких пристроях. Якщо ви активуєте режим смартфона, користувач вашого сайту буде бачити повноцінну версію!
Як вибрати доступні режими перегляду
Якщо ви розробляєте теми (для себе або для всіх), вам потрібно робити їх адаптивними. Як розробник, для тіста адаптивності теми ви віддасте перевагу використовувати вбудований інструмент браузера, так як він більш повний, ніж режим адаптивного перегляду в кастомайзере тим.
Однак користувачі вашої теми віддадуть перевагу працювати з адаптивним переглядом в кастомайзере, для них він зручніше. Ось тому ви не можете ігнорувати цю функцію.
Для активації режиму адаптивного перегляду вам не потрібно робити рівним рахунком нічого. Ця функція з’являється у всіх після оновлення до версії WP 4.5 або вище. Однак ви можете налаштувати доступні режими перегляду.
Наприклад, якщо ваша тема не адаптивна, ви можете вимкнути режим адаптивного перегляду. Також можна відключити окремі режими. Якщо з будь-яких причин ваша тема працює тільки на смартфонах, ви можете включити тільки цей вид і відключити десктопний. Також дану функцію можна використовувати для вибору виду за замовчуванням.
Керувати адаптивними режимами можна через фільтр customize_previewable_devices. У функцію фільтра передається один параметр (доступні режими перегляду), а повертаються всі доступні види. Нижче представлений стандартний код для файлу теми functions.php:
Що те ж саме, що:
Щоб керувати пристроями, нам потрібно знати, що зберігається у змінній $devices. Змінна являє собою асоціативний масив з режимами перегляду. За замовчуванням масив має наступний вигляд:
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. Це поле використовується скрін рідером. Найімовірніше, вам навіть не знадобиться змінювати значення цих осередків.
Для видалення режиму перегляду необхідно стерти з масиву відповідну клітинку. Приміром, якщо необхідно вимкнути режим планшета, можна використовувати рядок нижче. Дана рядок називається фільтром:
Для повного відключення режиму адаптивного перегляду поверніть порожній масив:
Для зміни виду за промовчанням, необхідно зробити дві речі: переключити значення default поточного виду за замовчуванням в false, а потрібного режиму перегляду задати атрибут default: true. Наприклад, код нижче зробить мобільний використання за замовчуванням.
Як налаштувати розмір вікна режиму перегляду
Як і належить, десктопний режим займає весь доступний простір. Але, може бути, ви хочете дізнатися розміри інших режимів перегляду.
Мобільний режим перегляду імітує екран в портретному режимі з розміром 320 х 480 пікселів. Режим планшета імітує екран в портретному режимі розміром 6 х 9 дюймів (по діагоналі від 10 до 11 дюймів).
Це значення за замовчуванням. Вони задані в CSS файлі, і їх не можна редагувати через фільтр, який ми використовували вище. Але якщо ви все ж хочете змінити стандартні значення, це можна зробити за допомогою свого CSS файлу. В ядро WP лізти не потрібно і не рекомендується.
Створіть CSS файл в папці з темою. Я назву файл custom-responsive-views.css і закрию його в корінь папки моєї теми. Ви ж можете вибрати свою назву і директорію.
Зайдіть в файл functions.php теми, приєднайте новий файл стилів за допомогою екшену admin_enqueue_scripts.
Тепер WP буде читати цей файл, змінювати стилі. Розберемо конкретний приклад. Скажімо, ви хочете показати режим планшета у вертикальному режимі. Для цього вам знадобиться прописати наступний код в ваш CSS файл.
.preview-tablet .wp-full-overlay-main {
margin: auto 0 auto -4.5 in;
width: 9in;
height: 6in;
}
Не забудьте налаштувати властивість margin, щоб вигляд завжди відображався по центру. Якщо потрібно змінити мобільний вид, використовуйте клас .preview-mobile замість preview-tablet. Десктопний режим можна змінити з допомогою класу .preview-desktop. Завдяки цим простим правилам CSS, ви можете прописати будь-який розмір для вибраного режиму перегляду. Нижче показаний скріншот планшетного режиму з мого CSS файлу.
Як створити новий адаптивний режим перегляду
На відміну від вбудованого інструменту, режим адаптивного перегляду в WP не дозволяє змінювати розмір виду. Тобто якщо користувач захоче подивитися сайт на пристрої з великим екраном, він не зможе збільшити мобільний вид.
Може бути, така функція буде додана в майбутньому. Однак якщо ви все ж хочете збільшити мобільний вид або створити вертикальний вигляд для планшета без необхідності вносити зміни в стандартні режими перегляду, ви можете створити свої власні види.
Для цього давайте повернемося в колбек функцію фільтра customize_previewable_devices. Як ми бачили вище, WP показує всі входження масиву $devices у вигляді кнопок. Щоб створити новий вид, необхідно додати свій осередок у масив, як показано нижче.
‘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 код:
.wp-full-overlay-footer .devices .preview-tablet-landscape:before {
content: ‘\f471’;
}
Наш планшет знаходиться у вертикальному режимі, а іконка в портретному. Тут нам допоможе CSS: код нижче перевертає іконку в вертикальний режим.
.wp-full-overlay-footer .devices .preview-tablet-landscape:before {
transform: scaleX(-1) rotate(0.25 turn);
content: ‘\f471’;
}
Залишилося зробити одну річ – вказати розміри вашого виду. Зробити це можна точно так само, як ми робили раніше в тому ж CSS файлі. Нижче представлений CSS код для планшета у вертикальному режимі перегляду.
.preview-tablet-landscape .wp-full-overlay-main {
margin: auto 0 auto -4.5 in;
width: 9in;
height: 6in;
max-height: 100%;
max-width: 100%;
left: 50%;
}
Як створити тригер JavaScript
Можна створити JS функцію, яка буде запускатися при зміні адаптивного виду. Функція корисна у випадках, якщо ваша тема реагує на подію resize. У кастомайзере тим вікно не змінюється, і ця подія не спрацює.
Тоді можна використовувати функцію wp.customize.previewedDevice.bind(). Функція приймає аргумент – рядок з новим видом. До примру, якщо вид змінився на мобільний, у рядку буде mobile. У випадку з нашим новим виглядом це буде tablet-landscape. Нижче приклад, який показує новий вигляд консолі.
wp.customize.previewedDevice.bind(function(new_device) {
console.log(Адаптивний режим перегляду було змінено на: ‘+ new_device);
});
Цей код можна помістити в JS файл і підключити за допомогою функції wp_enqueue_script(). Для виклику функції нам підійде екшен admin_enqueue_scripts, який ми викликали вище.
Заключні слова
Адаптивний режим перегляду в кастомайзере тим відмінно підходить кінцевим користувачам, які хочуть просто побачити зміни на всіх пристроях. Досить просто можна відключити, так і створити нові режими перегляду. Це перша версія даної функції. В майбутніх версіях ми можемо побачити щось нове. Наприклад, зміна розміру вікна.
Для тих, кому потрібні приклади зі статті, я створив плагін, який можна завантажити за посиланням. Цей плагін я створив лише з однієї причини: створити плагін-приклад набагато легше і зрозуміліше, ніж тему-приклад. Тим не менш, функціонал плагіна відноситься до тем. Тобто даний функціонал потрібно завжди реалізовувати в темі, а не плагіні.
