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

Дата публикации:Июнь 15, 2014

Создание адаптивных макетов устройств для продуктов и портфолио может оказаться сложной задачей. Обычно для этого сначала ищется шаблон 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:

tavern-mbp-mockup

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

multiple-devices

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

visual-editor

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

  • iPhone 5 – 640×1136
  • iPad – 2048×1536
  • iMac – 1920×1200
  • Macbook Pro (Retina) – 1440×900
  • Galaxy S3 – 720×1280
  • Nexus 7 – 1920×1200
  • Surface – 1920 x 1080
  • Lumia 920 – 768 x 1280

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

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

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

Поделиться

6 комментариев

  1. Не знала, что для адаптации темы под мобильные устройства можно использовать специальный плагин. Хотя я пока далека от этого уровня, добавляю статью в закладки, а благодаря информации на сайте буду повышать свой уровень владения WordPress.

    • Дмитрий Алёшин says:

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

  2. А есть плагин, который бы подгонял размер блога по мобильные устройства?

Оставить комментарий

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

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