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

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++;
}

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

Похожие посты

Как сделать webp без плагинов в WordPress

WebP — это современный формат сжатия изображений без потери качества, который напрямую влияет на скорость загрузки сайта. Конвертирование изображений из jpg и png в формат webp может дать существенный прирост в баллах по google page speed. Формат webp поддерживается большинством современных браузеров. Вы без труда можете найти плагины, которые помогут вам автоматически конвертировать изображения, добавленные…

Как изменить выравнивание и размер изображения при вставке в редактор WordPress

При добавлении изображения в пост, по умолчанию WordPress вставляет его в размере medium и без выравнивания. Чтобы при загрузке картинки ей прописывалось выравнивание по центру и полный размер, вы можете использовать такой код:

Как изменить robots.txt в мультисайте WordPress

WordPress динамически создает robots.txt. Чтобы перезаписать его при обычной установке без использования нескольких сайтов, вы можете просто загрузить статический файл robots.txt на сервер. При установке системы мультисайтов это приведет к перезаписи файла robots.txt для всех сайтов, что не всегда является нужным результатом. В этой заметке мы обсудим, как можно изменить robots.txt для отдельных сайтов мультисайта….

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *