WordPress как на ладони
wordpress jino

gallery_shortcode() WP 2.5.0

Функция, которая заменяет шоткод [gallery] в тексте статьи. Эта функция отвечает за отображение WordPress галерей в записи.

Используя хуки из этой функции, можно частично или полностью изменить вывод галереи. Например, использовав первый хук apply_filters('post_gallery', '', $attr );, мы может полностью изменить вывод, т.е. как бы полностью заменить функцию gallery_shortcode() на свою (см. пр. 3).

Хуки из функции:
Возвращает

Строку: HTML.

Использование

gallery_shortcode( $attr );
$attr(массив) (обязательный)

Атрибуты на основе которых будет строиться HTML галереи.

order - порядок сортировка картинок, может быть: 'ASC', 'DESC'. По умолчанию 'ASC'.

orderby - поле по которому картинки будут сортироваться. По умолчанию 'menu_order ID'. Может быть названием любой колонки из таблицы wp_posts (там хранятся данные картинок). Вот которые могут использоваться в первую очередь: post_title, ID, post_author, post_date, post_name.

id - ID поста, к которому принадлежит галерея.

itemtag - HTML тег для каждой картинки. Может быть: 'dl' или 'figure' (для HTML5, когда включена поддержка HTML5). По умолчанию 'dl'.

captiontag - HTML тег для каждой подписи картинки (caption). Может быть: 'dd' или 'figcaption' (HTML5).

columns - количество колонок в галереи. По умолчанию 3.

size - размер картинки в галереи. ПО умолчанию 'thumbnail'.

ids - список ID вложений (самих картинок), через запятую (эти ID указываются в шорткоде как правило). По умолчанию - пусто.

include - ID картинок (вложений), через запятую. Подробнее смотрите в параметре include в get_posts(). При указании этого параметра, параметр 'ids' игнорируется.

exclude - ID для исключения картинок. Нужен, когда, например, нужно никогда/нигде не показывать указанные картинки, даже если они указаны в шорткоде галереи.

link - куда будет ссылаться картинка. Может быть: 'file', 'none'. По умолчанию '' (пусто - ссылка на страницу вложения).

Примеры

#1 Удалим базовые стили галереи

С помощью хука 'use_default_gallery_style' мы можем удалить добавляемые по умолчанию стили галереи и стилизовать вывод галереи по своему, в файле стилей темы. Код нужно вставить в файл темы functions.php:

add_filter('use_default_gallery_style', '__return_false');

А так выглядят стили:

<style type="text/css">
	#gallery-1 {
		margin: auto;
	}
	#gallery-1 .gallery-item {
		float: left;
		margin-top: 10px;
		text-align: center;
		width: 20%;
	}
	#gallery-1 img {
		border: 2px solid #cfcfcf;
	}
	#gallery-1 .gallery-caption {
		margin-left: 0;
	}
	/* see gallery_shortcode() in wp-includes/media.php */
</style>

#2 Удалим рамку у картинок

С помощью фильтра 'gallery_style' можно изменить вставляемые стили. Чтобы не переписывать их все (хотя там мало). Например, давайте удалим рамку у картинок:

add_filter('gallery_style', function( $str ){
	return str_replace('border: 2px solid #cfcfcf;', '', $str );
});

#3 Полностью заменим функцию gallery_shortcode() на свою

Использовав хук 'post_gallery' в файле шаблона или в плагине, мы можем полностью заменить работу функции gallery_shortcode() на начальном этапе:

/* 
 * Изменение вывода галереи через шоткод 
 * Смотреть функцию gallery_shortcode в http://wp-kama.ru/filecode/wp-includes/media.php
 * $output = apply_filters( 'post_gallery', '', $attr );
 */
add_filter('post_gallery', 'my_gallery_output', 10, 2);
function my_gallery_output( $output, $attr ){
	$ids_arr = explode(',', $attr['ids']);
	$ids_arr = array_map('trim', $ids_arr );

	$pictures = get_posts( array(
		'posts_per_page' => -1,
		'post__in'       => $ids_arr,
		'post_type'      => 'attachment',
		'orderby'        => 'post__in',
	) );

	if( ! $pictures ) return 'Запрос вернул пустой результат.';

	// Вывод
	$out = '<dl class="gallery_photos">';

	// Выводим каждую картинку из галереи
	foreach( $pictures as $pic ){
		$src = $pic->guid;
		$t = esc_attr( $pic->post_title );
		$title = ( $t && false === strpos($src, $t)  ) ? $t : '';

		$caption = ( $pic->post_excerpt != '' ? $pic->post_excerpt : $title );

		$out .= '<dt>
			<a href="'. $src .'"><img src="'. kama_thumb_src('w=185&h=120&src='. $src ) .'" alt="'. $title .'" /></a>'. 
			( $caption ? "<span class='caption'>$caption</span>" : '' ) .
		'</dt>';
	}

	$out .= '</dl>';

	return $out;
}

