Как вывести все изображения из произвольной папки без плагинов в WordPress

При разработке своих сайтов вам может понадобиться вывести галереи изображений из произвольных папок без их загрузки в библиотеку. Давайте рассмотрим пример, как это сделать с помощью шорткода:

add_shortcode( 'folder-gallery', 'theme_folder_gallery' );
function theme_folder_gallery( $atts ) {

	// белый список параметров и значения по умолчанию для шорткода
	$atts = shortcode_atts( array(
		'path' => '',
		'columns' => '3',
		'alt' => get_the_title(),
	), $atts );

	$output = '';

	// проверяем, что в атрибутах передан путь до изображения (передавать с открывающим слешем)
	if ( isset( $atts['path'] ) ) {
		if ( $files = scandir( get_stylesheet_directory() . $atts['path'] ) ) {

			// разрешенные изображения
			$allowed_types = array( 'jpg', 'png', 'gif', 'jpeg', 'webp' );

			// классы
			$classes = array();
			$classes[] = 'masonry-item';
			$classes[] = 'col-12';

			if ($atts['columns'] == '4') {
				$classes[] = 'col-sm-6 col-lg-4 col-xl-3';
			} elseif ($atts['columns'] == '3') {
				$classes[] = 'col-sm-6 col-lg-4';
			} else {
				$classes[] = 'col-sm-6';
			}

			$output .= '<div class="masonry-container">';
				$output .= '<div class="row no-gutters masonry-gallery">';

				// основной цикл
				foreach ( $files as $key => $file ) {

					// проверяем, что файл имеет разрешенное разрешение
					if ( in_array( pathinfo( $file, PATHINFO_EXTENSION ), $allowed_types) ) {
						$image_attributes = getimagesize( get_stylesheet_directory() . $atts['path'] . $file );

						$output .= '<div class="' . join(' ', $classes) . '">';
							$output .= '<img src="' . get_stylesheet_directory_uri() . $atts['path'] . $file . '" class="masonry-link" alt="' . $atts['alt'] . '" ' . $image_attributes[3] . ' loading="lazy">';
						$output .= '</div>';
					}
				}

				$output .= '</div>';
			$output .= '</div>';

			// подключаем скрипты masonry
			wp_enqueue_script( 'masonry' );

			$masonry_init = 'jQuery(function($) {
				var $container = $(".masonry-gallery");
				
				$container.imagesLoaded( function() {
					$container.masonry({
						columnWidth: ".masonry-item",
						itemSelector: ".masonry-item"
					});
				});
			});';

			wp_add_inline_script( 'masonry', $masonry_init );

		}
	}

	return $output;

}

Использование: [folder-gallery path='/data/images/']

Как видите, функция принимает путь до искомой папки (обязательно с открывающим и закрывающим слешем), в функции устанавливаются разрешенные типы изображений и формируется вывод с классами бутстрап-сетки.

Как вы могли заметить, в функции присутствует инициализация masonry. Masonry — это js библиотека, позволяющая сделать одинаковые расстояния между изображениями для визуальной привлекательности. Masonry уже зарегистрирована в ядре WordPress, дополнительно подключать ее не нужно.

Для того чтобы ограничить количество выводимых изображений, вы можете добавить атрибут $atts['count'] = 12, а в цикле дописать условие, ограничивающее вывод изображений так:

$i = 1;

foreach ( $files as $key => $file ) {

	// ....

	if ( $i == $atts['count'] ) break;
	$i++;
}

В итоге мы получаем вот такую красивую плитку изображений: