Сегодня пойдет речь о том, как можно оформить на WordPress подпись к картинке (изображению). Для того, чтобы лучше понять, о чем я сейчас говорю, обратите внимание на ниже приведенный пример. Одна из картинок без оформления, а к другой я применил оформление. Какая картинка вам нравится больше?
Изображение без оформления.
Изображение с оформлением.
Если вам понравилось оформление к изображению, и вы хотите узнать, как это сделать, тогда читайте дальше.
Оформление изображения с подписью.
Чтобы вокруг картинки (изображения) появилась красивая рамка с фоном, откройте админ-панель WordPress => Внешний вид => Редактировать => style.css. Что мы сделали? - мы открыли CSS нашей темы, где и нужно внести маленькое изменение. В файл style.css вставьте код, который я прописал снизу, и сохраните.
/* Captions */
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft
{
float: left;
}
.alignright
{
float: right;
}
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}
/* End captions */
С помощью ввода этого кода вы успешно установите вокруг изображения (картинки) оформление в виде рамки с фоном. Но прошу заметить один ОЧЕНЬ важный нюанс - такое оформление НЕ будет применено, если к картинке (изображению) не была добавлена подпись!
Добавить подпись очень просто, но на всякий случай, я уделю этому моменту внимание.
Как вставить подпись под новое изображение?
Зайти в админ-панель WordPress =>Записи => Добавить новую. Нажмите "Добавить медиафайл".
Добавление подписи к существующей картинке.
Если вам вдруг понадобится добавить подпись к уже существующей картинке, нажмите на Записи =>Все записи, выбираете нужную запись, в которой к изображению нужно добавить подпись, и нажимаете Изменить. Нажимаете на само изображение, увидите вот такие две кнопки "Редактировать" и "Удалить". Конечно же нажать "Редактировать"...
Откроется новое окно, где вы сможете редактировать изображение и добавить "подпись" к картинке.
Если у вас ничего не изменилось после проделанных действий, тогда выполните следующее. Откройте файл CSS вашей темы (админ-панель WordPress => Внешний вид => Редактировать => style.css.) и найдите этот код, который я отобразил снизу. Этот стиль и отвечает за оформление картинок, удалите его.
/* Alignment */
.alignleft {
display: inline;
float: left;
margin-right: 1.625em;
}
.alignright {
display: inline;
float: right;
margin-left: 1.625em;
}
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
Если вы не можете найти этот код или у вас что-то не получается, пишите в комментариях.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Как установить минимальную сумму для заказа – WooCommerce?
URL ссылка миниатюры для картинки – WordPress
Как добавить визуальный редактор для «Цитат (Отрывок)» – WordPress ?
Как добавить «Цитату (Отрывок)» для страниц?Похожие статьи
Как добавить Яндекс карту на сайт и на WordPress
Как включить шорткод в виджете WordPress
Установка кнопок социальных сетей для WordPress
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330330 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274683 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222435 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187485 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186559
35 Ответов на комментарий - Оформление картинки с подписью в WordPress
Добавить комментарий
Метки: wordpress, без плагинов
Здравствуйте. Вставил миниатюру с подписью в запись, хочу, чтобы текст обтекал картинку справа, но текст не обтекает картинку, а начинается после окончания подписи под картинкой, т.е справа от картинки с подписью пустой блок. Что можно сделать, чтобы и подпись под картинкой осталась и текст начинался сразу, справа от картинки.
Сайт: cooltamadavmoskve.ru/category/статьи
Здравстуйте Роман. В админ-панеле откройте “Внешний вид” => “Редактор” => “Таблица стилей (style.css)” и добавьте такой код
.wp-caption-text
{
float: right;
}
Я вас правильно понял? Если не получается, пишите.
Проделал этот трюк, часть текста встала справа от картинки, а продолжение текста – все равно после подписи под картинкой, получился разрыв текста. Тогда я вставил код из первого блока, т.е оформил рамку, и… О! Алилуйя! Все получилось! Больше человеческое спасибо! Только фото в рамке асимметрично (сместилось влево), глаз карябает.
И еще один трабл: пропала форма комментов и сайдбар при открывании отдельных записей. В шаблоне одиночной записи и страницы функции вызова комментов и сайдбара прописаны, но на выводе записи все обрубается после окончания статьи. Какая может быть причина?
В админ-панеле откройте «Внешний вид» => «Редактор» => «Одна запись(single.php)», и попробуйте вывести комментарий вот таким кодом:
Такой код уже присутствует в шаблоне одиночной записи.
Рома, а вы не трогали файл для “Комментарии(comments.php)”?
Вроде нет. Его содержание одинаково для всех тем?
Попробуйте поменять шаблон. Может глюк в шаблоне.
Спасибо!!! Вас тоже поздравляю с днем блоггера. Желаю чтобы все ваши интернет проекты приносили вам не только хороший доход, но и радость.
Спасибо чел, выручил! Поставил кривую навороченную тему Kallyas, но там подписи с картинкам по умолчанию вставлялись слева (а мне нужно по центру). Поставил твой код подписки к картинам стали по центру
Пожалуйста.
Спасибо Степан за рамочку, легко и просто!!
Пожалуйста.
Степан все получилось, только вот надпись “читать запись полностью”, стала по середине, а раньше была слева, как вернуть, помогите пожалуйста? Сайт в подписи
Зашел на Ваш сайт, увидел надпись «читать запись полностью» слева, та как и было раньше.
Добрый день!
спасибо за статью то что нужно было мне!
вот теперь только другая проблема мне надо чтобы картинки в ряд были, а щас они в столбик выстраиваются. Как быть?
Здравствуйте! Нажмите на на картинку, потом редактировать, указываете расположение картинки “слева”. Жмите на другую картинку, редактировать, указываете расположение картинки “справа”. Размер картинок не должен превышать ширины блока с контентом. Вот и все! Если, не разберетесь, пишите, помогу.
Здравствуйте. Подскажите пожалуйста, что нужно изменить в коде, чтобы нижняя рамка под изображением стала немного короче?
Здравствуйте, Ирина! Я немного не понял вопроса! Если возможно, перефразируйте или покажите визуально, что Вы хотите сделать с рамкой?
у меня получается что под текстом подписи изображения слишком много места остается вот гляньте [ссылка удалена]
Ирина, зайдите в адми-панеле “Внешний вид”, “редактор” и в “style.css” найдите вот это:
#content p, #content ul, #content ol, #content dd, #content pre, #content hr { margin-bottom: 24px; }замените его на вот этот код:
#content p, #content ul, #content ol, #content dd, #content pre, #content hr { margin-bottom: 0px; }После этого все заработает как надо.
Спасибо вам огромное! Все получилось!
Здравствуйте! Пожалуйста подскажите, как можно установить текст подписи прямо на картинку с рамкой?
Здравствуйте, Леонид! Вы пробовали повторить все, что я написал в статье?
Степан, пробовал ваш код, но он немного не подходит. Текст подписи отображается ниже картинки в рамке.
Использовал другой код:
.wp-caption{max-width:100%;} .wp-caption { text-align: center; padding:0; margin:0 24px 24px 0; position:relative !important;} .wp-caption.alignleft { margin: 0px 20px 20px 0px; float:left; } .wp-caption.alignright { margin: 0px 0px 20px 20px; float:right; } .wp-caption img { margin: 0 !important; padding: 0 !important; border: none !important; outline:none !important; } .wp-caption p.wp-caption-text { font-size: 24px; line-height: 1.2em; padding: 10px; margin: 0 20px 0 0; color:#000; bottom:20px; left:0px; display:inline-block; max-width:90%; position:absolute !important; opacity:0.6; filter:alpha(opacity=60); background:#fff; }То, что и нужно было! Текст подписи стал отображаться прямо на картинке, но сама рамка отображается криво. И возможно ли использовать заголовок статьи на картинке вместо текста подписи?
Благодарю.
Леонид, можно я посмотрю на вашем блоге, как выглядит эта рамка? Дайте адрес блога и я посмотрю, как можно исправить.
Насчет вопроса, возможно ли использовать заголовок статьи на картинке вместо текста подписи, отвечу, что не можно.
Извиняюсь за долгий ответ. У нас произошла проблемка с хостингом и поэтому сайт я перенес к себе на компьютер (хорошо успел сделать бэкап).
С рамкой уже разобрался. Просто нужно было изменить размеры картинки и теперь рамка отображается нормально
Добрый день! Прошу помощи! Не понимаю в чем дело, добавлял подписи к медиафайлам, так они отображаться стали в очень миниатюрном виде, хотя размер стоит средний, и все друг на друге. А мне нужно средний размер файла, с обычной подписью под ним. В чем может быть дело?)
Здравствуйте, Дмитрий! Зашел на Ваш сайт, чтобы посмотреть на проблему, я там ничего не увидел. Где именно она? Куда мне перейти, чтобы увидеть все своими глазами.
Добрый день. Скопировал ваш код – все получилось, спасибо. Но возникла небольшая проблема – картинки с подписью не хотят центрироваться (не ставятся по центру).
Если убрать подпись, тогда картинки уже ставятся по центру.
Подскажите, пожалуйста, что нужно добавить в стилях, чтобы это исправить?
Заранее спасибо
Здравствуйте, Артем!
В CSS есть вот этот код:
.aligncenter, div.aligncenter { display: block; margin-left: auto; margin-right: auto; } .alignleft { float: left; padding:5px 10px 5px 0; } .alignright { float: right; }Все должно работать. Пересмотрите код.
здравствуйте, подскажите, пожалуйста, что делать, если не выводится подпись к миниатюре. спасибо заранее)
не получается изменить подпись с курсива на обычный, подскажите как быть
В CSS вставьте:
p.wp-caption-text { font-style: normal !important; }и с кода у вас на сайте уберите тег и