Hộp nhập tìm kiếm trên thanh trượt sử dụng Flex Pro Theme

Trong bài viết này, tôi sẽ chỉ cho bạn cách thực hiện điều này. Chủ đề Flex Pro có thanh trượt CPT.

Bước 1: Điều hướng đến Trang tổng quan> Thanh trượt> Thêm trang mới và thay đổi chế độ WP Editor từ Trực quan thành Văn bản. Bây giờ, hãy tạo một bài đăng thanh trượt và đặt đánh dấu HTML sau vào WP Editor.

<div class="slider-search-form">
<form role="search" action="/" class="search-form" method="get">
<label class="screen-reader-text">Search site</label>
<input type="search" placeholder="Type and press Enter" name="s">
<input type="submit" value="Search"></form>
</div>

Vì vậy, màn hình Chỉnh sửa sẽ như thế này:

Lưu ý: Tôi trực tiếp đưa mã HTML vào trình soạn thảo. Nhưng bạn có thể tạo một shortcode cho biểu mẫu tìm kiếm và nhập shortcode này vào nội dung.

Bước 2: Đã thêm một số CSS trong tệp style.css cho một số kiểu. Tôi đã sử dụng CSS sau:

/* # Search Form on Slider
------------------------------------ */
.slider-search-form {
    background: rgba(0, 0, 0, 0.55);
    display: inline-block;
    margin: 0 auto;
    padding: 7px;
    width: auto;
}

.slider-search-form input[type="search"] {
    display: inline-block;
    padding: 8px 10px 10px;
    width: auto;
}