Добавление загрузки изображений на страницы настроек

Код PHP

//добавление блока наши клиенты
add_action( 'admin_enqueue_scripts', 'true_include_myuploadscript' );
 
function true_include_myuploadscript( $hook ) {
 if ( ! did_action( 'wp_enqueue_media' ) ) {
  wp_enqueue_media();
 }
 	wp_enqueue_script( 'myuploadscript', get_stylesheet_directory_uri() . '/javascripts/custom-admin-js.js', array('jquery'), null, false );
}

// Функция для отображения поля загрузки изображений
function true_image_uploader_field($args) {
    $values = get_option($args['name'], []);
    $default = get_stylesheet_directory_uri() . '/placeholder.png';

    echo '<div id="true-image-uploader-container">';
    foreach ($values as $value) {
        $src = $value ? wp_get_attachment_image_url($value, 'thumbnail') : $default;
        $display = $value ? 'inline' : 'none';
        echo '
        <div class="image-item">
            <img data-src="' . esc_url($default) . '" src="' . esc_url($src) . '" width="150" />
            <div>
                <input type="hidden" name="' . esc_attr($args['name']) . '[]" value="' . esc_attr($value) . '" />
                <button type="button" class="upload_image_button button">Загрузить</button>
                <button type="button" class="remove_image_button button" style="display:' . esc_attr($display) . '">×</button>
            </div>
        </div>';
    }
    echo '<button type="button" id="add-image-button" class="button">Добавить изображение</button></div>';
}


// Класс для страницы настроек
class trueOptionsPage {
    public $page_slug;
    public $option_group;

    function __construct() {
        $this->page_slug = 'true_image';
        $this->option_group = 'true_image_settings';

        add_action('admin_menu', array($this, 'add'), 25);
        add_action('admin_init', array($this, 'settings'));
        add_action('admin_notices', array($this, 'notice'));
    }

    function add() {
        add_menu_page(
            'Логотипы наших клиентов',
            'Наши клиенты',
            'manage_options',
            $this->page_slug,
            array($this, 'display'),
            'dashicons-format-image',
            20
        );
    }

    function display() {
        echo '<div class="wrap">
            <h1>' . get_admin_page_title() . '</h1>
            <form method="post" action="options.php">';
        settings_fields($this->option_group);
        do_settings_sections($this->page_slug);
        submit_button('Сохранить логотипы');
        echo '</form></div>';
    }

    function settings() {
        register_setting($this->option_group, 'true_image_field_id', array('sanitize_callback' => 'true_image_sanitize_images'));
        add_settings_section('image_settings_section_id', '', '', $this->page_slug);
        add_settings_field(
            'true_image_field_id',
            'Логотипы',
            'true_image_uploader_field',
            $this->page_slug,
            'image_settings_section_id',
            array('name' => 'true_image_field_id')
        );
    }

    function notice() {
        if (isset($_GET['page']) && $this->page_slug == $_GET['page'] && isset($_GET['settings-updated']) && true == $_GET['settings-updated']) {
            echo '<div class="notice notice-success is-dismissible"><p>Настройки логотипов сохранены!</p></div>';
        }
    }
}

new trueOptionsPage();

// Санитайзинг изображения
function true_image_sanitize_images($images) {
    if (is_array($images)) {
        return array_map('absint', $images);
    }
    return array();
}
function display_clients_logos() {
    $image_ids = get_option('true_image_field_id', array());

    if (empty($image_ids)) {
        return '<section class="tag_cloud_block"><div class="wrapper"><p id="foto" class="report-title">Шикарные фото мероприятий</p><p>Нет доступных логотипов для отображения.</p></div></section>';
    }

    $output = '<section class="tag_cloud_block"><div class="wrapper">';
    $output .= '<h2 class="clients-title">Наши клиенты</h2>';
    
    $output .= '<div class="wrapper-clients">';
    
    foreach ($image_ids as $image_id) {
        $image_url = wp_get_attachment_image_url($image_id, 'full');
        $image_alt = get_post_meta($image_id, '_wp_attachment_image_alt', true);

        $output .= sprintf(
            '<div class="client-logo"><img src="%s" alt="%s" /></div>',
            esc_url($image_url),
            esc_attr($image_alt)
        );
    }
    
    $output .= '</div>';

    $output .= '</div></section>';
    return $output;
}

add_shortcode('clients_logos', 'display_clients_logos');

Код JS

jQuery(function($) {
    $(document).on('click', '.upload_image_button', function(event) {
        event.preventDefault();
        const button = $(this);
        const imageIdField = button.closest('.image-item').find('input[type="hidden"]');
        const currentImageSrc = button.closest('.image-item').find('img').attr('src');

        const customUploader = wp.media({
            title: 'Выберите изображение',
            library: { type: 'image' },
            button: { text: 'Выбрать изображение' },
            multiple: false
        }).on('select', function() {
            const image = customUploader.state().get('selection').first().toJSON();
            button.closest('.image-item').find('img').attr('src', image.url);
            imageIdField.val(image.id);
            button.siblings('.remove_image_button').show();
        });
        customUploader.on('open', function() {
            const selection = customUploader.state().get('selection');
            if (imageIdField.val()) {
                const attachment = wp.media.attachment(imageIdField.val());
                attachment.fetch();
                selection.add(attachment ? [attachment] : []);
            }
        });

        customUploader.open();
    });
    $(document).on('click', '.remove_image_button', function(event) {
        event.preventDefault();
        if (confirm("Уверены?")) {
            const button = $(this);
            const imageItem = button.closest('.image-item');
            imageItem.find('img').attr('src', imageItem.find('img').data('src'));
            imageItem.find('input[type="hidden"]').val('');

            button.hide();
            imageItem.remove();
        }
    });

    $(document).on('click', '#add-image-button', function(event) {
        event.preventDefault();
        $('#true-image-uploader-container').append(`
            <div class="image-item">
                <img data-src="<?php echo esc_url($default); ?>" src="<?php echo esc_url($default); ?>" width="150" />
                <div>
                    <input type="hidden" name="true_image_field_id[]" value="" />
                    <button type="button" class="upload_image_button button">Загрузить</button>
                    <button type="button" class="remove_image_button button" style="display:none">×</button>
                </div>
            </div>
        `);
    });
});

текст