Создание адаптивных макетов устройств для продуктов и портфолио может оказаться сложной задачей. Обычно для этого сначала ищется шаблон 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 – 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.
Вы статью читали вообще? Она не про адаптацию темы под мобильные устройства, а про создание макетов для вывода разных товаров и услуг.
А есть плагин, который бы подгонял размер блога по мобильные устройства?
Посмотрите следующие плагины: http://wordpress.org/plugins/wapple-architect/
http://wordpress.org/plugins/wp-mobile-detector/
http://wordpress.org/plugins/wp-mobile-edition/
Размер блога подстроиться без плагина, достаточно прописать правильные стили
Плагины предлагают быстрое решение, но, естественно, не самое лучшее. Самый лучший подход — как вы и сказали, стили.