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

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

建议阅读

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

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

  1. add_filter('comment_form_default_fields','comment_form_add_ewai');
  2. function comment_form_add_ewai($fields){
  3. 	<!-- 第一步:先定义需要增加的字段 -->
  4. 	$label1 = __( 'Country/Regions' );
  5. 	$label2 = __( 'Skype ID' );
  6. 	$label3 = __( 'Telephone' );
  7. 	$label4 = __( 'Fax' );
  8. 	$label5 = __( 'Address' );
  9. 	$value1 = isset($_POST['country']) ? $_POST['country'] : false;
  10. 	$value2 = isset($_POST['skype']) ? $_POST['skype'] : false;
  11. 	$value3 = isset($_POST['tel']) ? $_POST['tel'] : false;
  12. 	$value4 = isset($_POST['fax']) ? $_POST['fax'] : false;
  13. 	$value5 = isset($_POST['address']) ? $_POST['address'] : false;
  14.  
  15. 	<!-- 第二步:HTML输出 -->
  16. 	$fields['country'] =< <<HTML
  17. 	<p>
  18. 	<label for="country">{$label1}</label>
  19. 	<input id="country" name="country" type="text" value="{$value1}" size="30" />
  20.  
  21. 	HTML;
  22.  
  23. 	$fields['skype'] =< <<HTML
  24. 	<p>
  25. 	<label for="skype">{$label2}</label>
  26. 	<input id="skype" name="skype" type="text" value="{$value2}" size="30" />
  27.  
  28. 	HTML;
  29.  
  30. 	$fields['tel'] =< <<HTML
  31. 	<p>
  32. 	<label for="tel">{$label3}</label>
  33. 	<input id="tel" name="tel" type="text" value="{$value3}" size="30" />
  34.  
  35. 	HTML;
  36.  
  37. 	$fields['fax'] =< <<HTML
  38. 	<p>
  39. 	<label for="fax">{$label4}</label>
  40. 	<input id="fax" name="fax" type="text" value="{$value4}" size="30" />
  41.  
  42. 	HTML;
  43.  
  44. 	$fields['address'] =< <<HTML
  45. 	<p>
  46. 	<label for="address">{$label5}</label>
  47. 	<input id="address" name="address" type="text" value="{$value5}" size="30" />
  48.  
  49. 	HTML;
  50.  
  51. 	return $fields;
  52. }
  53.  
  54. <!-- 第三步:操作数据库 -->
  55. add_action('wp_insert_comment','wp_insert_ewai',10,2);
  56. function wp_insert_ewai($comment_ID,$commmentdata){
  57. 	$country = isset($_POST['country']) ? $_POST['country'] : false;
  58. 	update_comment_meta($comment_ID,'country',$country);
  59.  
  60. 	$skype = isset($_POST['skype']) ? $_POST['skype'] : false;
  61. 	update_comment_meta($comment_ID,'skype',$skype);
  62.  
  63. 	$tel = isset($_POST['tel']) ? $_POST['tel'] : false;
  64. 	update_comment_meta($comment_ID,'tel',$tel);
  65.  
  66. 	$fax = isset($_POST['fax']) ? $_POST['fax'] : false;
  67. 	update_comment_meta($comment_ID,'fax',$fax);
  68.  
  69. 	$address = isset($_POST['address']) ? $_POST['address'] : false;
  70. 	update_comment_meta($comment_ID,'address',$address);
  71. }
  72.  
  73. <!-- 第四步:操作WordPress后台评论管理显示结构 -->
  74. add_filter( 'manage_edit-comments_columns', 'my_comments_columns' );
  75. add_action( 'manage_comments_custom_column', 'output_my_comments_columns', 10, 2 );
  76. function my_comments_columns( $columns ){
  77. 	$columns[ 'country' ] = __( 'Country/Regions' );
  78. 	$columns[ 'skype' ] = __( 'Skype ID' );
  79. 	$columns[ 'tel' ] = __( 'Telephone' );
  80. 	$columns[ 'fax' ] = __( 'Fax' );
  81. 	$columns[ 'address' ] = __( 'Address' );
  82. 	return $columns;
  83. }
  84.  
  85. <!-- 第五步:显示前台输出评论的结构 -->
  86. function output_my_comments_columns( $column_name, $comment_id ){
  87. 	switch( $column_name ) {
  88. 		case "country" :
  89. 			echo get_comment_meta( $comment_id, 'country', true );
  90. 			break;
  91. 		case "skype" :
  92. 			echo get_comment_meta( $comment_id, 'skype', true );
  93. 			break;
  94. 		case "tel" :
  95. 			echo get_comment_meta( $comment_id, 'tel', true );
  96. 			break;
  97. 		case "fax" :
  98. 			echo get_comment_meta( $comment_id, 'fax', true );
  99. 			break;
  100. 		case "address" :
  101. 			echo get_comment_meta( $comment_id, 'address', true );
  102. 			break;
  103. 	}
  104. }

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

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

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

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


发布日期:

所属分类: Wordpress 综合 标签: