Вывод изображений в WordPress: примеры и практические советы

📸 Работа с изображениями (картинками) — одна из самых распространённых задач при разработке тем и плагинов в WordPress. Часто возникает необходимость вывести изображение записи (миниатюру), или подставить картинку по её ID. В этой статье разберём основные способы.

🔹Вывод изображения по ID

Если вы знаете ID изображения (например, сохранён в произвольном поле или получен через код), можно вывести его с помощью встроенной функции wp_get_attachment_image():

<?php 
$image_id = 123; // ID изображения
echo wp_get_attachment_image($image_id, 'medium');

👉 Второй параметр — это размер (thumbnail, medium, large, full или зарегистрированный через add_image_size).

Если нужен только URL, используйте:

<?php 
$image_url = wp_get_attachment_image_url($image_id, 'full');
echo '<img src="'.esc_url($image_url).'" alt="">';

🔹Миниатюра записи (Featured Image)

Каждая запись в WP может иметь основное изображение (миниатюру, или «Featured Image»).
Выводится оно функцией:

<?php 
if (has_post_thumbnail()) {
    the_post_thumbnail('large');
}

👉 Варианты размеров:

• thumbnail — миниатюра (150×150 по умолчанию);
• medium — средний размер;
• large — большой;
• full — оригинал.

Если нужен ID изображения:

<?php 
$image_id = get_post_thumbnail_id(get_the_ID());

🔹Вывод изображения на странице записи (single.php)

Внутри цикла WordPress можно просто добавить:

<?php 
if (has_post_thumbnail()) {
    the_post_thumbnail('large', ['class' => 'post-img']);
}

Результат: у каждой записи на своей странице появится её миниатюра.

🔹Вывод изображения в списке записей (блог / archive.php / index.php)

Когда мы выводим список последних записей (например, на главной или странице блога), в цикле можно добавить миниатюры так:

<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
        <article>
            <?php if (has_post_thumbnail()) : ?>
                <a href="<?php the_permalink(); ?>">
                    <?php the_post_thumbnail('medium'); ?>
                </a>
            <?php endif; ?>

            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <?php the_excerpt(); ?>
        </article>
    <?php endwhile; ?>
<?php endif; ?>

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

🔹Адаптивные изображения с <picture> и srcset

WordPress автоматически генерирует несколько размеров изображений и подставляет srcset для <img>. Но если нужно использовать <picture>, можно собрать свою функцию:

<?php
function my_responsive_picture($image_id, $size = 'large', $attr = [])
{
  if (!$image_id) return;
  // Получаем данные изображения
  $src     = wp_get_attachment_image_url($image_id, $size);
  $srcset  = wp_get_attachment_image_srcset($image_id, $size);
  $sizes   = wp_get_attachment_image_sizes($image_id, $size);
  $alt     = get_post_meta($image_id, '_wp_attachment_image_alt', true);
  // Атрибуты
  $defaults = [
    'class'   => 'responsive-img',
    'loading' => 'lazy',
];
  $attr = array_merge($defaults, $attr);
?>
  <picture>
    <!-- WebP-версия (если поддерживается плагином или GD/Imagick) -->
    <source srcset="<?php echo esc_attr($srcset); ?>"
      sizes="<?php echo esc_attr($sizes); ?>"
      type="image/webp">
    <!-- Обычный JPEG/PNG -->
    <img src="<?php echo esc_url($src); ?>"
      srcset="<?php echo esc_attr($srcset); ?>"
      sizes="<?php echo esc_attr($sizes); ?>"
      alt="<?php echo esc_attr($alt); ?>"
      <?php foreach ($attr as $k => $v) echo esc_attr($k) . '="' . esc_attr($v) . '" '; ?> />
  </picture>
<?php
}

Использование:

<?php my_responsive_picture(get_post_thumbnail_id(), 'large'); ?>

🔹Где найти ID изображения?

• В админке: откройте Медиафайлы → Библиотека, выберите картинку, и в адресной строке будет что-то вроде:

  /wp-admin/upload.php?item=123
  

  👉 123 — это ID изображения.

• Через код:

  $image_id = get_post_thumbnail_id(get_the_ID());
  

📝 Итоги

• Чтобы вывести картинку по ID → используйте wp_get_attachment_image() или wp_get_attachment_image_url().
• Чтобы вывести миниатюру записи → the_post_thumbnail() или get_post_thumbnail_id().
• На странице записи (single.php) картинку можно добавить через the_post_thumbnail().
• В списке записей (archive.php, index.php) миниатюры выводятся в цикле.
• Для адаптивности используйте srcset (WP подставляет его автоматически) или соберите <picture> вручную.

WordPress даёт гибкий инструментарий для работы с изображениями — от простого вывода по ID до адаптивных решений для разных устройств.