Как добавить несколько обложек для записи в WordPress

Почему стандартный функционал WordPress ограничен одной обложкой

По умолчанию WordPress позволяет назначить только одну миниатюру записи (featured image). Это удобно для простых блогов и сайтов, где достаточно одной картинки, но часто возникает задача использовать несколько изображений для одной записи — например, для слайдера, галереи или разных обложек для разных целей.

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

В этой статье подробно разберем, как добавить поддержку нескольких обложек в записи WordPress с примерами кода и плагинов.

Использование плагина Multiple Featured Images для нескольких обложек

Один из самых популярных и простых вариантов — плагин Multiple Featured Images. Он добавляет возможность назначать несколько миниатюр для записи и выводить их в шаблонах.

Преимущества плагина:

• Простая установка и настройка
• Добавление произвольного количества обложек
• Поддержка популярных типов записей

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

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

if ( function_exists('get_post_meta') ) {
    $additional_image_id = get_post_meta( get_the_ID(), '_thumbnail_id_2', true );
    if ( $additional_image_id ) {
        echo wp_get_attachment_image( $additional_image_id, 'full' );
    }
}

Реализация нескольких обложек через кастомные метаполя и код (wplesson_add_multiple_thumbnails)

Если вы хотите обойтись без плагинов, можно реализовать несколько обложек через кастомные метаполя и немного PHP-кода. Вот пример, как это сделать.

Регистрация метабокса для дополнительных обложек

Добавим в functions.php тему следующий код для создания метабокса с загрузкой изображений:

function wplesson_add_multiple_thumbnails() {
    add_meta_box('wplesson_additional_thumbnails', 'Дополнительные обложки', 'wplesson_render_additional_thumbnails_meta_box', 'post', 'side', 'low');
}
add_action('add_meta_boxes', 'wplesson_add_multiple_thumbnails');

function wplesson_render_additional_thumbnails_meta_box($post) {
    wp_nonce_field(basename(__FILE__), 'wplesson_thumbnails_nonce');
    $image_id = get_post_meta($post->ID, '_wplesson_additional_thumbnail_id', true);
    $image_url = $image_id ? wp_get_attachment_url($image_id) : '';
    echo '<div id="wplesson_additional_thumbnail_container">';
    if ( $image_url ) {
        echo '<img src="' . esc_url($image_url) . '" style="max-width:100%;" />';
    }
    echo '</div>';
    echo '<input type="hidden" id="wplesson_additional_thumbnail_id" name="wplesson_additional_thumbnail_id" value="' . esc_attr($image_id) . '" />';
    echo '<button type="button" class="button" id="wplesson_upload_thumbnail">Выбрать изображение</button>';
}

Скрипт для загрузки изображения через медиа-библиотеку WordPress

Для удобства добавим скрипт в админку, который позволит выбирать изображение из медиа-библиотеки:

function wplesson_admin_scripts($hook) {
    if ( 'post.php' !== $hook && 'post-new.php' !== $hook ) {
        return;
    }
    wp_enqueue_media();
    wp_enqueue_script('wplesson-admin-js', get_template_directory_uri() . '/js/wplesson-admin.js', array('jquery'), null, true);
}
add_action('admin_enqueue_scripts', 'wplesson_admin_scripts');

В файле js/wplesson-admin.js:

jQuery(document).ready(function($) {
    var frame;
    $('#wplesson_upload_thumbnail').on('click', function(e) {
        e.preventDefault();
        if (frame) {
            frame.open();
            return;
        }
        frame = wp.media({
            title: 'Выберите дополнительную обложку',
            button: { text: 'Выбрать' },
            multiple: false
        });
        frame.on('select', function() {
            var attachment = frame.state().get('selection').first().toJSON();
            $('#wplesson_additional_thumbnail_id').val(attachment.id);
            $('#wplesson_additional_thumbnail_container').html('<img src="' + attachment.url + '" style="max-width:100%;" />');
        });
        frame.open();
    });
});

Сохранение данных при сохранении записи

function wplesson_save_additional_thumbnail($post_id) {
    if ( !isset($_POST['wplesson_thumbnails_nonce']) || !wp_verify_nonce($_POST['wplesson_thumbnails_nonce'], basename(__FILE__)) ) {
        return $post_id;
    }
    if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ) {
        return $post_id;
    }
    if ( isset($_POST['wplesson_additional_thumbnail_id']) ) {
        update_post_meta($post_id, '_wplesson_additional_thumbnail_id', intval($_POST['wplesson_additional_thumbnail_id']));
    }
}
add_action('save_post', 'wplesson_save_additional_thumbnail');

Вывод нескольких обложек в шаблоне темы

Чтобы вывести основную и дополнительную обложки в шаблоне, например в single.php, используйте следующий код:

if ( has_post_thumbnail() ) {
    the_post_thumbnail('full');
}
$additional_id = get_post_meta(get_the_ID(), '_wplesson_additional_thumbnail_id', true);
if ( $additional_id ) {
    echo wp_get_attachment_image( $additional_id, 'full' );
}

Так вы получите сразу две обложки для записи — стандартную и дополнительную.

Альтернативы: использование кастомных полей и плагина Advanced Custom Fields

Если нужно более гибкое решение с несколькими изображениями, можно использовать плагин Advanced Custom Fields (ACF). Он позволяет создавать поля типа «Изображение» или «Галерея» и прикреплять к записям любое количество изображений.

Пример поля галереи в ACF и вывод изображений:

$images = get_field('gallery_field_name');
if( $images ) {
    foreach( $images as $image ) {
        echo '<img src="' . esc_url($image['url']) . '" alt="' . esc_attr($image['alt']) . '" />';
    }
}

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

Советы по SEO и производительности при использовании нескольких обложек

Использование нескольких обложек увеличивает вес страницы за счет дополнительных изображений. Чтобы избежать проблем с производительностью, рекомендуем:

• Оптимизировать изображения (сжать без потери качества)
• Использовать отложенную загрузку (lazy load)
• Обязательно задавать атрибуты alt для SEO

Для lazy load можно добавить атрибут loading="lazy" к тегам <img> или использовать плагины оптимизации.