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:
1 2 3 4 5 | //* 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.
1 2 3 4 5 6 7 | //* 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
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.
Xem thêm:
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!
Đối với các theme khác có dùng được các tùy chỉnh này không bạn nhỉ
Chỉ dùng cho Genesis và Child Theme của nó thôi bạn nhé.
Bài viết rất hay. Tks bạn đã chia sẻ