插件媒体上传后台配置项

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

首先,我们需要在插件文件夹中创建一个名为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  
}
?>

下面看下成果:

图片[1]-插件媒体上传后台配置项 - KEKC博客-KEKC博客
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享