首页 » Wordpress » Wordpress进阶教程
网站地图

wordpress进阶教程(九):在自定义面板中添加图片上传功能

通过自定义字段给文章添加一些附属图片什么的，应用很广，一般技术不到位的，会使用自定义字段填写图片url来实现，那样虽然实现了，但是非常不方便，我们要的是不经能直接填写图片url，而且能直接上传，并且要能够实时预览。其实理论很简单，跟我们后台教程中添加图片上传功能基本一样，可参考：wordpress主题后台制作(八):图片上传。

OK，我们还是沿用上一篇教程中的代码，并且直接在上一篇教程中添加图片上传功能：

首先打开我们的metabox.php文件，在配置数组中添加一项：


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


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;  


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);      
        });      
    });      
       
});  


wp_enqueue_script('kriesi_custom_fields_js', get_template_directory_uri(). '/js/metaup.js');  


<?php   
$new_meta_boxes =    
array(   
    "title" => array(   
        "name" => "_meta_title",   
        "std" => "",   
        "title" => "标题",   
        "type"=>"title"),      
     
    "keywords" => array(   
        "name" => "_meta_keywords",   
        "std" => "",      
        "title" => "关键字",   
        "type"=>"text"),   
           
    "description" => array(   
        "name" => "_meta_description",   
        "std" => "",      
        "title" => "描述%

 第二步：在函数new_meta_boxes中的switch语句中添加一项即可，其实我们直接将后台教程中提到的上传代码复制过来即可用：


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


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;  


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);      
        });      
    });      
       
});  


wp_enqueue_script('kriesi_custom_fields_js', get_template_directory_uri(). '/js/metaup.js');  


<?php   
$new_meta_boxes =    
array(   
    "title" => array(   
        "name" => "_meta_title",   
        "std" => "",   
        "title" => "标题",   
        "type"=>"title"),      
     
    "keywords" => array(   
        "name" => "_meta_keywords",   
        "std" => "",      
        "title" => "关键字",   
        "type"=>"text"),   
           
    "description" => array(   
        "name" => "_meta_description",   
        "std" => "",      
        "title" => "描述%

 第三步：加载js，要知道，如果仅仅加这个代码，虽然你能够调取到上传图片上传的对话框，但是还不能将图片url插入到文本域中，更不能实现实时预览。所以我们需要添加一个js文件，比如我沿用以前的，在twenty ten主题中新建一个js文件夹，在里面加你一个名为metaup.js的js文件，该js文件中的代码为：


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


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;  


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);      
        });      
    });      
       
});  


wp_enqueue_script('kriesi_custom_fields_js', get_template_directory_uri(). '/js/metaup.js');  


<?php   
$new_meta_boxes =    
array(   
    "title" => array(   
        "name" => "_meta_title",   
        "std" => "",   
        "title" => "标题",   
        "type"=>"title"),      
     
    "keywords" => array(   
        "name" => "_meta_keywords",   
        "std" => "",      
        "title" => "关键字",   
        "type"=>"text"),   
           
    "description" => array(   
        "name" => "_meta_description",   
        "std" => "",      
        "title" => "描述%

第四步：加载js文件，在metabox.php文件的函数中(请注意是在该函数中，不在switch语句的外面,或者你也可以直接放在这个文件中，不放在任何函数里面)添加以下代码：


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


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;  


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);      
        });      
    });      
       
});  


wp_enqueue_script('kriesi_custom_fields_js', get_template_directory_uri(). '/js/metaup.js');  


<?php   
$new_meta_boxes =    
array(   
    "title" => array(   
        "name" => "_meta_title",   
        "std" => "",   
        "title" => "标题",   
        "type"=>"title"),      
     
    "keywords" => array(   
        "name" => "_meta_keywords",   
        "std" => "",      
        "title" => "关键字",   
        "type"=>"text"),   
           
    "description" => array(   
        "name" => "_meta_description",   
        "std" => "",      
        "title" => "描述%

这样就完成了，效果图：

wordpress自定义面板中添加图片上传功能

调用方法请参考上一篇文章。

好了，为了方便懒人使用，将现在的metabox.php中的代码全部贴出，注意现在添加js文件才能使用哦。


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


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;  


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);      
        });      
    });      
       
});  


wp_enqueue_script('kriesi_custom_fields_js', get_template_directory_uri(). '/js/metaup.js');  


<?php   
$new_meta_boxes =    
array(   
    "title" => array(   
        "name" => "_meta_title",   
        "std" => "",   
        "title" => "标题",   
        "type"=>"title"),      
     
    "keywords" => array(   
        "name" => "_meta_keywords",   
        "std" => "",      
        "title" => "关键字",   
        "type"=>"text"),   
           
    "description" => array(   
        "name" => "_meta_description",   
        "std" => "",      
        "title" => "描述%