wordpress CMS主题 微信
  • 全部教程
  • Home > wordpress CMS主题制作 > 为wordpressCMS主题设置页面添加图片上传(2):处理及保存数据

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

    高时银博客 wordpress CMS主题制作 点击: 1,437 次 0 1

    上一章我们为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主题设置页面图片上传等选项的添加。下面是点击“保存设置”按钮后的效果图:

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

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


    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201506234502.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    目前还没有评论。赶快来坐沙发吧。

    发表评论