Для многих разработчиков и администраторов WordPress возникает потребность в расширенном управлении файлами прямо из админ-панели. Стандартный медиабиблиотека WordPress ограничена по функционалу: невозможно просматривать структуру папок, переименовывать файлы, создавать вложенные папки или быстро массово редактировать файлы. В этой статье разберём, как создать собственный визуальный файловый менеджер для WordPress с примерами кода и разбором полезных плагинов.
Почему стандартный медиаменеджер WordPress не всегда удобен
Медиабиблиотека WordPress хранит все загруженные файлы в папках по годам и месяцам, но интерфейс не позволяет пользователю перемещаться между папками или организовывать файлы более гибко. Если вам приходится загружать много документов, изображений или других медиафайлов, то отсутствие удобной навигации и возможности быстрого поиска по структуре папок сильно снижает эффективность работы.
Кроме того, стандартный медиаменеджер не позволяет переименовывать файлы прямо из интерфейса, нет поддержки drag&drop для организации файлов, отсутствуют расширенные права доступа к файлам и папкам.
В итоге, для сложных проектов, особенно с большим количеством файлов, полезно внедрить собственный визуальный файловый менеджер, который будет адаптирован под конкретные задачи.
Как разработать базовый визуальный файловый менеджер в WordPress
Для начала опишем основную логику работы такого менеджера:
- Отображение структуры папок и файлов в виде дерева или списка
- Возможность создания, переименования и удаления папок
- Загрузка файлов в выбранную папку
- Просмотр и редактирование файлов (например, изменение названия)
- Безопасность: проверка прав пользователя и защита от доступа к системным папкам
Реализовать всё это с нуля довольно сложно, но в качестве примера рассмотрим, как вывести список файлов из директории wp-content/uploads/custom-manager с возможностью создания новых папок и загрузки файлов.
Регистрация страницы меню и подключение скриптов
Добавим страницу меню и подключим базовые скрипты для работы с AJAX и интерфейсом:
add_action('admin_menu', 'wpinc_add_file_manager_page');
function wpinc_add_file_manager_page() {
add_menu_page(
'Файловый менеджер',
'Файлы',
'manage_options',
'wpinc-file-manager',
'wpinc_render_file_manager_page'
);
}
add_action('admin_enqueue_scripts', 'wpinc_enqueue_file_manager_scripts');
function wpinc_enqueue_file_manager_scripts($hook) {
if ($hook !== 'toplevel_page_wpinc-file-manager') return;
wp_enqueue_script('jquery');
wp_enqueue_script('wpinc-file-manager', plugin_dir_url(__FILE__) . 'file-manager.js', ['jquery'], null, true);
wp_localize_script('wpinc-file-manager', 'wpincFileManager', [
'ajaxUrl' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('wpinc_file_manager_nonce')
]);
}Отображение структуры папок с помощью PHP
Создадим функцию для рекурсивного обхода папок и вывода их в виде списка:
function wpinc_list_files_and_folders($dir) {
$items = scandir($dir);
echo '<ul class="wpinc-file-list">';
foreach ($items as $item) {
if ($item === '.' || $item === '..') continue;
$path = $dir . '/' . $item;
if (is_dir($path)) {
echo '<li class="folder">' . esc_html($item);
wpinc_list_files_and_folders($path);
echo '</li>';
} else {
echo '<li class="file">' . esc_html($item) . '</li>';
}
}
echo '</ul>';
}Вызовем эту функцию в шаблоне страницы менеджера, например:
function wpinc_render_file_manager_page() {
$base_dir = WP_CONTENT_DIR . '/uploads/custom-manager';
if (!file_exists($base_dir)) {
wp_mkdir_p($base_dir);
}
echo '<h1>Визуальный файловый менеджер</h1>';
wpinc_list_files_and_folders($base_dir);
// Здесь добавим формы для загрузки и создания папок
}Добавление загрузки файлов и создание папок через AJAX
Для удобства работы сделаем формы загрузки файлов и создания новых папок, которые будут отправляться AJAX-запросами.
Форма создания папки
Пример HTML формы:
<form id="wpinc-create-folder-form">
<input type="text" name="folder_name" placeholder="Имя папки" required>
<button type="submit">Создать папку</button>
</form>JavaScript обработчик (файл file-manager.js):
jQuery(document).ready(function($) {
$('#wpinc-create-folder-form').on('submit', function(e) {
e.preventDefault();
let folderName = $(this).find('input[name="folder_name"]').val();
$.post(wpincFileManager.ajaxUrl, {
action: 'wpinc_create_folder',
folder_name: folderName,
nonce: wpincFileManager.nonce
}, function(response) {
if (response.success) {
alert('Папка создана');
location.reload();
} else {
alert('Ошибка: ' + response.data);
}
});
});
});Обработка создания папки в PHP
add_action('wp_ajax_wpinc_create_folder', 'wpinc_create_folder_callback');
function wpinc_create_folder_callback() {
check_ajax_referer('wpinc_file_manager_nonce', 'nonce');
if (!current_user_can('manage_options')) {
wp_send_json_error('Нет прав');
}
$folder_name = sanitize_file_name($_POST['folder_name']);
if (!$folder_name) {
wp_send_json_error('Неверное имя папки');
}
$base_dir = WP_CONTENT_DIR . '/uploads/custom-manager';
$new_dir = $base_dir . '/' . $folder_name;
if (file_exists($new_dir)) {
wp_send_json_error('Папка уже существует');
}
if (wp_mkdir_p($new_dir)) {
wp_send_json_success();
} else {
wp_send_json_error('Ошибка создания папки');
}
}Форма загрузки файлов
HTML форма для загрузки в выбранную папку (по умолчанию корень):
<form id="wpinc-upload-file-form" enctype="multipart/form-data">
<input type="file" name="upload_file" required>
<select name="target_folder">
<option value="">Корень</option>
<!-- здесь можно динамически вывести папки -->
</select>
<button type="submit">Загрузить файл</button>
</form>JavaScript обработчик загрузки с AJAX:
jQuery(document).ready(function($) {
$('#wpinc-upload-file-form').on('submit', function(e) {
e.preventDefault();
let formData = new FormData(this);
formData.append('action', 'wpinc_upload_file');
formData.append('nonce', wpincFileManager.nonce);
$.ajax({
url: wpincFileManager.ajaxUrl,
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function(response) {
if (response.success) {
alert('Файл загружен');
location.reload();
} else {
alert('Ошибка: ' + response.data);
}
}
});
});
});Обработка загрузки файла на сервере
add_action('wp_ajax_wpinc_upload_file', 'wpinc_upload_file_callback');
function wpinc_upload_file_callback() {
check_ajax_referer('wpinc_file_manager_nonce', 'nonce');
if (!current_user_can('manage_options')) {
wp_send_json_error('Нет прав');
}
if (empty($_FILES['upload_file'])) {
wp_send_json_error('Файл не загружен');
}
$base_dir = WP_CONTENT_DIR . '/uploads/custom-manager';
$target_folder = sanitize_file_name($_POST['target_folder']);
$target_dir = $base_dir;
if ($target_folder !== '') {
$target_dir .= '/' . $target_folder;
if (!file_exists($target_dir)) {
wp_send_json_error('Папка назначения не существует');
}
}
$file = $_FILES['upload_file'];
$target_file = $target_dir . '/' . basename($file['name']);
if (move_uploaded_file($file['tmp_name'], $target_file)) {
wp_send_json_success();
} else {
wp_send_json_error('Ошибка загрузки файла');
}
}Использование готовых плагинов для расширенного управления файлами в WordPress
Если разработка собственного менеджера кажется сложной или требует слишком много времени, можно использовать готовые решения. Вот несколько полезных плагинов для расширенного управления файлами:
- Clearfy Pro — оптимизирует работу сайта, в том числе позволяет управлять файлами и кэшом.
- WPRemark — отзывы и комментарии, но с расширенным управлением медиа в комментариях.
- File Manager — бесплатный плагин с визуальным файловым менеджером, поддерживает drag&drop, предварительный просмотр, права доступа.
Использование готовых плагинов ускорит внедрение функционала и обеспечит стабильность, но при необходимости кастомизации и интеграции с бизнес-логикой лучше создавать собственные решения.
Безопасность и права доступа в файловом менеджере WordPress
Очень важно учитывать безопасность при работе с файловым менеджером. Необходимо:
- Ограничить доступ к файловому менеджеру только доверенным пользователям, например, администраторам.
- Запретить выход за пределы заданной корневой директории для предотвращения доступа к системным или конфиденциальным файлам.
- Проверять и фильтровать имена файлов и папок, исключая специальные символы и возможные уязвимости.
- Использовать nonce и другие механизмы защиты WordPress для AJAX-запросов.
- Если реализуете функцию удаления или переименования файлов, вводите подтверждения и логи действий.
В нашем примере мы проверяем права через current_user_can('manage_options') и используем check_ajax_referer для защиты AJAX.
Итог
Создание собственного визуального файлового менеджера в WordPress — задача вполне выполнимая и полезная для проектов, где нужно гибко управлять файлами в админке. Мы рассмотрели базовые принципы, примеры кода для отображения структуры папок, создания новых папок и загрузки файлов с помощью AJAX.
Для расширения функционала можно добавить переименование, удаление, drag&drop, предпросмотр изображений, интеграцию с медиабиблиотекой и многое другое. Также стоит рассмотреть использование готовых плагинов, таких как Clearfy Pro.
Если у вас есть вопросы или нужна помощь с кодом — обращайтесь, всегда рад помочь коллегам!