Позиционирование изображений в тексте в WordPress

Дата публикации:Январь 31, 2015

Текущие версии WordPress обладают встроенными средствами выравнивания изображений. WordPress добавляет специальные CSS-классы для выравнивания изображения по левому и правому краю, а также по центру абзаца, чтобы текст обтекал изображение.

Важный код темы

Чтобы воспользоваться новыми CSS-классами в своих целях для выравнивания изображений и обтекания их текстом, WordPress-тема должна включать в себя следующий код в файле style.css:

img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

При добавления изображения в блог WordPress, выберите выравнивание изображения по правому краю, по левому краю или по центру в панели Image/Media.

Изображение будет встроено в вашу запись с выбранным стилем для выравнивания. К примеру:

<img src="http://example.com/images/leaf.jpg" 
 alt="leaf graphic" 
 title="leaf graphic" 
class="alignright size-medium wp-image-3109" 
height="25" width="30"/>

Стили изображений

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

Давайте начнем с того, что приведем простое руководство по использованию изображений в блоге WordPress.

Для начала давайте взглянем на обычное изображение в записи, лишенное каких-либо инструкций по обтеканию текста. Обратите внимание, что мы добавили атрибуты title и alt к тегу; alt – важный атрибут для доступности, в то время как title необходим для подсказки по изображению.

<img src="http://example.com/images/leaf.jpg" 
 alt="leaf graphic" 
 title="leaf graphic" />

Чтобы задать обтекание текстом для нашего изображения, мы должны внести несколько изменений в стилевую таблицу.

В вашей папке с темой WordPress найдите файл style.css и откройте его в текстовом редакторе. Очень важно: сохраните копию файла где-либо до того, как вносить в него изменения. Теперь выполните поиск по «img». Надеемся, что все ваши селекторы изображений сгруппированы. Если нет, то в таком случае найдите всех их и объедините их в одну группу, чтобы упростить данный процесс.

Рамки

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

img {border:0}

Для непрерывной красной рамки в 1 пиксель добавьте следующее:

img {border:solid red 1px}

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

a img {border:0}

Вы можете добавить эффект появления рамки при наведении курсора мыши на изображение:

a:hover img { border:solid red 1px; }

Отступы и ширина изображения

Давайте рассмотрим еще одну вещь, позволяющую улучшить работу изображения с остальными используемыми нами стилями.

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

p img { padding: 0; max-width: 100%; }

Изображения по левому краю, по правому краю и по центру

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

img.alignright { padding: 4px; margin: 0 0 2px 7px; display: inline; }
img.alignleft { padding: 4px; margin: 0 7px 2px 0; display: inline; }

Объявление display:inline позволит сделать изображения встроенными в текст, в котором они находятся.

Теперь пришло время добавить объявление float к изображениям. Стоп. Почему мы должны применять float только к изображениям? Почему бы не закрепить их с левой или с правой стороны, и не сделать плавающим текст? Вы знаете, это можно реализовать. Но это уже выходит за рамки данной статьи. Мы не будем тратить время, поэтому давайте просто добавим следующие стили (если их еще нет в таблице стилей):

.alignright { float: right; }
.alignleft { float: left; }

Обратите внимание: в стандартной теме используется та же самая техника, но классы названы alignleft и alignright. Использование alignleft и alignright проще запомнить, но вообще можно применять любой подход.

Как центрировать изображение? Тег center больше не является валидным, поэтому вам нужно создать стили для центрирования изображений:

img.aligncenter { display: block; margin-left: auto; margin-right: auto; }

Примеры с выравниваем по левому краю, по правому краю и по центру

Все это в теории выглядит достаточно сложно, однако на практике все становится очень простым. Как только вы один раз сделаете это, вам больше уже не покажется это запутанным. Мы надеемся. Чтобы использовать выравнивание, создайте ссылку на ваше изображение и добавьте, class=«alignleft», class=«alignright» или class=«aligncenter» или, после чего изображение выровняется по правому краю, по левому краю или по центру, и текст будет его обтекать. Все очень просто.

Пример с выравниванием изображения по правому краю

Пример с выравниванием изображения по правому краю

Размер текста ALT

