插件媒体上传后台配置项

之前也讲过，但是媒体配置项讲的比较笼统，今天重新讲一遍。

首先，我们需要在插件文件夹中创建一个名为media-uploader.js的javascript文件，代码如下：

jQuery(document).ready(function($){
  var mediaUploader;
  $('#upload_image_button').click(function(e) {
    e.preventDefault();
      if (mediaUploader) {
      mediaUploader.open();
      return;
    }
    mediaUploader = wp.media.frames.file_frame = wp.media({
      title: 'Choose Image',
      button: {
      text: 'Choose Image'
    }, multiple: false });
    mediaUploader.on('select', function() {
      var attachment = mediaUploader.state().get('selection').first().toJSON();
      $('#background_image').val(attachment.url);
    });
    mediaUploader.open();
  });
});

然后将js载入后台：

<?php
    function media_uploader_enqueue() {
    	wp_enqueue_media();
    	wp_register_script('media-uploader', plugins_url('media-uploader.js' , __FILE__ ), array('jquery'));
    	wp_enqueue_script('media-uploader');
    }
    add_action('admin_enqueue_scripts', 'media_uploader_enqueue');
?>

最后在需要配置的地方添加input：

<input id="background_image" type="text" name="background_image" value="<?php echo get_option('background_image'); ?>" />
<input id="upload_image_button" type="button" class="button-primary" value="Insert Image" />

下面展示我写的成品（js就省略了）：

<?php
/*
  Plugin Name:dateview设置插件
  Description:本插件是UESDTO后台可视化设置的插件，全称“dateview settings plugins”，简称“dsp”。
  Author: 殷江碧
  Author URI: https://www.kekc.cn
  Version: 1.0
*/



function media_uploader_enqueue() {
	wp_enqueue_media();
	wp_register_script('media-uploader', plugins_url('media-uploader.js' , __FILE__ ), array('jquery'));
	wp_enqueue_script('media-uploader');
}
add_action('admin_enqueue_scripts', 'media_uploader_enqueue');


//添加菜单
function register_dateviewsettings() { // whitelist options
  register_setting( 'dateviewoption-group', 'background_image' );//页面title
}
if ( is_admin() ){ // admin actions
  add_action( 'admin_menu', 'dateview_menu' );
  add_action( 'admin_init', 'register_dateviewsettings' );
} else {
  // non-admin enqueues, actions, and filters
}
function dateview_menu() {
    add_menu_page("dateview设置", "dateview设置", 'administrator', 'dateview_menu', 'adminpage_html');//管理员显示该菜单，编辑，作者，投稿人等其他人则不显示
}
//添加菜单




function adminpage_html() {
    ?>
<div class="wrap">
  <h1>dateview设置</h1>
  <form method="post" action="options.php">  
    <?php /* 下面这行代码用来保存表单中内容到数据库 */ ?>  
    <?php wp_nonce_field('update-options');
    settings_fields( 'dateviewoption-group' );
    do_settings_sections( 'dateviewoption-group' );
    ?>
    
    <table class="form-table" role="presentation">
      <tbody>
        <tr>
          <th scope="row">
            <label for="dateview_pagetitle">图片</label>
          </th>
          <td>
            <input id="background_image" type="text" name="background_image" value="<?php echo get_option('background_image'); ?>" />
            <input id="upload_image_button" type="button" class="button-primary" value="上传媒体文件" />
          </td>
        </tr>

      </tbody>
    </table>
    <p class="submit">
      <input type="hidden" name="action" value="update" />  
      <input type="hidden" name="page_options" value="dateview_menu" />
      <input type="submit" name="submit" id="submit" class="button button-primary" value="保存更改">
    </p>
  </form>
</div>


<?php  
}
?>

下面看下成果：

今天在写的时候又发现了两个插件

很久很久之前的，对于还要深入学习可以搜索关键词：wp.media，插件如下：

https://github.com/Veraxus/nv-example-meta-box

https://github.com/ericandrewlewis/wp-media-javascript-guide