网站服务项目
当前位置: 首页 > 建站知识 > wordpress自定义字段(6):给自定义面版添加上传图片

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

发布于:建站知识来源:郴州网站建设作者:www.zebiao.net 点击: 1,022 次
  

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

 
------分隔线----------------------------
------分隔线----------------------------