Read More là một liên kết hiển thị dưới phần excerpt ngoài trang chủ cho phép người đọc xem toàn bộ nội dung chi tiết của bài viết. Chính vì vậy chúng ta cần phải tạo cho nó một tạo phong cách độc đáo thay vì một dòng chữ khô khan như mặc định. Trong bài viết này tôi sẽ chia sẻ tới các bạn cách tùy chỉnh và Việt hóa Read more trong Genesis Framework.
Loại bỏ Read More
Các bạn mở file functions.php vào thêm đoạn code sau:
//* Remove read more linkadd_filter( 'get_the_content_more_link', 'cswp_child_read_more_link' );function cswp_child_read_more_link() { return '';}
//* Remove read more link
add_filter( 'get_the_content_more_link', 'cswp_child_read_more_link' );
function cswp_child_read_more_link() {
return '';
}
Việt hóa từ Read More
Thay vì hiển thị cụm từ Read More thì bạn có thể Việt hóa nó thành “Đọc thêm”, “Xem tiếp” tùy theo sở thích của mình.
//* Customize Read More Textfunction cswp_child_read_more_link($more_link) {return '<a href="' . get_permalink() . '" class="more-link"> Đọc tiếp</a>';}add_filter( 'excerpt_more', 'cswp_child_read_more_link' );add_filter( 'get_the_content_more_link', 'cswp_child_read_more_link' );add_filter( 'the_content_more_link', 'cswp_child_read_more_link' );
//* Customize Read More Text
function cswp_child_read_more_link($more_link) {
return '<a href="' . get_permalink() . '" class="more-link"> Đọc tiếp</a>';
}
add_filter( 'excerpt_more', 'cswp_child_read_more_link' );
add_filter( 'get_the_content_more_link', 'cswp_child_read_more_link' );
add_filter( 'the_content_more_link', 'cswp_child_read_more_link' );
Tạo style CSS more link
/*Custom More link Bottom---------------------------------------------------------- */a.more-link { padding:5px 20px; color:#fff; background-color:#ff0000; border-radius:4px; display:inline-block; transition-property: opacity; transition-delay: 0.3s; transition-duration: .5s;}a.more-link:hover { color:#fff; opacity:.3;}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*
Custom More link Bottom
---------------------------------------------------------- */
a.more-link {
padding:5px 20px;
color:#fff;
background-color:#ff0000;
border-radius:4px;
display:inline-block;
transition-property: opacity;
transition-delay: 0.3s;
transition-duration: .5s;
}
a.more-link:hover {
color:#fff;
opacity:.3;
}
Ngoài ra bạn cũng có thể thêm các icon vào more link bằng cách sử dụng font Awesome.
Nếu thích blog của mình thì hãy ủng hộ bằng cách Subscribe để nhận thêm nhiều bài viết mới. Nếu bạn có bất cứ khó khăn nào thì hãy cho mình biết ở phần bình luận nhé. Chúc các bạn thành công!
Nguồn: Việt Hùng admin https://chiasewp.com/ 
Bình Luận