【转载】给wordpress后台添加一个媒体按钮设置页面

首先，请先学习下上篇文章《给wordpress后台添加一个文本式设置页面》，以便你能更好的理解我的文章。

添加和注册设置字段

add_action( 'admin_init',  'custom_page_register_setting' );

function custom_page_register_setting() {

    add_settings_section(
        'homepage_section', // section ID
        '', // title
        '', // callback function
        'custom-page-slug' // page slug
    );

    // logo field
    add_settings_field(
        'theme_logo',
        'Theme Logo',
        'theme_logo_media_field_html', // function which prints the field
        'custom-page-slug', // page slug
        'homepage_section', // section ID
        array( 
            'label_for' => 'theme_logo',
            'class' => 'custom-media-uploader',
        )
    );

    register_setting(
        'custom_page_settings', // settings group name
        'theme_logo', // field name
        'sanitize_text_field' // sanitization function
    );

}

上面的操作钩子将注册“主题logo”的设置字段。您可以根据需要对其进行自定义。现在，我们将添加该字段的HTML结构以显示在自定义设置页面上。

字段的 HTML 结构

在上面的代码中，方法有第三个参数“theme_logo_media_field_html”，该参数与字段的HTML结构有关。add_settings_fields()

因此，现在我们将使该HTML结构函数在自定义选项设置页面上显示该字段。请看下面的代码。

function theme_logo_media_field_html() {
    $theme_logo = get_option( 'theme_logo' );
    if($theme_logo) {
        ?>
            <a href="#" class="custom-upload-button button"><img src="<?php echo $theme_logo; ?>" width="20%"/></a>
            <a href="#" class="custom-upload-remove">Remove image</a>
            <input type="hidden" name="theme_logo" value="">
        <?php
    } else {
        ?>
            <a href="#" class="custom-upload-button button">Upload image</a>
            <a href="#" class="custom-upload-remove" style="display:none;">Remove image</a>
            <input type="hidden" name="theme_logo" value="">
        <?php
    }
}

只需将上述代码添加到functions.php文件，您将看到“上传图像”按钮。但是点击它不会发生任何事情，因为我们还没有添加jQuery代码。

jQuery 媒体按钮代码

让我们在wordpress中添加媒体上传器按钮的jquery部分。您可以直接使用操作挂钩将此代码排入队列，也可以创建单独的.js文件。我会重新建议创建一个名为“scripts.js”的新单独文件。

jQuery(document).ready(function($) {

	// upload function
	$('body').on( 'click', '.custom-upload-button', function(e){
		e.preventDefault();
		var upload_button = $(this),
		custom_media_uploader = wp.media({
			title: 'Insert image',
			library : {
				type : 'image'
			},
			button: {
				text: 'Use this image'
			},
			multiple: false
		}).on('select', function() {
			var attachment = custom_media_uploader.state().get('selection').first().toJSON();
			upload_button.html('<img src="'%20+%20attachment.url%20+%20'" width="20%">');
			$('.custom-upload-remove').show().next().val(attachment.url);
		}).open();
	
	});

	// remove function
	$('body').on('click', '.custom-upload-remove', function(e){
		e.preventDefault();
		var upload_button = $(this);
		upload_button.next().val('');
		upload_button.hide().prev().html('Upload image');
	});

});

将js载入

我们将使用 action 和 wp_enqueue_script（） 方法将 js 脚本文件和媒体文件嵌入。它将仅在管理页面的中嵌入我们的js脚本文件和wordpress媒体文件。admin_enqueue_scripts

add_action( 'admin_enqueue_scripts', 'custom_script_js' );

function custom_script_js() {
    
    if ( ! did_action( 'wp_enqueue_media' ) ) {
        wp_enqueue_media();
    }
 
    wp_enqueue_script( 'custom-media-uploader', get_stylesheet_directory_uri() . '/scripts.js', array( 'jquery' ) );
}