如何将媒体选择器添加到WordPress中的add_settings_field

Question

如何在WordPress中将媒体选择器添加到add_settings_field？

这是我添加到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>';
}

但是我想添加媒体选择器，以便我可以从媒体库中选择一个图像，我已将所有图像上传到其中。

这可能吗？

Answer 1

是的，这绝对是可能的。我通常使用文本输入与内置的WordPress媒体上传器结合使用，将媒体库中图像的图像URL插入所述文本字段。

首先，确保将媒体上传程序脚本以及您自己的自定义脚本(在我的情况下，我称之为 my-admin.js(排队：

add_action('admin_enqueue_scripts', 'my_admin_scripts');
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');
}

在设置页面上添加以下输入(您可以像添加其他输入一样添加它(：

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

然后，您可以在 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();
    });
});

我个人到处都使用它，但是所有这些代码都是基于 webmaster-source.com 上提供的示例。