Получаем первую картинку записи для вставки в анонс

21 октября 2012
1 022

Порой бывает нужным вывести анонс статьи или новости. Например, в ленте последних записей на главной странице какого-нибудь блога или новостного сайта. И, конечно, текстовый анонс украсит иллюстрация из самой новости. Сегодня рассмотрим функцию получения первой картинки записи в WordPress, которую затем выведем в анонсах.

Функцию придумали и написали давно - когда WordPress не умел создавать миниатюры записей самостоятельно, а красивый блог хотелось иметь всем. О том, как добавить к записи миниатюру средствами самой CMS, я рассказывал в статье Миниатюры записей в WordPress. Однако и сейчас порой бывает проще добавить в шаблон небольшой код, чем использовать предложенный метод.

Создаем миниатюры для анонсов

Так, WordPress создаёт миниатюру из указанного вами изображения. То есть, если у вас на сайте уже есть сотня-другая записей, вам придётся отредактировать их все, указывая, какое изображение использовать как характерное (характерное или специальное - в зависимости от перевода панели администратора вашей версии WordPress).

Можно, кстати, эту проблему решить специальным плагином (о нём в другой раз), автоматически генерирующим миниатюры для старых записей, но для новых всё равно придется указывать миниатюру вручную. А это бывает неудобным, например, если вы делаете сайт на заказ и вам не резон обучать заказчика работе с редактором записей WordPress.

Следующий код позволяет просто автоматизировать вывод иллюстраций к анонсам записей:

Эта функция возвращает первое изображение из поста. Её вставим в файл functions.php.

 /image/no_thumb.jpg - абсолютный путь к некоему дефолтному изображению на случай, если картинок в посте не оказалось. На этот случай стоит загрузить в папку image изображение, которое будет выводится в ленте новостей там, где не нашлось другой, чтобы не нарушался дизайн.

Функцию получения изображения мы рассмотрели, а теперь добавим его в ленту сообщений. Например, чтобы иллюстрации к новостям выводились на главной странице, открываем файл index.php и в цикл, начинающийся обычно со строк (в вашем шаблоне может использоваться и другой код):

 вставляем следующий код:

 Может возникнуть проблема, что картинка в одной записи будет большой, в другой слишком маленькой - такая каша не сыграет на пользу единообразия дизайна. Так что, чтобы всё было ровно и красиво, модернизируем код, добавив значения высоты и ширины картинки. Изображения будут сжиматься или растягиваться до нужных значений.

Вместо 100 и 150 пикселей указываем требуемые вам значения.

Решение не идеально. Во-первых, изменение размеров не пропорционально. Какое-то изображение изменится удачно, а другое - слишком широкое или высокое - сожмется в одном направлении. Искаженные иллюстрации - не лучший выход.

Во-вторых, уменьшение изображений (неспроста мы говорим о миниатюрах - в анонсах обычно выводят уменьшенные изображения из записей) чисто визуально. Как оно весило, допустим, 200 Кб, так и осталось. Лента новостей в десяток записей даст нагрузку в 2 мегабайта, а это и скорость загрузки сайта уменьшит и трафик будет расходовать.

Так что в следующих статьях поговорим о других известных способах автоматического создания миниатюр и изменения размера изображений.

P.S. CCleaner - программка небольшая, но очень полезная. Чистит реестр, служит альтернативным инструментом удаления софта с компьютера, расширяет возможности корзины - в общем, оправдывает название. http://ccleaner4you.ru/faq - а тут и целый FAQ по CCleaner организовали, и последнюю версию программы скачать можно.

Related Posts Plugin for WordPress, Blogger...
Рубрики: Wordpress

2 комментария к записи “Получаем первую картинку записи для вставки в анонс”

  1. Денис

    Владимир, а вы случайно не знаете каких-нибудь программных методов как у этих картинок скруглять углы? На каком-то сайте видел подобное, а у себя никак не могу добиться :)

    [Ответить]

    deSiter (мой Twitter:  deSiter)

    Делается это через CSS с помощью свойства border-radius. Вот я немного на эту тему написал: http://desiter.ru/skruglennye-ugly-sredstvami-css3/.

    [Ответить]

Комментируйте - автору важно ваше мнение!

Дополнительно: