wordpress CMS主题 微信
  • 全部教程
  • Home > wordpress CMS主题制作 > wordpress自定义字段(6):给自定义面版添加上传图片

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

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

    通过前面几章的介绍,我们可以看到,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):给自定义面版添加上传图片

     


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

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

    发表评论