WordPress评论框DIY自定义增加字段

小编曾经做过有关wordpres评论框自定义的文章，这里我们用另外一个方法实现自定义增加评论框的自定义字段。WordPress默认的评论框只有姓名、邮箱、站点和评论四个字段，但对于一个企业网站，或者一个个性化网站，这些字段显然是不够的，比如我们想增加国家/地区、微信号、QQ号码、电话、传真、地址等等，就用到了自定义增加评论框字段。

建议阅读

1、WordPress函数：comment_form( )个性化评论表单多种方法
2、WordPress函数：comment_form() 让你的 WordPress 评论表单随心所愿

在主题的functions.php文件中添加如下代码 

add_filter('comment_form_default_fields','comment_form_add_ewai');
function comment_form_add_ewai($fields){
	<!-- 第一步：先定义需要增加的字段 -->
	$label1 = __( 'Country/Regions' );
	$label2 = __( 'Skype ID' );
	$label3 = __( 'Telephone' );
	$label4 = __( 'Fax' );
	$label5 = __( 'Address' );
	$value1 = isset($_POST['country']) ? $_POST['country'] : false;
	$value2 = isset($_POST['skype']) ? $_POST['skype'] : false;
	$value3 = isset($_POST['tel']) ? $_POST['tel'] : false;
	$value4 = isset($_POST['fax']) ? $_POST['fax'] : false;
	$value5 = isset($_POST['address']) ? $_POST['address'] : false;
 
	<!-- 第二步：HTML输出 -->
	$fields['country'] =< <<HTML
	<p>
	<label for="country">{$label1}</label>
	<input id="country" name="country" type="text" value="{$value1}" size="30" />
 
	HTML;
 
	$fields['skype'] =< <<HTML
	<p>
	<label for="skype">{$label2}</label>
	<input id="skype" name="skype" type="text" value="{$value2}" size="30" />
 
	HTML;
 
	$fields['tel'] =< <<HTML
	<p>
	<label for="tel">{$label3}</label>
	<input id="tel" name="tel" type="text" value="{$value3}" size="30" />
 
	HTML;
 
	$fields['fax'] =< <<HTML
	<p>
	<label for="fax">{$label4}</label>
	<input id="fax" name="fax" type="text" value="{$value4}" size="30" />
 
	HTML;
 
	$fields['address'] =< <<HTML
	<p>
	<label for="address">{$label5}</label>
	<input id="address" name="address" type="text" value="{$value5}" size="30" />
 
	HTML;
 
	return $fields;
}
 
<!-- 第三步：操作数据库 -->
add_action('wp_insert_comment','wp_insert_ewai',10,2);
function wp_insert_ewai($comment_ID,$commmentdata){
	$country = isset($_POST['country']) ? $_POST['country'] : false;
	update_comment_meta($comment_ID,'country',$country);
 
	$skype = isset($_POST['skype']) ? $_POST['skype'] : false;
	update_comment_meta($comment_ID,'skype',$skype);
 
	$tel = isset($_POST['tel']) ? $_POST['tel'] : false;
	update_comment_meta($comment_ID,'tel',$tel);
 
	$fax = isset($_POST['fax']) ? $_POST['fax'] : false;
	update_comment_meta($comment_ID,'fax',$fax);
 
	$address = isset($_POST['address']) ? $_POST['address'] : false;
	update_comment_meta($comment_ID,'address',$address);
}
 
<!-- 第四步：操作WordPress后台评论管理显示结构 -->
add_filter( 'manage_edit-comments_columns', 'my_comments_columns' );
add_action( 'manage_comments_custom_column', 'output_my_comments_columns', 10, 2 );
function my_comments_columns( $columns ){
	$columns[ 'country' ] = __( 'Country/Regions' );
	$columns[ 'skype' ] = __( 'Skype ID' );
	$columns[ 'tel' ] = __( 'Telephone' );
	$columns[ 'fax' ] = __( 'Fax' );
	$columns[ 'address' ] = __( 'Address' );
	return $columns;
}
 
<!-- 第五步：显示前台输出评论的结构 -->
function output_my_comments_columns( $column_name, $comment_id ){
	switch( $column_name ) {
		case "country" :
			echo get_comment_meta( $comment_id, 'country', true );
			break;
		case "skype" :
			echo get_comment_meta( $comment_id, 'skype', true );
			break;
		case "tel" :
			echo get_comment_meta( $comment_id, 'tel', true );
			break;
		case "fax" :
			echo get_comment_meta( $comment_id, 'fax', true );
			break;
		case "address" :
			echo get_comment_meta( $comment_id, 'address', true );
			break;
	}
}

复制代码时，去除<!-- 第x步：xxxxx -->标签，为了增加代码的阅读性，添加了注释，在复制到functions.php文件中时去除！

在comments.php文件中的获取评论框下面添加下面这段代码： 

<script>
jQuery(function() {
	jQuery('.comment-notes').text('');
	jQuery('.comment-reply-title').text('Leave a message');
	jQuery('.comment-form-comment label').text('Message content');});
	jQuery('.comment-respond input').css({'width':'500px', 'height':'22px','lineHeight':'22px','border':'solid 1px #ccc','background':'#fff','display':'block'});
	jQuery('.comment-respond textarea').css({'height':'200px','lineHeight':'22px','border':'solid 1px #ccc','background':'#fff'});
	jQuery('#submit').eq(0).val('Submit').css({'width':'100px','height':'30px'});
	jQuery('.form-allowed-tags').text('');
	jQuery('.comment-respond p').css({'textIndent':'0px'});
 
window.onload=function() {
	document.getElementsByClassName('comment-notes').innerHTML = '';
}
</script>

这样从外观上增加评论样式的个性化。

发布日期： 作者： 511遇见

所属分类： Wordpress 综合 标签： 　　

没有相关文章!

相关文章: