Вывод файлов на страницу, которые лежат в определенной папке
Задача: Есть страница, у неё дочерние страницы. На этих страницах необходимо выводить список 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
});
});
Вот так это выглядит на фронте
