Добавление миниатюры изображения к записи сайта на WordPress

Всем доброго времени суток! Работая над дизайном своего сайта на WordPress, иногда требуется добавить миниатюру изображения в анонс записи. Это увеличивает привлекательность сайта и способствует повышению кликабельности ссылок. Давайте поговорим в данной статье о том, как это сделать с помощью нескольких простых шагов.

Добавление миниатюры изображения к записи

Первое, что необходимо сделать, это проверить поддерживает ли шаблон темы вашего сайта работу с миниатюрами. Для этого открываем в редакторе файл functions.php и ищем в нём строчку:
add_theme_support('post-thumbnails');
Если строчку нашли, значит, тема поддерживает работу с миниатюрами, иначе её следует вставить в код файла.
Теперь можно переходить непосредственно к добавлению миниатюры изображения к статье. Для этого открываем редактор записи, в котором имеется два способа прикрепления миниатюры.
Первый способ. Нажимаем кнопку «Добавить медиафайл».  Добавление миниатюры изображения записи  Далее щёлкаем по «Изображение записи», а после можем выбрать изображение из загруженных или загрузить новое.  Добавление изображения записи  Второй способ. Внизу правого столбца редактора записи находим блок «Изображение записи» и выбираем «Задать изображение». Блок изображение записи В открывшемся окне можно выбрать изображение из загруженных, или загрузить новое.
Обратите внимание, что если пункт «Изображение записи» не отображается на экране, то нужно открыть «Настройки экрана» и поставить галочку напротив соответствующего пункта.  Настройка экрана записи WordPress  С помощью блока «Изображение записи» можно отредактировать установленную миниатюру (заменить на другую, изменить размеры).
Теперь миниатюра изображения добавлена к записи.

Редактирование шаблона темы

После того как прикрепили миниатюру к записи можно просмотреть где и как она отображается. Разные темы по-разному вставляют миниатюры в тело страницы. Например, картинка находится перед заголовком статьи, а нам хотелось, чтобы она шла после заглавия. Для этого необходимо найти, где в коде вызывается функция добавления миниатюры the_post_thumbnail(). Она может находиться в файлах index.php или loop.php.
Находим и комментируем весь блок кода, в который входит данная функция. Проверяем, как теперь отображается миниатюра в анонсе статьи. Если изображение исчезло, и никакого мусора нет на странице, то закомментировали правильно.
Далее, необходимо найти место вставки миниатюры в коде. Анонс, если используется тег more, добавляют функцией the_content(). А значит перед ней и нужно отобразить картинку. Копируем закомментированный нами код и вставляем перед функцией the_content(). Сохраняем файл и проверяем, как отображается изображение. Если в нужном месте, то переходим к следующему шагу.

Редактирование таблицы стилей CSS

Заключительные штрихи дизайна миниатюры делаем с помощью таблицы стилей CSS. Находим класс, отвечающий за изображение в записи, и выставляем ему нужные атрибуты. Например, обтекание текстом слева, отступ от картинки справа и слева.
.post-image {
float: left; /* Обтекание картинки по левому краю */
padding-right: 5px; /* Отступ справа */
padding-bottom: 2px; /* Отступ снизу */
}

Сохраняем внесённые изменения и смотрим что получилось. При необходимости настраиваем нужный дизайн отображения картинки.
Теперь у вас должна получиться кликабельная миниатюра изображения в анонсе записи.
На этом всё. До следующих статей.