• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > wordpress CMS主题制作 > wordpress自定义字段(6):给自定义面版添加上传图片

    wordpress自定义字段(6):给自定义面版添加上传图片

    作者: 分类:wordpress CMS主题制作 点击: 5,408 次
    wordpress CMS主题:ssmay主题

      通过前面几章的介绍,我们可以看到,wordpress自定义字段的功能是非常强大的,在我们开发wordpress主题时,合理的应用wordpress自定义字段,以我们创作的wordpress主题功能提升是非常用帮助的。本章我们再来介绍如何在wordpress自定义面版中添加图片上传功能

      其实在wordpress文章发表页,wordpress就自带有图片上传按钮——“添加媒体”,所以,在文章发表页基本上不需要再添加这个wordpress自定义面版的图片上传模块。但是在我们制作wordpress主题自定义PAGE页面时,就可能会用到这个。下面,就一起来看看怎样添加wordpress自定义面版图片上传功能吧。

      1、接上一章,在metabox.php文件中的二维数组中添加“图片上传”这一项,代码如下:

      "uploads" => array(
      "name" => "_meta_uploader",
      "std" => '',
      "title" => "图片上传",
      "type"=>"uploader"),

      2、然后在metabox.php文件中的switch判断语句中添加图片上传显示代码,代码如下:

      //图片上传
      case 'uploader':
      echo'<h4>'.$meta_box['title'].'</h4>';
      if($meta_box['std'] != ''){
      echo '<span id="'.$meta_box['name'].'_value_img"><img src='.$meta_box['std'].' alt="" /></span>';}
      echo '<input class="ashu_upload_input" type="text" size="40" value="'.$meta_box['std'].'" name="'.$meta_box['name'].'_value"/>';
      echo '<input type="button" value="上传" class="ashu_bottom"/>';
      echo '<br/>';
      break;

      3、通过js代码来实现图片上传功能。上面这些代码,只能调到上传图片上传的对话框,但是,点击上传按钮时是没有任何反应的,也就是说还不能实现图片上传,更不能实现实时预览。所以我们需要添加一个js文件,来实现这种功能。在主题文件夹下创建一个js文件夹,然后再在js文件夹里创建一个名为metabox_up.js的js文件,通过dreamweaver打开这个metabox_up.js,在里添加如下代码:

      jQuery(document).ready(function() {
      jQuery('input.ashu_bottom').click(function() {
      custom_editor = true;
      targetfield = jQuery(this).prev('input');
      tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');
      window.original_send_to_editor = window.send_to_editor;
      window.send_to_editor = function(html) {
      if (custom_editor) {
      imgurl = jQuery('img',html).attr('src');
      jQuery(targetfield).val(imgurl).focus();
      custom_editor = false;
      tb_remove();
      }else{
      window.original_send_to_editor(html);
      }
      }
      return false;
      });

      //图片实时预览ashu_upload_input为图片url文本框的class属性
      jQuery('input.ashu_upload_input').each(function()
      {
      jQuery(this).bind('change focus blur', function()
      {
      //获取改文本框的name属性后面
      $select = '#' + jQuery(this).attr('name') + '_img';
      $value = jQuery(this).val();
      $image = '<img src ="'+$value+'" />';

      var $image = jQuery($select).html('').append($image).find('img');

      //set timeout because of safari
      window.setTimeout(function()
      {
      if(parseInt($image.attr('width')) < 20)
      {
      jQuery($select).html('');
      }
      },500);
      });
      });

      });

      4、调用这个metabox_up.js文件。在metabox.php文件中添加如下代码来调用js文件:

      wp_enqueue_script('metabox_up', get_template_directory_uri(). '/js/metabox_up.js');

      到这里,给wordpress自定义面版添加图片上传功能就结束了。我们来浏览一下效果,如下图:

      wordpress自定义字段(6):给自定义面版添加上传图片

       



      QQ二维码

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

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

    或许你会感兴趣的文章:

    一条回应:“wordpress自定义字段(6):给自定义面版添加上传图片”

    1. 绿软库说道:

      找不到自定义上传修改方法

    发表评论

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

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