¿Cómo agregar Media Selector a add_settings_field en WordPress?

4 minutos de lectura

como puedo agregar Selector de medios agregar_settings_field en WordPress?

Estos son los campos adicionales que agregué a Configuración -> General página en WordPress:

/**
 * Add more input fields in general settings.
 */
add_action('admin_init', 'extended_general_settings');
function extended_general_settings() {
    add_settings_section(
        'other_site_details', // Section ID
        'Other Site Details', // Section Title
        'extended_general_settings_description_callback', // Callback
        'general' // What Page?  This makes the section show up on the General Settings Page
    );

    add_settings_field( // Content
        'meta_description', // Option ID
        'Meta Description', // Label
        'extended_generals_setting_textarea_callback', // !important - This is where the args go!
        'general', // Page it will be displayed (General Settings)
        'other_site_details', // Name of our section
        array( // The $args
            'meta_description' // Should match Option ID
        )
    );

    add_settings_field( // Keywords
        'meta_keywords', // Option ID
        'Meta Keywords', // Label
        'extended_generals_setting_textarea_callback', // !important - This is where the args go!
        'general', // Page it will be displayed (General Settings)
        'other_site_details', // Name of our section
        array( // The $args
            'meta_keywords' // Should match Option ID
        )
    );

    add_settings_field( // Telephone
        'telephone', // Option ID
        'Telephone', // Label
        'extended_general_settings_textbox_callback', // !important - This is where the args go!
        'general', // Page it will be displayed (General Settings)
        'other_site_details', // Name of our section
        array( // The $args
            'telephone' // Should match Option ID
        )
    );

    add_settings_field( // Email
        'email', // Option ID
        'Email', // Label
        'extended_general_settings_textbox_callback', // !important - This is where the args go!
        'general', // Page it will be displayed
        'other_site_details', // Name of our section (General Settings)
        array( // The $args
            'email' // Should match Option ID
        )
    );

    register_setting('general','meta_description', 'esc_attr');
    register_setting('general','meta_keywords', 'esc_attr');
    register_setting('general','telephone', 'esc_attr');
    register_setting('general','email', 'esc_attr');
}

function extended_general_settings_description_callback() { // Section Callback
    echo '<p>Add additional site info below here:</p>';
}

function extended_general_settings_textbox_callback($args) {  // Textbox Callback
    $option = get_option($args[0]);
    echo '<input type="text" id="'. $args[0] .'" name="'. $args[0] .'" value="' . $option . '" class="regular-text ltr"/>';
}

function extended_generals_setting_textarea_callback($args) {  // Textbox Callback
    $option = get_option($args[0]);
    echo '<textarea rows="6" cols="40" id="'. $args[0] .'" name="'. $args[0] .'" class="regular-text ltr">' . $option . '</textarea>';
}

Pero quiero agregar el selector de medios para poder seleccionar una imagen de la biblioteca de medios donde cargué todas mis imágenes.

es posible?

Sí, definitivamente es posible. Por lo general, uso una entrada de texto junto con el cargador de medios incorporado de WordPress para insertar la URL de la imagen de una imagen en la biblioteca de medios en dicho campo de texto.

Primero, asegúrese de poner en cola la secuencia de comandos del cargador de medios, así como su propia secuencia de comandos personalizada (que en mi caso he llamado mi-admin.js):

function my_admin_scripts() {
    wp_enqueue_media();
    wp_register_script('my-admin-js', '/the-url-location-for/my-admin.js', array('jquery'));
    wp_enqueue_script('my-admin-js');
}

Agregue la siguiente entrada en su página de configuración (puede agregarla de la misma manera que agregó las demás):

<input id="upload_image" type="text" size="36" name="ad_image" value=<?PHP echo get_option('ad_image'); ?> /> 
<input id="upload_image_button" class="button" type="button" value="Upload Menu" />

Luego puede agregar el siguiente script dentro mi-admin.js:

jQuery(document).ready(function($){
    var custom_uploader;
    $('#upload_image_button').click(function(e) {
        e.preventDefault();
        //If the uploader object has already been created, reopen the dialog
        if (custom_uploader) {
            custom_uploader.open();
            return;
        }
        //Extend the wp.media object
        custom_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Choose Image',
            button: {
                text: 'Choose Image'
            },
            multiple: false
        });
        //When a file is selected, grab the URL and set it as the text field's value
        custom_uploader.on('select', function() {
            attachment = custom_uploader.state().get('selection').first().toJSON();
            $('#upload_image').val(attachment.url);
        });
        //Open the uploader dialog
        custom_uploader.open();
    });
});

Personalmente, he usado esto en todas partes, sin embargo, todo este código se basa en el ejemplo proporcionado en webmaster-source.com.

  • ¡Gracias por la respuesta! 🙂

    – Correr

    18 de enero de 2018 a las 8:34

¿Ha sido útil esta solución?