Миниатюры в WordPress. Как сделать поддержку миниатюр в WordPress и настроить отображение
Здравствуйте уважаемые читатели блога history-of-blog.ru. Миниатюры в WordPress – это очень важная часть каждого шаблона (темы). Некоторые шаблоны вовсе не поддерживают миниатюры записей WordPress, другие же отображают миниатюры не так как хочется нам. Если Ваша тема не поддерживает миниатюры записей или они отображаются не так как хочется, то эта статья поможет это исправить.
Содержание статьи:
- 1. Проверяем поддерживает ли наш шаблон миниатюры.
- 2. Добавляем поддержку миниатюр (файл functions.php).
- 3. Добавляем миниатюры в нужное место (файл loop.php или index.php).
Находим начало цикла анонсов. Находим цитату (текст анонса).
Проверяем поддержку миниатюр в WordPress
Для начала нужно убедиться в том, что наш шаблон поддерживает миниатюры для записей. Для этого заходим в административную панель и как бы начинаем писать новый пост (Записи -> Добавить запись). Как правило если поддержка миниатюр записей присутствует, то в правой нижней части экрана мы уже можем задать миниатюру кликнув по ссылке “Установить специальное изображение” (пункт 3 на картинке). Но не всегда данный виджет выводится на главном экране, поэтому проделываем пункт 1 и 2:
- 1. В верхней части экрана нажимает на “Опции отображения“. Здесь можно настроить все, что будет выводится на экране добавления записи – поэкспериментируйте.
- 2. Ставим галочку в графе “Характерное изображение“. Если такого пункта нет, значит наш шаблон не поддерживает миниатюры записей.
Добавляем поддержку миниатюр записей в файл functions.php
Чтобы добавить поддержку миниатюр записей в wordpress нам потребуется отредактировать файл functions.php. Делается это очень просто: открываем файл на редактирование (Дизайн -> Редактор -> справа выбираем functions.php) и после <?php вставляем следующие строки:
add_theme_support('post-thumbnails'); // поддержка миниатюр
set_post_thumbnail_size(540, 230, false);
Обратите внимание на цифры 540 и 230 – это желаемая ширина и высота миниатюр соотвественно, а третий параметр (в данном случае false) означает то, что картинка, которую мы выберем в качестве миниатюры будет автоматически сжата (или растянута) до этих размеров. Однако, в последствии мы продублируем ширину и высоту через стили (в файле style.css).
Прописав эти две строчки в файле functions.php мы добавили в наш шаблон поддержку миниатюр! Однако это лишь пол дела, теперь нам нужно указать конкретное место, где будут выводиться миниатюры.
Установка миниатюр записей в нужное место
Для того чтобы найти то место, куда нужно вставить миниатюру нам потребуется отыскать код начала цикла анонсов. Что значит начало цикла анонсов? Начало цикла совпадает с началом первого анонса (смотрите картинку и все поймете):
Как видите в основе главной страницы стоит всего лишь один цикл, который выводит анонсы записей (так же на странице присутствуют необходимые элементы дизайна: шапка, футер и сайдбар). Код НАЧАЛА вывода анонсов:
<?php if(have_posts()) : ?> <?php while (have_posts()) : the_post(); ?>
Находиться он может в файле loop.php или index.php в зависимости от шаблона. В поиске этих строк нам могут помочь три комбинации клавиш:
- Ctrl+c – копируем код, который представлен выше.
- Ctrl+f – открываем файлы loop.php и index.php и нажимаем эти горячие клавиши. Благодаря этому действию мы включим поиск по странице.
- Ctrl+v – вставляем в поисковую форму искомый код.
Отыскать начало цикла довольно просто и быстро благодаря этим действиям.
Находим цитату записи
В файле так же должна содержаться цитата (так называют текст анонса – именно его мы отделяем от основного содержимого тегом “читать далее” когда пишем статью). Код цитаты:
<?php the_excerpt(); ?>
Код цитаты нам нужно найти для того чтобы ориентироваться куда мы будем вставлять миниатюру. Рассмотрим вариант, как на этом блоге:
- Миниатюра выводится после цитаты (текста анонса).
Находим код цитаты и вставляем после него код, отвечающий за вывод миниатюры:
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
Данный код и выводит миниатюру записи. Обратите внимание, я рекомендую чтобы миниатюра была выполнена в виде ссылки на статью. В последнее время замечаю на разных блогах следующую ситуацию:
- Миниатюра выполнена в виде ссылки на… себя же, то есть картинку.
- Миниатюра никуда не ведет.
Гораздо удобнее когда картинка ведет на полную статью. В таком случае ссылка должна выглядеть в виде переменной (как в коде выше):
<?php the_permalink(); ?>
Вот и все! Главное отыскать нужное место. Если что-то еще осталось не до конца понятым, то данная картинка должна развеять все вопросы:
Настройка внешнего вида миниатюр записей на WordPress
Следующим этапом является настройка или изменение внешнего вида миниатюр. Можно сделать миниатюру не только под текстом анонса, но и слева или справа. Так как мы придерживаемся варианта как на этом блоге, то миниатюра будет под текстом анонса, и выравненная по центру. Для того чтобы отредактировать дизайн миниатюры открываем список стилей (файл style.css).
Ищем строчку:
.wp-post-image
Если такого стиля нет, то его нужно создать. Как было сказано выше стиль для миниатюр можно создать какой угодно, поэтому привожу пример одного из вариантов:
.wp-post-image {
margin:10px auto 3px;
width:540px;
height:230px;
display: block;
}
Здесь мы задали необходимые отступы, а так же ширину и высоту для миниатюры. Можно так же добавить рамочку (как сделал я на этом блоге), но это не обязательно.
Надеюсь благодаря этой статье Вы настроите вывод миниатюр wordpress записей в нужном для Вас виде.
