
Миниатюры в 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 записей в нужном для Вас виде.
Похожие статьи:
-
Руслан | 01.07.2012 в 1:08
Да, статья мегакул!!! Хотя я миниатюрами и превьюшками не пользуюсь…
-
Руслан | 01.07.2012 в 10:25
Антон, забегай в гости. Думаю тебе будет интересно
-
Евгений | 01.07.2012 в 11:28
Антон, все написал доступно и понятно, как всегда разложил, разжевал, осталось только проглотить. Спасибо, попробую применить, у меня кстати нет миниатюр, так что придется делать
-
Владимир Жданов | 02.07.2012 в 13:13
Я думаю это картинки для статей. У меня у самого нет миниатюр, и не знаю делать ли их…
-
Татьяна | 01.07.2012 в 17:36
А …у меня установлены миниатюры в записях. Но есть еще вверху возможность запустить их слайдами.
что посидеть еще раз все попробовать сделать….. Два раза делала не выходит….
-
Татьяна | 01.07.2012 в 21:46
Не выходит, записи только вверху появляются. Может сегодня получится посидеть и разобраться. Может миниатюры нужно в другом формате вставлять?
-
Владимир Жданов | 02.07.2012 в 13:14
А июньский стриптиз будет?
-
Лариса | 27.08.2012 в 15:29
Антон, а ты случайно не знаешь, как в вордпрессе отключить создание копий картинок разных размеров? Чтобы не было вот такой фигни: http://podelki-doma.ru/wp-content/uploads/2012/08/vopros.gif
-
Лариса | 27.08.2012 в 15:52
Я всю мелочь поудаляла, и заодно исчезли миниатюры постов… Пришлось по новой эти фотки добавлять, которые в анонсе.
-
Лариса | 27.08.2012 в 19:02
Ну вот эти все 150х150, 230, 300… Видимо, на автомате туда и анонсные превьюшки попали, новые не захотели создаваться, пришлось отдельные фотки перезагружать на сервер.
-
Лариса | 27.08.2012 в 19:52
Я оттуда и поудаляла. Они ведь не нужны. Я так понимаю, это разные вещи: когда он предлагает на выбор эти 150, 300 и когда проценты от размера ставишь (70%, 80%)
-
Антон | 19.11.2015 в 12:46
Лариса, эти миниатюры нужны 100%, ведь ВП на них посылается в функциях, там где строковые константы: “thumbnail”, “large”. если вы их удалили то придется ставить плагин для регенерации миниатюр. Вот тут немного описано http://help-wp.ru/miniatyura-posta-v-wordpress-kak-vyvesti-miniatyuru-kak-zadat-razmer-miniatyury/
-
Юрий | 10.11.2012 в 3:48
Автору огромное спасибо! Статья очень помогла!
-
GloBus | 01.12.2012 в 1:28
Здравствуйте, интересная статья.
У меня вопрос:
выводится миниатюра привязанная к статье когда заходишь на саму статью, но не хочу ее там вообще видеть. как это реализовать?
ответьте пожалуйста, очень нужно
-
Сергей | 23.01.2013 в 21:15
Скажите, пожалуйста, почему при выводе миниатюры со ссылкой на саму статью не выводится задаваемый мною тайтл этой ссылки? Выводится тайтл самой фотографии. В чём моя ошибка?
-
Serpent | 10.02.2013 в 21:33
Весь свой шаблон облазил – не нашёл где реализован цикл записей. loop.php вообще нет, а в index – ничего даже отдалённо похожего. И тем не менее они (статьи) всё же выводятся на главной.
Х.З.
-
Serpent | 10.02.2013 в 21:42
Да это-то понятно, иначе не отображалась бы лента на главной. Бум искать. Потом. Мой дебильный хостинг опять заботится о моём здоровье. :-/ А вообще – ничего так статья, полезно. Хорошо расписано. Как раз для таких дуболомов, как я. )))
-
Serpent | 10.02.2013 в 23:59
Я пока слабовато разбираюсь в PHP, обычно как залезу в шаблон – обязательно дров наломаю, поэтому и дуболом. ))) Всему своё время. В любом случае – сайт у меня для развлечения, денег им не зарабатываю, сео не увлекаюсь. Так, чисто для себя и знакомых, так что не смертельно.
-
Serpent | 10.02.2013 в 21:50
Подписался. Почитаю на досуге.
-
Владимир | 02.03.2013 в 21:30
Доброго времени суток. Скажите как можно настроить миниатюры не ковыряясь в коде, так сказать из коробки. У меня он их делает, но криво обрезает вот пример http://rusdelphi.com/ статья переворот строки
-
Александр | 10.03.2013 в 22:20
Доброго времени!
Антон подскажите, как мне установить фотографию слева от заглавия моего блога, когда он находится к выдаче в поиске на Google.Это очень для меня удобно бы было, разыскивать свой блог по фотографии среди множества заглавий сайта, когда ищешь его при поиске.
Александр
-
Евгения | 21.03.2013 в 22:51
Скажите, а я только начинаю знакомство с вордпресом, как сделать так, чтобы текст статьи был всегда отформатирован по ширине странице. Где это прописать?
-
Сергей | 30.03.2013 в 13:09
А ещё нужно было приписать в конце поста – блондинкам не лезть в код ( забодался после таких умниц переделывать )
-
Герман | 10.04.2013 в 1:24
Странно, но у меня вывод миниатюр не получается никак. Шаблон Admired. В нем уже имеется функция вывода миниатюр, в код добавлять не нужно ничего. Буду просто в пост в нужное место изображение тогда ставить
PS: классный дизайн у тебя
-
alin | 02.05.2013 в 14:30
как прописать в шаблоне следущее
– если миниатюра не задана, то анонс (на главной) не выводить вообще
-
Вячеслав | 02.06.2013 в 20:41
Здравствуйте!
Сейчас у меня стоит стандартная 12 тема вордпресса. Там миниатюры автоматически выводятся после заголовка и поверх текста статьи. подскажите, пожалуйста, как можно настроить, чтобы миниатюра обтекалась текстом. То бишь в анонсе статьи слева была миниатюра, а текст анонса справа, а он у меня по умолчанию всегда внизу находится под картинкой.
-
Вячеслав | 03.06.2013 в 12:07
Спасибо за ответ! Это и так понятно
Просто подумалось, что Вы новичкам помогаете, так как по-сути людям хорошо знающим html и css Ваша статья не особо то и нужна…
Кстати, Ваш ответ, ко мне сразу в спам-папку в гугл почту попал, поэтому не сразу его заметил…
-
Сергей | 28.06.2013 в 11:04
Спасибо. Очень помогло. У меня вывод для стартовой и категорий находится в одном файле loop.php (тема TwentyTen).
для стартовой выводится:
the_content( __( ‘Continue reading →’, ‘twentyten’ ) )
для категорий:
the_excerpt()
-
Сергей | 28.06.2013 в 11:34
И чего-то не получается задать размер миниатюра. Формируется оно с каким-то дефолтным размером.
-
Сергей | 28.06.2013 в 12:08
Нашел. При выводе надо сделать:
the_post_thumbnail(array(150,150))
-
Мурат | 03.08.2013 в 19:00
добрый день!
можете подсказать:
я на сайт http://yurprava.ru добавляю запись, привязываю к рубрике,
нажимаю опубликовать. А когда щелкаю по ней, страничка не открывается,
вылезает ошибка, страница не найдена и вот такая ссылка
http://yurprava.ru/http:/yurprava.ru
В чем может быть проблема? Где можно и что надо посмотреть?
-
Мурат | 05.08.2013 в 1:43
да, в разделе «настройки постоянных ссылок» поменял с «произвольно» на «по умолчанию», заработало =)… только ссылки некрасиво отображаются
-
Мурат | 05.08.2013 в 16:20
Спасибо!!! все заработало! ссылки приняли человеческий вид
-
Мурат | 05.08.2013 в 1:44
только теперь комментировать нельзя…не пойму куда делось это окошко
-
Мурат | 05.08.2013 в 16:11
по поводу комментариев: помогло, поставил галочку, комментарии появились! спасибо!
Антон, а как закрыть ссылки на сайты людей, которые будут оставлять свои комментарии?? через редактор ставить тег ?? так?
-
Мурат | 05.08.2013 в 16:21
я имел в виду от индексации и передачи веса своего сайта
-
Мурат | 05.08.2013 в 16:13
тег ноиндекс?
-
Мурат | 06.08.2013 в 1:32
ты не ставишь этот тег? то есть не закрываешь от индексации?
-
Мурат | 07.08.2013 в 0:28
читал у Евгения Вергуса, что вроде как вес сайта могут забирать, поэтому надо закрывать
-
Лариса | 08.08.2013 в 20:07
Антон, это шутка была? Спасибо, что пометил
Кстати, у Жени тоже куча ссылок исходящих (если RDS-бар мне не врет).
-
Мурат | 05.08.2013 в 16:14
еще я хотел сделать окошко – подписаться на уведомления о оставленных комментариях на данную запись, как на вашем сайте: подскажите, пожалуйста, как это сделать? что и куда вставить?
-
Мурат | 06.08.2013 в 1:31
спасибо, Антон! установил плагин, поднастроил чуток, проверил, заработало!
жду в гости с комментами))
-
Мурат | 07.08.2013 в 0:38
о чем статья?)
-
Мурат | 07.08.2013 в 0:31
Антон, еще вот такой вопрос: вот здесь http://srubizakaz.ru/category/bani при переходе в конкретную рубрику окно открывается некорректно (виджеты сместились все из правой части влево), думаю, что я какой-то тег “потерял”, можешь подсказать какой и куда его вставить надо?
-
Лариса | 08.08.2013 в 20:10
У Руслана, кстати, сегодня юбилей
-
Лариса | 08.08.2013 в 20:29
Я думаю, сейчас он уже “невконтакте”
Можешь на его сайте оставить сообщение
-
Андрей | 24.08.2013 в 14:31
размер миниатюры не изменяется таким способом
нужно вот так вывод делать the_post_thumbnail(array(150,100));
150 – 100 это размеры
-
Мурат | 24.08.2013 в 15:45
Привет, Антон!
хочу снова обратиться за помощью:
установил на сайте специальный плагин “похожие записи”, но как оказалось, чтобы он мог показывать похожие статьи, необходимо настраивать метки.
а еще нашел код, специально чтобы выводить похожие записи без плагина, но не знаю куда этот код необходимо вставить, чтобы все заработало.
Можешь посказать:
1) куда надо вставить код?
либо 2) как настроить метки к рубрикам, чтобы выводились похожие записи
-
Мурат | 25.08.2013 в 2:29
спасибо, Антон!
я поставил код, вроде заработало!
жаль, что этот код только для записей. Хотел его поставить на второй сайт, где 99% – это статьи, но он на статьи не рассчитан
-
Мурат | 01.09.2013 в 12:12
Привет, Антон!
занимаюсь сайтом, возник еще один вопрос интересный: вот у тебя внизу под комментированием стоит квадратик “Это не спам!”. А я поставил плагин Антиспам, но он первое время блокировал даже мои комменты. Потом вдруг перестал. Но периодически, видимо, некоторые комментарии все же блокирует. Кстати, вот и сам плагин Antispam Bee.
Думаю, сменить его лучше? Как считаешь?
Подскажи, пожал, какой плагин ты ставил. Мне он больше нравится.
-
Николай | 11.09.2013 в 15:44
Подскажите пожалуйста! У меня миниатюра ставится и большая картинка! а я бы хотел, чтобы миниатюра была с цитатой или анонсом статьи справа (архивы), но почему-то там только перечень записей(
-
Николай | 11.09.2013 в 17:15
Дело в том, что я много уже читал про the_content(); и he_excerpt(); но сколько бы я не искал в каталогах и архивах content я его не нахожу((( может где-то еще они находтся
-
Ash grey | 21.09.2013 в 15:36
Здравствуйте не могу разобраться. Я использую производную от темы twentyten, то есть переделываю её. В function.php прописал “set_post_thumbnail_size( 180, 180 , true );”, но при добавлении характерного изображения он срезает его до 180*37. Возможно, это связано с тем что в twenty ten thumbail уходит в область headera. Я буду очень вам признателен, если поможете разобраться
-
Олег | 08.11.2013 в 0:06
Антон, подскажите, а как сделать вывод миниатюры в запись с определенным размером? Например я хочу сделать вывод миниатюры в начале статьи 600*400, как это можно сделать?
-
Олег | 08.11.2013 в 10:20
Спасибо! Я сделал в цикле файла single.php вот такой вывод
“(center) (?php the_post_thumbnail(array(600,350)); ?> (/center) ”
Может кому-то понадобиться. Только та нужно заменить скобочки с “()” на “”
-
Даниил | 18.11.2013 в 19:09
Рекомендую в статье указать, что ширину или высоту можно обозначить “auto”, чтобы изображение было уменьшено/увеличено пропорционально и, таким образом, не искажалось.
-
Лариса | 19.12.2013 в 11:12
Ценное замечание, спасибо. В следующий раз попробую так.
-
Алексей | 04.12.2013 в 17:23
Можете поподробнее объяснить: что нужно сделать, чтобы миниатюра выводилась слева от текста анонса?
-
Лариса | 07.12.2013 в 15:38
Фуууухххх. Сделала в новом шаблоне
Хорошо, что есть твои настройки, код оттуда скопировала, места нашла кое-как. Спасибо!
Как тебе служится?
-
Artem | 14.12.2013 в 20:04
Подскажите, а можно сделать, чтобы миниатюра отображалась только в рубрике или в анонсах, при этом не отображалась в самой статье?
-
Дарья | 10.01.2014 в 23:52
ПОМОГИТЕ, ПОЖАЛУЙСТА!! я как ни билась, не понимаю, почему не выводятся картинки (миниатюры) у анонсовых заголовков (эксерптс) очень прошу, без них так скушно куцо все выглядит ((( с самго начала они не отображаются ((( а тема поддерживает!! =(
-
Михаил | 31.01.2014 в 20:30
Замечательная статья, автору респект. Но у меня немного другая проблема хотя из этой же области. Так вот; вместо одной миниатюры на постовой странице выводится две и как бы я ни бился с этой проблемой… да только воз и ныне там.
Подскажите пожалуйста как убрать ту что большая buksir911.ru/category/news
-
Tatiana | 01.03.2014 в 8:13
Здравствуйте. У меня в анонсе записи сейчас стоит миниатюра, когда открываю запись – она же открывается, только чуть-чуть большего размера. Когда я в запись добавляю большую картинку помимо миниатюры, то окрыв запись – там 2 картинки: и миниатюра и большая – все вместе. Скажите, пожалуйста, а как сделать, чтобы в анонсе картинка была как миниатюра, а открыв запись – эта же миниатюрная картинка увеличивалась до полного размера или до указанного размера. спасибо
-
Андрей | 12.04.2014 в 20:27
Привет, большое спасибо за статью, написал очень доходчиво, что даже у меня все получилось, единственное что интересует это, что нужно прописать в слиле, чтобы картинка отображалась с лева возле текста, а не под текстом. Заранее спасибо.
.wp-post-image {
margin:10px auto 3px;
width:212px;
height:300px;
display: left;
}
-
woldemar | 04.06.2014 в 13:23
Добрый день!
а скажите как сделать, чтобы кликая по миниатюре в посте, открывалась картинка большего размера (где ее можно задать)? заранее благодарю
-
Ирина | 02.12.2014 в 0:19
Помогите пожалуйста вывести миниатюры в рубриках. На как не получается. Тема TwentyTen
-
serialmint.ru | 04.07.2015 в 12:13
Имейте ввиду, что даже если метабокс у вас подключен, он может не отображаться на странице редактирования поста. Как включить его отображение?
-
Serg | 01.09.2015 в 21:38
Спасибо, выручил.
-
Александр | 13.01.2016 в 20:19
Статья хорошая, но всё таки я так и не разобрался. Что делать, если в моей теме the-bizness файла loop.php нету??? При написании поста, можно выбрать миниатюру записи, но при публикации, она не отображается! Я уже замучился, не знаю что делать! ПОМОГИТЕ!!!
-
Александр | 18.01.2016 в 12:31
Я разобрался. Можете в статье дополнить. Если в теме не отоброжаются миниатюры, нужно сделать следующее:
В файле content.php нужно добавить код отображения миниатюр, для это после строчки:
Нужно прописать следующий код:
“alignleft post_thumbnail”));} ?>
Где 130, 130 это размер миниатюры.
-
Иван | 12.06.2016 в 13:08
Помогите решить проблему
Задаю миниатюру , в категориях отображается красиво и по порядку, а на главной странице отображается сверху миниатюра чуть ниже основная картинка статьи и получаются в столбик маленькая и большая картинка.
Как сделать что бы миниатюра отображалась только в категориях а не на главной
-
Lana Vita | 21.03.2017 в 9:19
Приветствую вас, Антон)) У меня на сайте http://polnaymoda.ru/ не получается поставить миниатюры к страницам и рубрикам. Как это исправить? тоже нужно плагин поставить?
Прям по полочкам разложил. Единственное, у меня нет такой функции the_excerpt();. Если бы я делал себе миниатюры, я бы просто закинул код в цикл и уже стилями выровнял его положение. В любом случае за статью спасибо! Реально мощная!