Как вывести миниатюры в WordPress блоге

Привет читатели блога www.advdk.com!

Как и обещал, что скоро напишу статью о том, как вставлять миниатюры в wordpress. Вставка миниатюр является очень важным фактором для изящного отображения Вашего web-проекта. С изящным юзабилити блога, Ваши посетители будут проводить время у Вас на сайте, а это очень важно для продвижения.

Напишу эту статью, потому что не все темы WordPress позволяют вставлять миниатюры для записей или отображают их не так как хочется Вам. Прочитав данную статью Вы узнаете, как избавиться от этой проблемы.

ЧТО БУДЕТ В ЭТОЙ СТАТЬЕ

  1. С начало мы проверим, поддерживает ли наша WordPress тема миниатюры;
  2. Сделаем поддержку миниатюр в wordpress с помощью вставки специального кода в файл нашей темы;
  3. Ставим в миниатюры туда куда надо нам;
  4. Ищем и находим цикл анонсов наших статей;
  5. Настраиваем дизайн миниатюры.

ПРОВЕРИМ ПОДДЕРЖКУ МИНИАТЮР В WORDPRESS

Для того чтобы вносить какие-то изменения в файлы с нашей темы, нужно проверить нашу WordPress тему на поддержку миниатюр для записей. Захотите в админ панель Вашего блога, на вкладке записи/добавить, короче представим, что нам нужно написать статью и как обычно мы это делаем, в админке нашего web-ресурса – добавляем новую запись.

Если Ваш шаблон поддерживает миниатюры в WordPress, то в верхней части экрана, нажав на ссылку – «настройка экрана», в выпадающем списке должна быть – «миниатюра записей» или «характерное изображение», если у Вас такое есть, тогда ставьте галочку напротив этих функций. После того как Вы поставите эти галочки у Вас должна появиться новое поле – «задать миниатюру» Но, если таких пунктов у Вас нет, тогда будем вставлять специальный код.

Как вывести миниатюры WordPress

Создаем поддержку миниатюр в WordPress

Чтобы у нас появился такой пункт – «вставить миниатюру», нам надо добавить код в файл «function.php». Открывайте этот файл как обычно. Например, я использую файл менеджер – «FileZila». Заходите в корень своего блога, в папку wp-content/themes/название темы, и там откройте файл function.php. Вставляйте в него такой код:

add_theme_support('post-thumbnails'); // поддержка миниатюр
set_post_thumbnail_size(540, 230, false);

Как вывести миниатюры в блоге

Обратите свое внимание на вторую строку где написано – «set_post_thumbnail_size(540, 230, false», 540 – это ширина, а 230 – это высота WordPress миниатюры, по желанию Вы можете изменить эти цифры на свои. При выборе картинки для вставки в нашу запись, она будет сжата или растянута до этих размеров. В стилях css мы продублируем эту ширину и высоту миниатюр для WordPress шаблона.

Как Вы уже поняли, после вставки кода в файл function.php, в наш шаблон добавился новый пункт, в котором мы можем добавить миниатюру. Может я Вас огорчу, но это не еще не все, миниатюры в WordPress пока не будут вставляться правильно. Поэтому читайте дальше внимательно.

Ставим миниатюры в WordPress в нужное нам место

Чтобы найти то самое место для вставки миниатюр, нам нужно найти код начала цикла анонсов в WordPress записи нашего блога.

Наверняка у Вас появился вопрос – «что означает цикл анонса?». Начало цикла – как начало первого анонса. Снимок экрана сделан с моего тестового блога, потому что на этом блоге другая система. Что означает начало цикла, объяснить не получится, смотрите на картинку:

Миниатюры в WordPress

Как Вы видите на картинке – в основе главной страницы блога стоит один цикл, он и выводит анонсы наших записей, на странице еще есть нужные нам элементы дизайна – «шапка, сайдбар и подвал — footer». Код для вывода анонсов:

<?php if(have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

Этот код может быть в файле Вашего WordPress шаблона – index.php или в loop.php, шаблоны все разные, поэтому ищите. Не отчаивайтесь, я Вам помогу с поиском этих строк.

  1. Скопируйте код, который я написал выше, выделите его и нажмите Ctrl+C на клавиатуре;
  2. Откройте файл index.php или loop.php, нажмите на Ctrl+F на клавиатуре;
  3. У Вас должен открыться поиск и теперь можно легко найти нужный нам код, если такого кода нет, то вставляйте туда этот код, нажатием Ctrl+V на клавиатуре.

После проделанных действий, сохраните файл.

ГДЕ ЦИТАТА ЗАПИСЕЙ

В этом же файле должна быть цитата, цитата – текст анонса, анонс выделяется тегом <!—more—>, по-Русски – «читать далее». Код цитаты выглядит вот так:

<?php the_excerpt(); ?>

Найдите этот код, он нам нужен для определения вставки миниатюры в WordPress записи. Представляю один из вариантов:

ВЫВОД МИНИАТЮРЫ ДЕЛАЕТСЯ ПОСЛЕ ЦИТАТЫ

Найдите код цитаты и вставьте после нее код, который выводит миниатюры в записях:

<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>

После добавления, миниатюра в WordPress будет выводиться. Что я рекомендую сделать? Сделаем нашу миниатюру ссылкой на статью. Лазя по блогам, я обнаружил такие ситуации.

  • Миниатюра записи работает как ссылка, для вывода полной записи;
  • Пустая миниатюра, без ссылки.

Будет намного лучше, если миниатюра будет вести на полную запись. Если мы решаем так сделать, то наша ссылка должна выглядеть как в коде, представленном выше:

<?php the_permalink(); ?>

Ну вот, с этим мы покончили. На всякий случай покажу картинку:

Начало цикла чтобы вывести миниатюры

НАСТРАИВАЕМ ВНЕШНИЙ ВИД МИНИАТЮР В WORDPRESS ЗАПИСЯХ

Дальше мы изменим внешний вид миниатюр. Миниатюра в WordPress можно выводить под цитатой, над цитатой, с право или с лева, то есть там, где нам больше нравиться! Мы вроде определились с вариантом под цитатой и выровнена она центру. Открывайте файл стилей – style.css, там мы будем редактировать дизайн нашей миниатюры. Найдите такую строку:

.wp-post-image

Если этой строки в Вашем файле style.css нет, то добавьте ее. Так как мы можем сделать любой стиль для миниатюр в WordPress шаблоне, то покажу такой:

.wp-post-image {
margin:10px auto 3px;
width:540px;
height:230px;
display: block;
}

Прописав данный код, мы сделали нужные нам отступы от текста, задали ширину и высоту для миниатюр в WordPress, можете добавить рамку, но это на Ваше усмотрение.

ЧИТАЙТЕ ТАКЖЕ СТАТЬИ О ОПТИМИЗАЦИИ БЛОГА
Смотрите видео вставка миниатюр в WordPress блог

Вроде все Вам рассказал. Теперь у Вас будет замечательный блог с вставкой миниатюр в WordPress шаблоне Вашего блога. Вы вывели миниатюры в своем блоге?

С уважением, Алексей Кобзарев

10 комментариев

Ваш комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *