Добавление изображений к постам с помощью Custom Fields

Продолжаем начатый в прошлом посте разговор о произвольных полях в WordPress. На этот раз перейдем к практике и реализуем на сайте добавление произвольных изображений к записям.

Почему для этой цели мы будем использовать Custom Fields? Этому есть две причины. Обычно, когда блогер хочет добавить изображение в свой пост, он попросту загружает его и вставляет в текстовый редактор. В итоге изображения всегда показываются там, где они прописаны в тексте.
Многие темы WordPress обычно обрезают все теги при отображении краткого описания записи. Поэтому, если Вы разместите изображение в начале поста, оно все равно обрежется. А использование произвольных полей позволит обойти этот досадный момент.
Также Вы с легкостью сможете использовать такие изображения и для других целей. Например для создания блока тизеров на сайте.
Первое что нужно сделать — загрузить изображение. Сделать это можно любым доступным способом. После того, как изображение загружено, заходим на страницу создания или редактирования записи и добавляем произвольное поле «thumbnail». В значении указываем ссылку на изображение. Добавьте еще одно поле с название thumbnail class и дайте ему значение mythumb. Этот класс будет добавляться к изображению. Его Вы можете прописать в css.
Вы также можете добавить поля для атрибутов alt и title, но мы будем использовать заголовок поста для них.

Сейчас переходим к самому интересному. Добавим вывод изображения в шаблоне. Следующий код можно использовать в любом файле темы, в котором есть цикл вывода записей (например, index.php, single.php, category.php, archive.php и др.). Откройте один из этих файлов и найдите следующие строки:

if(have_posts()) : while(have_posts()) : the_post();

Добавьте после них этот код:

  1. // получаем адрес картинки
  2. $thumb = get_post_meta($post->ID, 'thumbnail', true); // номер поста, название поля, вернуть значение строкой
  3. // класс изображения
  4. $thumb_class = get_post_meta($post->ID, 'thumbnail class', true);

Итак, данные получены, теперь их нужно применить.
Теперь ищем в этом же файле такой текст:

<?php the_content();  ?>

или такой:

<?php the_excerpt();  ?>

Добавьте такой код:

  1. <?php // если есть изображение
  2. if($thumb !== '') { ?>
  3. 	<p>
  4. 	<img src="<?php echo $thumb; ?>"
  5. 	class="<?php if($thumb_class !== '') { echo $thumb_class; } else { echo "mythumb"; } ?>"
  6. 	alt="<?php the_title(); ?>"
  7. 	/>
  8. 	</p>
  9. <?php } ?>

Просто, не правда ли?
Остались последние штрихи в добавлении изображения к посту — задать стиль в css:

  1. .mythumbl {
  2. 	float: left;
  3. 	width: 100px;
  4. 	height: 100px;
  5. 	margin: 0 15px 0 0;
  6. 	}

Думаю ничего сложного :) Несколько строк кода и добавленные в Custom Fields изображения выводятся в кратком описании поста. В следующих статьях о произвольных полях в WordPress Вас еще не менее интересные примеры их использования. Если есть какие-либо вопросы — пишите в комментариях 😉

Запись опубликована в рубрике WordPress с метками , . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">