В прошлый раз я написал как вывести первую картинку из записи WordPress блога. Сейчас же я напишу как работать с дополнительными полями движка WordPress и как при помощи дополнительных полей вывести картинку в анонсе записи.
Ничего сложного тут нет. Это стандартные возможности блогового движка. но при помощи данных функций позже мы будем творить чудеса. Но все шаг за шагом, а сейчас расскажу про дополнительные поля вордпресса.
Итак, когда я пишу новую запись в админке wordpress, вижу перед собой несколько панелей. Слева панель управления блогом и разные настройки. Справа блок «Опубликовать», блок «Рубрики», по центру блок «Добавление новой записи». Остальные блоки я выключил. Это можно сделать нажав в правом верхнем углу экрана кнопку «Настройки экрана» — как показано на скриншоте.
Настройки wordpress
В блоке дополнительные поля можно написать имя дополнительного поля, пишем например first-image, далее закачиваем картинку на сайт при помощи кнопочки «добавить картинку» и URL картинки копируем в значение дополнительного поля, не забываем нажать кнопочку «Добавить произвольное поле» чтобы сохранить его в записи.
Теперь можно вывести эту картинку в анонсе записи. Делается это так:
<img src="<?php echo get_post_meta($post->ID, 'first-image', true); ?>" />
Конечно можно усложнить вывод картинки, например добавим выравнивание по левой стороне при помощи CSS стиля, также можно добавить ALT свойство к картинке, взяв это значение из заголовка записи, также можно сделать картинку кликабельной — ссылка будет вести на полную запись/пост, также можно добавить ширину и высоту (только заранее побеспокойтесь о закачке картинки с заданными пропорциями). Вот что получилось:
<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 пикселей, а также как выводить в виджетах похожие и самые комментируемые статьи с картинками-превьюшками.
h++p://arniwebdesign.com/vyvod-kartinki-iz-dopolnitelnogo-polya/
Оставьте первый комментарий