Код gallery shortcode: wp-includes/media.php VER 4.9.1

<?php
function gallery_shortcode( $attr ) {
	$post = get_post();

	static $instance = 0;
	$instance++;

	if ( ! empty( $attr['ids'] ) ) {
		// 'ids' is explicitly ordered, unless you specify otherwise.
		if ( empty( $attr['orderby'] ) ) {
			$attr['orderby'] = 'post__in';
		}
		$attr['include'] = $attr['ids'];
	}

	/**
	 * Filters the default gallery shortcode output.
	 *
	 * If the filtered output isn't empty, it will be used instead of generating
	 * the default gallery template.
	 *
	 * @since 2.5.0
	 * @since 4.2.0 The `$instance` parameter was added.
	 *
	 * @see gallery_shortcode()
	 *
	 * @param string $output   The gallery output. Default empty.
	 * @param array  $attr     Attributes of the gallery shortcode.
	 * @param int    $instance Unique numeric ID of this gallery shortcode instance.
	 */
	$output = apply_filters( 'post_gallery', '', $attr, $instance );
	if ( $output != '' ) {
		return $output;
	}

	$html5 = current_theme_supports( 'html5', 'gallery' );
	$atts = shortcode_atts( array(
		'order'      => 'ASC',
		'orderby'    => 'menu_order ID',
		'id'         => $post ? $post->ID : 0,
		'itemtag'    => $html5 ? 'figure'     : 'dl',
		'icontag'    => $html5 ? 'div'        : 'dt',
		'captiontag' => $html5 ? 'figcaption' : 'dd',
		'columns'    => 3,
		'size'       => 'thumbnail',
		'include'    => '',
		'exclude'    => '',
		'link'       => ''
	), $attr, 'gallery' );

	$id = intval( $atts['id'] );

	if ( ! empty( $atts['include'] ) ) {
		$_attachments = get_posts( array( 'include' => $atts['include'], 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $atts['order'], 'orderby' => $atts['orderby'] ) );

		$attachments = array();
		foreach ( $_attachments as $key => $val ) {
			$attachments[$val->ID] = $_attachments[$key];
		}
	} elseif ( ! empty( $atts['exclude'] ) ) {
		$attachments = get_children( array( 'post_parent' => $id, 'exclude' => $atts['exclude'], 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $atts['order'], 'orderby' => $atts['orderby'] ) );
	} else {
		$attachments = get_children( array( 'post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $atts['order'], 'orderby' => $atts['orderby'] ) );
	}

	if ( empty( $attachments ) ) {
		return '';
	}

	if ( is_feed() ) {
		$output = "\n";
		foreach ( $attachments as $att_id => $attachment ) {
			$output .= wp_get_attachment_link( $att_id, $atts['size'], true ) . "\n";
		}
		return $output;
	}

	$itemtag = tag_escape( $atts['itemtag'] );
	$captiontag = tag_escape( $atts['captiontag'] );
	$icontag = tag_escape( $atts['icontag'] );
	$valid_tags = wp_kses_allowed_html( 'post' );
	if ( ! isset( $valid_tags[ $itemtag ] ) ) {
		$itemtag = 'dl';
	}
	if ( ! isset( $valid_tags[ $captiontag ] ) ) {
		$captiontag = 'dd';
	}
	if ( ! isset( $valid_tags[ $icontag ] ) ) {
		$icontag = 'dt';
	}

	$columns = intval( $atts['columns'] );
	$itemwidth = $columns > 0 ? floor(100/$columns) : 100;
	$float = is_rtl() ? 'right' : 'left';

	$selector = "gallery-{$instance}";

	$gallery_style = '';

	/**
	 * Filters whether to print default gallery styles.
	 *
	 * @since 3.1.0
	 *
	 * @param bool $print Whether to print default gallery styles.
	 *                    Defaults to false if the theme supports HTML5 galleries.
	 *                    Otherwise, defaults to true.
	 */
	if ( apply_filters( 'use_default_gallery_style', ! $html5 ) ) {
		$gallery_style = "
		<style type='text/css'>
			#{$selector} {
				margin: auto;
			}
			#{$selector} .gallery-item {
				float: {$float};
				margin-top: 10px;
				text-align: center;
				width: {$itemwidth}%;
			}
			#{$selector} img {
				border: 2px solid #cfcfcf;
			}
			#{$selector} .gallery-caption {
				margin-left: 0;
			}
			/* see gallery_shortcode() in wp-includes/media.php */
		</style>\n\t\t";
	}

	$size_class = sanitize_html_class( $atts['size'] );
	$gallery_div = "<div id='$selector' class='gallery galleryid-{$id} gallery-columns-{$columns} gallery-size-{$size_class}'>";

	/**
	 * Filters the default gallery shortcode CSS styles.
	 *
	 * @since 2.5.0
	 *
	 * @param string $gallery_style Default CSS styles and opening HTML div container
	 *                              for the gallery shortcode output.
	 */
	$output = apply_filters( 'gallery_style', $gallery_style . $gallery_div );

	$i = 0;
	foreach ( $attachments as $id => $attachment ) {

		$attr = ( trim( $attachment->post_excerpt ) ) ? array( 'aria-describedby' => "$selector-$id" ) : '';
		if ( ! empty( $atts['link'] ) && 'file' === $atts['link'] ) {
			$image_output = wp_get_attachment_link( $id, $atts['size'], false, false, false, $attr );
		} elseif ( ! empty( $atts['link'] ) && 'none' === $atts['link'] ) {
			$image_output = wp_get_attachment_image( $id, $atts['size'], false, $attr );
		} else {
			$image_output = wp_get_attachment_link( $id, $atts['size'], true, false, false, $attr );
		}
		$image_meta  = wp_get_attachment_metadata( $id );

		$orientation = '';
		if ( isset( $image_meta['height'], $image_meta['width'] ) ) {
			$orientation = ( $image_meta['height'] > $image_meta['width'] ) ? 'portrait' : 'landscape';
		}
		$output .= "<{$itemtag} class='gallery-item'>";
		$output .= "
			<{$icontag} class='gallery-icon {$orientation}'>
				$image_output
			</{$icontag}>";
		if ( $captiontag && trim($attachment->post_excerpt) ) {
			$output .= "
				<{$captiontag} class='wp-caption-text gallery-caption' id='$selector-$id'>
				" . wptexturize($attachment->post_excerpt) . "
				</{$captiontag}>";
		}
		$output .= "</{$itemtag}>";
		if ( ! $html5 && $columns > 0 && ++$i % $columns == 0 ) {
			$output .= '<br style="clear: both" />';
		}
	}

	if ( ! $html5 && $columns > 0 && $i % $columns !== 0 ) {
		$output .= "
			<br style='clear: both' />";
	}

	$output .= "
		</div>\n";

	return $output;
}

