Tạo nút Read More / Read Less (Xem thêm / Ẩn nội dung) cho nội dung quá dài trong wordpress

Để tạo nút Read More / Read Less cho các nội dung dài quá trong website ta dùng cách như sau

HTML

Nội dung cần ẩn hiện ta cần để trong các thẻ như sau

Lorem Ipsum is simply dummy text of the printing and typesetting industry
<i class="dots">...</i>
<span class="more-content">
Nội dung cần ẩn standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</span>
<button class="read-more">Read More</button>

Chúng ta dùng css như sau để ẩn các nội dung ban đầu

CSS

.more-content{
   display: none;
}

JS

Cuối cùng là thêm đoạn js sau để ẩn và hiện nội dung khi click vào

	jQuery(document).ready(function( $ ){
	//$(document).ready(function(){
	   $(".read-more").click(function(){

		   $(this).siblings('.dots').toggle();
		   $(this).siblings('.more-content').toggle();
		   
		  if($(this).text()=='Read More'){
			  
	  		$(this).text('Read Less');
		  }
		  else{
	  		$(this).text('Read More');
		  }
	   });
	});

Nâng cao

Để tiện hơn trong khi sử dụng chúng ta sẽ biến các tag html thành shortcode để khi cần ẩn nội dung chúng ta chỉ cần gọi shortcode ra mà thôi, chúng ta tạo shortcode như sau trong function.php

// Codfe.com Tạo hàm nút readmore
function cf_readmore($args, $content){
	return '<i class="dots">...</i><span class="more-content">'.$content.'</span><button class="read-more">Read More</button>';
}
add_shortcode('cf-readmore', 'cf_readmore');

Như vậy nội dung cần ẩn và hiện chúng ta chỉ cần thêm shortcode như bên dưới

Lorem Ipsum is  [cf-readmore] Nội dung cần ẩn [/cf-readmore]

Chúc các bạn thành công nhé!