Вывод файлов на страницу, которые лежат в определенной папке

Задача: Есть страница, у неё дочерние страницы. На этих страницах необходимо выводить список PDF файлов, но их много и добавлять вручную лень. Поэтому для простоты, файлы называют русскими буквами и закидываю по FTP на сервер в определенные папки, а там раскидывают по папкам по годам. Нужно вывести список этих файлов и разложить по годам.

Решение: С помощью искусственного интеллекта эта задача решилась за час. Был написан код, который выводит список файлов, а с помощью библиотеки Isotope, которая уже подключена в этом проекте сделан фильтр по годам.

Вот код для сниппета, CSS же выведен отдельно, здесь его не прикладываю.

// Название шорткода который необходимо вставить на страницу, для вывода файлов из соответствующих папок на FTP
add_shortcode( 'vivod_materials', function () {

	
	// Возмем SLUG текущей страницы
	global $post;
	$slug_obj = $post->post_name;
	
	// Пробежимся по подпапкам в основной папке
	$dir = $_SERVER['DOCUMENT_ROOT'].'/wp-content/uploads/building/'. $slug_obj .'/materials';
$folders = array_filter(scandir($dir), function($item) use ($dir) {
    return is_dir($dir . '/' . $item) && !in_array($item, array('.', '..'));
});

// Переворачиваем сортировку, чтобы последние года были наверху	
$folders = array_reverse($folders);	

// выводи наверху список годов
echo '<div class="obj_file_filter_materials button-group filter-button-group">';
foreach($folders as $folder) {

	
	//Проверка текущего года
	$yaer_now = date('Y');
	if ($folder == $yaer_now){
		$css_is_checked = 'is-checked';
	}
	else {
		$css_is_checked = 'none';
	}

    echo '<button class="' . $css_is_checked . '" data-filter=".block_file_materials_' .$folder. '">' . $folder . '</button>';
}
echo '</div>';

	
// добавляем блок для фильтрации
echo '<div class="obj-file-all_materials">';
	
// Выводим файлы по годам	
foreach($folders as $folder) {
    echo '<div class="block_file_item block_file_materials_' .$folder. '">';
	echo '<h3>' . $folder . '</h3>';
	
	// Указываем путь к папке, в которой будем искать файлы
	$path = $dir . '/' . $folder . '/';

	// Получаем список файлов и папок в указанной директории
	$files = scandir($path);

	// Проходим по всем файлам в указанной папке и выводим их имена
	foreach ($files as $filename) {
    	if (is_file($path . '/' . $filename)) {
			$name = pathinfo($filename, PATHINFO_FILENAME);
			$extension = pathinfo($filename, PATHINFO_EXTENSION);
        	echo '<a target="_blank" class="file_' . $extension . ' year_' . $folder . '" href="/wp-content/uploads/building/' . $slug_obj . '/materials/'.$folder.'/' . $filename . '">' . $name . '</a>';
   	 	}
	}
	echo '</div>';
	
}
	echo '</div>';
	



// скрипт фильтра изотоп
add_action( 'wp_footer', function () { ?>	
<script type="text/javascript">
// Инициализация Isotope
var $grid_m = jQuery('.obj-file-all_materials').isotope({
	// Опции
	itemSelector: '.block_file_item',
	layoutMode: 'fitRows',
	filter: '.block_file_materials_<?php echo date('Y');?>'
});
	
// Фильтруем по нажатию кнопок
var filters = {};
jQuery('.obj_file_filter_materials').on( 'click', 'button', function() {
  var $this = jQuery(this);
  // get group key
  var $buttonGroup = $this.parents('.button-group');
  var filterGroup = $buttonGroup.attr('data-filter-group');
  // set filter for group
  filters[ filterGroup ] = $this.attr('data-filter');
  // combine filters
  var filterValue = concatValues( filters );
  $grid_m.isotope({ filter: filterValue });
});

 
// flatten object by concatting values
function concatValues( obj ) {
  var value = '';
  for ( var prop in obj ) {
    value += obj[ prop ];
  }
  return value;
}
	
// Добавляем и убираем класс is-checked для активных кнопок
jQuery('.button-group').each( function( i, buttonGroup ) {
  var $buttonGroup = jQuery( buttonGroup );
  $buttonGroup.on( 'click', 'button', function( event ) {
    $buttonGroup.find('.is-checked').removeClass('is-checked');
    var $button = jQuery( event.currentTarget );
    $button.addClass('is-checked');
  });
});
	
	

jQuery('.filter-foto-button').click(function(){ jQuery('.filter-button-group .filter-foto-button:not(.is-checked)').toggleClass("default"); });
	
 
</script>	

	
<?php	
});

});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