Cвязанные функции

Из метки: shortcode (шоткод шорткод)

Еще из метки: gallery (галереи)

Еще из раздела: Шоткоды

gallery_shortcode 19 комментариев
Полезные 1 Вопросы 3 Все
  • Serg cайт: iteca.kg

    Доброго! Надеюсь на ответ) У Вас в функции ипользуется обращение к Вашему плагину А как можно обойтись только встроеными функциями WP? Он же сам создает миниатюры...

    Ответить2.4 года назад #
    • Kama4697

      Используйте подходящие функции от сюда: http://wp-kama.ru/function-cat/vlozheniya

      Например: wp_get_attachment_image_src()

      Ответить2.4 года назад #
      • Serg cайт: iteca.kg

        Я все равно благодарен вашему сайту и в частности этой статье! Не так как хотел, но сделал. Спасибо!

        Ответить2.4 года назад #
        • Kama4697

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

          Ответить2.4 года назад #
          • Serg cайт: iteca.kg

            Эх, ничего по сути нет) Мне нужно было что бы миниатюры в галереи вели себя адаптивно... Хотел полностью заменить wp разметку галереи (я не понимаю почему импользуют dt dl). Я взял ваш способ с подменой стилей галереи и просто убрал float:left и задал display:inline-block pardon Хотя на ментальном уровне бесит и хотелось заменить эту жуть на нормальые дивы)))

            Ответить2.4 года назад #
  • Кирилл

    Kama, ваш код не работает, помогите, пожалуйста sad
    Выводит заглушку "NO PHOTO".
    Пробовал менять kama_thumb_src('w=185&h=120&src='. $src ) на kama_thumb_src('w=185&h=120', $src ), но ничего не вышло.

    Ответить1.8 года назад #
    • Kama4697

      Как же я могу помочь? Дайте больше информации: ваш домен, ссылку для примера из которой генерируется мини-ра, чтобы я мог попробовать сам и увидеть хоть что-то... Вообще, все должно работать! У меня везде все работает...

      1
      Ответить1.8 года назад #
      • Кирилл

        Немного модифицированный код.

        add_filter('post_gallery', 'my_gallery_output', 10, 2);
        function my_gallery_output( $output, $attr ){
        	$ids_arr = explode(',', $attr['ids']);
        	$ids_arr = array_map('trim', $ids_arr );
        
        	$pictures = get_posts( array(
        		'posts_per_page' => -1,
        		'post__in'       => $ids_arr,
        		'post_type'      => 'attachment',
        		'orderby'        => 'post__in',
        	) );
        
        	if( ! $pictures ) return 'Запрос вернул пустой результат.';
        
        	// Вывод
        	$out = '<div class="row gallery_photos">';
        
        	// Выводим каждую картинку из галереи
        	foreach( $pictures as $pic ){
        		$src = $pic->guid;
        		$thumb = wp_get_attachment_url($pic->ID);
        		$t = esc_attr( $pic->post_title );
        		$title = ( $t && false === strpos($src, $t)  ) ? $t : '';
        
        		$caption = ( $pic->post_excerpt != '' ? $pic->post_excerpt : $title );
        
        		$out .= '<div class="small-6 columns">
        		<div class="photo">
        			<a class="fancybox" rel="gallery" href="'. $src .'"><img src="'. kama_thumb_src('w=185&h=120', $src ) .'" alt="'. $title .'" /></a>'.
        		'</div>
        		</div>';
        	}
        
        	$out .= '</div>';
        
        	return $out;
        }

        Самое интересное, он работал, сейчас нет. Попробовал обновить плагин, не помогло. Страница где это все происходит. По исходному коду видно, что URL картинки скрипт получает, но вместо картинок генерирует загрушку. Пробовал &no_stub, не помогло, чистил кэш, не помогло.

        Что посоветуете еще попробовать?

        Ответить1.8 года назад #
      • Кирилл

        И да, кстати, в статьях работает все отлично. WP 4.3.1

        Ответить1.8 года назад #
        • Kama4697

          Очень все странно!

          Сейчас попробовал вывести такой код, на этом сервере:

          echo kama_thumb_img('w=150&h=150', 'http://xn----7sbendabboegazsrg2c6bxe.xn--p1ai/wp-content/uploads/2015/09/image-403d71a0291ba45e164a187c925de95395a8aff731ba370ff5f249ab79763851-V.jpg');

          Все работает! А суда по коду вывода вашему, именно так вызывается первая картинка... Значит, что-то не так с сервером или плагином. Плагин не может получить картинку по указанному URL, почему, я могу только догадываться. Там 3 варианта получения картинки:

          1. прямой по серверному пути (у вас он должен срабатывать по идее)
          2. через file_get_contents()
          3. через CURL

          Но раз ничего не выводит, значит ни один не срабатывает - это очень странно!

          У меня нет идей...

          Вы точно кэш чистили, это тот кэш?

          Давайте свяжемся, я найду проблему, что-то там не так...

          Сейчас попробуй для проверки выведи в шаблоне, все равно где и ответь что вывелось:

          // Создается ли миниатюра так? КЭш сбрось сначала...
          echo kama_thumb_img('w=150&h=150', '/wp-content/uploads/2015/09/image-403d71a0291ba45e164a187c925de95395a8aff731ba370ff5f249ab79763851-V.jpg');
          
          // и это для кириллических доменов... Что выводит?
          echo $_SERVER['HTTP_HOST']; // ?
          Ответить1.8 года назад #
          • Кирилл

            Спасибо за подсказку smile

            Решил проблему через

            echo kama_thumb_img('w=150&h=150', '/wp-content/uploads/2015/09/image-403d71a0291ba45e164a187c925de95395a8aff731ba370ff5f249ab79763851-V.jpg');
            $url = parse_url($src, PHP_URL_PATH);
            echo kama_thumb_src('w=100&h=100', $url );

            echo $_SERVER['HTTP_HOST']; дает результат
            xn----7sbendabboegazsrg2c6bxe.xn--p1ai

            Ответить1.8 года назад #
            • Kama4697

              Это конечно хорошо, но это костыль...

              Попробуй так пожалуйста:

              Зайди в настройки плагина, там в поле допустимые домены добавь any и попробуй выведи миниатюру так, в шаблоне где-нибудь:

              echo kama_thumb_img('w=150&h=150', 'http://xn----7sbendabboegazsrg2c6bxe.xn--p1ai/wp-content/uploads/2015/09/image-403d71a0291ba45e164a187c925de95395a8aff731ba370ff5f249ab79763851-V.jpg');

              Выведет или нет?

              Возможно плагин проверку домена неправильно проверяет как-то... Хотя сейчас по коду я не вижу ошибки...

              Ответить1.8 года назад #
              • Кирилл

                Работает.

                Ответить1.8 года назад #
                • Kama4697

                  Проверил код еще раз, не вижу почему не получается пройти проверку...

                  А вот такая строка что выводит:

                  echo parse_url( 'http://xn----7sbendabboegazsrg2c6bxe.xn--p1ai/wp-content/uploads', PHP_URL_HOST );
                  Ответить1.8 года назад #
  • Доброго времени суток. Спасибо за очень информативный ресурс!

    Есть вопрос по выводу галереи - alt картинки остается пустым. Как исправить?

    галерея на сайте

    К вашему выводу галереи прикрутила Masonry и Lightbox. Это для меня первый самостоятельный опыт с вордпресс, подозреваю, накрутила где-то я лишнего или не докрутила...

    Masonry

    (function( $ ) {
    "use strict";
    $(function() {
    //set the container that Masonry will be inside of in a var
    var container = document.querySelector('#gallery');
    //create empty var msnry
    var msnry;
    // initialize Masonry after all images have loaded
    imagesLoaded( container, function() {
    	msnry = new Masonry( container, {
    
    		itemSelector: '.gallery-item',
    
    		  percentPosition: true
    	});
    });
    });
    }(jQuery));

    Lightbox вписала в вывод галереи

    add_filter('post_gallery', 'my_gallery_output', 10, 2);
    function my_gallery_output( $output, $attr ){
    	$ids_arr = explode(',', $attr['ids']);
    	$ids_arr = array_map('trim', $ids_arr );
    
    	$pictures = get_posts( array(
    		'posts_per_page' => -1,
    		'post__in'       => $ids_arr,
    		'post_type'      => 'attachment',
    		'orderby'        => 'post__in',
    	) );
    
    	if( ! $pictures ) return 'Запрос вернул пустой результат.';
    
    	// Вывод
    	$out = '<div id="gallery">';
    
    	// Выводим каждую картинку из галереи
    	foreach( $pictures as $pic ){
    		$src = $pic->guid;
    		$t = esc_attr( $pic->post_title );
    		$title = ( $t && false === strpos($src, $t)  ) ? $t : '';
    
    		$caption = ( $pic->post_excerpt != '' ? $pic->post_excerpt : $title );
    
    		$out .= '<div class="gallery-item">
    		<a href="'. $src .'" data-lightbox= "roadtrip" ><img src="'. kama_thumb_src('w=280&h=auto&src='. $src ) .'" alt="'. $title .'" /></a>'. 
    
    		'</div>';
    	}
    
    	$out .= '</div>';
    
    	return $out;
    }
    Ответитьгод назад #
  • Роман

    Спс за быстрое решение по галерее!

  • Добрый вечер, Тимур!
    Я делаю страницу с фотоальбомами как в контакте. Там надо вывести количество фотографий на странице. Не подскажите, как можно это сделать.

    Вот код:

    <div class="photo_gallery">
    	<?php if ( $child_pages->have_posts() ) :
    
    	   $child_pages = new WP_Query( array(
    			 'post_type'      => 'fotoalbum', // тип поста для фотоалбома
    			 'posts_per_page' => 10, // количество постов на странице
    			 'post_parent'    => <80>, // id родительской страницы
    			 'no_found_rows'  => true, 
    ) );
    	   if ( $child_pages->have_posts() ) : while ( $child_pages->have_posts() ) : $ child_pages->the_post(); ?>
    
    		<div class="photo_gallery_grid">
    			<div class="photo_gallery_album">
    			<a href="<?php the_permalink(); ?>" class="photo_gallery_link">
    				<div class="photo_gallery_item" style="background-image: url(<?php the_post_thumbnail(); ?>);">
    				<div class="photo_gallery_item_info">
    					<div class="photo_gallery_title">
    						<?php the_title(); ?>
    					</div>
    					<div class="photo_gallery_counter">
    						Здесь надо вывести количество фотографий добавленных на страницу
    					</div>
    					</div>
    				</div>
    				</a>
    			</div>
    
    		</div>
    	<?php endwhile;?>
    	<?php endif; ?>
    	</div>
  • Илья

    Здравствуйте. Подскажите, пожалуйста, если я хочу чтобы у меня при вставке шорткода галереи к нему добавлялось 'nav="thumbs"' - что нужно сделать? чтобы было вот так, например, [gallery ids="260,259,254,249" nav="thumbs"]

    Ответить4 месяца назад #

Здравствуйте, !

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