WordPress에서 미디어 셀렉터를 add_settings_field에 추가하는 방법

WordPress에서 미디어 셀렉터를 add_settings_field에 추가하는 방법

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>';
}

그러나 모든 이미지를 업로드한 미디어 라이브러리에서 이미지를 선택할 수 있도록 미디어 셀렉터를 추가합니다.

이게 가능합니까?

네, 확실히 가능합니다.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의 예에 근거하고 있습니다.

언급URL : https://stackoverflow.com/questions/48315755/how-to-add-media-selector-to-add-settings-field-in-wordpress