Как настроить вывод превью-картинок в анонсах на WordPress
Сегодня увидела на форуме вебледи, что sonehka просит помощи: не выводятся картинки к анонсам. Помнится, несколькими днями ранее я помогала еще одному человеку 
с анонсами… И подумалось мне, что тема-то насущная. Видимо, многим полезно будет узнать, как настроить вывод превью-картинок в анонсах на WordPress.
Выводить мы из будем с помощью встроенных средств самого Вордпресса, никаких плагинов. Работает для WordPress 2.9 и выше.
Как настроить вывод превью-картинок: инструкция
1. Заходим в админку. Переходим в Дизайн >> Редактор.
2. Смотрим в правый “сайдбар”, там выбираем из файлов шаблона “Функции | functions.php”.
3. Теперь вставляем в конец файла следующий код:
<?php if ( function_exists( 'add_theme_support' ) ) add_theme_support( 'post-thumbnails' ); ?>
4. Сохраняем изменения:
Должна появиться вот такая надпись:
На этом самая простая часть закончена. А вот следующее будет сделать новичкам чуть сложнее, чем бывалым вебмастерам, знающим структуру ВП. Но ничего – справимся! 
5. Теперь в списке файлов темы выбираем index.php, в разных версиях ВП по-русски файл называется по-разному.
А вот теперь самое сложное. Нужно понять, какая часть кода отвечает за вывод заголовка, превью и текста анонса. Как правило, в большинстве тем Вордпресс анонсы на главной выводятся либо с помощью
<?php the_content ?>
либо через
<?php the_excerpt(); ?>
Попробуйте поискать эти строчки в коде, для более быстрого поиска нажмите на клавиатуре комбинацию клавиш ctrl+F и в окошко скопируйте сначала the_content, а потом, если ничего не найдется, the_excerpt.
У меня на Вебмастерице посты выводятся с помощью the_content. Это как раз классический случай, когда выводится часть поста до тэга more. Выглядит в файле index.php этот кусок кода вот так:
Скрин получился большой, кликните для увеличения, если не видно.
Удаляем строку с the_content (если же у вас the_excerpt – его оставляем) и вставляем следующий код:
<?php the_post_thumbnail(array( 120,120 ), array( 'class' => 'alignleft' )); ?>
Поясню:
120,120 – ширина и высота превью в пикселях.
‘class’ => ‘alignleft’ – обтекание картинки (картинка будет прижата к левому краю)
Ну а дальше нам нужно вывести текст. Если у вас уже был the_excerpt, то вы можете уже сохранять изменения. Если же был the_content, то после кода вывода превьюшки нужно вставить:
<?php the_excerpt(); ?>
То же самое нужно повторить с файлом archive.php, если он есть в файлах вашей темы Вордпресс.
Почему картинок не видно в анонсах?
Итак, вы все сделали и сохранили, но картинок в анонсах все так же нет. Это нормально, так и должно быть. Сейчас объясню, что сделать, чтобы долгожданные превьюшки наконец появились.
Зайдите в последнюю опубликованную статью (надеюсь, это все умеют делать и скрины тут не нужны). Если вы внимательно обследуете правый сайдбар админки, то увидите кое-что новое:
В других переводах там написано “Установить миниатюру”.
Кликаете на ссылку, и он предлагает залить картинку, но если у вас уже есть картинки к статье, то можно просто зайти в Галерею:
Там вы увидите список совсем маленьких превью картинок, и справа от каждой будет ссылка “показать”. Выбираете нужную картинку, кликаете по ссылке. Затем прокручиваете до места, где есть кнопка “Вставить в запись”. Рядом с ней вы увидите новую ссылку:
Нажимаете на нее. Ждете появления надписи “Готово”, после чего нужно закрыть окно загрузки картинок и обновить пост/статью.
Когда же вы пишете новую статью, то любую из заливающихся картинок можно сделать превьюшкой. Более того, превью можно сделать из картинки, которая в посте и вовсе нигде не выводится.
Ну вот вроде бы и все. Пишите, если есть вопросы – постараюсь ответить.
ЗЫ. А вот и видео-урок от AlexGR:
Есть еще один метод вывода превью, в котором берется первая картинка в посте автоматически – читаем тут.
Вы не представляете себе, сколько времени я разбиралась с этими кодами, оказывается все так просто! Спасибо!
Ответить
Елена, очень рада, что пригодилась моя инструкция.
Кстати, на вашем сайтике есть блок “Это интересно”, где выводится код адсенс. Это нарушение правил адсенс, так что измените название на “Объявления Google” или “Google Adsense” – на кликабельности это не сказывается, а вот заблокивать ваш аккаунт за нарушение правил уже не смогут).
Ответить
Юлечка! Очень толковая инструкция, подойдет как для новичков, так и уже для более-менее опытных мастеров, которые не очень-то любят заглядывать в коды и изменять их. Спасибо! Надеюсь, мне пригодится, изучила тщательно)
Ответить
Аннин, спасибо! Рада, что пригодилось.
Ответить
Спасибо за подсказку, название блога поменяла.
Ответить
Ты хорошо разбираешься, подскажи, знаешь как верхний слайдер настроить? Чтобы интересные посты сверху показывались (в теме Сплендио есть такая функция)?
Ответить
Наталья, темы все разные, соответственно, и настраивать их нужно по-разному.
Ответить
Спасибо!
Ответить
А у меня ничего не сработало
Ответить
прочитал Вашу статью.сделал все как у вас написано)
но не получается чегото….
текст почемуто все время идет после картинки!
вот сделал, вот что получилось…
http://www.profseo.com.ua/news_it
может что посоветуете.
Ответить
Теперь вроде бы нормально. Алексей, в следующий раз для оперативного ответа пишите на мэйл или в асю.
Ответить
спасибо)
очень хороший у Вас блог.)
все подробно и интересно объясняете)
Ответить
Для полноты понимания картины, как оказалось, мне не хватало лишь одной строчки кода. Нашел его у вас в записи и двухчасовое ломание головы на тему “как же вывести картинку на главную” закончилось.
Спасибо. Хорошо поясняете.
P.S. на своем блоге написал подобную статью (с сылкой на ваш блог) + сделал видеопояснение. Вот ссылка http://youtu.be/6zVrDZXjptI если есть желание можете добавить его к себе в запись.
Ответить
Вебмастерица отвечает:
О, здорово, сейчас добавлю запись!
Опередили – я все хотела видео-уроки делать, но заленилась.
Ответить
А у меня из- за добавления вашего кода вообще сайт теперь не открывается. Придется его удалять через хостинг.
А в конце вставляла как писали.
Не хорошо как-то
Ответить
Вебмастерица отвечает:
Елена, во-первых, удалять весь сайт не надо – можно через FTP поправить functions.php, либо попросту его заменить аналогичным файлом этой же темы.
Во-вторых, возможно, у Вас там были лишние пробелы либо до, либо после введенной строки.
В-третьих, очень возможно, что Вы вставили строку ДО закрывающей скобочки ?>. Соответственно, такое не работает.
А вообще, если Вы начинающий вебмастер и не уверены в своих действиях, советую Вам сделать копию своего сайта на Денвере и все изменения проводить не на уже работающем сайте, а на его локальной копии. Я так начинала, да и сейчас что-то новое нередко опробую именно на локальной копии – жаль терять сотню-тысячу другую посетителей из-за ошибки в коде.
Ответить
Elena, возможно Вы просто допустили небольшую ошибку при вставке кода. Такое бывает иногда. Главное не торопиться и делать все со знанием дела, а если в чем-то сомневаетесь – спрашивайте, поможем.
Ответить
Вебмастерица Пишет…, ну прям на чуть-чуть опередила меня с комментарием )))
Ответить
Грамотно написано, молодец Вебмастерица.
Ответить
А у меня все вроде бы сначала получилось, но при установке миниатюр (превью) в рубриках все съезжает вправо.
Т.е. отображается превьюшка, под ней безо всякого обтекания текст, а правый сайтбар вообще пропадает, не помещается в ширину.
Что делать?
Сейчас пока все вернула в прежнее состояние, но хотелось бы все-таки настроить превьюшки.
Ответить
Вебмастерица отвечает:
Яна, к сожалению, и Вам я не могу ответить, т.к. причины могут быть разные. Нужно смотреть стили css – видимо, там было прописано обтекание.
Ответить
нече не получилось но неважно а как называется песня из видео ? ))
Ответить
С удовольствием посетила Ваш сайт!
Так все-таки как выбрать верную строчку кода для удаления, может кроме the_content есть и еще ориентиры?
Помогите, пожалуйста, верно выполнить инструкцию:
через поиск по index.php the_content встречается 10 раз и the_excerpt 3 раза. Из них ни одной точно такой же строчки как на Вашем рисунке (понятно, шаблоны у всех разные). Сайтокопатель я начинающий и не рискнула удалить ни одну из строчек, содержащих the_content, лишь перед блоком, содержащим the_excerpt (соблюдая теги) добавила рекомендованный Вами код. Верилось в работоспособность этого как в Деда Мороза, ну и да, не сработало
Ответить
Вебмастерица отвечает:
Светлана, я “наощупь” не могу сказать, что именно Вам нужно удалять.
Поэкспериментируйте. Не забывайте при этом о бекапах, я бы посоветовала перед экспериментом оригинальные файлы темы скопировать в укромное место. 
Ответить
Сергей, песня: Parov Stelar – You And Me
Ответить
Спасибо, мне тоже пригодилась информация )
Ответить
Привет! Скажите а если я уже использую картинки хранящиеся у меня на Web альбоме Picassa и они уже встроены в посты.. можно ли как нибудь их вывести теперь в анонсы этих постов. Предложенный вами метод у меня сработал отлично, но очень хотелось бы обойтись теми картинками которые я уже использую с Picassa а не загружать новые на хостинг (
Ответить
Вебмастерица отвечает:
Переговорили с вами в асе.
Надо другой способ вывода превью тоже разместить у себя… А то аки Кащей над златом чахну.
Ответить
Спасибо огромное, сколько я намучилась, пока вашу статью нашла, респект!
Ответить
Вебмастерица отвечает:
Ирина, рада, что смогла помочь.
Ответить
[...] посте про вывод превью средствами ВП ко мне обратился с таким вопросом [...]
Добрый день, не пойму почему у меня вылазиют крякозябры. Вроде делаю в правильной проге где не изменяется кодировка. Как только сделаю по интсрукции вашей так изменится кодировка всего сайта!!! Скажите ,что я не так делаю?
Ответить
Вебмастерица отвечает:
Очень сожалею, но штатный телепат в отпуске.
В какой “правильной проге” делаете?
Ответить
Олег отвечает:
codelobster, я в ней шаблон уже делал с нуля все ок там кодируется
Ответить
Вебмастерица отвечает:
Проверьте кодировку конкретного файла. Нужно, чтобы было в кодировке UTF-8 без BOM.
Ответить
Здравствуйте. Спасибо за очень хорошее объяснение о превьюшках. Сделал, как Вы советуете – все заработало! Но еще хотелось бы узнать: как убрать на всех страницах в теме пустые превьюшки, которые автоматом там ставятся на каждой статье в каждой рубрике. Пробовал удалять, находя их через код элемента, но удаляются конкретные, а не все сразу в теме. Буду благодарен за помощь.
Ответить
Вебмастерица отвечает:
“На всех страницах” – имеются в виду записи? Тогда смотрите файл single.php.
Ответить
Vitaly отвечает:
Спасибо за ответ. Немного ввел Вас в заблуждение: эти пустые превьюшки отображаются в каждой рубрике на анонсе каждой статьи, а если перейти в саму статью, то их там нет, там уже вставленная при создании новой записи картинка, как положено, появляется. Буду копаться дальше.
В файле singl.php ничего, к сожалению, не нашел. А при просмотре кода элемента этих превьюшек сноска вот на такую запись: . В основном шаблоне находится похожая запись <img src="” alt=”" class=”imgspcaer” />. Может быть, ее нужно удалить…
Ответить
Вебмастерица отвечает:
Да, скорее всего, именно эту строку и нужно удалить.
Ответить
Очень понравилась статья. Люблю такие пошаговые уроки, которые даже начинающему позволяют достичь желаемого.
Не с первого раза, но все же изменила функции и шаблон. Но превьюшки так и не выходят.
Не менее 10 раз повторяла все действия, но картинки не появляются ни в записи, ни в анонсе.
Знаю, что ошибки у меня, но не могу сообразить.
Ответить
Вебмастерица отвечает:
В записи их быть и не должно.
Что именно не получается?
Ответить
panda отвечает:
Нашла причину почему у меня не выходили в анонсах превьюшки. Все сделала по инструкции, но не обратила внимание, что в архивах надо проделать тоже действие, что и в index.php
Спасибо, отличный урок.
Ответить
Вебмастерица отвечает:
Рада, что у Вас все получилось.
Ответить
Еще раз большое спасибо за помощь с превьюшками, по Вашему совету сделал – все отлично! Хотел узнать: а можно сделать так, чтобы они выводились в анонсах не снизу слева, а сверху слева, с обтеканием текстом?
Заранее спасибо.
Ответить
Вебмастерица отвечает:
Расположение превью зависит от кода html и css.
Если Вы сделали все по инструкции, то, по идее, в Вашем случае нужно смотреть css.
Ответить
Vitaly отвечает:
Ура! Все сделал, в таблице стилей поковырял – и поправил. Спасибо за помощь и очень оперативные ответы!
Ответить
Вебмастерица отвечает:
Пожалуйста.
Ответить
Я Вас, наверное, замучил, но все же не могу не спросить еще вот что: перелопатил в поисковиках, и нигде эта проблема не оговаривается. А дело вот в чем: в самой админке wordpress, в окне текстового редактора когда энтером абзацы отбиваешь, набирая текст, то между абзацами визуально слишком большой интерлиньяж получается. Смотрел в режиме тегов – все нормально: одна стоит между абзацами. А визуально – словно их две или три даже. На самих страницах темы на сайте все нормально выводится. Именно в окошке редактора в админке такая штука. Нельзя ли это как-то убрать?
Извините, что вопросами мучаю
Заранее большое спасибо.
Ответить
Вебмастерица отвечает:
Это нужно лезть в файлы css самого вордпресса, а не темы… И тут я не помощник).
Ответить
Vitaly отвечает:
Пусть остается как есть, в самих файлах вордпресса я вообще не разберусь) А с темой – все хорошо вышло. Благодарю Вас за помощь)
Ответить
Вебмастерица отвечает:
Пожалуйста.
Ответить
Доброго времени суток, уважаемая Вебмастерица) Все собрал, оптимизирую теперь и заполняю немного контентом. Хотелось бы спросить: в php-файлах темы, наверное, у многих, есть между строками пробелы в абзацах: где больше, где меньше. Нужно ли убирать эти пробелы или это не влияет ни на что? И есть ли какая-нибудь прога, через которую можно автоматом прогнать все php-файлы темы, чтобы она подсветила, если где-то коды неправильные немножко: лишняя козявка какая-нибудь. Как например, дримвейвер подсвечивает неправильный код.
Заранее большое Вам спасибо. Что бы мы без Вас делали)
Ответить
Вебмастерица отвечает:
Я думаю, без меня бы просто гуглили и внимательно смотрели выдачу.
Вот уже на 6 позиции в выдаче в сниппете виднеется кусочек нужного ответа.
Ответить
Виталий отвечает:
Ага) Здесь главное – точно задать вопрос на выдачу) Спасибо
Ответить
Спасибо! Вы прелесть! Сколько искал выход по интернету, сколько не пытался the_excerpt и заменить на the_content, ничего не помогало. А вы так легко и просто смогли помочь! Респект вам и вашему сайту!!!
Ответить
выводится нормально, только почему-то две превьюшки сразу… что не так?
Ответить
и дублируется запись при выводе архива – все сдвоенные! плиз, подскажите!
Ответить
Вебмастерица отвечает:
К сожалению, не знаю, что у Вас не так. Смотрите код внимательно, где-то там что-то дублируется.
Точнее сказать не могу, все сайты и шаблоны разные.
Ответить
Спасибо большое, сколько пыталась настроить превьюшки, но только по Вашим инструкциям все получилось. Скажите пожалуйста, а как можно поменять один файл в теме, без перезагрузки всей темы (файл в папке images нужно заменить)?
Ответить
В архиве все записи отображаются с картинками, а вот на главной, как небыло картинок в превьюшках так и нет почему-то. Вроде в файле index.php все меняла, может еще в каком то файле нужно покапаться?
Ответить
Последний вопрос снимается проделала все еще и в home.php
Ответить
Вебмастерица отвечает:
Ответить
Здравствуйте! Скажите, пожалуйста, а подходят ли данные инструкции к следующему… Например, когда публикуешь ссылку на сайт или статью в контакте, то превтю (картинки) нет, белый фон и сама ссылка.
Спасибо)
Ответить
Вебмастерица отвечает:
Нет, увы, не подойдут… “Вконтакте” не на вордпрессе сделан).
Ответить
Оля отвечает:
Сайт сделан на вордпрессе
Может быть знаете, как настроить показ превью сайта на других страничках?
Ответить
Вебмастерица отвечает:
А почему Вы решили, что “вконтакте” (vk.com который) сделан на вордпрессе?
Ответить
Оля отвечает:
МОЙ сайт сделан на вордпресс
соответственно, настраивать тоже, видимо, нужно его. Превью при размещении ссылки не появляется ни в контакте, ни в одноклассниках, ни где бы то ни было еще.
Ответить
Вебмастерица отвечает:
Ах вот оно что! Вы про свой сайт. Просто это из комментария неочевидно мне показалось.
Думаю, нужно обратиться к тому, кто давал код превью.
Ответить
Вот из за этого я и ненавижу вордпресс! вечно надо ковырятся в нем чтоб нормально работало всё… фтопку устал разбираться! куплю DLE!!!
Ответить
Вебмастерица отвечает:
Сочувствую, видимо, Вас все достало.
Ответить
доброе время суток, у меня возникла такая проблема, добавлял код в файл функций. две последних строки были:
}
?>
между этими строчками я вставил ваш код, в результате вместо страниц стала отображаться пустая страница с адресом. как его всё-таки поставить?
Ответить
Огромное спасибо!
С небольшими оговорками ввиду уже установленного плагина для создания миниатюр ваши подсказки мне очень помогли!
Ответить
Всё доходчиво и понятно… Спасибо Огромное
Ответить
Здравствуйте! В вордпрессе это мой первый блог. Помогите пожалуйста разобраться. Все сделала как по Вашей инструкции. Но когда вношу изменения в archive.php у меня вместо блога появляется следующая надпись. Parse error: syntax error, unexpected ‘<' in /home/users2/c/chebak/domains/batel-ufa.ru/wp-content/themes/Beauty_Tips/archive.php on line 37
Ответить
Павел отвечает:
ВОТ-ВОТ!
И у меня то же самое.
Ответить
Павел отвечает:
Нужно идти на FTP? искать тот же файл функции и удалять код – тема его не ожидала – не все темы предусматривают эту возможность. так что используем тег море!
Ответить
Начал действовать по первому способу. В итоге получил вот ЭТО Parse error: syntax error, unexpected ‘<' in /home/p35789/www/xn--90adpbzgj0b.xn--p1ai/wp-content/themes/twentyten/functions.php on line 509
Что теперь делать? Даже в админку попасть не могу.
Ответить
Павел отвечает:
Сам решил кое-как см.выше.
Ответить