Більше результатів...

Загальні селектори
Тільки точні збіги
Шукати у заголовках
Шукати у контенті
Вибір типів постів
Фільтрувати за категоріями
FAQ
Hostenko
Натхнення
Відео уроки
Новини
Плагіни
Теми
Уроки
Хакі

Вже не новий екран від Apple Retina Display Як і раніше, залишається актуальною темою для дискусій веб-розробників і дизайнерів. Тим не менш, розробники та дизайнери WordPress вже почали створювати теми та плагіни, які підтримують високу роздільну здатність Retina Display.

Чи варто переробляти мій сайт, щоб забезпечити підтримку параметрів Retina Display? Таким питанням досі задається кожен власник сайту. Якщо вас також давно цікавить це питання, то можливо сьогодні ви знайдете відповідь після прочитання цієї статті.

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!

Дивіться також:

Що таке Retina Display?

Retina Display – це запатентована торгова марка, що використовується компанією Apple для HiDPI дисплеїв високої роздільної здатності, яку вони успішно застосували у своїх останніх пристроях: iPad, iPhone та MacBook Pro. За рахунок цієї технології дисплеї мають набагато більшу щільність пікселів, ніж старі пристрої (приблизно 300 DPI). І за рахунок цього на екрані виводяться чіткіші зображення та плавні шрифти.

Тим не менш, варто відзначити, що на сьогоднішній день вже існують пристрої, в яких кількість пікселів значно вища, і це стосується не лише пристроїв від Apple.

Включаємо підтримку для Retina екранів за допомогою безкоштовних тем та плагінів WordPress

За допомогою Retina роздільна здатність екрану на Apple MacBook Pro досягає 2880×1800 при 220 пікселях на дюйм. Можна подумати, що на 15 дюймовому екрані об'єкти можуть виводитися в меншому масштабі, ніж вони є насправді.

Які нюанси можуть виникнути під час використання Retina?

Багато хто погодиться, що з теперішнім розвитком технологій дуже важливо оптимізувати свої сайти під різні мобільні пристрої. До того ж, багато хто зараз користується не тільки гаджетами Apple, але й іншими пристроями зі схожими можливостями. Тому адаптація сайтів під їхні екрани означає йти в ногу з часом та з технологіями. Це вже навіть не розкіш, а потреба.

Включаємо підтримку для Retina екранів за допомогою безкоштовних тем та плагінів WordPress

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

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

Як додати підтримку Retina до свого сайту WordPress?

Додати підтримку Retina до теми WordPress, що використовується вами, дуже просто. Для цього достатньо завантажити нове зображення зі збільшеною 2x-роздільною здатністю і за допомогою одного корисного скрипту вказати бажану роздільну здатність – стандартну або надвисоку.

Скрипт можна завантажити тут. Retina.js.

Включаємо підтримку для Retina екранів за допомогою безкоштовних тем та плагінів WordPress

Додати скрипт в js директорію вашої теми, а потім поставте його в чергу на завантаження у файлі functions.php. Коли користувачі завантажують сторінку, скрипт retina.js перевіряє, чи висока роздільна здатність зображення зі сторінки на вашому сервері. Якщо так, то скрипт одразу ж його відобразить.

Додаючи на сайт нове зображення, збережіть файл як logo.png, наприклад. А друге — вдвічі більше за розміром як logo@2x.png. Так скрипт сам визначить, яку версію зображення виводити. Подібна схема працює для будь-якої назви файлу, просто додайте після нього @ 2x.

Крім цього, щоб зробити все з розуму, використовуйте шрифти-іконки де це можливо, тому що вони завжди відображаються у великій якості, перетворюючи фавікони з 16х16 на розмір 32х32. А фонові зображення також подвоюються у розмірі, оскільки цей скрипт не відрізняє фонові зображення від інших картинок.

Нижче наведено CSS код для виведення фонових зображень:

.background {
  background-image: url(example.png);
  background-size: 200px 300px;
  height: 300px;
  width: 200px;
}
 
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
  .background {
    background-image: url(example@2x.png);
  }
}

Як адаптувати сайт під Retina за допомогою плагінів WordPress?

Розробники вже встигли підготуватися та знайшли два основні підходи до впровадження надвисокого дозволу графіки на WordPress.

плагін WP Retina 2x

Включаємо підтримку для Retina екранів за допомогою безкоштовних тем та плагінів WordPress

Цей плагін визначає пристрій, з якого користувач зайшов на сторінку сайту, і якщо він підтримує зображення високої роздільної здатності, на вашому сайті відображається відповідний формат. Після встановлення плагіна ви зможете керувати зображеннями у дашборді, де відображаються статуси файлів у вашій медіа-бібліотеці. Плагін має 4 методи для відображення картинок в режимі Retina:

  • PictureFill: за допомогою цього методу переписується HTML-код для використання нового SRCSET. Оскільки він поки не підтримується браузерами, для завантаження зображень використовується бібліотека JS polyfill Picturefill.
  • Retina.js: метод є 100% JS-рішенням. За допомогою HTML завантажуються звичайні розміри зображень, а якщо виявиться пристрій із роздільною здатністю retina, на екран будуть виводитися відповідні формати.
  • IMG Rewrite: у цьому методі відразу змінюються SRC теги зображень на відповідні під роздільну здатність retina, якщо вони підтримуються пристроєм. Але він не працює з більшістю рішень, пов'язаних із кешуванням.
  • Retina-Images: для цього методу використовується серверний обробник Зображення будуть завантажені за допомогою Retina-Images PHP. А .htaccess буде змінено автоматично.

