Tùy chỉnh comments trong WordPress

Chào các bạn! Bài viết hôm nay sẽ liên quan đến khu vực comments trên blog WordPress. Đây là một khu vực khá quan trọng. Dựa vào số lượt comments ta có thể đánh giá được blog đó có uy tín hay không. Vì vậy tất cả các bloger đều tìm cách tăng số lượng bình luận trên blog của mình. Một số themes trao chuốt cho khu vực này rất đẹp mắt nhưng một số themes thì không ổn lắm, chẳng hạn như trên blog của mình. Vì vậy mình đã tìm cách chỉnh sửa nó lại một chút xíu cho dễ nhìn hơn. Và dưới đây là tất cả những gì mình đã làm.

Thay đổi title comment

Nghĩa là thay đổi dòng chữ phía trên cùng của danh sách comment. Ta chèn code sau vào file functions.php:

add_filter( 'genesis_title_comments', 'rayno_title_comments' );
function rayno_title_comments() {
	echo 'Có '.get_comments_number().'bình luận cho bài viết'.get_the_title().'';
}

Chú ý cách này chỉ áp dụng đối với các blog sử dụng Genesis Child theme. Đối với các theme khác bạn có thể thay đổi trong file comments.php. Chẳng hạn đối với theme twenty twelve của WordPress, bạn sẽ tìm đoạn code:

<?php
	printf( _n( 'One thought on “%2$s”', '%1$s thoughts on “%2$s”', get_comments_number(), 'twentytwelve' ),number_format_i18n( get_comments_number() ), '<span>' . get_the_title() . '</span>' );
?>

Sửa lại thành:

<?php
	echo 'Có '.get_comments_number().'bình luận cho bài viết'.get_the_title().'';
?>

Thay đổi Leave a Reply hay Speak your mind

Đây là dòng chữ các bạn thường thấy ở phía trên của form comment. Để đổi dòng chữ này, ta sẽ sử dụng code sau:

function raynoblog_comment_text($args) {
    $args['title_reply']='Gửi bình luận';
    return $args;
}
add_filter( 'comment_form_defaults', 'raynoblog_comment_text' );

Cách này có thể áp dụng cho cả Genesis childthemes và các theme thông thường.

Đổi chữ trong Submit button

Bạn có thể thay đổi chữ bên trong nút submit comment bằng cách dùng code:

add_filter( 'comment_form_defaults', 'raynoblog_change_submit_comment' );
function raynoblog_change_submit_comment( $defaults ) {
    $defaults['label_submit'] = 'Gửi bình luận';
    return $defaults;
}

Cách này có thể áp dụng cho cả Genesis childthemes và các theme thông thường.

Thiết kế lại form comment cho WordPress

Nếu bạn chưa vừa ý với thiết kế của form comment trên blog của mình, các bạn có thể tự thiết kế lại nó. Ở đây mình cung cấp cho các bạn một mẫu form mình đang sử dụng.

/*--------custom comments form------------------*/
add_filter( 'comment_form_defaults', 'rayno_comment_form_args' );
function rayno_comment_form_args($defaults) {
	global $user_identity, $id;
	$commenter = wp_get_current_commenter();
	$req       = get_option( 'require_name_email' );
	$aria_req  = ( $req ? ' aria-required="true"' : '' );
	$author = '<p class="comment-form-author">' .
	          '<input id="author" name="author" type="text" class="author" placeholder="Nhập tên của bạn" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30" tabindex="1"' . $aria_req . '/>' .
	          '</p><!-- #form-section-author .form-section -->';
	$email = '<p class="comment-form-email">' .
	         '<input id="email" name="email" type="text" class="email" placeholder="Nhập email của bạn" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30" tabindex="2"' . $aria_req . ' />' .
	         '</p><!-- #form-section-email .form-section -->';
	$url = '<p class="comment-form-url">' .
	       '<input id="url" name="url" type="text" class="url" placeholder="Nhập địa chỉ website của bạn" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" tabindex="3" />' .
	       '</p><!-- #form-section-url .form-section -->';

	$comment_field = '<p class="comment-form-comment">' .
	                 '<textarea id="comment" name="comment" cols="45" rows="8" class="form" tabindex="4" aria-required="true"></textarea>' .
	                 '</p><!-- #form-section-comment .form-section -->';
	$args = array(
		'fields' => array(
		'author' => $author,
		'email'  => $email,
		'url'    => $url,
		),
		'comment_field'        => $comment_field,
		'title_reply'          => __( 'Gửi bình luận', 'genesis' ),
		'comment_notes_before' => '',
		'comment_notes_after'  => '',
	);
	$args = wp_parse_args( $args, $defaults );
	return apply_filters( 'raynoblog_comment_form_args', $args, $user_identity, $id, $commenter, $req, $aria_req );
}

