Используйте "Медиа-библиотеку" в интерфейсе пользователя.

Содержание

Вопрос или проблема
Ответ или решение
Шаг 1: Подключение скриптов медиа-библиотеки
Шаг 2: Создание шорткода для вывода медиабиблиотеки
Шаг 3: Добавление стилей
Шаг 4: Добавление функциональности JS
Заключение

Вопрос или проблема

Возможно ли отобразить медиатеку на фронтенд-шаблоне?

Мне нужно использовать медиатеку (/wp-admin/upload.php) как часть дизайна фронтенд-страницы с некоторыми изменениями. Я не хочу использовать функцию загрузки, а нужен список всех изображений и функциональность, которая есть при клике на одно изображение…
Итак, мне нужен CSS, PHP и JS код медиатеки WordPress.

Я мог бы написать это с нуля, но мне нравится идея повторного использования кода ядра WordPress.
Где я могу найти код в папке wp-admin и как я могу интегрировать этот код на фронтенде?
Большое спасибо

Правка:

Я не хочу использовать загрузчик медиафайлов, я хочу отобразить содержимое медиатеки на странице с (более или менее) тем же дизайном и функциональностью, что и в бэкенде.

Как на этом эскизе:

Добавьте приведенный ниже код в файл functions.php вашей текущей темы

function add_media_upload_scripts() {
    if ( is_admin() ) {
         return;
       }
    wp_enqueue_media();
}
add_action('wp_enqueue_scripts', 'add_media_upload_scripts');

Кроме того, вы можете более подробно изучить это, следуя этому блогу (например, https://codestag.com/how-to-use-wordpress-3-5-media-uploader-in-theme-options/)

Ответ или решение

Для отображения медиабиблиотеки WordPress на фронтенде вашего сайта, вам потребуется выполнить несколько шагов. Поскольку вы хотите переиспользовать код ядра WordPress и не хотите использовать функцию загрузки, мы сосредоточимся на том, как правильно отобразить изображения из медиабиблиотеки на пользовательской странице с использованием HTML, CSS и JavaScript.

Шаг 1: Подключение скриптов медиа-библиотеки

Первым делом, добавьте следующий код в файл functions.php вашей темы. Это позволит вам подключить необходимые скрипты и стили медиабиблиотеки:

function add_media_library_scripts() {
    if ( is_admin() ) {
        return;
    }
    wp_enqueue_media();
}
add_action('wp_enqueue_scripts', 'add_media_library_scripts');

Шаг 2: Создание шорткода для вывода медиабиблиотеки

Добавьте следующий код в ваш файл functions.php, чтобы создать шорткод, который будет выводить медиабиблиотеку:

function display_media_library() {
    $args = array(
        'post_type' => 'attachment',
        'post_mime_type' => 'image',
        'post_status' => 'inherit',
        'posts_per_page' => -1,
    );
    $attachments = get_posts($args);

    if ($attachments) {
        $output = '<div class="media-library">';
        foreach ($attachments as $attachment) {
            $image_url = wp_get_attachment_image_src($attachment->ID, 'thumbnail')[0];
            $output .= '<div class="media-item" data-id="' . $attachment->ID . '">
                            <img src="' . esc_url($image_url) . '" alt="' . esc_attr($attachment->post_title) . '">
                        </div>';
        }
        $output .= '</div>';
        return $output;
    }
    return '<p>Нет изображений в медиабиблиотеке.</p>';
}
add_shortcode('media_library', 'display_media_library');

Теперь вы можете использовать шорткод [media_library] на любых страницах или в записях вашего сайта, чтобы вывести все изображения из медиабиблиотеки.

Шаг 3: Добавление стилей

Для того чтобы стилизовать медиабиблиотеку подобно той, что используется в админке, добавьте следующий CSS в файл style.css вашей темы:

.media-library {
    display: flex;
    flex-wrap: wrap;
}

.media-item {
    margin: 10px;
    cursor: pointer;
}

.media-item img {
    max-width: 100px;
    border: 2px solid #ccc;
    border-radius: 4px;
}

.media-item img:hover {
    border-color: #0073aa;
}

Шаг 4: Добавление функциональности JS

Если вы хотите добавить функциональность, чтобы при клике на изображение открывалось его полное изображение или другой функционал, вы можете добавить следующий код JavaScript. Создайте файл scripts.js в вашей теме и подключите его в functions.php:

function add_custom_scripts() {
    wp_enqueue_script('custom-scripts', get_template_directory_uri() . '/scripts.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'add_custom_scripts');

Затем добавьте следующий код в scripts.js:

jQuery(document).ready(function($) {
    $('.media-item').on('click', function() {
        var id = $(this).data('id');
        var imgUrl = wp.media.attachment(id).get('url');
        // Открытие изображения в новом окне или любое другое действие
        window.open(imgUrl, '_blank');
    });
});

Заключение

Теперь у вас есть полностью функционирующая медиабиблиотека на фронтенде вашего сайта, отображающая все изображения из WordPress, с использованием кода ядра. Вы можете модифицировать CSS и JS по своему усмотрению, чтобы достичь желаемого результата и внешнего вида.

Если у вас остались вопросы или нужна помощь с индивидуальными изменениями, не стесняйтесь спрашивать!

Используйте “Медиа-библиотеку” в интерфейсе пользователя.