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

В прошлый раз я написал как вывести первую картинку из записи 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 пикселей, а также как выводить в виджетах похожие и самые комментируемые статьи с картинками-превьюшками.

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

Все про альпинизм, скалолазание и туризм на сайте climber.org.ua. Все про туризм, путешествия и активный отдых.

Последние актуальные новости Украины – политика, экономика, бизнес и финансы.