網站服務項目
當前位置: 首頁 > 建站知識 > wordpress自定義字段(6):給自定義面版添加上傳圖片

wordpress自定義字段(6):給自定義面版添加上傳圖片

發布于:建站知識來源:郴州網站建設作者:www.5156123.live 點擊: 1,061 次
  

通過前面幾章的介紹,我們可以看到,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):給自定義面版添加上傳圖片

 
------分隔線----------------------------
------分隔線----------------------------
金信达配资