В WordPress: как в галерее вывести только одну картинку?

Как в WordPress выводить в записи только одно (первое) изображение из стандартной галереи, чтобы при клике на него раскрывалась вся галерея? Сейчас я вместо этого просто скрываю остальные картинки через display:none в нескольких галереях.
  • 12 марта 2026 г. 18:03
Ответы на вопрос 2
Кратко — лучше не полностью удалять/display:none все элементы галереи, а вывести только видимое изображение и оставить ссылки на остальные изображения в виде скрытых (но не display:none) ссылок, сгруппированных атрибутом, который использует ваш лайтбокс (rel, data-fancybox, data-lightbox и т.п.). Тогда при клике лайтбокс увидит все ссылки и откроет всю галерею, а на странице останется видна только первая картинка.

Ниже — готовый пример: шорткод, который выводит первое изображение галереи и добавляет скрытые ссылки на остальные. Вставьте код в functions.php вашей темы или в плагин:

Пример (использует data-fancybox — для Fancybox/Lightbox-плагинов; если у вас другой лайтбокс, замените атрибут на нужный, например data-lightbox или rel="prettyPhoto[...]"):

function first_gallery_image_shortcode($atts){
    global $post;
    // получаем URL изображений из стандартной галереи в контенте записи
    $images = get_post_gallery_images($post);
    if(empty($images)) return '';

    $group = 'gallery-' . $post->ID; // группа для лайтбокса

    // первое (видимое) изображение — можно взять миниатюру, тут используем само изображение
    $html = '<a href="' . esc_url($images[0]) . '" data-fancybox="' . esc_attr($group) . '">';
    $html .= '<img src="' . esc_url($images[0]) . '" alt="" />';
    $html .= '</a>';

    // добавляем остальные ссылки, но прячем их за экраном (display:none иногда ломает лайтбоксы)
    for($i = 1; $i < count($images); $i++){
        $html .= '<a href="' . esc_url($images[$i]) . '" data-fancybox="' . esc_attr($group) . '" style="position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;" aria-hidden="true">img</a>';
    }

    return $html;
}
add_shortcode('first_gallery_image', 'first_gallery_image_shortcode');

Использование: вставьте в запись [first_gallery_image] — он найдёт первую стандартную галерею в контенте и выведет только первое изображение, лайтбокс при клике откроет всю группу.

Пояснения и варианты:
- Если вы используете другой плагин лайтбокса, замените data-fancybox на data-lightbox или rel="prettyPhoto[gallery-{ID}]" в обоих местах.
- Если в записи галерея добавлена через shortcode [gallery ids="..."], то get_post_gallery_images работает корректно. Если галерея загружается иначе, можно получить вложения через get_children() или wp_get_attachment_image_src().
- Почему не display:none: многие лайтбоксы игнорируют элементы с display:none. Прятать их за экраном (position:absolute;left:-9999px) — безопаснее.
- Альтернатива: динамически формировать gallery shortcode с include и передавать только первый id, но тогда лайтбокс не узнает про остальные изображения — нужен набор ссылок, как в примере.

Если скажете, какой именно лайтбокс/плагин вы используете (Jetpack Carousel, FancyBox, Lightbox2 и т.д.), дам точный код с нужными атрибутами и способом получения миниатюры вместо полного изображения.
Простой способ через шорткод (без плагинов): <br/> <br/> В functions.php темы: <br/> <pre><code>function single_gallery_image($atts) {
    $atts = shortcode_atts(['id' =&gt; 0, 'size' =&gt; 'medium'], $atts);
    $images = (array) get_post_gallery_images($post-&gt;ID, true);
    if (empty($images)) return '';
    
    $first_img = $images[0];
    $full_img = str_replace('-' . $atts['size'], '', $first_img);
    
    return sprintf(
        '&lt;a href="%s" data-gallery="%s"&gt;%s&lt;/a&gt;',
        $full_img,
        implode(',', $images),  // Вся галерея для lightbox
        wp_get_attachment_image(get_the_ID($first_img), $atts['size'])
    );
}
add_shortcode('first_gallery_img', 'single_gallery_image');</code></pre> <br/> <br/> В посте изай [first_gallery_img] - выводит первую картинку галереи. Клик -> Fancybox/Lightbox покажет всю (подключи JS). <br/> <br/> Альтернатива плагин: FooGallery или Modula - галерея с "single preview" из коробки.
Похожие вопросы