Code phân trang bình luận bài viết wordpress

Mặc định wordpress sẽ có phân trang Prev và Next cho danh sách bình luận bài viết. Thực ra sử dụng dạng mặc định wordpress có sẵn cũng được hoặc bạn nào muốn custom lại load ajax cho bình luận bài viết thì theo dõi bài viết dưới đây nhé.

Thực ra mình vẫn sử dụng Prev và Next của wordpress, tuy nhiên mình code lại 1 chút để khi ấn xem thêm bình luận nó sẽ load ajax bình luận trông có vẻ chuyên nghiệp hơn.

Code phân trang bình luận bài viết

Trước tiên bạn cần bật cho phép phân trang phần comment lên trước. Bạn làm theo ảnh phía dưới mình đính kèm cho phù hợp nhé.

Sau đó bạn thêm code sau vào wp-content/themes/{your-theme}/functions.php 

/*
 * Chuyển phân trang của bình luận bài viết từ "kiểu next/prev" sang "tải thêm bằng ajax" trong theme Flatsome
 * */
add_filter('gettext', function ( $translated_text, $text, $domain ) {
    if($domain != 'flatsome') return $translated_text;
    switch ( $translated_text ) {
        case 'Newer Comments' :
            $translated_text = __( 'Xem thêm bình luận', 'flatsome');
            break;
    }
    return $translated_text;
}, 10, 3);
add_action('wp_footer', function (){
    if(!is_singular('post')) return;
    ?>
    <style>
        .nav-links.nex-prev-nav{
            margin: 20px 0;
        }
        .nav-links.nex-prev-nav .nav-previous {
            display: none !important;
        }
        .nav-links.nex-prev-nav .nav-next {
            text-align: center;
        }
        .cmt_loading {
            position: relative;
            pointer-events: none;
        }
        .cmt_loading:before {
            position: absolute;
            content: '';
            top: 0;
            left: 0;
            background: rgb(255 255 255 / 50%);
            width: 100%;
            height: 100%;
            z-index: 999;
        }
        .cmt_loading:after {
            position: fixed;
            content: '';
            top: 50%;
            margin-top: -25px;
            left: 50%;
            margin-left: -25px;
            width: 50px;
            height: 50px;
            -webkit-animation: devvn_loading .6s linear;
            animation: devvn_loading .6s linear;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            border-radius: 50%;
            border-color: var(--primary-color,#00c48c) transparent transparent;
            border-style: solid;
            border-width: .3em;
            box-shadow: 0 0 0 1px transparent;
            z-index: 9999;
        }
        @-webkit-keyframes devvn_loading {
            from {
                -webkit-transform: rotate(0);
                transform: rotate(0)
            }
            to {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg)
            }
        }
        @keyframes devvn_loading {
            from {
                -webkit-transform: rotate(0);
                transform: rotate(0)
            }
            to {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg)
            }
        }
        .nav-links.nex-prev-nav .nav-next a {
            background: #fff;
            border: 0;
            border-radius: 10px;
            box-shadow: 0 1px 2px 0 rgba(60,64,67,.1), 0 2px 6px 2px rgba(60,64,67,.15);
            color: #212529;
            cursor: pointer;
            display: block;
            font-size: 14px;
            margin: auto;
            max-width: 335px;
            -webkit-text-decoration: none;
            text-decoration: none;
            transition: .3s;
            width: 100%;
            padding: 6px 5px;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            (function ($){
                $('body').on('click', '.nav-links.nex-prev-nav .nav-next a', function (e){
                    e.preventDefault();
                    let cmt_wrap = $(this).closest('.comments-area');
                    let next = $(this).attr('href');
                    cmt_wrap.addClass('cmt_loading');
                    $.get(next, function (resp){
                        let cmt_list = $(resp).find('ol.comment-list').html();
                        let cmt_nav = $(resp).find('.nav-links.nex-prev-nav').html();
                        $('ol.comment-list').append(cmt_list);
                        $('.nav-links.nex-prev-nav').html(cmt_nav);
                        cmt_wrap.removeClass('cmt_loading');
                    });
                })
            })(jQuery);
        });
    </script>
    <?php
}, 999);

Kết quả sau khi sử dụng đoạn code phân trang load ajax bình luận bài viết

Vậy là đã oke rồi. Chúc các bạn thành công nhé!