Как в WordPress сделать изображения отзывчивыми

Автор:
Nurlan Kemelbekov

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

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

Давайте рассмотрим пример: Вы пишете сообщение в блоге и используете 2 изображения: одно из 200x200px и другое из 640x480px. Большинство отвечающих правилам для изображений тем, если экран меньше 768px, изображения будут получать ширину 100%. Назначение ширины 100% к большому изображению нормально, но в небольшом корпусе мобильного телефона будет происходить изменение размеров от 200x200px до 768x768px и это будет выглядеть действительно ужасно. Решение заключается в применении отзывчивых правил к изображениям избирательно.

Я собираюсь показать вам, как создать WordPress шорткод, чтобы назначить соответствующее поведение к изображению.

Как правило, шорткоды и другие пользовательские функции пишутся внутри файл functions.php и я предлагаю вам сделать то же самое. Эта функция шорткода для того, чтобы завернуть содержимое в DIV.

function responsive_images($atts, $content = null) {
return '<div class="image-adaptive">' . $content .'</div>';
}

add_shortcode('responsive', 'responsive_images');

Здесь пример того, как использовать его:

[responsive]<img src="image_url" alt="alt" title="title" />[/responsive]

Последний шаг назначить правила CSS к изображениям между шорткодом с помощью @ медиа-запросов. Добавьте это к вашей таблице стилей:

@media only screen and (max-width:767px) {
.image-adaptive img {
width:100%;
height:auto;
}
}

Использование шорткода для реализации отзывчивого поведения к изображениям расширяет стандартные правила CSS и дает пользователям шанс вносить изменения в процессе веб-дизайна.

Для того, чтобы проверить, как смотрится сайт/блог в мобильных устройствах, можно использовать онлайн сервисы, о которых было написано в статье «Предварительный просмотр WordPress сайта на мобильных устройствах«



Вам также может понравиться:


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

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

* Copy This Password *

* Type Or Paste Password Here *

18 + девять =

Я просто хотел сказать, как сильно я ценю Ваш комментарий на мой пост. Спасибо Вам !!