Кратко — лучше не полностью удалять/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 и т.д.), дам точный код с нужными атрибутами и способом получения миниатюры вместо полного изображения.