学做网站培训课程介绍

当前位置:

如何给WordPress后台文章添加自定义字段填写框(带图片上传)

WordPress后台文章添加自定义字段填是非常简单的下拉选择式,如何将Wordpress后台文章添加自定义字段填变为填写框,并且让他可以上传图片的功能呢?下面学建站网站就来分享一下实现方法。

先看下实现后的效果图:

下面是Wordpress后台文章添加自定义字段填写框(带图片上传)实现的代码,将以下的代码放到functions.php里;


//先要在后台创建中/英文参数
$cansuzn=get_option('cansuzn');
$cansuen=get_option('cansuen');
$cansuznarr= $cansuzn ? explode(",", $cansuzn) : array();
$cansuenarr= $cansuen ? explode(",", $cansuen) : array();
$jiagebox = array(
"yxs" => array(
"name" => "yxs",
"title" => "已销售数量"),
"yuanjia" => array(
"name" => "yuanjia",
"title" => "产品原价"),
"xianjia" => array(
"name" => "xianjia",
"title" => "产品现价"),
);
$imgup = array(
"sproimg1" => array(
"name" => "sproimg1",
"title" => "商品图片"),
"sproimg2" => array(
"name" => "sproimg2",
"title" => "商品图片"),
"sproimg3" => array(
"name" => "sproimg3",
"title" => "商品图片"),
"sproimg4" => array(
"name" => "sproimg4",
"title" => "商品图片"),
"sproimg5" => array(
"name" => "sproimg5",
"title" => "商品图片"),
"sproimg6" => array(
"name" => "sproimg6",
"title" => "商品图片"),
);
$new_meta_boxes = array();
$ziduanall = array();
$ziduanls = array();
for($k=0;$k<count($cansuznarr);$k++){
$ziduanls['name']=$cansuenarr[$k];
$ziduanls['title']=$cansuznarr[$k];
$ziduanall[$cansuenarr[$k]] = $ziduanls;
}
$new_meta_boxes = $ziduanall;
$new_meta_boxes = array_merge($jiagebox,$new_meta_boxes);
$new_meta_boxes = array_merge($new_meta_boxes,$imgup);
function new_meta_boxes() {
global $post, $new_meta_boxes;
echo'<style>.metadivs{margin:20px;font-size:14px}.metadivs input{padding:5px;width:500px}.metaspan{display:inline-block;width:80px;vertical-align:middle;font-weight:600}.mzspan{display:inline-block;vertical-align:top;}.imglistsst{width:16%;padding:10px;display:inline-block;}.imglistsst input{width:100%}.imglistsst img{width:100%;height:140px}</style>';
foreach($new_meta_boxes as $meta_box) {
$meta_box_value = get_post_meta($post->ID, $meta_box['name'].'_value', true);
if($meta_box_value == "")
$meta_box_value = $meta_box['std'];
echo'<input type="hidden" name="'.$meta_box['name'].'_noncename" id="'.$meta_box['name'].'_noncename" value="'.wp_create_nonce( plugin_basename(__FILE__) ).'" />';
if($meta_box['title'] == '商品图片'){
$imgzhi = $meta_box_value ? 'src="'.$meta_box_value.'"' : '';
echo '<div class="imglistsst">
<img class="custom_media_image'
.$meta_box["name"].'" '.$imgzhi.' /><br>
<input class="custom_media_url'
.$meta_box["name"].'" type="hidden" name="'.$meta_box['name'].'_value" value="'.$meta_box_value.'">
<input type="button" value="上传图片" class="custom_media_upload" id="'
.$meta_box["name"].'" />
<input type="button" value="删除图片" class="custom_media_del" id="'
.$meta_box["name"].'" />
</div>'
;
}else{
// 自定义字段标题
echo '<div class="metadivs"><span class="metaspan">'.$meta_box['title'].'</span>';
// 自定义字段输入框
echo '<span class="mzspan"><input type="text" name="'.$meta_box['name'].'_value" value="'.$meta_box_value.'"><br /><span style="font-size:12px">填写'.$meta_box['title'].'属性,多个用英文逗号隔开。</span></span></div>';
}
}
echo '<script>
jQuery(".custom_media_upload").click(function() {
var kid = this.id;
var send_attachment_bkp = wp.media.editor.send.attachment;
wp.media.editor.send.attachment = function(props, attachment) {
jQuery(".custom_media_image"+kid).attr("src", attachment.url);
jQuery(".custom_media_url"+kid).val(attachment.url);
wp.media.editor.send.attachment = send_attachment_bkp;
}
wp.media.editor.open();
return false;
});
jQuery(".custom_media_del").click(function() {
var kid = this.id;
jQuery(".custom_media_image"+kid).attr("src", "");
jQuery(".custom_media_url"+kid).val("");
return false;
});
</script>'
;
}
function create_meta_box() {
global $theme_name;
if ( function_exists('add_meta_box') ) {
add_meta_box( 'new-meta-boxes', '商品参数填写', 'new_meta_boxes', 'post', 'normal', 'high' );
}
}
function save_postdata( $post_id ) {
global $post, $new_meta_boxes;
foreach($new_meta_boxes as $meta_box) {
if ( !wp_verify_nonce( $_POST[$meta_box['name'].'_noncename'], plugin_basename(__FILE__) )) {
return $post_id;
}
if ( 'page' == $_POST['post_type'] ) {
if ( !current_user_can( 'edit_page', $post_id ))
return $post_id;
}
else {
if ( !current_user_can( 'edit_post', $post_id ))
return $post_id;
}
$data = $_POST[$meta_box['name'].'_value'];
if(get_post_meta($post_id, $meta_box['name'].'_value') == "")
add_post_meta($post_id, $meta_box['name'].'_value', $data, true);
elseif($data != get_post_meta($post_id, $meta_box['name'].'_value', true))
update_post_meta($post_id, $meta_box['name'].'_value', $data);
elseif($data == "")
delete_post_meta($post_id, $meta_box['name'].'_value', get_post_meta($post_id, $meta_box['name'].'_value', true));
}
}
add_action('admin_menu', 'create_meta_box');
add_action('save_post', 'save_postdata');