Bổ sung một số lớp css để cho form comment đẹp hơn.

/*custom comments form
------------------------------------------------------------ */
.author{
	background: url(http://nx5.upanh.com/b5.s29.d3/ab36e72a619b1d210ef5de5a68d30f15_56167325.name.png) no-repeat;
	padding-left:35px !important; 
	font-size: 15px !important;
	margin: 10px 0 10px;
	-moz-border-radius: 3px; 
	-webkit-border-radius: 3px; 
	border-radius: 3px;
}
.email{
	background: url(http://nx1.upanh.com/b1.s36.d1/d26bff75d0ead63137051a8c02e1a5e9_56167321.mail.png) no-repeat;
	padding-left:35px !important; 
	font-size: 15px !important;
	margin: 10px 0 10px;
	-moz-border-radius: 3px; 
	-webkit-border-radius: 3px; 
	border-radius: 3px;
}
.url{
	background: url(http://nx6.upanh.com/b4.s38.d3/74e69381eae4e5112c5e026882375842_56167326.website.png) no-repeat;
	padding-left:35px !important; 
	font-size: 15px !important;
	margin: 10px 0 10px;
	-moz-border-radius: 3px; 
	-webkit-border-radius: 3px; 
	border-radius: 3px;
}
.form{
	background: #fff;
	margin: 10px 0 10px;
	-moz-border-radius: 3px; 
	-webkit-border-radius: 3px; 
	border-radius: 3px;
}

Để thiết kế cho nút submit ta sẽ thêm vào các lớp sau (nếu đã có rồi thì tìm và chỉnh sửa lại):

#submit {
	background: #009966 !important;
	border: 1px solid #009933;
	color: #fff;
	cursor: pointer;
	font-family: 'Oswald', arial, serif !important;
	font-size: 12px !important;
	font-weight: bold !important;
	padding: 5px 7px;
	text-decoration: none;
	text-transform: uppercase;
	-moz-border-radius: 2px; 
	-webkit-border-radius: 2px; 
	border-radius: 2px;
}
#submit:hover {
	background: #009933 !important;
	border: 1px solid #009966;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
}

Thay đổi kích thước avatar trong comment

Chú ý cách này chỉ áp dụng cho Genesis childthemes. Ta sử dụng code sau chèn vào file functions.php:

add_filter( 'genesis_comment_list_args', 'rayno_comment_avatar_args' );
function rayno_comment_avatar_args( $args ) {
    $args['avatar_size'] = 60;
	return $args;
}

Bổ sung vào file style.css (nếu đã có rồi thì tìm và sửa lại):

.comment-list li .avatar { 
	height: 60px;
	width: 60px;
}

Đối với các themes khác, ta có thể tìm trong file comment.php hoặc trong file functions.php. Ví dụ đối với theme twenty twelve của WordPress, ta sẽ tìm trong file functions.php đoạn code:

echo get_avatar( $comment, 44 );

Số 44 là kích thước của avatar, bạn có thể thay đổi nó. Với các themes khác bạn có thể làm tương tự.

Trên đây là một số chỉnh sửa cho khu vực comment mà mình đã làm. Hy vọng sẽ giúp ích được cho các bạn. Chúc các bạn thành công! {c1}

Tùy chỉnh comments trong WordPress
5 (100%) 1 vote

Chú ý - WordPress Hosting 1$/tháng - miễn phí tên miền

Bạn có biết GoDaddy đang có khuyến mãi WordPress hosting chỉ còn 1$/tháng kèm theo một tên miền .COM .NET .ORG miễn phí. Hãy đăng ký ngay để tiết kiệm chi phí nhất nhé.
Xem ngay

ĐĂNG KÝ NHẬN TIN QUA EMAIL

Nếu thấy bài viết trên blog có ích cho bạn, hãy đăng ký nhận tin qua email để cập nhật bài viết mới nhanh nhất và thỉnh thoảng nhận quà bất ngờ!

Comments

  1. Hữu Viên says:

    Chào bạn, bạn có thể giúp mình được không, mình đang ti toe lập blog hôm qua chỉnh code trong điều chỉnh HTMl ở blogspot giao diện mới, hí hoáy thế nào mà lại xóa mất mấy dòng code nên giờ khi vào blog không còn thấy khung comment đâu nữa, mà mình lại quên không sao lưu 1 bản để đề phòng, giờ không biết sử lý thế nào. Cảm ơn bạn trước.

    • Bạn kiểm tra xem trong code của bạn còn đoạn này ko nhé:

      <b:includable id='comment-form' var='post'>
        <div class='comment-form'>
          <a name='comment-form'/ rel="nofollow">
          <b:if cond='data:mobile'>
            <h4 id='comment-post-message'>
              <a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' href='javascript:void(0)' rel="nofollow"><data:postCommentMsg/></a></h4>
            <p><data:blogCommentMessage/></p>
            <data:blogTeamBlogMessage/>
            <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/ rel="nofollow">
            <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
          <b:else/>
            <h4 id='comment-post-message'><data:postCommentMsg/></h4>
            <p><data:blogCommentMessage/></p>
            <data:blogTeamBlogMessage/>
            <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/ rel="nofollow">
            <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
          </b:if>
          <data:post.friendConnectJs/>
          <data:post.cmtfpIframe/>
          <script type='text/javascript'>
            BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
          </script>
        </div>
      </b:includable>
      
  2. Bạn cho hỏi là làm cái avatar hình tròn như thế nào đẹp vậy, giống của Thesis ghê

    • Bạn tìm lớp .comment-list li .avatar trong file style.css và thêm máy dòng này vào nhé:

      -moz-border-radius: 50%; 
      -webkit-border-radius: 50%; 
      border-radius: 50%;
  3. nhờ bạn mà mình đã làm đc tuy ko đẹp như của bạn nhưng với mình là cũng tạm
    cảm ơn bạn nhiều nha

  4. bạn giúp mình đổi chữ Reply bình luận lại bài của 1 ng khác thành tiếng việt đi bạn
    mình ko biết làm ntn

  5. cảm ơn bạn mình làm đc rồi

  6. Gà Con says:

    Mong anh giúp em phần khung post coment.. em muốn khung post coment hiện theo trang muốn hiện chứ không phải trang nào cũng hiện khung post comnet. hiện tại em đang làm và khung post comnet của em hiện lên ngay cả Trang Chủ cũng hiện khung đó. mong anh giúp đỡ em làm sao cho khung post comnet chỉ hiện theo trang mình muốn hiện. Xin chân thành cảm ơn.

    • Cái này không cần phải chỉnh code đâu bạn, lúc tạo trang hoặc soạn bài viết, bạn click vào Creen options ở góc trên bên phải, đánh đấu tick vào mục Discussion, sau đó kéo xuống dưới sẽ có thêm mục discussion cho phép bạn tắt comment

  7. Bạn cho hỏi làm sao để bỏ cái Copy Paste cái mật khẩu trong comment vậy mình mới làm wordpress hồi trước thì làm Blogger http://share.vn.ee bây giờ thì làm wordpress http://zshare.p.ht bạn giúp mình được không Thanks {c1}

  8. Cái này thì để mình giúp cho {c2} . Mới mò ra vào tuần trước nè {c20} : Bạn vào phần Plugin và xóa plugin ” Spam Free WordPress ” có sẵn lúc cài wordpress là xong thôi ! {c21}

    • Thanks Bạn nhé mình bỏ cái pass đó đi được rồi có gì không biết mình lại nhờ các bạn trong http://raynoblog.com giúp đỡ vậy mình cũng không giỏi lập trình lắm vẫn đang tìm hiểu có gì mong các bạn giúp đỡ {c1}

  9. Thanks Bạn nha mình bỏ được cái pass đi rồi {c1}

  10. cảm ơn bạn nhiều! :d

  11. Bạn ơi cho mình hỏi, mình muốn làm mất khung tô thẫm trong form bình luận, và biến nó thành đường kẻ như ở website này thì phải làm như thế nào vậy?
    Website của mình là: http://vnthongtin.cu.cc
    Mình cảm ơn bạn trước nhé!

  12. Cảm ơn bạn Rayno
    Mình không biết chỉnh background cho các lớp comment như thế nào, bạn có thể hướng dẫn chi tiết cho mình cách chỉnh được ko?
    Mình hỏi thêm: Tại trang đăng nhập wordpress, mình muốn xóa 2 dòng: Bạn quên mật khẩu & Quay lại Thông Tin Nhanh thì mình phải làm thế nào?
    Mình cảm ơn bạn nhiều nhé!

  13. làm sao khong chuyen trang khi submit form

  14. xin hỏi mình bị mất khung comment của worpress , bây h mún thêm lại thì chỉnh sửa thế nào ?

    • Bạn đang sử dụng theme gì mà sao lại mất khung comment? Có thể bạn đã tắt chức năng comment rồi, bạn vào setting -> Discussion xem có đánh dấu tick vào mục “Allow people to post comments on new articles” chưa

  15. pv chư says:

    Chỉ giúp mình đổi cái chữ NEXT PAGE thành tiếng việt (TRANG SAU)

  16. Chào anh bảo,anh giúp em bỏ phần ( Bạn có thể sử dụng các thẻ HTML và các thuộc tính: …..) em xài theme twenty fourteen,cảm ơn anh

    • Cách đơn giản nhất là bạn thêm đoạn này vào file style.css:

      .form-allowed-tags {
      	display: none;
      }

      Hoặc bạn có thể sử dụng đoạn code này chèn vào file functions.php:

      function mytheme_init() {
      	add_filter('comment_form_defaults','mytheme_comments_form_defaults');
      }
      add_action('after_setup_theme','mytheme_init');
      
      function mytheme_comments_form_defaults($default) {
      	unset($default['comment_notes_after']);
      	return $default;
      }
      
  17. Bài viết của bạn rất hay, mình đã làm theo và rất ok, chỉ có 1 cái là khi mình thay chữ “Speak Your Mind” bằng “Gửi bình luận” theo cách trên của bạn thì đổi được nhưng form bình luận lại mất mấy dòng “Name, Mail, Website” phía trên khung bình luận. Mình xài genesis child theme. Bạn giúp mình được không? Cám ơn nhiều.

  18. Bạn xem giúp mình ở trang này: http://hungthinh.co/dulichdalat (trang chủ mình bỏ không dùng comments mà dùng form liên hệ của Jetpack). Cám ơn bạn.

  19. Chào mọi người. Nhờ mọi người giúpmình làm sao bỏ được cái comment này mình khoanh tròn nó như trong ảnh này nè. Cảm ơn mọi người.

  20. kho game android says:

    Hi bạn, bạn có file comment.php nào cho wap không bạn?
    mình làm wap mà tạo comment như ý khó quá

  21. Sooner or later, Google will find all new spam methods.
    It has the highest ROI (Return of Invesment) in all advertisement channels.

    The only tab of your concern is Public Templates, and no actions
    are necessary as it is already on the screen.

  22. Làm sao để 3 cái khung Tên,Email,Web nó ngang hàng với nhau như Raynoblog bạn nhỉ??

    • Chỗ các input của author, email, url bạn cho size nhỏ lại, có thể thêm thuộc tính width vào các lớp css tương ứng đễ giảm kích thước lại

      • Mình đã giảm lại thành value=”” size=”20″ .Thậm chí giảm luôn giống 10 nhưng nó vẫn không nằm ngang hàng.

        • Bạn cho mình hỏi thêm có cái Nút xem thông tin tác giả này.Nó là Plugin gì thế?Bạn có thể cho mình xin thông tin không??

        • Bạn thử sửa code form lại thành:

          $author = '' .
                        '<input id="author" name="author" type="text" class="author" placeholder="Tên của bạn" value="' . esc_attr( $commenter['comment_author'] ) . '" size="20" tabindex="1"' . $aria_req . '/>' .
                        '<!-- #form-section-author .form-section -->';
              $email = '' .
                       '<input id="email" name="email" type="text" class="email" placeholder="Email của bạn" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="20" tabindex="2"' . $aria_req . ' />' .
                       '<!-- #form-section-email .form-section -->';
              $url = '' .
                     '<input id="web" name="url" type="text" class="web" placeholder="Website của bạn" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="20" tabindex="3" />' .
                     '<!-- #form-section-url .form-section -->';

          Thêm css:

          .author{
          	width: 140px !important;
          }
          .email{
          	width: 140px !important;
          }
          .web{
          	width: 140px !important;
          }

          Còn plugin bạn hỏi là plugin CommentLuv.

  23. Bài viết rất chi tiết, bookmark lại mai thử làm theo xem thế nào 😀

  24. >Chào bạn. Mình chỉ mới tập làm wordpress nên không chỉ được phần comment thành các tên tiếng việt được vậy bạn cho mình hỏi nếu muốn chỉnh thành tiếng việt thì mình vào phần nào chỉnh vậy bạn.

  25. Mình tìm cái này ở trong code hay sao admin, trong admin wp có tùy biến dc ko

  26. tuyền phạm says:

    Cho mình hỏi cách chèn khung Choose file trong khung commen làm như thế nào vậy bạn, thank nhiều ?

  27. {c2} {c2} {c3} {c10}

  28. Bài viết của bạn đầy đủ và chi tiết mọi tuỳ chỉnh trong phần comment rồi. Cám ơn bạn!
    Mình đã khoá phần comment của website lại do nhìn nó xấu quá, giờ sẽ thử vọc lại xem sao.
    Chúc bạn luôn thành công.

  29. Very quickly this web page will be famous among all blog visitors,
    due to it’s good posts

  30. Cám ơn bạn nhiều, nhưng mà mình làm xong rồi sao nó không giống mục comment của bạn nhỉ?

  31. Cái khung này có sử dụng được cho Theme Genesis không vậy Admin.
    Mình làm theo thì nó không ra.
    Mình Copy mục tạo khung bình luận thì không sao, nhưng copy phần chỉnh sửa thì nó bị lỗi trắng trang.

  32. b oi khi mình comt bằng tiếng việt trên wordpress thì ko có gì nhưng khi comt bằng tiếng trung thì nó ko cho comt báo lỗi là sao v bạn ???

  33. tra loi mình sớm nha

  34. Bài viết rất hay và chi tiết. Cảm ơn bạn

  35. toan_code says:

    Bài viết của bạn rất bổ ích.Cảm ơn admin.

  36. Làm sao để khu vực bình luận của mình được đẹp hơn bạn nhỉ?

  37. Vân Anh says:

    BẠn ơi cho mình hỏi cách việt hóa các mục sau:
    admin says:
    December 21, 2015 at 3:47 am
    Cancel reply
    Logged in as admin. Log out?
    với ak???
    MÌnh cảm ơn bạn trước

  38. Mình đang tìm cái này..hj..thanks bạn nhìu ngen ^^

  39. Mình dùng rhcloud, không có FTP để chỉnh các file, chỉ sửa được các file trong Editor, có cách nào tùy chỉnh được ô comment không bạn ơi

  40. chào bạn. cho mình hỏi, mình muốn vào cac file để chỉnh sửa css thì phải vào đâu bạn? trên trang quản trị mình ko thấy. mình là người mới mong bạn giúp đỡ.

  41. File đó nằm đâu trên trang quản trị vậy bạn?

  42. Cảm ơn bạn bài viết này. Có cách nào để cho user có thể post bài lên website như comment ko bạn? mà phải kiểm duyệt trước khi đăng

  43. Bạn cho mình xin form comment như ở http://thachpham.com được ko? Hoặc như form bạn đang xài cũng được

  44. bài viết rất hữu ích

  45. Dương Nguyễn says:

    Chào anh! Em rất muốn thay đổi dòng chữ ‘Leave a comment’ nhưng em không biết file function.php ở đâu. Anh có thể hướng dẫn chi tiết giúp em không ạ? Em đã tìm nhiều nguồn rồi nhưng họ không nói rõ lắm, và wordpress em đang dùng là phiên bản mới nhất, nên Mục Appearance không còn mục Editor nữa. Rất mong nhận được câu trả lời của anh!

  46. Chào Ad!
    Làm ơn chỉ giúp mình cách đưa form comment lên trước dòng bình luận của khách đang hiển thị.
    Vì khi khách muốn comment lại phải kéo xuống tận dưới mới có form, điều nay hơi bất tiện.
    Xin được chỉ giáo.
    Tks!

  47. Chào ad, cho mình hỏi là mình có tạo 1 blog wordpress nhưng nó lại không hiện ra ô bình luận. Mình đã thử nhiều cách nhưng không có kết quả, mong bạn giải đáp thắc mắc và giúp mình. Cảm ơn.

Gửi bình luận

Lưu ý: Không sử dụng keyword để thay cho tên của bạn, hãy sử dụng tên thật. Cảm ơn bạn đã tham gia bình luận trên blog!