Как добавить подпись к картинкам в WordPress

Контент любой тематике всегда нуждается в дополнительном материале, таком как видео, изображения, 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>';
}