Hướng dẫn kiểm tra và sửa lỗi khi comment không hoạt động trong WordPress

Bình luận (comment) là một trong những tính năng cốt lõi của WordPress, giúp người dùng tương tác với nội dung của bạn. Tuy nhiên, có nhiều trường hợp comment không hoạt động, từ những lỗi cấu hình đơn giản đến các vấn đề phức tạp liên quan đến mã nguồn, plugin hoặc server. Dưới đây là một bài viết chi tiết về cách kiểm tra và khắc phục các lỗi liên quan đến comment trong WordPress.

Các dấu hiệu cho thấy comment không hoạt động#

Người dùng không thấy form bình luận hiển thị trên bài viết.
Khi nhấn vào nút "Submit", không có phản hồi hoặc xuất hiện lỗi.
Comment được gửi đi nhưng không hiển thị trên trang (thậm chí trong quản trị viên).
Các lỗi JavaScript hoặc thông báo lỗi liên quan xuất hiện trong console trình duyệt.
Email thông báo bình luận không được gửi tới quản trị viên hoặc tác giả bài viết.

1. Kiểm Tra Cài Đặt Comment#

Kiểm tra cài đặt trong WordPress

Vào Settings > Discussion:
- Đảm bảo tùy chọn "Allow people to submit comments on new posts" được bật.
- Kiểm tra các tùy chọn hạn chế như "Users must be registered and logged in to comment".
Kiểm tra trong bài viết hoặc trang:
- Khi chỉnh sửa bài viết, ở mục Discussion, đảm bảo "Allow comments" được chọn.
- Nếu không thấy mục này, vào Screen Options ở góc phải trên cùng và bật Discussion.

Kiểm tra cài đặt theme

Một số theme có tùy chọn riêng để bật/tắt comment. Kiểm tra trong Customize hoặc cài đặt theme của bạn.

2. Xung Đột Plugin#

Tắt tất cả plugin

Tạm thời tắt tất cả các plugin qua Plugins > Installed Plugins.
Kiểm tra lại hệ thống comment.
Nếu comment hoạt động, bật từng plugin một để xác định plugin gây lỗi.

Plugin cache

Nếu bạn sử dụng plugin cache như WP Super Cache hoặc W3 Total Cache, xóa cache và thử lại.

3. Kiểm Tra Tập Tin Theme (comments.php)#

Kiểm tra file comments.php của theme

Mở thư mục theme trong wp-content/themes/[theme-name].
Kiểm tra file comments.php:
- Đảm bảo file không bị lỗi hoặc thiếu đoạn mã hiển thị comment.

Ví dụ đoạn mã cơ bản trong comments.php:

<?php
if ( have_comments() ) :
    wp_list_comments();
endif;

comment_form();
?>

Thử với theme mặc định

Chuyển sang theme mặc định như Twenty Twenty-Three để kiểm tra xem lỗi có phải từ theme hiện tại không.

4. Kiểm Tra User Roles#

Vào Users > All Users, đảm bảo tài khoản người dùng có vai trò phù hợp (Subscriber, Author).
Nếu yêu cầu đăng nhập để bình luận, kiểm tra người dùng có quyền hay không.

5. Kiểm Tra Cơ Sở Dữ Liệu#

Kiểm tra bảng comments

Vào phpMyAdmin hoặc công cụ quản lý cơ sở dữ liệu của bạn.
Kiểm tra bảng wp_comments và wp_commentmeta:
- Đảm bảo bảng không bị lỗi.
- Chạy lệnh Repair Table nếu cần.

Kiểm tra quyền của cơ sở dữ liệu

Đảm bảo tài khoản MySQL của bạn có quyền INSERT vào bảng wp_comments.

6. Lỗi REST API hoặc AJAX#

Hệ thống comment sử dụng REST API hoặc AJAX để gửi bình luận. Nếu không hoạt động, kiểm tra như sau:

REST API

Truy cập https://yourwebsite.com/wp-json/.

Nếu REST API bị lỗi, kiểm tra:

File .htaccess:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

Permalinks: Vào Settings > Permalinks, lưu lại mà không thay đổi gì.

AJAX

Kiểm tra file wp-admin/admin-ajax.php có hoạt động không bằng cách truy cập URL:
```
https://yourwebsite.com/wp-admin/admin-ajax.php
```

7. Kiểm Tra Lỗi JavaScript#

Mở Console trong trình duyệt (F12).
Thực hiện bình luận và kiểm tra lỗi JavaScript.
Nếu có lỗi, có thể do xung đột plugin hoặc theme.

8. Kiểm Tra Email (Nếu Không Nhận Được Thông Báo Bình Luận)#

Nếu comment hoạt động nhưng không nhận được email thông báo:

