BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Wordpress » Оформление картинки с подписью в WordPress

Оформление картинки с подписью в WordPress

2013-02-23 / Вр:04:00 / просмотров: 13027

Сегодня пойдет речь о том, как можно оформить на WordPress подпись к картинке (изображению). Для того, чтобы лучше понять, о чем я сейчас говорю, обратите внимание на ниже приведенный пример. Одна из картинок без оформления, а к другой я применил оформление. Какая картинка вам нравится больше?

Изображение без оформления.

Оформление подписи к изображению WordPress

Изображение с оформлением.Оформление подписи к изображению 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 =>Записи => Добавить новую. Нажмите "Добавить медиафайл".

Оформление подписи к изображению WordPress

Оформление подписи к изображению WordPress

Добавление подписи к существующей картинке.

Если вам вдруг понадобится добавить подпись к уже существующей картинке, нажмите на Записи =>Все записи, выбираете нужную запись, в которой к изображению нужно добавить подпись, и нажимаете Изменить. Нажимаете на само изображение, увидите вот такие две кнопки "Редактировать" и "Удалить". Конечно же нажать "Редактировать"...

Оформление подписи к изображению WordPress

Откроется новое окно, где вы сможете редактировать изображение и добавить "подпись" к картинке.

Оформление подписи к изображению 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;
}

Если вы не можете найти этот код или у вас что-то не получается, пишите в комментариях.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

