Loading
0

WordPress教程 给主题设置中添加图片上传功能

写主题后台logo设置的时候一直都是直接添加图片地址,突然想能不能利用wordpress自带的media upload功能,于是研究了一翻。

function my_admin_scripts() { //加载需要使用的js文件。
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');
    wp_register_script('my-upload', get_bloginfo('template_directory').'/js/my-script.js', array('jquery','media-upload','thickbox'));
    wp_enqueue_script('my-upload');
}

function my_admin_styles() { //加载样式文件。
    wp_enqueue_style('thickbox');
}

if (isset($_GET['page']) && $_GET['page'] == 'themeoption') {
    add_action('admin_print_scripts', 'my_admin_scripts');
    add_action('admin_print_styles', 'my_admin_styles');
}
//themeoption是创建这个菜单的地址名称,比如当我点击自己主题后台的主题设置的时候
//地址栏中后面一段是admin.php?page=themeoption,这个themeoption就是我们要使用的

演示HTML结构

<label for="left_box">图片上传测试</label>

<input name="left_box" type="text" id="left_box" class="regular-text left_box" value="<?php echo get_option('lei_left_box'); ?>" />

<input type="button" id="left_upload_button" class="left_upload_button" name="left_upload_button" value="Upload Image"  />

JS代码

jQuery(document).ready(function() {

    jQuery('.left_upload_button').click(function() {
         targetfield = jQuery(this).prev('#left_box');
         tb_show('', 'media-upload.php?type=image&TB_iframe=true');
         return false;
    });

    window.send_to_editor = function(html) {
             imgurl = jQuery('img',html).attr('src');
             jQuery("#left_box").val(imgurl);
             tb_remove();
        }

});