Включаем поддержку для Retina экранов с помощью бесплатных тем и плагинов WordPress

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

Следует ли мне переделывать мой веб-сайт, чтобы обеспечить поддержку настроек Retina Display? Таким вопросом до сих пор задается каждый владелец веб-сайта. Если и вас также давно интересует этот вопрос, то возможно сегодня вы найдете ответ после прочтения данной статьи.

Смотрите также:

  • Как убедиться, что у темы есть поддержка Retina-экранов
  • Как сделать WordPress тему совместимой с Retina экранами

Что такое 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 простой, не занимает много места и отлично работает.

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

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

Плагин Retina Image Support

Включаем поддержку для Retina экранов при помощи бесплатных тем и плагинов WordPress

Ещё один простой плагин, который имеет в себя похожий функционал, как в предыдущем. Он добавит скрипт retina.js, и вам необходимо будет загружать картинки с указанием @2x после названия.

Плагин HiDPI Gravatars

Включаем поддержку для Retina экранов при помощи бесплатных тем и плагинов WordPress

Этот плагин будет обновлять граватары веб-сайта до более широких разрешений. Он прост в установке и активации. А чтобы новый аватар смотрелся лучше, при его загрузке используйте размер 128х128 пикселей.

Темы с поддержкой разрешения Retina

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

Clean Retina

Включаем поддержку для Retina экранов при помощи бесплатных тем и плагинов WordPress

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

Baskerville

Включаем поддержку для Retina экранов при помощи бесплатных тем и плагинов WordPress

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

Jkreativ Lite

Включаем поддержку для Retina экранов при помощи бесплатных тем и плагинов WordPress

Jkreativ Lite — это в полном объеме адаптивная тема, совместимая с блогом. Она поддерживается на экранах с высоким разрешением и выглядит превосходно на каждом современном устройстве и при перекрестной совместимости браузеров.

Garfunkel

Включаем поддержку для Retina экранов при помощи бесплатных тем и плагинов WordPress

Стильная и адаптивная тема в стиле Pinterest, соответствующая разрешению retina.

Rams

Включаем поддержку для Retina экранов при помощи бесплатных тем и плагинов WordPress

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

Заключение

Использовать адаптацию веб-сайта под разрешения экрана retina или нет – решать только вам. Но если этого требует тематика, к примеру, портфолио или веб-сайт фотографа, тогда используйте картинки с высоким разрешением не раздумывая. Тем более, как вы сами убедились из сегодняшней статьи, создать их не так уж и сложно при помощи простого плагина или готовой темы.

Источник: wplift.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *