Проверяем поддержку миниатюр в WordPress
Для начала нужно убедиться в том, что наш шаблон поддерживает миниатюры для записей. Для этого заходим в административную панель и как бы начинаем писать новый пост (Записи -> Добавить запись). Как правило если поддержка миниатюр записей присутствует, то в правой нижней части экрана мы уже можем задать миниатюру кликнув по ссылке “
Установить специальное изображение“ (пункт 3 на картинке). Но не всегда данный виджет выводится на главном экране, поэтому проделываем пункт 1 и 2:
- 1. В верхней части экрана нажимает на “Опции отображения“. Здесь можно настроить все, что будет выводится на экране добавления записи – поэкспериментируйте.
- 2. Ставим галочку в графе “Характерное изображение“. Если такого пункта нет, значит наш шаблон не поддерживает миниатюры записей.
Добавляем поддержку миниатюр записей в файл functions.php
Чтобы
добавить поддержку миниатюр записей в wordpress нам потребуется отредактировать файл
functions.php. Делается это очень просто: открываем файл на редактирование (Дизайн -> Редактор -> справа выбираем
functions.php) и после <?php вставляем следующие строки:
|
1
2 |
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 – вставляем в поисковую форму искомый код.
Отыскать начало цикла довольно просто и быстро благодаря этим действиям.
Пример: у меня за цикл анонсов на главной странице отвечает файл index.php. А вот за цикл анонсов на страницах рубрик файл theloop.php. Поэтому можно сделать так, чтобы на главной были миниатюры, а на страницах рубрик нет.
Находим цитату записи
В файле так же должна содержаться цитата (так называют текст анонса – именно его мы отделяем от основного содержимого тегом “
читать далее” когда пишем статью). Код цитаты:
<?php the_excerpt(); ?>
Код цитаты нам нужно найти для того чтобы ориентироваться куда мы будем вставлять миниатюру. Рассмотрим вариант, как на этом блоге:
- Миниатюра выводится после цитаты (текста анонса).
Находим код цитаты и вставляем после него код, отвечающий за вывод миниатюры:
|
1 |
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
|
Данный код и выводит миниатюру записи. Обратите внимание, я рекомендую чтобы
миниатюра была выполнена в виде ссылки на статью. В последнее время замечаю на разных блогах следующую ситуацию:
- Миниатюра выполнена в виде ссылки на… себя же, то есть картинку.
- Миниатюра никуда не ведет.
Гораздо удобнее когда картинка ведет на полную статью. В таком случае ссылка должна выглядеть в виде переменной (как в коде выше):
<?php the_permalink(); ?>
Вот и все! Главное отыскать нужное место. Если что-то еще осталось не до конца понятым, то данная картинка должна развеять все вопросы:
Настройка внешнего вида миниатюр записей на WordPress
Следующим этапом является настройка или изменение внешнего вида миниатюр. Можно сделать миниатюру не только под текстом анонса, но и слева или справа. Так как мы придерживаемся варианта как на этом блоге, то миниатюра будет под текстом анонса, и выравненная по центру. Для того чтобы отредактировать дизайн миниатюры открываем список стилей (файл
style.css).
Ищем строчку:
Если такого стиля нет, то его нужно создать. Как было сказано выше стиль для миниатюр можно создать какой угодно, поэтому привожу пример одного из вариантов:
|
1
2
3
4
5
6 |
.wp-post-image {
margin:10px auto 3px;
width:540px;
height:230px;
display: block;
}
|
Здесь мы задали необходимые отступы, а так же ширину и высоту для миниатюры. Можно так же добавить рамочку (как сделал я на этом блоге), но это не обязательно.
Надеюсь благодаря этой статье Вы настроите
вывод миниатюр wordpress записей в нужном для Вас виде.