Некоторые браузеры позволяют вам управлять размером текста в теге ALT. Этот текст появляется тогда, когда вы наводите вашу мышь на изображение или когда изображение не может загрузиться. Вы можете задать для этого текста любой размер, однако что-то меньше вашего основного контента будет являться прекрасным выбором.

img {font-size:60%}

Подписи к изображениям

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

.wp-caption { margin: 5px; padding: 5px; border: solid 1px #E5E5FF; background: #E5F2FF; font-size:90%; color: black }

В примере выше мы добавили рамку и фон, однако вы можете стилизовать подписи, как посчитаете нужным. Мы рекомендуем вам делать текст другого размера по сравнению с остальным контентом, а также добавлять отступы.

<div class="wp-caption alignright">
<img src="http://example.com/images/leaf.jpg" alt="leaf graphic" title="leaf graphic"> 
Red Leaf</div>

Очистка вывода

Если изображение больше, чем текст, который окружает его, то в таком случае изображение нависает как флаг над элементами ниже его. В таком случае вам понадобится очистить вывод на определенном участке текста. Обратите внимание, что в блоке div отсутствует текст. Однако если вы используете WYSIWYG-редактор, вам понадобится поместить что-то в div, иначе WYSIWYG-редактор удалит div целиком (вследствие особенностей/бага TinyMCE, который используется в WYSIWYG-редакторе).

<div style="clear:both;"><br /></div>

Чтобы сделать очистку вывода, которая будет работать и для HTML-, и для Visual-редактора, введите следующее:

<br style="clear: both;" />

Источник: codex.wordpress.org

Поделиться

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

  1. Андрей says:

    Я против введения подобных излишних оптимизаций. Не так давно сам отказался от своего фреймворка на 15 килобайт в котором было что-то типа
    .floatl {float:left}
    .pad1 {padding:1em}
    .marr1 {margin-right:1em}
    .mar0 {margin:0}
    .mar05 {margin:0.5em}
    .border {border:solid #CCC 1px}
    .displayb {display: block}
    .textred {color: red}

    В итоге:
    div class=»floatl marr1 marb1 border displayb textred»
    или
    img … class=»floatl»

    При таком способе, даже ID не нужно описывать.
    Это охрененно ускоряет написание шаблонов автором фреймворка на первом этапе, но так же охрененно засирает разметку и тормозит потом, когда стандартные значения не подходят и начинаются переопределения правил и всякие !important, когда тебе приходится подгружать к странице кучу ненужного на этой странице сейчас кода, когда не помнишь через полгода свой же синтаксис и т.п.

    Посчитал свое творение идиотским способом предварительного улучшения всего и вся и вот вижу, что WP пошло по тем же граблям, :'( ну например задавание отступов в em а кому-то надо в rem… или обнаруживается, что 1em отступа от картинки это много а надо 0.5em (или наоборот 1.5em из-за свойства наследования и картинка в блоке, который в блоке) и т.п. Это очередная попытка перенести оформление контента из CSS в HTML (ну и что, что классами, вернитесь к моему примеру с div, разве это не то же самое?!), а история показала, что это порочный путь.

    Необходимость изучения заранее заданных правил — плохо, тогда уж лучше использовать стандартный
    img style=»float:left»
    что не длиннее чем
    img class=»alignleft»

    Расстроился (т.к. на свой фремворк потратил месяц), но вернулся к классическому способу: просто описание всех ID в шаблоне, использование зачатков фреймворка типа reset.css и описание самых распространенных явлений, типа вида полей формы и основных шрифтов через @fontface…. В результате, потом любой человек знакомый с основами CSS и HTML и даже сам автор может в твоем коде БЫСТРО разобраться… )

  2. Очень полезный урок! недавно создала сайт в вордпрес, изучаю, не знала как форматировать статьи,так как мне нужно. Теперь знаю,спасибо!

  3. Elena says:

    Спасибо за полезную статью) попробую сделать нечто подобное..не так давно я как раз и искала похожую информацию, спасибо)

  4. mayyer says:

    У меня недавно появился сайт. Решила сделать его на вордпресс. Начала наполнять и столкнулась с проблемой, как разместить картинку в статье. Нашла этот урок, теперь все понятно. Спасибо.

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

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

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