Di chuyển comment text field xuống dưới WordPress 4.4

Giới thiệu: Tại sao nên di chuyển trường nhập bình luận xuống dưới trong WordPress?

Theo mặc định, WordPress hiển thị trường nhập bình luận (comment text field) ở trên danh sách các bình luận hiện có. Điều này có nghĩa là người dùng phải cuộn xuống cuối trang để đọc các bình luận hiện có trước khi họ có thể nhập và gửi bình luận của riêng mình. Điều này có thể gây khó chịu và làm giảm trải nghiệm người dùng, đặc biệt là trên các bài viết dài với nhiều bình luận.

Di chuyển trường nhập bình luận xuống dưới danh sách các bình luận hiện có có thể cải thiện đáng kể trải nghiệm người dùng. Nó cho phép người dùng đọc các bình luận hiện có một cách dễ dàng trước khi quyết định viết và gửi bình luận của riêng họ. Điều này có thể dẫn đến:

Tăng tương tác: Người dùng dễ dàng tham gia vào cuộc trò chuyện hơn.
Cải thiện chất lượng bình luận: Người dùng có thể đọc và hiểu bối cảnh của cuộc thảo luận trước khi bình luận.
Giảm số lượng bình luận spam: Người dùng có nhiều khả năng bình luận một cách có ý nghĩa khi họ đã đọc các bình luận khác.

Bài viết này sẽ hướng dẫn bạn qua các phương pháp khác nhau để di chuyển trường nhập bình luận xuống dưới danh sách các bình luận hiện có trong WordPress, bao gồm cả việc sử dụng plugin và chỉnh sửa thủ công code theme.

Phương pháp 1: Sử dụng Plugin

Đây là phương pháp đơn giản và được khuyến nghị cho người dùng không quen thuộc với việc chỉnh sửa code. Có một số plugin WordPress miễn phí và trả phí có thể giúp bạn di chuyển trường nhập bình luận xuống dưới mà không cần bất kỳ kiến thức về code.

Ví dụ: Plugin “Comment Form Below”

Một plugin phổ biến và dễ sử dụng là “Comment Form Below”. Plugin này cho phép bạn di chuyển trường nhập bình luận xuống dưới danh sách bình luận chỉ bằng một cú nhấp chuột.

Cài đặt và kích hoạt plugin: Tìm kiếm “Comment Form Below” trong kho plugin WordPress và cài đặt. Sau khi cài đặt, kích hoạt plugin.
Kiểm tra kết quả: Truy cập vào một bài viết có bình luận trên trang web của bạn. Trường nhập bình luận giờ đây sẽ được hiển thị bên dưới danh sách các bình luận hiện có.

Một số plugin khác bạn có thể xem xét bao gồm:

Move Comments to Bottom
Yoast Comment Hacks (trong đó có tính năng này)

Ưu điểm của việc sử dụng plugin:

Dễ dàng cài đặt và sử dụng
Không yêu cầu kiến thức về code
Có nhiều lựa chọn plugin miễn phí và trả phí

Nhược điểm của việc sử dụng plugin:

Có thể làm chậm trang web của bạn (mặc dù plugin đơn giản như “Comment Form Below” thường không gây ra vấn đề này)
Có thể không tương thích với tất cả các theme

Phương pháp 2: Chỉnh sửa Code Theme (Phương pháp nâng cao)

Phương pháp này yêu cầu bạn chỉnh sửa trực tiếp code theme WordPress của mình. Do đó, bạn nên sao lưu theme của mình trước khi thực hiện bất kỳ thay đổi nào. Bạn cũng nên sử dụng một theme con (child theme) để tránh mất các thay đổi của bạn khi theme chính được cập nhật.

Các bước thực hiện

Tạo Child Theme (nếu chưa có): Tạo một thư mục mới trong /wp-content/themes/ và đặt tên cho nó, ví dụ: your-theme-child. Tạo hai file trong thư mục này: style.css và functions.php.
Chỉnh sửa style.css của Child Theme: Thêm đoạn code sau vào style.css:
```
/*
      Theme Name:   Your Theme Child
      Template:     your-theme
      */

      @import url("../your-theme/style.css");
```
Thay thế your-theme bằng tên thư mục của theme chính của bạn.
Kích hoạt Child Theme: Truy cập vào Appearance > Themes trong WordPress và kích hoạt child theme của bạn.
Chỉnh sửa file comments.php của Child Theme: Sao chép file comments.php từ theme chính sang child theme của bạn.
Tìm đoạn code hiển thị trường nhập bình luận: Mở file comments.php trong child theme và tìm đoạn code hiển thị trường nhập bình luận. Đoạn code này thường chứa hàm comment_form().
Di chuyển đoạn code: Di chuyển đoạn code chứa hàm comment_form() xuống dưới đoạn code hiển thị danh sách các bình luận hiện có. Đoạn code hiển thị danh sách bình luận thường sử dụng hàm wp_list_comments().
Lưu file: Lưu file comments.php đã chỉnh sửa.
Kiểm tra kết quả: Truy cập vào một bài viết có bình luận trên trang web của bạn. Trường nhập bình luận giờ đây sẽ được hiển thị bên dưới danh sách các bình luận hiện có.

