n-wp.ru — блог о WordPress
Шорткод для вставки изображений, автоматически подстраивающихся под ширину окна браузера | n-wp.ru

Шорткод для вставки изображений, автоматически подстраивающихся под ширину окна браузера

Шорткод для изображений, которые должны автоматически подстраиваться под изменение ширины браузера без потери пропорций и выхода за пределы видимой обрасти экрана.

Сейчас в моде так называемые responsive-темы. Точного слова, полностью передающего смысл технического английского термина responsive нет, и я испольную свой — отзывчивые. Подобные темы отзывчивы к изменениям ширины окна браузера, в котором их просматривают — при растягивании или сужении окна браузера они автоматически изменяют ширину, корректно располагая содержимое таким образом, чтобы все помещалось на странице, не образовывались горизонтальные полосы прокрутки, видео и изображения уменьшались и увеличивались пропорционально, не искажая восприятие.

Шорткод для вставки изображений, автоматически подстраивающихся под ширину окна браузера

Специально для создания отзывчивого в изменениям размеров, гибкого дизайна были придуманы специальные элементы CSS-разметки, описывающие поведение HTML-элементов на страницах, просматриваемых на экранах с определенной шириной. Давайте создадим шорткод, позволяющий публиковать изображения, обладающие отзывчивой шириной (автоматически подстраивающиеся под изменение ширины браузера, в котором просматривается сайт).

Для создания шорткода нужно вставить нижеприведенный код в файл functions.php:

В этом шорткоде мы помещаем изображение в элемент DIV класса image-resized. Теперь нужно описать этот класс в файле style.css:

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

Так как у шорткода нет дополнительных аргументов, то использовать его очень легко:

tiaurus

Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

3 комментария

  • Я очень извиняюсь, но.. ЩИТО??? У меня этот вопрос вызывает аж несколько кусков всей этой истории.

    1) Зачем вообще использовать шорткод? Дописать див с классом (или, даю хинт, просто класс к изображению) не сложнее, чем дописывать шорткод.
    2) Адаптивность этой картинки почти бесполезна на неадаптивном сайте
    3) Зачем использовать медиа-кверис, и зачем использовать абсолютные значения ширины изображения в них, когда достаточно одной только 100% ширины и авто-высоты?
    4) Зачем вообще давать изображению какую-то обертку? В большинстве тем можно просто добавить селектор .post img — и тогда все изображения будут адаптироваться под ширину экрана. Для изображений, которым это не нужно, нужно просто установить в css стили для стандартных вордпрессовских классов alignone, alignleft и alignright.

    И последнее — если человек установил себе адаптивный шаблон, то всё это вообще не нужно — все и так уже настроено до него, и ему остается только картинку вставлять стандартными способами.

    P.S. «Отзывчивый дизайн» — вполне себе общепринятый термин. Взять хоть, к примеру, книгу Итана Маркотта «Отзывчивый веб-дизайн». Кроме того, в русском языке принято переводить responsive как «адаптивный», хотя это уже не совсем верно — «adaptive» — это более широкое понятие, включающее в себя «responsive».

    • С высоты своего опыта многие посты в этом блоге вам могут показаться наивными, нелепыми и даже смешными, настолько несущественные в них описываются проблемы и решения. Однако смею напомнить, что это блог для новичков. Вы не поверите, какие вопросы задают некоторые посетители (например, как на отдельной странице вывести посты определенной категории, не подозревая, что такая страница у них уже есть). А если отмотать в первым постам, то вам и вовсе покажутся описываемые темы жутко наивными и очевидными. Когда-то я тоже был наивным новичком, смотрящим на все эти коды, как на египетские иероглифы.

      Шорткод — чтобы на примере показать, как создавать простейший шорткод. К тому же многие используют не отзывчивые темы, а редактировать CSS и PHP побаиваются или не умеют, а тут им предлагается и объясняется простейший шорткод. Разметка @media — для того, чтобы познакомить новичков с этим приемом. Освоив эти базовые приемы, некоторые смогут перейти к созданию собственных шорткодов, а может и к адаптации темы.

      • Но ведь для того, чтобы создать этот шорткод, придется редактировать и CSS и PHP, разве нет?
        В качестве непосредственно элементарного примера — может быть, ок.

        И опыт тут совершенно ни при чем: это, я бы сказал, первый пост в этом блоге, который вызвал у меня такое удивление — дело не в его простоте, а напротив — в его чрезмерной усложненности. Поставленная задача решается одной строчкой в CSS в практически любом шаблоне.

/* ]]> */