Вывод картинки из дополнительного поля

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

Ничего сложного тут нет. Это стандартные возможности блогового движка. но при помощи данных функций позже мы будем творить чудеса. Но все шаг за шагом, а сейчас расскажу про дополнительные поля вордпресса.

Итак, когда я пишу новую запись в админке wordpress, вижу перед собой несколько панелей. Слева панель управления блогом и разные настройки. Справа блок “Опубликовать”, блок “Рубрики”, по центру блок “Добавление новой записи”. Остальные блоки я выключил. Это можно сделать нажав в правом верхнем углу экрана кнопку “Настройки экрана” – как показано на скриншоте.

Настройки wordpress при написании новой записи

В блоке дополнительные поля можно написать имя дополнительного поля, пишем например first-image, далее закачиваем картинку на сайт при помощи кнопочки “добавить картинку” и URL картинки копируем в значение дополнительного поля, не забываем нажать кнопочку “Добавить произвольное поле” чтобы сохранить его в записи.

Теперь можно вывести эту картинку в анонсе записи. Делается это так:

1

<img src="<?php echo get_post_meta($post->ID, 'first-image', true); ?>" />

Конечно можно усложнить вывод картинки, например добавим выравнивание по левой стороне при помощи CSS стиля, также можно добавить ALT свойство к картинке, взяв это значение из заголовка записи, также можно сделать картинку кликабельной – ссылка будет вести на полную запись/пост, также можно добавить ширину и высоту (только заранее побеспокойтесь о закачке картинки с заданными пропорциями). Вот что получилось:

1
2
3

<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<img class="alignleft" src="<?php echo get_post_meta($post->ID, 'first-image', true); ?>" width="120" height="90" alt="<?php the_title(); ?>" />
</a>

Теперь распишу все по порядку. В первой строке я вывожу код ссылки, где the_permalink() – это адрес ссылки, во второй строке кода вывод картинки (высота, ширина, CSS класс выравнивания слева, дополнительное поле first-image, ALT из заголовка записи). get_post_meta() – это функция вывода значения дополнительного поля, the_title() – вывод заголовка. Ну и в третей строке закрывающий тег ссылки.

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

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

Удачи! Заводской раб.

Новости политики Украины и России, новости мира – политика, криминал, новости экономики, науки и спорта.