Ví dụ Code trong `comments.php`

Trước khi chỉnh sửa:

<div id="respond" class="comment-respond">
  <?php comment_form(); ?>
</div><!-- #respond -->

<?php if ( have_comments() ) : ?>
  <h2 class="comments-title">
    <?php
      printf( _nx( 'One thought on “%2$s”', '%1$s thoughts on “%2$s”', get_comments_number(), 'comments title', 'your-theme' ),
        number_format_i18n( get_comments_number() ), '' . get_the_title() . '' );
    ?>
  </h2>

  <ol class="comment-list">
    <?php
      wp_list_comments( array(
        'style'       => 'ol',
        'short_ping'  => true,
      ) );
    ?>
  </ol><!-- .comment-list -->
<?php endif; // have_comments() ?>

Sau khi chỉnh sửa (đã di chuyển comment_form() xuống dưới):

<?php if ( have_comments() ) : ?>
  <h2 class="comments-title">
    <?php
      printf( _nx( 'One thought on “%2$s”', '%1$s thoughts on “%2$s”', get_comments_number(), 'comments title', 'your-theme' ),
        number_format_i18n( get_comments_number() ), '' . get_the_title() . '' );
    ?>
  </h2>

  <ol class="comment-list">
    <?php
      wp_list_comments( array(
        'style'       => 'ol',
        'short_ping'  => true,
      ) );
    ?>
  </ol><!-- .comment-list -->
<?php endif; // have_comments() ?>

<div id="respond" class="comment-respond">
  <?php comment_form(); ?>
</div><!-- #respond -->

Ưu điểm của việc chỉnh sửa code theme:

Không cần cài đặt plugin
Cho phép bạn kiểm soát hoàn toàn vị trí của trường nhập bình luận
Có thể cải thiện hiệu suất trang web (so với việc sử dụng một số plugin)

Nhược điểm của việc chỉnh sửa code theme:

Yêu cầu kiến thức về code PHP và HTML
Có thể gây ra lỗi nếu bạn không cẩn thận
Các thay đổi có thể bị mất khi theme chính được cập nhật (nếu bạn không sử dụng child theme)

Phương pháp 3: Sử dụng Hook và Filter (Phương pháp nâng cao)

Một cách khác để di chuyển trường nhập bình luận xuống dưới mà không cần chỉnh sửa trực tiếp file comments.php là sử dụng WordPress hooks và filters. Phương pháp này cho phép bạn can thiệp vào quá trình hiển thị bình luận mà không cần sửa đổi code theme gốc.

Chỉnh sửa file functions.php của Child Theme: Mở file functions.php trong child theme của bạn.

Thêm đoạn code sau: Thêm đoạn code sau vào file functions.php:

function move_comment_field_to_bottom( $fields ) {
  $comment_field = $fields['comment'];
  unset( $fields['comment'] );
  $fields['comment'] = $comment_field;
  return $fields;
}
add_filter( 'comment_form_fields', 'move_comment_field_to_bottom' );

Lưu file: Lưu file functions.php đã chỉnh sửa.
Kiểm tra kết quả: Truy cập vào một bài viết có bình luận trên trang web của bạn. Trường nhập bình luận giờ đây sẽ được hiển thị bên dưới danh sách các bình luận hiện có.

Đoạn code này sử dụng filter comment_form_fields để can thiệp vào các trường được hiển thị trong form bình luận. Nó lấy trường bình luận (comment), loại bỏ nó khỏi mảng các trường và sau đó thêm nó lại vào cuối mảng. Điều này khiến trường bình luận được hiển thị ở cuối form.

Ưu điểm của việc sử dụng hook và filter:

Không cần chỉnh sửa trực tiếp file comments.php
Các thay đổi sẽ không bị mất khi theme chính được cập nhật (vì bạn đang sử dụng child theme)
Cung cấp một cách linh hoạt và mạnh mẽ để tùy chỉnh form bình luận

Nhược điểm của việc sử dụng hook và filter:

Yêu cầu kiến thức về code PHP và WordPress hooks/filters
Có thể phức tạp hơn so với việc sử dụng plugin đơn giản

Kết luận

Việc di chuyển trường nhập bình luận xuống dưới danh sách các bình luận hiện có là một cách đơn giản nhưng hiệu quả để cải thiện trải nghiệm người dùng trên trang web WordPress của bạn. Bạn có thể sử dụng một plugin, chỉnh sửa code theme hoặc sử dụng hook và filter để thực hiện việc này. Lựa chọn phương pháp phù hợp nhất phụ thuộc vào mức độ quen thuộc của bạn với code và mức độ kiểm soát bạn muốn có đối với quá trình hiển thị bình luận. Dù bạn chọn phương pháp nào, hãy nhớ sao lưu trang web của bạn trước khi thực hiện bất kỳ thay đổi nào.

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa