Bài viết này chia sẻ đến bạn một số mẫu phân trang được tối ưu lại có tên là GeneratePress Paging Navigation Styles >> giúp việc điều hướng thông qua phân trang dễ dàng, khoa học và đẹp mắt hơn. Như thường lệ thì mình sẽ xem như đây là một mô đun functions bổ sung cho GeneratePress chứ không phải thuần CSS.
Bạn copy đoạn code bên dưới và chèn vào bên dưới cùng trong file functions.php của theme/ child theme. Chưa có child theme thì chèn vào theme chính cũng được, không sao hết, lưu link bài viết này lại là được. Khi theme cập nhật thì copy dán vào lại.
//GeneratePress Paging Navigation Styles
add_action('wp_head', function () {
if (!is_archive() && !is_home() && !is_search()) return;
?>
<style id="gp-paging-nav">
.paging-navigation .nav-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px;
margin: 10px 0;
padding: 0;
}
.paging-navigation .nav-links a,
.paging-navigation .nav-links span.page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 50px;
height: 48px;
padding: 0 16px;
font-size: 17px;
font-weight: 500;
line-height: normal;
text-decoration: none;
border-radius: 4px;
box-sizing: border-box;
}
.paging-navigation .nav-links a {
background-color: #f0f0f0;
color: #333;
transition: background-color 0.2s ease, color 0.2s ease;
}
.paging-navigation .nav-links a:hover,
.paging-navigation .nav-links a:focus-visible {
background-color: #1a73e8;
color: #fff;
}
.paging-navigation .nav-links span.page-numbers.current {
background-color: #1a73e8;
color: #fff;
cursor: default;
}
.paging-navigation .nav-links span.dots {
min-width: auto;
padding: 0 8px;
background: transparent;
color: #333;
}
@media (max-width: 480px) {
.paging-navigation .nav-links { gap: 6px; }
.paging-navigation .nav-links a, .paging-navigation .nav-links span.page-numbers { padding: 0 14px; }
}
@media (min-width: 1200px) {
.paging-navigation .nav-links { gap: 10px; }
}
@media (min-width: 1024px) {
.separate-containers .paging-navigation { border-radius: 10px; }
}
</style>
<?php
}, 100);
//GeneratePress Paging Navigation StylesMặc dù CSS trên mình chuyển thể thành functions nhưng bạn hoàn toàn có thể copy lấy phần CSS để ráp vào web, blog đang dùng GeneratePress cũng được, bản chất nó là CSS thôi chứ không có gì cao siêu hết ^^
Nếu chỉ là code CSS thì bác chèn nó vào Additional CSS trong Customizer hoặc bỏ vào file style.css là được mà? Sao phải dùng code PHP để chèn CSS thế này nhỉ? 😂
Bác Tịnh có vẻ “nghiện” dùng inline CSS và inline JS? 😅 Điều này không tốt về mặt hiệu năng đâu. Inline CSS và inline JS không cache trình duyệt được. Ngoài ra, nó làm cho HTML phình lên một cách không cần thiết, nhìn rất rối mắt.
Cảm ơn bạn Hiếu đã đưa ra góp ý nè, mình đã chỉnh lại code để tối ưu hơn về hiệu suất hơn trong khuôn khổ mô đun bổ sung vào functions. Về phương án chèn code vào Additional CSS trong Customizer đúng là phương án đồng bộ nhất, mình vẫn triển khai từ trước đến giờ.
Tuy nhiên, gần đây mình hay test code, thay đổi mẫu như cơm bữa thì tách ra mô đun lại lợi thế hơn nhiều, tiện cho ae ráp vào web họ nếu cần. Những mô đun như này thuần CSS thôi nên rất ngắn, có thể đánh đổi giữa tiện và hiệu suất được á bạn Hiếu. Hơn nữa PHP thì có thể áp điều kiện để khi nào CSS được thực thi, cái này thì lợi thế hơn về mặt hiệu suất.