Задача: Есть страница, у неё дочерние страницы. На этих страницах необходимо выводить список PDF файлов, но их много и добавлять вручную лень. Поэтому для простоты, файлы называют русскими буквами и закидываю по FTP на сервер в определенные папки, а там раскидывают по папкам по годам. Нужно вывести список этих файлов и разложить по годам.
Решение: С помощью искусственного интеллекта эта задача решилась за час. Был написан код, который выводит список файлов, а с помощью библиотеки Isotope, которая уже подключена в этом проекте сделан фильтр по годам.
Вот код для сниппета, CSS же выведен отдельно, здесь его не прикладываю.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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 () { ?> <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 }); }); |
Вот так это выглядит на фронте