Cài Đặt Blog
Cách biến phân trang của bình luận bài viết từ mặc định sang kiểu “tải thêm bằng ajax”?
Đây là một tính năng Thịnh thấy cũng khá hay và sẽ có một số bạn có nhu cầu sử dụng tính năng này nè.
Hoặc cũng có thể bạn đã bắt gặp tính năng tương tự như vậy ở một số trang website chuyên nghiệp, lâu đời rồi và tò mò muốn biết cách làm.
Ok, tại bài viết này Thịnh sẽ hướng dẫn bạn chi tiết cách biến phân trang của bình luận bài viết từ mặc định sang kiểu tải thêm bằng ajax.
Ok bắt đầu ngay nhé!
Biến phân trang của bình luận bài viết từ mặc định sang kiểu tải thêm bằng ajax là như thế nào?
Đầu tiên, vẫn như mọi khi Thịnh sẽ cung cấp cho bạn những hình ảnh cụ thể để bạn dễ hình dung.
Khi độc giả muốn đọc thêm bình luận bắt buộc phải ấn vào nút này và phải chờ tải một lúc mới xuất hiện bình luận tiếp theo, khá là phiền hà.
Không chỉ như vậy, những bình luận ở trang trước sẽ bị biến mất, thay vào đó là bình luận mới.
Sau khi thay đổi thì sẽ khác biệt hẳn trông như thế này
Lúc này độc giả chỉ cần bấm vào bình luận mới hơn là lập tức các bình luận kế tiếp sẽ được hiển thị ra luôn. Ưu điểm kế tiếp là những bình luận ở trên không bị mất đi và không giới hạn số lượng bình luận hiển thị trên 1 trang luôn nha.
Rất là uke, tuyệt vời. Bạn đã hình dung ra được rồi đúng không nào?
Giờ cùng Thịnh bắt tay vào làm nhé.
Xem thêm bài viết khác tại đây:
Cách biến phân trang của bình luận bài viết từ mặc định sang kiểu tải thêm bằng ajax?
Đầu tiên, bạn cần vào Cài đặt —-> Bình luận và tiến hành cài đặt 1 vài thông số quan trọng như Thịnh sẽ chia ở dưới nha.
Để biến phân trang của bình luận bài viết từ mặc định sang kiểu tải thêm bằng ajax, bạn cần tích chọn phân trang bình luận.
Tại đây bạn có thể chọn số lượng bình luận trên mỗi trang, Thịnh hay cho là 5 bình luận cho gọn đẹp, bạn có thể tăng lên 7-15 bình luận cũng được nha, tuỳ ý thích.
Kế tiếp, trang bình luận sẽ hiển thị mặc định: chọn Trang đầu tiên.
Bình luận hiển thị ở đầu mỗi trang bạn chọn: Mới hơn, để những bình luận mới luôn được ưu tiên xuất hiện.
Bước tiếp theo, bạn cần thêm đoạn code sau theo đường dẫn thêm: Giao diện —-> Sửa tệp tin giao diện —-> functions.php —-> Dán đoạn code rùi bấm lưu lại.
Đoạn code giúp biến phân trang của bình luận bài viết từ mặc định sang kiểu tải thêm bằng ajax tại đây ( By Lê Văn Toản)
/*
* 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);Như vậy là xong rồi đó, bạn quay lại bài viết ấn loading lại và tận hưởng thành quả nè.
Cảm ơn bạn đã đọc bài viết nha.
Bài viết liên quan
