• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > wordpress CMS主题制作 > 为wordpressCMS主题设置页面添加图片上传(2):处理及保存数据

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

    作者: 分类:wordpress CMS主题制作 点击: 2,309 次
    wordpress CMS主题:ssmay主题

      上一章我们为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):处理及保存数据

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



      QQ二维码

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

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.