Используем подпись у публикуемых изображений

Не открою секрет сказав, что изображения публикуемые на страницах сайтов привлекают огромное внимание посетителей. И уж тот факт, что от способа их оформления зависит реакция и заинтересованность читателя не является тайной.

Признанной нормой является подпись к изображению. Это может быть поясняющий текст, порядковый номер, EXIF данные снимка и прочая важная информация. Способов ее размещения масса, в том числе и с помощью плагинов. Однако, гораздо удобнее воспользоваться штатной возможностью WordPress, которая появилась в версии 3.4 codex.wordpress.org/Version_3.4, а именно — “Подпись” или “Caption” как это звучит в оригинале.

caption field in wordpress 3.5
Внешний вид менеджера медиафайлов в WordPress 3.5. Поле Подпись.

Когда вы вставить изображение с помощью менеджера медиафайлов WordPress вы можете указать подпись к нему. WordPress сформируешь шоткод, который в дальнейшем будет превращен в html-разметку вашего сайта.

При использовании этого поля вы можете применить html-тэги аналогичные тем, которые допустимы в комментариях, например, <strong>, <em> и аналогичные.

Обратите внимание, WordPress использует светло-серый фон и темно-серый цвет для текста по умолчанию. Это происходит благодаря используемым css-классам .wp-caption и .wp-caption-text. Мы можем переопределить их стили, для этого необходимо добавить в файл style.css используемой темы следующий код:

.wp-caption {
    background: #F1F1F1;
    line-height: 18px;
    margin-bottom: 20px;
    padding: 4px;
    text-align: center;
}
 
.wp-caption-text {
    color: #888;
    font-size: 12px;
    margin: 5px;
}

Вы всегда можете изменить заголовок, достаточно кликнуть на картинку в сообщении, а затем нажать “Редактировать” или “Edit”.

Для примера я использую следующую подпись:

<em>Текст курсивом.</em> <strong>и полужирный текст</strong>
caption field in wordpress 3.5
Заполненное поле Подпись.

Вот так это будет выглядеть в результате:

caption ready

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

По мотивам wp.tutsplus.com/articles/tips-articles/quick-tip-html-in-image-captions.

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

Обратите внимание на предыдущие записи: