Thêm khung tìm kiếm vào dưới header của theme Paradise

Thêm khung tìm kiếm vào bên dưới header trên giao diện mobile của theme Paradise.

Nếu bạn đang sử dụng Paradise child theme do WP Căn bản phát triển thì chắc hẳn bạn cũng biết khung tìm kiếm trên menu chính (sticky menu) của nó sẽ bị ẩn trên giao diện mobile cũng như các màn hình có chiều ngang hẹp. Điều này do tính năng responsive menu mặc định của Genesis Framework gây nên. Nó sẽ mang tới khá nhiều bất tiện trong trường hợp website của bạn có nhiều bài viết, nhiều sản phẩm… và người dùng cần sử dụng nhiều đến tính năng tìm kiếm. Trong bài viết hôm nay, tôi sẽ hướng dẫn cho các bạn cách đơn giản nhất để khắc phục nó: chèn thêm một khung tìm kiếm vào bên dưới header trên giao diện mobile.

Tham khảo thêm:

• Tích hợp công cụ tìm kiếm Google cho theme Paradise
• Nâng cấp tính năng tìm kiếm mặc định của WordPress

Tại sao bạn nên chèn vào bên dưới header?

Lý do duy nhất cho việc này là vị trí dễ nhìn thấy, dễ thao tác:

• Nếu bạn chèn widget tìm kiếm vào khu vực “Phần đầu bên phải” (Header right – cạnh bên logo) thì bạn tự dưng sẽ mất một khu vực tốt để hiển thị logo quảng cáo kích thước 728 x 90 pixel.
• Nếu bạn chèn widget tìm kiếm vào khu vực sidebar hoặc footer thì chúng sẽ bị đẩy xuống phần dưới khi hiển thị trên mobile, rất khó để người dùng nhìn thấy.

Thêm khung tìm kiếm vào dưới header của giao diện mobile

Sẽ có 2 trường hợp xảy ra:

Đối với theme Paradise phiên bản 6.7.1 hoặc mới hơn

1. Hãy cập nhật theme Paradise lên phiên bản 6.7.1 hoặc mới hơn.

2. Truy cập Giao diện => Tùy biến => Thiết lập giao diện => Tối ưu trải nghiệm => Chuyển mục Thêm khung tìm kiếm bên dưới header sang trạng thái Có rồi lưu lại và kiểm tra kết quả.

Đối với theme Paradise phiên bản 6.7.0 hoặc cũ hơn

1. Đầu tiên, các bạn cần phải cài đặt và kích hoạt một plugin có tên là Genesis Simple Hooks (download). Đây là plugin do chính StudioPress phát triển nhằm hỗ trợ người dùng chèn mọi thứ mà họ cần vào bất cứ vị trí nào trên giao diện.

2. Truy cập Genesis => Simple Hooks => Tìm mục genesis_before_content Hook và chèn đoạn code sau đây vào bên trong đó:

<div class="mobile-search-only"><?php get_search_form(); ?></div>

Tick vào mục Execute PHP on this hook?. Đoạn code sẽ có tác dụng chèn một khung tìm kiếm vào ngay bên dưới menu phụ (dưới header) của theme Paradise. Các bạn cũng có thể chèn vào bất cứ vị trí nào tùy thích. Xem vị trí của các hook trong Genesis tại đây.

Click vào nút Save Changes để lưu lại.

3. Để khung tìm kiếm bên dưới header chỉ hiển thị trên giao diện mobile và các màn hình nhỏ hơn (khi khung tìm kiếm trên menu bị ẩn), các bạn thêm đoạn code CSS sau đây vào Appearance => Customize => Additional CSS. Không nên thêm trực tiếp vào style.css của child theme vì nó sẽ bị xóa mất khi update.

.mobile-search-only {
    display: none;
}

input.search-form-submit {
    display: none !important;
}

@media only screen and (max-width: 1023px) {
    .mobile-search-only {
        display: block;
        margin-bottom: 30px;
    }

    .paradise-landing .mobile-search-only {
        display: none;
    }
}

Lưu lại và kiểm tra kết quả:

Thật đơn giản phải không nào? Chúc các bạn thành công!

Nếu bạn thích bài viết này, hãy theo dõi blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất nhé. Cảm ơn rất nhiều. :)