Статьи

Главная › Новости

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

Опубликовано: 01.09.2018

Как выровнять картинку по центру div с помощью CSS?

Контент любой тематике всегда нуждается в дополнительном материале, таком как видео, изображения, PDF-файлы и прочее. Если с первым и последним в оформлении все понятно, то с картинками не все так однозначно. На WordPress’e их подача в статьях полностью зависит от выбранной вами темы оформления. И очень часто бывает, что не всегда эта подача совпадает со вкусом пользователя. Поэтому рассмотрим пару примеров оформления картинок, в частности, добавления рамки, фона и подписей.

Выравнивание изображений в WordPress

Прежде чем перейдем непосредственно к стилизации img-файлов, сделаем заметку об их выравнивании в постах. Так как это частично будет относиться к будущим действиям. В версии WordPress 2.5 была добавлена возможность выбора расположения изображений: обтекание слева, справа, по центру, и ничего.

Smart Slider 3 — пожалуй лучший слайдер для WordPress. Первый взгляд на бесплатные функции.

В зависимости от этого выбора добавляется автоматически определенный класс к картинкам: 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 версии 2.6 появилась возможность добавлять подпись к изображению через шорткод [caption][\caption]. Им нужно обернуть img-файл, задать некие параметры и на экране появится результат.

Пример

[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>'; }