smsc banner 468x60smsc banner 728x90smsc banner 930x180skillbox banner 468x60skillbox banner 728x90skillbox banner 930x180jivo banner 468x60jivo banner 728x90jivo banner 930x180

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

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

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

flexbe banner 480x320flexbe banner 728x90flexbe banner 120x600kwork banner 480x320kwork banner 728x90kwork banner 120x600beget banner 480x320beget banner 728x90beget banner 120x600

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

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

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

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

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

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

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

Как сделать 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 для отдельных сайтов мультисайта….