GeneratePress sticky widget là tính năng được bổ sung bởi Hocban.vn giúp ghim nội dung ở sidebar khi cuộn trang. Vai trò, nhiệm vụ của cái này thì hầu như các bạn đã biết, ở đây mình sẽ nói về ưu điểm và cách áp dụng.
Ưu điểm của code này là ae không cần phải cài plugin hay tuỳ chỉnh như trước đây và nó nhẹ lắm. Trên theme GeneratePress thì ae cứ copy dán là lụm, rất đơn giản. Mình có tách ra 2 phương án áp dụng, hướng nào cũng có lợi thế riêng hết.
Cách 01: Bạn copy đoạn code bên dưới và chèn vào cuối file functions.php trong theme/ child theme GeneratePress. Nếu không có child theme thì chèn trực tiếp trên theme chính chính cũng được, nên lưu bài viết này lại để theme có cập nhật thì vào lấy code copy dán lại (code có thể sẽ cập nhật, chỉnh sửa để ngon hơn).
//Sticky widget GeneratePress
add_action('wp_enqueue_scripts', function() {
if (is_admin()) return;
$custom_css = "
@media (min-width: 1024px) {
.site-content {display: flex; align-items: stretch;}
.inside-right-sidebar, .inside-left-sidebar {height: 100%;}
.inside-right-sidebar aside:last-child, .inside-left-sidebar aside:last-child {
position: sticky;
top: 20px;
margin-bottom: 40px !important;
align-self: flex-start;
width: 100%;
}
.footer-widgets {position: relative; z-index: 5;}
}";
wp_add_inline_style('generate-style', $custom_css);
}, 25);
//Sticky widget GeneratePressCách 02: Đơn giản và cũng hay hơn, bạn copy đoạn code này và chèn vào CSS bổ sung trong phần tuỳ chỉnh giao diện. Cách này mặt dù lợi thế hơn về giải pháp nhưng nếu bạn không biết chèn ở đâu trong CSS bổ sung cũng hơi lấn cấn >> thì cứ chèn đại vào cuối luôn (nếu trong đó có sẵn CSS bổ sung đã thêm vào trước đó) ^^
@media (min-width: 1024px) {
.site-content {display: flex; align-items: stretch;}
.inside-right-sidebar, .inside-left-sidebar {height: 100%;}
.inside-right-sidebar aside:last-child, .inside-left-sidebar aside:last-child {
position: sticky;
top: 20px;
margin-bottom: 40px !important;
align-self: flex-start;
width: 100%;
}
.footer-widgets {position: relative; z-index: 5;}
}Với tính năng này thì trước đây ae thường phải dùng plugin và cũng tinh chỉnh, thiết lập này kia mà chưa chắc đã thành công (widget không ghim được). Nay thì khoẻ rồi, nếu ae dùng theme GeneratePress thì cứ thế copy paste thôi. Ae cũng có thể tham khảo để áp dụng cho theme đang dùng, chủ yếu là xác định được ID/ class của footer rồi thay cho class .footer-widgets ở đoạn CSS trên.
