为wordpressCMS主题设置页面添加图片上传(2)：处理及保存数据

扫描下面的二维码，“关注”我的百家号。

上一章我们为wordpess主题设置页面添加了设置选项图片上传及文本框，但是还没有实现上传功能。本章，我们就来完成这个设置页面的功能：图片上传、文本框数据保存。

第四步：添加JS代码。

这里就要用到JS代码了。所以，我们还要添加一段js代码来显示图片上传窗口。在wordpress主题文件夹的JS文件夹下创建一个JS文件 upload.php ，然后添加如下JS代码：

jQuery(document).ready(function() {
//查找class为wanlimm_bottom的对象
jQuery('input.wanlimm_bottom').click(function() {
//获取它前面的一个兄弟元素
targetfield = jQuery(this).prev('input');
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(targetfield).val(imgurl);
tb_remove();
}

});

然后在ClassicOptions类中 display()函数中引用这个JS文件，代码如下：

//点击后弹出上传框架，我们还需要添加js代码 加载upload.js文件
wp_enqueue_script('my-upload', get_bloginfo( 'stylesheet_directory' ) . '/js/upload.js');
//加载上传图片的js代码，这个wordpress自带有
wp_enqueue_script('thickbox');
//加载上传图片的css代码，这个wordpress自带有
wp_enqueue_style('thickbox');

通过上面的代码，我们就可以在点击“上传”按钮的时候弹出上传图片窗口。

第五步：添加数据处理函数。

前面这些代码只是在设置页面显示了相关的表单项，如果你上传了图片和输入了数据到文本框中，点击保存按钮后，并不能保存到数据库，所以，我们还要在ClassicOptions类添加相应的数据处理函数，用来更新插入我们上传和输入的数据。在ClassicOptions类的display()函数前面添加如下代码：

function getOptions() {
// 在数据库中获取选项组
$options = get_option('classic_options');
if (!is_array($options)) { // 如果数据库中不存在该选项组, 设定这些选项的默认值, 并将它们插入数据库
$options['wanlimm_logo'] = ''; //表单项wanlimm_logo为空
$options['wanlimm_ico'] = ''; //表单项wanlimm_ico为空
$options['wanlimm_name'] = '';
$options['wanlimm_jiage'] = ''; //表单项wanlimmjiage为空
$options['wanlimm_url'] = '';
// 在这里 我们还可追加其他表单选项
update_option('classic_options', $options); //插入并更新选项组
}
return $options; // 返回选项组
}
/* -- 初始化 -- */
function init() {
if(isset($_POST['classic_save'])) { // 如果是 POST 提交数据
// 获取选项组, 因为有可能只修改部分选项, 所以先整个拿下来再进行更改
$options = ClassicOptions::getOptions();
$options['wanlimm_logo'] = stripslashes($_POST['wanlimm_logo']); //插入表单项wanlimm_logo
$options['wanlimm_ico'] = stripslashes($_POST['wanlimm_ico']); //插入表单项wanlimm_ico
$options['wanlimm_name'] = stripslashes($_POST['wanlimm_name']);
$options['wanlimm_jiage'] = stripslashes($_POST['wanlimm_jiage']);
$options['wanlimm_url'] = stripslashes($_POST['wanlimm_url']);
// 在这里可以追加其他表单选项处理
update_option('classic_options', $options); // 更新数据
} else {
ClassicOptions::getOptions(); // 否则, 重新获取选项组, 也就是对数据进行初始化
}
// 在后台外观菜单下添加子菜单 WAN主题设置
add_theme_page("主题设置", "WAN主题设置", 'edit_themes', basename(__FILE__), array('ClassicOptions', 'display'));
}

上面这段代码，我已在代码中做了相应的注释了，所以，不再多说。上面代码就是用来保存数据并插入数据到你的wordpress数据库的。

好了，到这里，我们就完成了wordpress主题设置页面图片上传等选项的添加。下面是点击“保存设置”按钮后的效果图：

通过上图，我们可以看到，我们上传的图片路径地址和文本框中输入的产品名称、产品价格、产品链接地址都保存下来并显示出来。但是还有一个小缺陷，就是没有显示图片的预览图，这个我们在下一章继续为你解说。