使用过wordpress朋友们都知道,wordpress有自带的图片上传功能,特别是新版出来后,这个功能提高了用户体验,使用起来还是很方便的。当我们在给自己的主题进行更新和自己开发一些功能的时候,常常会用到使用图片的,而我们通常使用的方法就是直接将图片路径输入进行,比如Logo图片什么的,如果我们加上图片上传功能,这样我就可以很方便的进行选择添加了,那么磊子就说下这个使用方法。

现在一些主题都或多或少的添加了主题设置的功能,我们要做的就是在主题设置里面添加上传按钮。所以需要找到主题设置这个功能的代码所在的文件,找到它创建的菜单函数,比如:add_menu_page,add_submenu_page等等,然后再下面添加这些代码。

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" value="<?php echo get_option('lei_left_box'); ?>" class="regular-text left_box" />

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

在上面代码中还提到一个my-script.js文件,这个需要我们自行创建,而且注意检查你引入的地址是不是正确,my-script.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();
		}

});

都添加好,路径都检查好没有问题后刷新一下你主题设置的菜单。会出现按钮出来,如下图:


然后点击Upload Image的时候就会弹出和wordpress自带的图片上传一样的效果了,图片保存的地方同样是在uploads文件夹下,这样一个图片上传功能就做好了。

由于主题的不同它所写的代码结构也不大相同,所以需要根据大家主题的代码结构来对上面的方法做相应的修改和调整,这个就需要大家自己研究下自己的主题咯,或者也可以联系磊子和你一起来看看。