Bài này mình chia sẻ đến bạn một mô đun có tên là GeneratePress Responsive Header Search Bar dành cho blog có header canh giữa. Mô đun này nhằm giải quyết vấn đề thanh tìm kiếm mặc định của GeneratePress bị bó buộc bởi kích thước cố định, dù đang trên giao diện mobile, tablet hay desktop.
Gọi là mô đun cho văn vở, ờ mà nó cũng là mô đun tính năng bổ sung thật, vì mình chia sẻ nó với dạng function chứ không phải CSS thuần. Tất nhiên ae vẫn có thể tách lấy CSS và áp dụng kiểu CSS thôi. Mình tách ra thành mô đun vì cần thay đổi kiểu liên tục chứ không rà sửa truyền thống như xây dựng một theme hoàn chỉnh.
//GeneratePress Responsive Search Bar
function hocban_responsive_search_styles() {
$css = "
.widget .search-field {
width: 100%;
min-width: 320px;
}
@media (max-width: 719px) {
.inside-header {
flex-wrap: wrap; }
.header-widget {
width: 100%;
padding: 10px 0;
order: 3;
min-width: 320px; }
}
@media (min-width: 500px) and (max-width: 719px) {
.header-widget {
width: auto;
margin: 0 auto; }
.widget .search-field {
min-width: 400px; }
}
@media (min-width: 720px) {
.header-widget {
width: auto; }
.widget .search-field {
min-width: 400px; }
}
@media (min-width: 1025px) {
.widget .search-field {
min-width: 500px; }
}
";
wp_add_inline_style( 'generate-style', $css );
}
add_action( 'wp_enqueue_scripts', 'hocban_responsive_search_styles', 20 );
//GeneratePress Responsive Search BarĐể áp dụng thì ae copy code trên rồi dán vào cuối file functions.php của theme/ child theme. Nếu không có child theme thì dán vào theme chính cũng được, theme cập nhật thì vào bài viết này copy dán lại là được.
Khá là đơn giản đúng không nào, bạn nào đang dùng theme GeneratePress và có đặt thanh menu ở giữa header như Hocban.vn thì tham khảo thử nhé !