Cài plugin WP Mail SMTP để kiểm tra email gửi đi.
Sử dụng SMTP thay vì chức năng mặc định của WordPress.

9. Kiểm Tra Máy Chủ#

Kiểm tra giới hạn máy chủ:
- PHP Version: Sử dụng phiên bản PHP >= 7.4.
- Max Input Vars: Tăng giá trị này nếu form comment phức tạp.

10. Debug Mode#

Kích hoạt chế độ gỡ lỗi để kiểm tra chi tiết:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );

Sau đó kiểm tra file wp-content/debug.log để tìm lỗi.

Lỗi load file `comment-reply.min.js`#

comment-reply.min.js?ver=6.7:2 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.

Lỗi này liên quan đến việc tệp comment-reply.min.js (một phần của WordPress) đang thêm sự kiện lắng nghe không "passive" cho sự kiện touchstart. Việc này có thể ảnh hưởng đến hiệu suất trên các thiết bị di động vì các sự kiện không "passive" có thể ngăn trình duyệt tối ưu hóa việc cuộn trang. Dưới đây là cách khắc phục:

1. Hiểu Nguyên Nhân#

"Passive event listeners" cho phép trình duyệt biết rằng sự kiện sẽ không chặn hành vi cuộn mặc định, giúp tối ưu hóa hiệu suất.
Mã trong comment-reply.min.js không được thiết kế để hỗ trợ "passive" event listeners, dẫn đến cảnh báo này.

2. Giải Pháp#

Cách 1: Vô hiệu hóa tệp `comment-reply.js` nếu không cần thiết

Nếu bạn không sử dụng tính năng "Trả lời bình luận" (reply comments), bạn có thể vô hiệu hóa tệp này:

function disable_comment_reply_script() {
    if (is_singular() && comments_open() && get_option('thread_comments')) {
        wp_deregister_script('comment-reply');
    }
}
add_action('wp_enqueue_scripts', 'disable_comment_reply_script');

Cách 2: Thay đổi hành vi của sự kiện trong tệp `comment-reply.js`

Do comment-reply.js là tệp cốt lõi của WordPress, bạn không nên chỉnh sửa trực tiếp tệp này. Thay vào đó, bạn có thể ghi đè hành vi bằng cách sử dụng JavaScript. Thêm đoạn mã này vào tệp JavaScript tùy chỉnh hoặc tệp functions.php:

document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('[data-action="reply"]').forEach(function (el) {
        el.addEventListener('touchstart', function (event) {
            // Thêm passive listener
        }, { passive: true });
    });
});

Cách 3: Thay thế toàn bộ sự kiện không "passive"

Bạn có thể thay thế hành vi toàn cầu của sự kiện touchstart trên trang web:

(function() {
    const supportsPassive = (() => {
        let passiveSupported = false;
        try {
            const options = Object.defineProperty({}, 'passive', {
                get: function () {
                    passiveSupported = true;
                }
            });
            window.addEventListener('test', null, options);
        } catch (err) {}
        return passiveSupported;
    })();

    if (supportsPassive) {
        document.addEventListener(
            'touchstart',
            () => {},
            { passive: true }
        );
    }
})();

3. Kiểm Tra Hiệu Suất#

Sau khi áp dụng các giải pháp trên:

Mở DevTools trong trình duyệt và kiểm tra lại cảnh báo.
Đảm bảo tính năng trả lời bình luận vẫn hoạt động bình thường.

4. Cách Tối Ưu Toàn Trang#

Nếu trang của bạn có nhiều sự kiện "scroll-blocking" khác, hãy xem xét cách tối ưu toàn bộ bằng cách:

Sử dụng Lighthouse để phân tích hiệu suất.
Tối ưu các sự kiện cuộn, kéo (scroll, touchmove, mousemove) bằng cách thêm { passive: true }.

Nếu bạn cần hỗ trợ thêm hoặc muốn giải pháp phù hợp hơn với tình huống cụ thể, hãy cho mình biết nhé! 😊

Chèn form comment đa cấp khi click `comment-reply-link`#

Để chèn form comment đa cấp khi người dùng nhấn vào liên kết reply (thường là class comment-reply-link), bạn có thể sử dụng các tính năng có sẵn của WordPress cùng với JavaScript để xử lý giao diện hiển thị.

1. Mặc định của WordPress#

WordPress đã hỗ trợ việc hiển thị form trả lời comment đa cấp thông qua comment-reply.js. Khi người dùng nhấn vào liên kết reply, form trả lời sẽ được tự động di chuyển đến vị trí của comment mục tiêu. Nếu tính năng này chưa hoạt động, đảm bảo:

