Thu gọn Xem thêm là nhu cầu của Chủ website, người vận hành Website muốn cho Khách hàng, Người dùng hiểu sâu hơn về sản phẩm, bài đăng, thương hiệu … thì thường sẽ viết một bài mô tả khá dài, bài đăng này mang lại nhiều lợi ích về việc giúp cho Khách hàng, người dùng, công cụ tìm kiếm hiểu rõ và sâu hơn.
Nhưng thực tế nó lại mang lại trải nghiệm khách hàng có phần tiêu cực khi nhiều người chỉ thích xem chứ không thích đọc. Vậy giải pháp nào cân bằng hài hòa giữa nhu cầu của khách hàng và lợi ích của chủ Website.?
Tổng quan về chức năng Thu gọn – Xem thêm trên Website
Trên các trang web hiện đại, việc có nội dung phong phú và hấp dẫn đóng vai trò quan trọng trong việc thu hút và giữ chân người dùng. Tuy nhiên, khi một bài viết dài, người đọc có thể cảm thấy bị choáng ngợp và mất hứng thú.
Để giải quyết vấn đề này, việc cần thiết phải có nột nút bấm thực hiện chức năng “Thu gọn – Xem thêm” cho nội dung văn bản đã trở thành một giải pháp phổ biến cho các trang web. Trong bài viết này, chúng ta sẽ tìm hiểu về khái niệm “Thu gọn – Xem thêm”, cách sử dụng và tại sao nó quan trọng cho nội dung trang web.
Cách hoạt động của Xem thêm – Thu gọn
Với sự phát triển của internet, thông tin tràn ngập khắp nơi và sự chú ý của người dùng ngày càng ngắn cho một nội dung cụ thể. Đối với các bài viết dài, người đọc có thể không có đủ thời gian và kiên nhẫn để đọc từ đầu đến cuối. Bằng cách sử dụng chức năng “Thu gọn – Xem thêm,” chúng ta có thể cung cấp một cái nhìn nhanh chóng và tóm tắt về nội dung, thu hút người đọc tiếp tục đọc.
Các nguyên tắc tốt nhất cho “Thu gọn Xem thêm” trong bài viết, mô tả sản phẩm, mô tả danh mục trên trang web
Để tận dụng tối đa “Thu gọn Xem thêm,” chúng ta cần áp dụng các chiến lược hiệu quả. Đầu tiên, sử dụng các tiêu đề và phụ đề mô tả đầy đủ nội dung của phần bị “Thu gọn Xem thêm.” Điều này giúp người đọc có cái nhìn tổng quan về nội dung và quyết định xem tiếp hay không. Ngoài ra, sử dụng hình ảnh và yếu tố trực quan khác để tạo sự hấp dẫn và tăng tính tương tác với người đọc.
Những sai lầm phổ biến khi sử dụng “Thu gọn – Xem thêm”
Một số sai lầm thường gặp khi triển khai chức năng “Thu gọn – Xem thêm” là không kiểm tra kỹ lưỡng trên các thiết bị và nền tảng khác nhau. Điều này có thể dẫn đến trải nghiệm không tốt cho người dùng và ảnh hưởng đến SEO. Để tránh các sai lầm này, chúng ta cần kiểm tra và tối ưu hóa tính năng “Thu gọn Xem thêm” trên các thiết bị và nền tảng khác nhau.
Lợi ích của “Thu gọn – Xem thêm” cho SEO của Website
Đáng chú ý, chức năng “Thu gọn Xem thêm” nếu nội dung văn bản, hình ảnh quá dài có thể tác động tích cực đến việc tăng thứ hạng SEO. Các công cụ tìm kiếm như Google đánh giá nội dung ngắn gọn và rõ ràng. Điều này đồng nghĩa với việc nếu chúng ta triển khai “Thu gọn Xem thêm” một cách chính xác, nội dung trang web của chúng ta có thể được ưu tiên hiển thị trong kết quả tìm kiếm.
Với mã code được chia sẻ bởi RealDev founder của FlatsomeIO thì bạn chỉ việc Copy Paste để sử dụng, ngoài ra bạn có thể thêm bớt, thay đổi chiều cao bất kỳ bạn muốn. Thực sự đơn giản và hiệu quả.
Hướng dẫn thêm chức năng Thu gọn – Xem thêm vào Website
Trong code mình chia sẻ tới mọi người, mặc định đã hỗ trợ một phần, và code của mình có thể tùy biến thêm bằng cách thêm Class hoặc ID để chức năng hoạt động.
Mình sẽ hướng dẫn mọi người sử dụng và tùy biến theo nhu cầu.
Mã code tổng quan
Bạn truy cập vào Giao diện (Themes) / Theme File Editor / Functions.php và Sao chép mã code rồi dán vào cuối tệp tin functions.php
Dưới đây là mã code tổng quan, mã code đã bao gồm JavaScript và CSS để có thể hoạt động được.
function realdev_readmore()
{
?>
<script>
jQuery(function($) {
$(window).on('load', function() {
var selectors = [
'.term-description',
'.readmore',
'#tab-description'
];
var height_set = {
'.term-description': 300,
'.readmore': 500,
'#tab-description': 500
};
selectors.forEach(function(selector) {
var elements = $(selector);
if (elements.length > 0) {
elements.each(function() {
var currentElement = $(this);
var height_current = currentElement.height();
if (height_current > height_set[selector]) {
currentElement.css('height', height_set[selector] + 'px');
currentElement.append(function() {
return '<div class="realdev-readmore realdev-expand"><button>Xem thêm</button></div>';
});
currentElement.append(function() {
return '<div class="realdev-readmore realdev-collapse" style="display: none"><button>Thu gọn</button></div>';
});
$('body').on('click', '.realdev-expand', function() {
currentElement.removeAttr('style');
$('body .realdev-expand').hide();
$('body .realdev-collapse').show();
});
$('body').on('click', '.realdev-collapse', function() {
currentElement.css('height', height_set[selector] + 'px');
$('body .realdev-expand').show();
$('body .realdev-collapse').hide();
$('html, body').animate({
scrollTop: currentElement.offset().top
}, 1000);
});
}
});
}
});
});
});
</script>
<style>
.term-description,
.readmore,
#tab-description {
overflow: hidden;
position: relative;
margin-bottom: 1rem;
}
.realdev-readmore {
text-align: center;
z-index: 10;
}
.realdev-readmore button {
text-transform: none;
font-weight: 500;
padding: 5px 50px;
border-radius: 8px;
box-shadow: 0 0 10px #ddd;
color: #fff;
background: #422908;
margin: 0 !important;
}
.realdev-readmore:hover button {
background: orange;
}
.realdev-expand {
position: absolute;
bottom: -7px;
width: 100%;
background: #fff;
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff00', endColorstr='#ffffff', GradientType=0);
height: 100px;
}
.realdev-expand button {
top: 40px;
}
</style>
<?php
}
add_action('wp_footer', 'realdev_readmore');Hiểu sâu về chức năng và cách thức hoạt động của Xem thêm – Thu gọn được chia sẻ bởi FlatsomeIO
Mã code mặc định đã bao gồm cho: Mô tả Danh mục Sản phẩm, Mô tả chi tiết Sản phẩm, Mô tả Tùy biến.
Tuy nhiên, trong trường hợp bạn muốn custom thì hoàn toàn có thể sử dụng theo ý bao gồm:
- Tên Class, ID
- Chiều cao của từng Class hoặc ID
- Màu sắc của Button
Mình sử dụng Button thay vì thẻ Anchor. Vì button vẫn được hiểu là một NÚT thay vì là một Link rỗng. Điều này có lợi cho SEO
Tùy biến chức năng Thu gọn Xem thêm ở trang chi tiết Sản phẩm
Mặc định trong Woocommerce và Flatsome thì hiển thị ở dạng Line Tabs. Vì thế code trên mặc định đã hỗ trợ chức năng Xem thêm – Thu gọn ở trang mô tả chi tiết sản phẩm.
Vậy câu hỏi đặt ra ở đây là trong trường hợp tôi muốn dùng cho kiểu hiển thị khác thì thế nào.?
Nếu layout của Bạn ở dạng Tab thì bạn có thể chọn mọi layout bạn muốn. Nếu layout là Sections hoặc Accordion thì bạn làm theo hướng dẫn bên dưới.
Trang mô tả chi tiết sản phẩm dạng Sections
Trong trường hợp bạn chọn là Section của Layout trang chi tiết sản phẩm, bạn thêm class .product-section .entry-content vào mã code theo ví dụ dưới đây:
Thêm .product-section .entry-content vào phần JavaScript
Trong mã javascript bản gốc được chia sẻ là:
var selectors = [
'.term-description',
'.readmore',
'#tab-description'
];
var height_set = {
'.term-description': 300,
'.readmore': 500,
'#tab-description': 500
};
Sửa lại thành như sau:
var selectors = [
'.term-description',
'.readmore',
'#tab-description',
'.product-section .entry-content'
];
var height_set = {
'.term-description': 300,
'.readmore': 500,
'#tab-description': 500,
'.product-section .entry-content': 500,
};Giải thích: Chúng ta thêm
.product-section .entry-contentvào phầnvar selectorvàvar height_setđể chúng định nghĩa được class, id cần thực hiện, và đặt chiều cao cho chúng. Ở đây mình đặt là 500px, bạn có thể tùy chỉnh lại theo ý nha.
Thêm .product-section .entry-content vào phần Style CSS
Để chức năng hoạt động bạn cần thêm định nghĩa cho mã CSS nữa, dưới đây là mô tả để bạn hình dung
Mã CSS gốc:
.term-description,.readmore,#tab-description {
overflow: hidden;
position: relative;
margin-bottom: 1rem;
}Bạn sửa thành như sau:
.term-description,.readmore,#tab-description,.product-section .entry-content {
overflow: hidden;
position: relative;
margin-bottom: 1rem;
}Có nghĩa bạn sẽ thêm mã CSS để chúng định nghĩa được chiều cao và khoảng cách. Hãy chú ý thêm dấu phẩy , Để ngăn cách giữa các Class và ID
Sau khi làm xong hai bước trên bạn lưu lại và reload lại trang chi tiết sản phẩm để thưởng thức.
Trang mô tả chi tiết sản phẩm dạng Accodion
Tương tự với Section, bạn thêm ID #accordion-description-content và phần Javascript và CSS để chức năng xem thêm, thu gọn được hoạt động
Mã code hoàn thiện khi thay đổi các Layout trang chi tiết sản phẩm
function realdev_readmore()
{
?>
<script>
jQuery(function($) {
$(window).on('load', function() {
var selectors = [
'.term-description',
'.readmore',
'#tab-description',
'.product-section .entry-content',
'#accordion-description-content',
];
var height_set = {
'.term-description': 300,
'.readmore': 500,
'#tab-description': 500,
'.product-section .entry-content': 500,
'#accordion-description-content': 500,
};
selectors.forEach(function(selector) {
var elements = $(selector);
if (elements.length > 0) {
elements.each(function() {
var currentElement = $(this);
var height_current = currentElement.height();
if (height_current > height_set[selector]) {
currentElement.css('height', height_set[selector] + 'px');
currentElement.append(function() {
return '<div class="realdev-readmore realdev-expand"><button>Xem thêm</button></div>';
});
currentElement.append(function() {
return '<div class="realdev-readmore realdev-collapse" style="display: none"><button>Thu gọn</button></div>';
});
$('body').on('click', '.realdev-expand', function() {
currentElement.removeAttr('style');
$('body .realdev-expand').hide();
$('body .realdev-collapse').show();
});
$('body').on('click', '.realdev-collapse', function() {
currentElement.css('height', height_set[selector] + 'px');
$('body .realdev-expand').show();
$('body .realdev-collapse').hide();
$('html, body').animate({
scrollTop: currentElement.offset().top
}, 1000);
});
}
});
}
});
});
});
</script>
<style>
.term-description,
.readmore,
#tab-description,
.product-section .entry-content,
#accordion-description-content {
overflow: hidden;
position: relative;
margin-bottom: 1rem;
}
.realdev-readmore {
text-align: center;
z-index: 10;
}
.realdev-readmore button {
text-transform: none;
font-weight: 500;
padding: 5px 50px;
border-radius: 8px;
box-shadow: 0 0 10px #ddd;
color: #fff;
background: #422908;
margin: 0 !important;
}
.realdev-readmore:hover button {
background: orange;
}
.realdev-expand {
position: absolute;
bottom: -7px;
width: 100%;
background: #fff;
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff00', endColorstr='#ffffff', GradientType=0);
height: 100px;
}
.realdev-expand button {
top: 40px;
}
</style>
<?php
}
add_action('wp_footer', 'realdev_readmore');Tùy biến chức năng Xem thêm Thu gọn trang Mô tả Danh mục Bài viết
Mặc định code không tích hợp sẵn, mình sẽ hướng dẫn mọi người thêm chức năng này cho Mô tả danh mục Bài viết trên Flatsome.
Thêm .taxonomy-description vào mã Script và CSS
Tương tự cách làm bên trên, dưới đây là mã hoàn chỉnh
function realdev_readmore()
{
?>
<script>
jQuery(function($) {
$(window).on('load', function() {
var selectors = [
'.term-description',
'.readmore',
'#tab-description',
'.product-section .entry-content',
'#accordion-description-content',
'.taxonomy-description',
];
var height_set = {
'.term-description': 300,
'.readmore': 500,
'#tab-description': 500,
'.product-section .entry-content': 500,
'#accordion-description-content': 500,
'.taxonomy-description' : 400,
};
selectors.forEach(function(selector) {
var elements = $(selector);
if (elements.length > 0) {
elements.each(function() {
var currentElement = $(this);
var height_current = currentElement.height();
if (height_current > height_set[selector]) {
currentElement.css('height', height_set[selector] + 'px');
currentElement.append(function() {
return '<div class="realdev-readmore realdev-expand"><button>Xem thêm</button></div>';
});
currentElement.append(function() {
return '<div class="realdev-readmore realdev-collapse" style="display: none"><button>Thu gọn</button></div>';
});
$('body').on('click', '.realdev-expand', function() {
currentElement.removeAttr('style');
$('body .realdev-expand').hide();
$('body .realdev-collapse').show();
});
$('body').on('click', '.realdev-collapse', function() {
currentElement.css('height', height_set[selector] + 'px');
$('body .realdev-expand').show();
$('body .realdev-collapse').hide();
$('html, body').animate({
scrollTop: currentElement.offset().top
}, 1000);
});
}
});
}
});
});
});
</script>
<style>
.term-description,
.readmore,
#tab-description,
.product-section .entry-content,
#accordion-description-content,.taxonomy-description {
overflow: hidden;
position: relative;
margin-bottom: 1rem;
}
.realdev-readmore {
text-align: center;
z-index: 10;
}
.realdev-readmore button {
text-transform: none;
font-weight: 500;
padding: 5px 50px;
border-radius: 8px;
box-shadow: 0 0 10px #ddd;
color: #fff;
background: #422908;
margin: 0 !important;
}
.realdev-readmore:hover button {
background: orange;
}
.realdev-expand {
position: absolute;
bottom: -7px;
width: 100%;
background: #fff;
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff00', endColorstr='#ffffff', GradientType=0);
height: 100px;
}
.realdev-expand button {
top: 40px;
}
</style>
<?php
}
add_action('wp_footer', 'realdev_readmore');Thành quả
Thêm chức năng Xem thêm – Thu gọn vào bất kỳ đâu bạn muốn
Để thêm chức năng này vào bất kỳ đâu bạn muốn, ví dụ là Trang chủ chẳng hạn. Bạn chỉ cần thêm class .readmore là có thể sử dụng được rồi. Quá dễ quá hiệu quả đúng không.?
Kết luận
“Thu gọn Xem thêm” là một giải pháp hữu ích để cung cấp nội dung trang web một cách tổ chức và tiện lợi cho người đọc. Bằng cách triển khai “Thu gọn – Xem thêm” một cách thông minh và hiệu quả, chúng ta có thể cải thiện trải nghiệm người dùng và tăng cường SEO cho trang web của mình.
Mặc dù bạn chỉ cần Copy mã bạn cần hoặc custom lại theo ý mình. Tuy bài viết hơi dài dòng, nhưng mình muốn như vậy, vì tuy cho bạn con cá, mình cũng muốn cho bạn cái cần câu, để bạn hiểu bạn đang làm gì. Không gì bằng tự chủ bạn ạ. Chúc bạn thành công.!
Theo dõi nhiều hơn các chia sẻ của Flatsome Master Tutorials và RealDev Tutorials bạn nhé.
Câu hỏi thường gặp (FAQs)
Độ dài tối ưu của “Thu gọn – Xem thêm” phụ thuộc vào nội dung cụ thể và kiểu giao diện bạn đang sử dụng. Tuy nhiên, nếu nội dung được ẩn quá ngắn, người dùng có thể không có đủ thông tin để quyết định xem tiếp hay không. Ngược lại, nếu nội dung quá dài, “Thu gọn Xem thêm” có thể trở nên không cần thiết. Một số hướng dẫn thường gợi ý rằng độ dài của “Thu gọn Xem thêm” nên trong khoảng từ 5 đến 8 dòng văn bản. Hoặc chiều cao từ 300px đến 800px.
Trong hầu hết các trường hợp, “Thu gọn – Xem thêm” không ảnh hưởng tiêu cực đến SEO (tối ưu hóa công cụ tìm kiếm). Các công cụ tìm kiếm như Google hiểu và xử lý nội dung ẩn trong “Thu gọn Xem thêm” một cách tương đương với nội dung hiển thị trực tiếp. Tuy nhiên, để đảm bảo tốt nhất cho SEO, hãy đảm bảo rằng nội dung ẩn không quá lớn và liên quan đến từ khóa chính của trang hiện tại.
Hiện không có quy định cụ thể nào về việc sử dụng “Thu gọn Xem thêm” trong thiết kế thân thiện với di động. Tuy nhiên, khi sử dụng “Thu gọn Xem thêm” trên di động, hãy đảm bảo rằng nút “Thu gọn Xem thêm” có kích thước đủ lớn để dễ nhấn và dễ thấy. Đồng thời, hãy chắc chắn rằng nội dung ẩn và hiển thị sau khi nhấn vào “Thu gọn Xem thêm” đều được tối ưu hóa cho trải nghiệm trên di động.
Để đo lường hiệu quả của “Thu gọn – Xem thêm”, bạn có thể sử dụng các phương pháp sau:
1: Theo dõi tỷ lệ nhấp vào “Thu gọn – Xem thêm” (click-through rate) để xem bao nhiêu người dùng quan tâm đến nội dung ẩn.
2: Phân tích hành vi người dùng sau khi nhấn vào “Thu gọn – Xem thêm” để xem liệu họ tiếp tục đọc nội dung hay không.
3: Tiến hành khảo sát người dùng để thu thập phản hồi về trải nghiệm của họ với “Thu gọn Xem thêm” và xem liệu nó đã giúp cải thiện tương tác hay không.
Ngoài việc sử dụng “Thu gọn – Xem thêm”, bạn có thể áp dụng các phương pháp khác để giảm độ dài nội dung như:
1: Tổ chức nội dung thành các mục hoặc tab, giúp người dùng chỉ xem những phần nội dung mà họ quan tâm.
2: Sử dụng mục lục hoặc liên kết nhanh để người dùng dễ dàng điều hướng đến các phần nội dung cụ thể.
3: Tối ưu hóa nội dung để loại bỏ các phần không cần thiết hoặc lặp lại, tạo ra một bài viết xúc tích và dễ đọc hơn.
4: Sử dụng hình ảnh, biểu đồ hoặc video để trình bày thông tin một cách hấp dẫn và tiết kiệm không gian văn bản.