33 Ответов на комментарий - Оформление картинки с подписью в WordPress

  1. Роман

    Здравствуйте. Вставил миниатюру с подписью в запись, хочу, чтобы текст обтекал картинку справа, но текст не обтекает картинку, а начинается после окончания подписи под картинкой, т.е справа от картинки с подписью пустой блок. Что можно сделать, чтобы и подпись под картинкой осталась и текст начинался сразу, справа от картинки.
    Сайт: cooltamadavmoskve.ru/category/статьи

    Ответить

    Степан => автор блога

    ☼Степан ☼ автор блога отвечает:

    Здравстуйте Роман. В админ-панеле откройте “Внешний вид” => “Редактор” => “Таблица стилей (style.css)” и добавьте такой код

    .wp-caption-text
    {
    float: right;
    }

    Я вас правильно понял? Если не получается, пишите.

    Ответить

    Роман отвечает:

    Проделал этот трюк, часть текста встала справа от картинки, а продолжение текста – все равно после подписи под картинкой, получился разрыв текста. Тогда я вставил код из первого блока, т.е оформил рамку, и… О! Алилуйя! Все получилось! Больше человеческое спасибо! Только фото в рамке асимметрично (сместилось влево), глаз карябает.
    И еще один трабл: пропала форма комментов и сайдбар при открывании отдельных записей. В шаблоне одиночной записи и страницы функции вызова комментов и сайдбара прописаны, но на выводе записи все обрубается после окончания статьи. Какая может быть причина?

    Ответить

    Степан => автор блога

    ☼Степан ☼ автор блога отвечает:

    В админ-панеле откройте «Внешний вид» => «Редактор» => «Одна запись(single.php)», и попробуйте вывести комментарий вот таким кодом:
    < ?php comments_template(); ?>

    Ответить

    Роман отвечает:

    Такой код уже присутствует в шаблоне одиночной записи.

    Степан => автор блога

    ☼Степан ☼ автор блога отвечает:

    Рома, а вы не трогали файл для “Комментарии(comments.php)”?

  2. Роман

    Вроде нет. Его содержание одинаково для всех тем?

    Ответить

  3. KORN

    Попробуйте поменять шаблон. Может глюк в шаблоне.

    Ответить

  4. Елена Шахова

    :arrow: С днём блогера! Или блоггера – кто как пишет

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Спасибо!!! Вас тоже поздравляю с днем блоггера. Желаю чтобы все ваши интернет проекты приносили вам не только хороший доход, но и радость.

    Ответить

  5. Denis

    Спасибо чел, выручил! Поставил кривую навороченную тему Kallyas, но там подписи с картинкам по умолчанию вставлялись слева (а мне нужно по центру). Поставил твой код подписки к картинам стали по центру :!:

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Пожалуйста. :arrow:

    Ответить

  6. Вера

    Спасибо Степан за рамочку, легко и просто!! ;-)

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Пожалуйста.

    Ответить

  7. remo

    Степан все получилось, только вот надпись “читать запись полностью”, стала по середине, а раньше была слева, как вернуть, помогите пожалуйста? Сайт в подписи

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Зашел на Ваш сайт, увидел надпись «читать запись полностью» слева, та как и было раньше.

    Ответить

  8. Даврон

    Добрый день!
    спасибо за статью то что нужно было мне!
    вот теперь только другая проблема мне надо чтобы картинки в ряд были, а щас они в столбик выстраиваются. Как быть?

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте! Нажмите на на картинку, потом редактировать, указываете расположение картинки “слева”. Жмите на другую картинку, редактировать, указываете расположение картинки “справа”. Размер картинок не должен превышать ширины блока с контентом. Вот и все! Если, не разберетесь, пишите, помогу.

    Ответить

  9. Ирина

    Здравствуйте. Подскажите пожалуйста, что нужно изменить в коде, чтобы нижняя рамка под изображением стала немного короче?

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Ирина! Я немного не понял вопроса! Если возможно, перефразируйте или покажите визуально, что Вы хотите сделать с рамкой?

    Ответить

    Ирина отвечает:

    у меня получается что под текстом подписи изображения слишком много места остается вот гляньте [ссылка удалена]

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Ирина, зайдите в адми-панеле “Внешний вид”, “редактор” и в “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;
    }
    

    После этого все заработает как надо.

    Ответить

    Ирина отвечает:

    Спасибо вам огромное! Все получилось!

  10. Леонид

    Здравствуйте! Пожалуйста подскажите, как можно установить текст подписи прямо на картинку с рамкой?

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Леонид! Вы пробовали повторить все, что я написал в статье?

    Ответить

  11. Леонид

    Степан, пробовал ваш код, но он немного не подходит. Текст подписи отображается ниже картинки в рамке.
    Использовал другой код:

    .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; }

    То, что и нужно было! Текст подписи стал отображаться прямо на картинке, но сама рамка отображается криво. И возможно ли использовать заголовок статьи на картинке вместо текста подписи?
    Благодарю.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Леонид, можно я посмотрю на вашем блоге, как выглядит эта рамка? Дайте адрес блога и я посмотрю, как можно исправить.
    Насчет вопроса, возможно ли использовать заголовок статьи на картинке вместо текста подписи, отвечу, что не можно.

    Ответить

    Леонид отвечает:

    Извиняюсь за долгий ответ. У нас произошла проблемка с хостингом и поэтому сайт я перенес к себе на компьютер (хорошо успел сделать бэкап).
    С рамкой уже разобрался. Просто нужно было изменить размеры картинки и теперь рамка отображается нормально ;-)

    Ответить

  12. Дмитрий

    Добрый день! Прошу помощи! Не понимаю в чем дело, добавлял подписи к медиафайлам, так они отображаться стали в очень миниатюрном виде, хотя размер стоит средний, и все друг на друге. А мне нужно средний размер файла, с обычной подписью под ним. В чем может быть дело?)

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Дмитрий! Зашел на Ваш сайт, чтобы посмотреть на проблему, я там ничего не увидел. Где именно она? Куда мне перейти, чтобы увидеть все своими глазами.

    Ответить

  13. Артем

    Добрый день. Скопировал ваш код – все получилось, спасибо. Но возникла небольшая проблема – картинки с подписью не хотят центрироваться (не ставятся по центру).
    Если убрать подпись, тогда картинки уже ставятся по центру.
    Подскажите, пожалуйста, что нужно добавить в стилях, чтобы это исправить?
    Заранее спасибо

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Артем!
    В CSS есть вот этот код:

    .aligncenter,
    div.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
    .alignleft
    {
    float: left;
    padding:5px 10px 5px 0;
    }
     
    .alignright
    {
    float: right;
    }
    

    Все должно работать. Пересмотрите код.

    Ответить

  14. Ольга

    здравствуйте, подскажите, пожалуйста, что делать, если не выводится подпись к миниатюре. спасибо заранее)

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: ,

Мои цели на 2016 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 600

4). Добиться стабильной посещаемости 2500 человек/сутки

5). Закончить все статьи, которые находятся в черновиках

6). Создать портфолио и мини интернет-магазин шаблонов

7). Создать книгу

8). Добиться стабильной посещаемости 3000 человек/сутки

9). Довести количество статей до 700

10). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 669
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 3663