Как реализовать файловый менеджер на wordpress?

Question

[Александра]

В личном кабинете пользователя нужно реализовать структуру папок и файлов как на скрине, вложений папок может быть много, может есть какой то плагин? Сайт на wordpress.

Comments

[Александра]

yarovikov, спасибо за важную информацию)

Answer 1

[Александра]

Решила задачу следующим образом - поставила плагин файловый менеджер (File Manager), далее на фронтенде выгружаю родительскую папку с вложенными файлами, для каталогов в атрибуте data-folder указываю путь к этой папке. По клику получаю этот путь и отправляю в аякс обработчик, оттуда подгружается директория по которой произошел клик, ниже привожу весь код, может кому пригодится

Первичный вывод главной папки в нужном месте темы:

$dir = 'userarea';

$home_path = '/';

if (is_dir($dir)) {
    if ($dh = opendir($dir)) {
        while (($file = readdir($dh)) !== false) {
            if($file !='.' && $file !='..'){
                if(is_dir($dir.'/'.$file)){

                    ?>
                        <div class="item item-folder">
                            <a href="#">
                                <i class="fa fa-folder"></i>
                                <span data-folder="<?= $dir.'/'.$file ?>"><?= $file ?></span>
                            </a>
                        </div>
                    <?php
                }else{
            
                    ?>
                        <div class="item item-file">
                            <a target="_blank" href="<?= $home_path . $dir . '/' . $file ?>" target="_blank">
                                <i class="fa fa-file-pdf-o"></i> <?= $file ?> 
                            </a>
                        </div>
                    <?php
                }
            }
        }
        closedir($dh);
    }
}

Обработка клика:

$('#folder_list').on('click', 'span', function (e) {

    e.preventDefault();
    var $this = $(e.target);

    $.ajax({
        url: roboApp.ajax,
        type: 'POST',
        data: { action: 'getfolder', foldername: $this.attr('data-folder') }, // можно 
        success: function (data) {
            $('#folder_list').html(data);
        }
    });
});

Обработка аякс запроса в functions.php

if (wp_doing_ajax()) {
    add_action('wp_ajax_getfolder', 'get_folder');
    add_action('wp_ajax_nopriv_getfolder', 'get_folder');
}
function get_folder() {
	if (isset($_POST)) {

		$path = $_POST['foldername'] ? sanitize_text_field($_POST['foldername']) : false;

        $dir = get_home_path() . $path;

        if (is_dir($dir)) {
            if ($dh = opendir($dir)) {
                while (($file = readdir($dh)) !== false) {
                    if($file !='.' && $file !='..'){
                        if(is_dir($dir.'/'.$file)){
                            ?>
                                <div class="item item-folder">
                                    <a href="#">
                                        <i class="fa fa-folder"></i>
                                        <span data-folder="<?= $path.'/'.$file ?>"><?= $file ?></span>
                                    </a>
                                </div>
                            <?php
                        }else{
                            ?>
                                <div class="item item-file">
                                    <a target="_blank" href="<?= '/' . $path . '/' . $file ?>" target="_blank">
                                        <i class="fa fa-file-pdf-o"></i> <?= $file ?> <span class="pull-right">1.2MB</span>
                                    </a>
                                </div>
                            <?php
                        }
                    }
                }
                closedir($dh);
            }
        }

		wp_die();
	} else {
 	   echo json_encode(['error' => true, 'message' => '1']);
		// exit;
		wp_die();
	}
}