Контент любой тематике всегда нуждается в дополнительном материале, таком как видео, изображения, PDF-файлы и прочее. Если с первым и последним в оформлении все понятно, то с картинками не все так однозначно. На WordPress’e их подача в статьях полностью зависит от выбранной вами темы оформления. И очень часто бывает, что не всегда эта подача совпадает со вкусом пользователя. Поэтому рассмотрим пару примеров оформления картинок, в частности, добавления рамки, фона и подписей.
Выравнивание изображений в WordPress
Прежде чем перейдем непосредственно к стилизации img-файлов, сделаем заметку об их выравнивании в постах. Так как это частично будет относиться к будущим действиям. В версии WordPress 2.5 была добавлена возможность выбора расположения изображений: обтекание слева, справа, по центру, и ничего.
В зависимости от этого выбора добавляется автоматически определенный класс к картинкам: alignright, alignleft, aligncenter, alignnone
. А в самой теме оформления прописываются стили к каждому этому классу, обозначающие как должен вести себя этот элемент.
По центру
В этом примере лучше всего объединить стили выравнивания по центру с классом alignnone
, который ничего не должен делать.
img.aligncenter, .aligncenter, img.alignnone { margin: 1em auto; display: block; clear: both; float: none; }
Обтекание слева
Обтекание по левому краю выполняется за счет свойства float
и его значения left
.
img.alignleft, .alignleft{ margin: 0.3em 1.6em 0.5em 0; display: block; float: left; }
Обтекание справа
По правому краю точно также только со значением right
.
img.alignright, .alignright{ margin: 0.3em 0 0.5em 1.6em; display: block; float: right; }
Рамка для изображений
Теперь для добавления рамки или фона можно использовать выше перечисленные классы, если мы хотим для каждого класса задать разные стили. А для общего оформления применим единый класс wp-image
(он автоматом генерируется платформой).
img[class*="wp-image-"] { padding: 25px; border-radius:60px; background: #f2f2f2; box-shadow: 0 15px 30px -5px rgba(110, 127, 134, 0.44); transition: 0.5s; } img[class*="wp-image-"]:hover { box-shadow: none; }
img[class*="wp-image-"] { padding: 25px; border: 1px solid #e1e1e1; box-shadow: 0 0 13px #dddddd inset; background: #f6f6f6; }
Подпись к изображениям при помощи шорткода [caption]
В WordPress есть функциональность для добавления подписей к изображениям с помощью блока изображения. Вы можете использовать блок изображения и заполнить поле «Caption» (Подпись). Этот текст будет отображаться в виде подписи к изображению на странице.
Пример
[caption id="attachment_5" align="alignright" width="200"]<img src="http://site.ru/wp-content/uploads/2010/07/img.jpg" alt="Kanagawa" title="The Great Wave" width="300" height="205" class="size-medium wp-image-6" />Текст подписи[/caption]
Параметры:
id (необязательно) Уникальный идентификатор элемента, который можно использовать для использования в CSS. По умолчанию: не задается.
class (необязательно) Пользовательский класс, который можно использовать в CSS. По умолчанию: не задается.
align (необязательно) Выравнивание элемента. По умолчанию: alignnone
.
Допустимые значения:
- alignnone
- aligncenter
- alignright
- alignleft
width (обязательно) Указывается ширина элемента в пикселях. Этот параметр обязательный для заполнения. В противном случае обработка элемента не будет выполнена, а содержимое останется неизменным. По умолчанию: не задается.
В исходном коде можно увидеть какими классами обозначается шорткод caption, и для этих классов зададим желаемое оформление.
<div class="wp-caption aligncenter"> <img src="http://site.ru/wp-content/uploads/2016/03/img.jpg" alt="" class="aligncenter size-full wp-image-2527" width="720" height="385"> <p class="wp-caption-text">Как приручить дракона</p> </div>
Теперь все что осталось, так это прописать стили в файл style.css. И получим результат такой как выше показан на картинке.
.wp-caption { background: #ececec; border: 1px solid #dddddd; max-width: 100% !important; padding: 15px 15px 15px; text-align: center; box-sizing: border-box; } .wp-caption.alignnone { margin: 5px 0px 20px 0; } .wp-caption.alignleft { margin: 5px 20px 20px 0; } .wp-caption.alignright { margin: 5px 0 20px 20px; } .wp-caption img { border: 0 none; height: auto; margin: 0!important; max-width: 100%; padding: 0!important; display: block; width: auto; } .wp-caption p.wp-caption-text { font-size: 12px; line-height: 17px; margin: 0; padding: 15px 4px 0; color: #5C5C5C; }
Проблема с шириной caption
И последнее, что мы сделаем, так это решим проблему с фиксированной шириной нашего шорткода. Параметр все так же остается обязательным, но только будет сохраняться исходный размер картинки, а не тот, что указан в параметрах.
add_shortcode( 'wp_caption', 'fixed_img_caption_shortcode' ); add_shortcode( 'caption', 'fixed_img_caption_shortcode' ); function fixed_img_caption_shortcode($attr, $content = null) { if ( ! isset( $attr['caption'] ) ) { if ( preg_match( '#((?:<a [^>]+>\s*)?<img [^>]+>(?:\s*</a>)?)(.*)#is', $content, $matches ) ) { $content = $matches[1]; $attr['caption'] = trim( $matches[2] ); } } $output = apply_filters( 'img_caption_shortcode', '', $attr, $content ); if ( $output != '' ) return $output; extract( shortcode_atts(array( 'id' => '', 'align' => 'alignnone', 'width' => '', 'caption' => '' ), $attr)); if ( 1 > (int) $width || empty($caption) ) return $content; if ( $id ) $id = 'id="' . esc_attr($id) . '" '; return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" >' . do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>'; }