Після встановлення WP Retina 2x у меню адмінки з'явиться нова вкладка з налаштуваннями плагіна. Там є дві вкладки – для стандартних і просунутих налаштувань. На сторінці основних налаштувань можна вказати, які розміри зображень не відображати у надвисокій роздільній здатності. Буде показано також середній, великий, маленький розмір зображень, а також інші, додані темою, для генерування мініатюр або слайдерів.

Включаємо підтримку для Retina екранів за допомогою безкоштовних тем та плагінів WordPress

У вкладці розширених опцій можна вибрати спосіб увімкнення «на стороні сервера» та «на стороні клієнта». Після встановлення плагіна також додасться вкладка Retina 2x, в якій відображатиметься статус завантажених зображень та наявність версій Retina. Автор Jordy Meow рекомендує використовувати параметр плагіна “Enable Media Replace”, який розмістить кнопку для заміни зображень, що некоректно відображаються.

Включаємо підтримку для Retina екранів за допомогою безкоштовних тем та плагінів WordPress

плагін Simple WP Retina

Включаємо підтримку для Retina екранів за допомогою безкоштовних тем та плагінів WordPress

За допомогою цього плагіна ви легко додасте на свій сайт функціональність, що підтримується сумісність із екранами Retina. Він працює на стороні сервера, щоб визначити графіку у високій роздільній здатності та відобразити на екранах пристроїв відвідувачів з відповідним форматом такі зображення. Simple WP Retina простий, не займає багато місця та добре працює.

Проте плагін має кілька обмежень. Він не працюватиме коректно, якщо ви використовуєте будь-які плагіни для кешування. У ньому немає своєї панелі керування, простого способу для налагодження плагіна та можливості переконатися, що він дійсно правильно визначає та відображає графіку у подвійному розмірі на моніторах з високою роздільною здатністю екрану.

Після встановлення плагін не регенерує зображення автоматично, тому вам потрібно буде зробити це самостійно за допомогою плагіна регенерація Ескізи. Він також регенерує версії картинок у роздільній здатності 2х. Так що якщо у вас у темі додано багато картинок різних дозволів та розмірів, то всі вони матимуть версію з 2х розміром.

плагін Підтримка зображень Retina

Включаємо підтримку для Retina екранів за допомогою безкоштовних тем та плагінів WordPress

Ще один простий плагін, який має схожий функціонал, як у попередньому. Він додасть скрипт retina.js, і вам потрібно буде завантажувати зображення із зазначенням @2x після назви.

плагін HiDPI Gravatars

Включаємо підтримку для Retina екранів за допомогою безкоштовних тем та плагінів WordPress

Цей плагін оновлюватиме граватори вашого сайту до ширших дозволів. Він простий у встановленні та активації. А щоб новий аватар виглядав краще, при його завантаженні використовуйте розмір 128х128 пікселів.

Теми із підтримкою дозволу Retina

На сьогодні є більше 70 безкоштовних тем WordPress з готовою підтримкою Retina прямо з коробки, а також понад 3000 преміум Retina-тем на ThemeForest. Ми розглянемо п'ять безкоштовних популярних тем.

Clean Retina

Включаємо підтримку для Retina екранів за допомогою безкоштовних тем та плагінів WordPress

Проста та зручна тема автоматично адаптує сайт під дозволи екранів планшетів та мобільних пристроїв.

Баськервіль

Включаємо підтримку для Retina екранів за допомогою безкоштовних тем та плагінів WordPress

Приваблива та адаптивна тема під екрани з високою роздільною здатністю Baskerville. Вона чудово відображає записи, відео, картинки і галереї, і в ній дуже легко можна поділитися записом, що сподобався, або посиланням.

Jkreativ Lite

Включаємо підтримку для Retina екранів за допомогою безкоштовних тем та плагінів WordPress

Jkreativ Lite – це повністю адаптивна тема, сумісна з блогом. Вона підтримується на екранах з високою роздільною здатністю і виглядає чудово на кожному сучасному пристрої та при перехресній сумісності браузерів.

Гарфанкель

Включаємо підтримку для Retina екранів за допомогою безкоштовних тем та плагінів WordPress

Стильна та адаптивна тема у стилі Pinterest, що відповідає роздільній здатності retina.

Рамс

Включаємо підтримку для Retina екранів за допомогою безкоштовних тем та плагінів WordPress

Мінімалістична та адаптивна тема для блогерів, яка підтримується на екранах з високою роздільною здатністю. Включає галерею, відео формат, формат цитат, прокручування Jetpack, редагування стилів і код для мультимовності сайту. Тема чудово виглядає на екранах смартфонів з роздільною здатністю від 3.5 дюймів, а також читальна на планшетах.

Висновок

Використовувати адаптацію сайту під роздільну здатність екрана retina чи ні – вирішувати тільки вам. Але якщо цього вимагає тематика, наприклад портфоліо або сайт фотографа, тоді використовуйте зображення з високою роздільною здатністю не роздумуючи. Тим більше, як ви самі переконалися із сьогоднішньої статті, створити їх не так вже й складно за допомогою простого плагіна чи готової теми.

Джерело: wplift.com
inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!
Олексій Шевченко
редактор wpcafe
Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/

Коментарі до запису: 0

Додати коментар або відгук