Создание слайдера из стандартной фотогалереи WordPress

Слайдер из стандартной фотогалереи WordPress

Как вы наверняка знаете, WordPress имеет встроенный функционал добавления в статьи сайта простеньких фотогалерей. Когда вы добавляете в статью галерею из фотографий через кнопку «Добавить медиафайл», в текст вставляется шоткод вида [gallery ids="1284,1283,915"].

Так вот, с помощью специально предусмотренного для подобных случаев фильтра post_gallery можно преобразовать данный шоткод в произвольный код, превратив его в слайдер. Для последнего, разумеется, потребуется подключить к сайту какой-либо jQuery-плагин.

Чтобы превратить WordPress-галерею в слайдер, нужно выполнить следующие действия:

  1. В файл 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;
    }
    

    Если задаетесь вопросом, куда конкретно вставить этот код, то поместите его в самый конец файла перед ?>.

  2. В папке с шаблоном создайте файл 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>
    
  3. Подключите к сайту плагин слайдера, например, bxSlider.

Вот таким несложным образом можно превратить фотогалереи WordPress-сайта в слайдеры. Мне данное решение уже пригодилось.

Комментарии (11)
  1. 1

    Отлично, после года перерыва не ожидал увидеть новый пост.

  2. 2

    Спасибо, все работает!!

  3. 3
    Гебельс

    1) Если эти php-коды на своих сайтах выставлю, то нарушу авторские права?
    2) Клёвая тема блога, широкая правда, но хороша. Не выставишь на скачивание?

  4. 4

    1) Если эти php-коды на своих сайтах выставлю, то нарушу авторские права?

    Нет конечно. Иначе я бы их не выкладывал в открытый доступ.

    2) Клёвая тема блога, широкая правда, но хороша. Не выставишь на скачивание?

    Нет.

  5. 5
    Гебельс

    Тему не выставишь, но если бы на заказ, сколько бы такая с уменьшенной шириной контент колонки и сайдбара в размерах стоила со стандартными функциями wp? Ну понятное дело, цвета кое где поменять, но а так в принципе такая же, но немного уникализированная.

  6. 6
    Михаил

    Здравствуйте! Как сделать чтоб работала сортировка? Если отсортировать фото, то выводятся сначала от последних загруженных до более ранних, а сортировка не работает.

  7. 7

    Давно хочу поставить нечто подобное на какой-нибудь из своих сайтов. Всё руки не доходят)

  8. 9
    Виктор

    А как сделать слайдер популярных записей?

  9. 10

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

    wp_enqueue_script()

    любой из скриптов галереи на jQuery: cycle2 или Swiper

  10. 11

    Под шумок накидал плагин для демонстрации вышесказанного. Выводит стандартную галерею WordPress в виде слайдера на основе Swiper.

Ваш комментарий