menex.ru
← Все статьи

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

26.06.2023 • Теги: #hook #PHP #wordpress #Хук

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

});

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