Современные шаблоны (темы) WordPress, как правило, имеют встроенный функционал добавления на страницы и в записи сайта фотогалерей. Когда вы добавляете в статью галерею из фотографий через кнопку «Добавить медиафайл», в текст автоматически добавляется шорткод: gallery ids="id зображения, id зображения, id зображения".
Чтобы преобразовать этот шорткод в произвольный код, который будет выводить слайдер изображений из библиотеки медиафайлов, нужно установить фильтр post_gallery
.
ПОШАГОВАЯ ИНСТРУКЦИЯ ПРЕОБРАЗОВАНИЯ ГАЛЕРЕИ ИЗОБРАЖЕНИЙ В СЛАЙДЕР ИЗОБРАЖЕНИЙ:
- Сначала подключаем к сайту любой jQuery-плагин.
- Далее, в конец файла functions.php, перед закрывающим тегом
?>
, вставляем код:
// слайдер в шапку сайта function gallery_slider($output, $attr) { $ids = explode(',', $attr['ids']); $images = get_posts(array( 'include' => $ids, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'post__in', )); if ($images) { $output = gallery_slider_template($images); return $output; } } add_filter('post_gallery', 'gallery_slider', 10, 2); function gallery_slider_template($images) { ob_start(); include 'gallery-slider.php'; $output = ob_get_clean(); return $output; }
- В директории вашего шаблона
/wp-content/themes/имя вашей темы
создайте файлgallery-slider.php
и вставьте в него следующий код:
<ul class="slider"> <?php foreach ($images as $image) { $src = wp_get_attachment_url($image->ID); // ссылка на изображение $alt = get_post_meta($image->ID, '_wp_attachment_image_alt', true); // атрибут alt ?> <li><img src="<?php echo $src; ?>" alt="<?php echo $alt; ?>" /></li> <?php } ?> </ul>
- Чтобы добавить к слайду заголовок, подпись или описание в этом же файле добавьте код:
<ul class="slider"> <?php foreach ($images as $image) { $src = wp_get_attachment_url($image->ID); // ссылка на изображение $alt = get_post_meta($image->ID, '_wp_attachment_image_alt', true); // атрибут alt $title = $image->post_title; // заголовок изображения $caption = $image->post_excerpt; // подпись к изображению $description = $image->post_content; // описание изображения ?> <li> <p><?php echo $title; ?></p> <p><img src="<?php echo $src; ?>" alt="<?php echo $alt; ?>" /></p> <p><?php echo $caption; ?></p> <p><?php echo $description; ?></p> </li> <?php } ?> </ul>
- Установите из депозитария самый простой плагин слайдера.