通过这段代码就可以在后台文章编辑器下面自定义字段填写框了,并且还有图片上传的功能。

发表评论

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

相关教程

  • 通常我们要修改wordpress程序后台,会在使用的模板里进行修改,怎么直接修改程序文件来直接修改程序后台的内容呢?我们可以直接修改修改程序文件quer
  • WordPress网站后台上传了图片之后,每个图片都会有ID,我们在建网站时,可以通过图片ID来获取图片的路径。怎么通过图片附件的ID来获取图片的路径呢?
  • 为了方便网站的更新,我们通常会在网站后台一次性发布多篇文章,然后定时让它发布,但有时会出现定时发布失败的问题,这是由于一些意料之外的原因造成
  • WordPress网站开启文章形式://文章类型add_theme_support( 'post-formats', array( 'aside','image'));WordPress网站为不同
  • 我们有的时候,在制作好一款wordpress主题的时候,也需要用户在激活主题后,能够自动的创建一些页面和文章,好让用户能够更好更快的熟悉起来,因为,
  • 使用wordpress做网站时,我们有时需要创建一个数据表来存储自己的一些信息,那么怎么在前端就可以自动创建数据表呢,并且可以对数据表的信息进行增删
  • 使用WordPress做网站时,需要使用前端投稿功能,我们可以在前端投稿功能中添加图片上传功能。这样用户在前端就可以直接上传图片了。下面学建站网介
  • 有时候,我们想用一个域名,做好几种语言的网站。在互联网领域内,一般说这类网站叫做,多语种网站。  WordPress网站也可以做成多语种的。本地网站
  • 使用WordPress做网站时,往往需要给网站设置伪静态规则。WordPress网站在不同服务器环境下的伪静态规则是不一样的。下面分享一下WordPress网站在Nginx
  • 使用wordpress建好网站之后,如果想让之前发布的文章排在前面,应该怎么操作呢?调用wordpress网站文章排序一般有二种方法:一种是通过修改网站代码的