Bài viết này chia sẻ đến bạn functions giúp tự động chuyển Footer GeneratePress sang bố cục 2 cột trên tablet. Với thiết bị truy cập có kích thước hiển thị có độ rộng dưới 1024px và trên 720px (tablet/ điện thoại màn hình gập) thì bố cục mặc định chưa tối ưu.
Nếu để nguyên 4 cột thì mỗi cột bị hẹp, nội dung bên trong gò bó, mà chuyển qua 1 cột thì nhìn cũng kỳ. Thôi thì chuyển qua thành 2 cột cho dễ nhìn, giao diện bố cục này gọi là Masonry Layout. Thích hợp cho các web có 4 cột widget footer như Hocban.vn | Quan trọng là 4 cái widget đó không bao giờ có rộng cao bằng nhau thì phương án như mình làm là tối ưu nhất rồi.
Như thường lệ, cái này bản chất là CSS nhưng mình chuyển thể thành mô đun tính năng (function) để tiện trong thay thế, đổi kiểu cũng như tinh chỉnh. Còn ae nào làm theme hoàn chỉnh thì CSS thẳng vào theme hoặc CSS bổ sung sẽ tối ưu hơn.
// Chia footer thành 2 cột trên tablet
add_action('wp_head', function (): void {
?>
<style id="gp-footer-responsive">
@media (max-width: 719px) {
.inside-footer-widgets {
display: block !important;
column-count: 1 !important;
column-gap: 2rem !important;
}
.inside-footer-widgets > div {
break-inside: avoid;
}
}
@media (min-width: 720px) and (max-width: 1024px) {
.footer-widgets {
background-color: #000000;
padding: 2em 0;
}
.footer-widgets-container,
.footer-widgets-container.grid-container,
.site-footer .footer-widgets-container {
padding: 0 !important;
margin: 0 auto !important;
max-width: 100% !important;
width: 90% !important;
}
.inside-footer-widgets {
display: block !important;
column-count: 2 !important;
column-gap: 2rem !important;
padding: 0 !important;
margin: 0 !important;
}
.inside-footer-widgets > div {
break-inside: avoid;
margin-bottom: 2rem;
border: solid #a6c089 1px;
padding: 1em;
border-radius: 10px;
}
.footer-widgets-container.grid-container {
margin-top: 2em;
margin-left: 4%;
}
.site-footer .footer-widgets-container .inner-padding {
padding: 0 0 0 5px;
}
}
@media (min-width: 1025px) {
.inside-footer-widgets {
display: flex !important;
gap: 2rem;
}
.inside-footer-widgets > div {
flex: 1 1 25%;
}
}
</style>
<?php
}, 100);
// Chia footer thành 2 cột trên tabletBạn copy đoạn code trên và dán vào dưới cùng trong file functions.php của theme/ child theme GeneratePress là được. Nếu không có child theme thì cứ dán vào theme chính cũng được, khi nào theme cập nhật thì vào bài viết này copy dán lại. Còn nếu muốn chèn vào CSS bổ sung thì copy lấy phần CSS thôi.
