Как создать адаптивные макеты для разных устройств в WordPress

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

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

К примеру, вы можете вставить скриншот в устройство, просто поместив соответствующий шорткод:

 [device type="macbook"]<img src="http://example.com/wp-content/uploads/2014/06/tavern-screenshot-mbp.png" alt="tavern-screenshot-mbp"/>
[/device]

Этот шорткод выведет скриншот так, будто он отображается на retina-экране Macbook Pro:

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

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

Плагин Device Mockups поддерживает следующие девайсы, для которых также указаны подходящие размеры изображений:

• iPhone 5 – 640x1136
• iPad – 2048x1536
• iMac – 1920x1200
• Macbook Pro (Retina) – 1440x900
• Galaxy S3 – 720x1280
• Nexus 7 – 1920x1200
• Surface – 1920 x 1080
• Lumia 920 – 768 x 1280

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

Если вам нравится плагин Device Mockups, вы можете поблагодарить его разработчика, Джастина Пикока, который уже отправил несколько обновлений с момента релиза. Вы можете бесплатно установить указанный плагин с WordPress.org. Любые вопросы могут быть отправлены на Github.