// Название шорткода который необходимо вставить на страницу, для вывода файлов из соответствующих папок на FTP

add_shortcode( 'vivod_materials', function () {

// Возмем SLUG текущей страницы

global $post;

$slug_obj = $post->post_name;

// Пробежимся по подпапкам в основной папке

$dir = $_SERVER['DOCUMENT_ROOT'].'/wp-content/uploads/building/'. $slug_obj .'/materials';

$folders = array_filter(scandir($dir), function($item) use ($dir) {

return is_dir($dir . '/' . $item) && !in_array($item, array('.', '..'));

});

// Переворачиваем сортировку, чтобы последние года были наверху

$folders = array_reverse($folders);

// выводи наверху список годов

echo '<div class="obj_file_filter_materials button-group filter-button-group">';

foreach($folders as $folder) {

//Проверка текущего года

$yaer_now = date('Y');

if ($folder == $yaer_now){

$css_is_checked = 'is-checked';

}

else {

$css_is_checked = 'none';

}

echo '<button class="' . $css_is_checked . '" data-filter=".block_file_materials_' .$folder. '">' . $folder . '</button>';

}

echo '</div>';

// добавляем блок для фильтрации

echo '<div class="obj-file-all_materials">';

// Выводим файлы по годам

foreach($folders as $folder) {

echo '<div class="block_file_item block_file_materials_' .$folder. '">';

echo '<h3>' . $folder . '</h3>';

// Указываем путь к папке, в которой будем искать файлы

$path = $dir . '/' . $folder . '/';

// Получаем список файлов и папок в указанной директории

$files = scandir($path);

// Проходим по всем файлам в указанной папке и выводим их имена

foreach ($files as $filename) {

if (is_file($path . '/' . $filename)) {

$name = pathinfo($filename, PATHINFO_FILENAME);

$extension = pathinfo($filename, PATHINFO_EXTENSION);

echo '<a target="_blank" class="file_' . $extension . ' year_' . $folder . '" href="/wp-content/uploads/building/' . $slug_obj . '/materials/'.$folder.'/' . $filename . '">' . $name . '</a>';

}

echo '</div>';

}

echo '</div>';

// скрипт фильтра изотоп

add_action( 'wp_footer', function () { ?>

// Инициализация Isotope

var $grid_m = jQuery('.obj-file-all_materials').isotope({

// Опции

itemSelector: '.block_file_item',

layoutMode: 'fitRows',

filter: '.block_file_materials_<?php echo date('Y');?>'

});

// Фильтруем по нажатию кнопок

var filters = {};

jQuery('.obj_file_filter_materials').on( 'click', 'button', function() {

var $this = jQuery(this);

// get group key

var $buttonGroup = $this.parents('.button-group');

var filterGroup = $buttonGroup.attr('data-filter-group');

// set filter for group

filters[ filterGroup ] = $this.attr('data-filter');

// combine filters

var filterValue = concatValues( filters );

$grid_m.isotope({ filter: filterValue });

});

// flatten object by concatting values

function concatValues( obj ) {

var value = '';

for ( var prop in obj ) {

value += obj[ prop ];

}

return value;

}

// Добавляем и убираем класс is-checked для активных кнопок

jQuery('.button-group').each( function( i, buttonGroup ) {

var $buttonGroup = jQuery( buttonGroup );

$buttonGroup.on( 'click', 'button', function( event ) {

$buttonGroup.find('.is-checked').removeClass('is-checked');

var $button = jQuery( event.currentTarget );

$button.addClass('is-checked');

});

jQuery('.filter-foto-button').click(function(){ jQuery('.filter-button-group .filter-foto-button:not(.is-checked)').toggleClass("default"); });

</script>

<?php

});

Вот так это выглядит на фронте

MENEX.RU

Вывод файлов на страницу, которые лежат в определенной папке

Рекомендуем еще эти статьи

Запуск сайта — как это делается

Набор своих иконок или эмодзи на сайте WordPress

Трансляция IP-камеры по RTSP ссылке на своем сайте

Шорткод для отображения шаблонов Oxygen

Отключить редактор блоков Гутенберг

Скрипт подмены номеров или другого контента по UTM параметрам в ссылках