Wie füge ich Media Selector zu add_settings_field in WordPress hinzu?

Wie kann ich hinzufügen Medienauswahl zu add_settings_field in WordPress?

Dies sind die zusätzlichen Felder, die ich zu Einstellungen -> hinzugefügt habe Allgemein Seite in 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>';
}

Aber ich möchte die Medienauswahl hinzufügen, damit ich ein Bild aus der Medienbibliothek auswählen kann, in die ich alle meine Bilder hochgeladen habe.

Ist das möglich?

Ja, es ist definitiv möglich. Normalerweise verwende ich eine Texteingabe, die mit dem integrierten WordPress-Medien-Uploader gekoppelt ist, und füge die Bild-URL eines Bildes in der Medienbibliothek in dieses Textfeld ein.

Stellen Sie zunächst sicher, dass Sie das Medien-Uploader-Skript sowie Ihr eigenes benutzerdefiniertes Skript (das ich in meinem Fall aufgerufen habe my-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');
}

Fügen Sie die folgende Eingabe auf Ihrer Einstellungsseite hinzu (Sie können sie auf die gleiche Weise hinzufügen, wie Sie Ihre anderen hinzugefügt haben):

<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" />

Dann können Sie das folgende Skript hinzufügen my-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();
    });
});

Ich habe dies überall persönlich verwendet, aber der gesamte Code basiert auf dem Beispiel, das auf bereitgestellt wird webmaster-source.com.