Как создать адаптивные макеты для разных устройств в 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:

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

Блог про WordPress
Комментарии: 6
  1. Елена

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

    1. Дмитрий (автор)

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

  2. ITишник

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

    1. Дмитрий (автор)
      1. Olunka

        Размер блога подстроиться без плагина, достаточно прописать правильные стили

        1. Дмитрий (автор)

          Плагины предлагают быстрое решение, но, естественно, не самое лучшее. Самый лучший подход — как вы и сказали, стили.

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

Получать новые комментарии по электронной почте.