Tùy chọn Enable threaded (nested) comments đã được bật trong Settings > Discussion.
Tệp comment-reply.js đã được tải trong theme.

Đảm bảo tải `comment-reply.js`:

Thêm đoạn mã sau vào functions.php của theme:

function enqueue_comment_reply_script() {
    if (is_singular() && comments_open() && get_option('thread_comments')) {
        wp_enqueue_script('comment-reply');
    }
}
add_action('wp_enqueue_scripts', 'enqueue_comment_reply_script');

2. Tuỳ Chỉnh Form Comment#

Tùy chỉnh giao diện hiển thị form:

Kiểm tra file comments.php trong theme của bạn, và đảm bảo hàm comment_form() được sử dụng đúng cách. Ví dụ cơ bản:

<?php
if ( have_comments() ) :
    wp_list_comments(array(
        'style'       => 'ol',
        'short_ping'  => true,
        'avatar_size' => 50,
        'reply_text'  => 'Reply', // Text for the reply link
    ));
endif;

// Hiển thị form bình luận chính
comment_form();
?>

3. Sử Dụng JavaScript Để Chèn Form Comment#

Nếu bạn muốn tùy chỉnh thêm hành vi khi nhấn vào nút reply, bạn có thể sử dụng JavaScript để di chuyển hoặc chèn form comment vào vị trí mong muốn.

Ví dụ:

document.addEventListener('DOMContentLoaded', function () {
    // Lắng nghe sự kiện click trên tất cả các nút reply
    document.querySelectorAll('.comment-reply-link').forEach(function (replyLink) {
        replyLink.addEventListener('click', function (event) {
            event.preventDefault(); // Ngăn hành vi mặc định
            const commentId = this.getAttribute('data-commentid'); // Lấy ID comment mục tiêu
            const commentParent = document.getElementById(`comment-${commentId}`);
            const commentForm = document.getElementById('commentform');

            if (commentParent && commentForm) {
                // Di chuyển form đến dưới comment mục tiêu
                commentParent.appendChild(commentForm);
                // Cập nhật input hidden của parent comment ID
                document.getElementById('comment_parent').value = commentId;
            }
        });
    });
});

4. Tinh Chỉnh Hiển Thị Comment#

Khi hiển thị danh sách comment, đảm bảo cấu trúc HTML hỗ trợ đa cấp. Bạn có thể sử dụng wp_list_comments() với tham số type, callback, hoặc tùy chỉnh thêm. Ví dụ:

<?php
wp_list_comments(array(
    'style'      => 'ol',
    'short_ping' => true,
    'avatar_size' => 50,
    'reply_text' => 'Trả lời', // Thay đổi nút trả lời
    'callback'   => 'my_custom_comment',
));

function my_custom_comment($comment, $args, $depth) {
    ?>
    <li <?php comment_class(); ?> id="comment-<?php comment_ID(); ?>">
        <article>
            <header>
                <div class="comment-author">
                    <?php echo get_avatar($comment, 50); ?>
                    <?php printf(__('<b>%s</b>'), get_comment_author_link()); ?>
                </div>
                <div class="comment-meta">
                    <time datetime="<?php comment_time('c'); ?>">
                        <?php printf('%1$s', get_comment_date()); ?>
                    </time>
                </div>
            </header>
            <div class="comment-content">
                <?php comment_text(); ?>
            </div>
            <footer>
                <?php
                comment_reply_link(array_merge($args, array(
                    'depth'     => $depth,
                    'max_depth' => $args['max_depth'],
                    'reply_text' => 'Trả lời',
                )));
                ?>
            </footer>
        </article>
    </li>
    <?php
}
?>

5. Lưu ý#

Threaded Comments:
- Hệ thống bình luận đa cấp phụ thuộc vào cài đặt max_depth trong Settings > Discussion. Đảm bảo bạn đã bật và đặt giá trị max_depth đủ lớn.
Style CSS:
- Bạn cần tùy chỉnh CSS để các cấp comment hiển thị rõ ràng.

Ví dụ CSS cơ bản:

ol.comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

ol.comment-list li {
    margin: 0 0 1em;
    padding-left: 20px;
    border-left: 2px solid #ddd;
}

ol.comment-list li.children {
    margin-left: 20px;
}

Kết Quả#

Khi nhấn vào liên kết reply, form comment sẽ tự động di chuyển xuống dưới comment tương ứng.
Comment đa cấp hiển thị đúng với cấu trúc HTML và CSS.

Nếu có vấn đề hoặc cần thêm hướng dẫn, hãy cho mình biết nhé! 😊

Nội dung bài viết

★ ★ ★ ★ ★ Chưa có đánh giá. Hãy là người đánh giá đầu tiên.