Tạo biểu mẫu tìm kiếm cho các trường tùy chỉnh


11

Tôi đã xây dựng một chủ đề cho một đại lý xe hơi. Mỗi chiếc xe là một loại bài tùy chỉnh ("phương tiện") và có khoảng 12 trường tùy chỉnh với những thứ như Make, Model, Mileage, Fuel Type, v.v.

Vì vậy, về cơ bản trên trang chủ tôi muốn có một mẫu tìm kiếm có danh sách thả xuống cho Make & Model và chứa bất kỳ Makes hoặc Model nào có sẵn.

Tôi cũng muốn nó có 2 tùy chọn cho Năm, vì vậy người dùng cuối có thể chọn "2006" và "2012" và kết quả tìm kiếm chứa tất cả các phương tiện có năm giữa hai số đó.

Có một plugin ngoài đó có thể làm điều này ??

Cảm ơn vì sự giúp đỡ .. điều này đã khiến tôi phát điên trong nhiều giờ !!!!


Tôi nghĩ rằng bạn có thể sử dụng trình cắm này để bổ sung cho bạn wordpress.org/plugins/wp-custom-fields-search
DINESH BHIMANI

Cảm ơn .. Nhưng điều đó không giải thích làm thế nào để thực sự tạo ra mẫu tìm kiếm. Ý tôi là tôi có thể lập trình biểu mẫu trong HTML, nhưng làm thế nào để tôi thực sự làm cho nó hoạt động?!
absdigital

Câu trả lời:


16

______UPDATE_____
Mặc dù tôi ngày càng nhận được nhiều phiếu bầu và giải pháp hoạt động, nhưng câu trả lời của cybmeta thực sự là câu trả lời hay và theo cách của WordPress. Bạn chắc chắn nên thử điều đó.

Bước 1

Bắt đầu bằng cách tạo Biểu mẫu tìm kiếm nâng cao mà bạn muốn người dùng của mình sẽ tương tác với trang web và lưu nó với một tên (nghĩa là tôi đã lưu nó dưới dạng advanced-searchform.php- nhưng đừng lưu nó với searchform.phpbiểu mẫu tìm kiếm mặc định của WordPress ):

<form method="get" id="advanced-searchform" role="search" action="<?php echo esc_url( home_url( '/' ) ); ?>">

    <h3><?php _e( 'Advanced Search', 'textdomain' ); ?></h3>

    <!-- PASSING THIS TO TRIGGER THE ADVANCED SEARCH RESULT PAGE FROM functions.php -->
    <input type="hidden" name="search" value="advanced">

    <label for="name" class=""><?php _e( 'Name: ', 'textdomain' ); ?></label><br>
    <input type="text" value="" placeholder="<?php _e( 'Type the Car Name', 'textdomain' ); ?>" name="name" id="name" />

    <label for="model" class=""><?php _e( 'Select a Model: ', 'textdomain' ); ?></label><br>
    <select name="model" id="model">
        <option value=""><?php _e( 'Select one...', 'textdomain' ); ?></option>
        <option value="model1"><?php _e( 'Model 1', 'textdomain' ); ?></option>
        <option value="model2"><?php _e( 'Model 1', 'textdomain' ); ?></option>
    </select>

    <input type="submit" id="searchsubmit" value="Search" />

</form>

Sau đó gọi biểu mẫu vào mẫu của bạn như sau:

<?php get_template_part( 'advanced', 'searchform' ); ?>

Bây giờ biểu mẫu tìm kiếm của bạn đã sẵn sàng và bây giờ bạn có thể sử dụng biểu mẫu tìm kiếm và có thể đưa người dùng nhập vào URL.

Bước 2

Những gì bạn chỉ cần là: truy vấn cơ sở dữ liệu và truy vấn loại bài đăng và các trường tùy chỉnh của nó theo truy vấn tìm kiếm . Hãy nhớ truy vấn tìm kiếm của bạn bây giờ là URL bạn nhận được sau khi gửi biểu mẫu. Bây giờ yêu cầu WordPress tải trang kết quả tìm kiếm tùy chỉnh của bạn khi biểu mẫu được gửi. Đặt chức năng sau vào của bạn functions.phpđể nó sẽ kích hoạt mẫu tìm kiếm tùy chỉnh của bạn thay vì mặc định search.php:

<?php
function wpse_load_custom_search_template(){
    if( isset($_REQUEST['search']) == 'advanced' ) {
        require('advanced-search-result.php');
        die();
    }
}
add_action('init','wpse_load_custom_search_template');
?>

Tôi đã mang mã ở đâu đó từ WPSE (tôi quên gốc), nhưng có tranh cãi khi sử dụng mã ở trên. Nhưng nó thực sự hoạt động ( tất nhiên là xin lỗi ).

Kiểm tra một cách khác @GM đề xuất.

Bước 3

Tạo một tệp mới và lưu nó với advanced-search-result.php(vì chúng tôi đã sử dụng tên này trong functions.php) và bây giờ bạn đang rảnh - rõ ràng. Khái niệm là:

  • Lấy dữ liệu từ URL,
  • Sử dụng một đơn giản WP_Query()(nếu truy vấn của bạn phức tạp thì sử dụng $wpdbtruy vấn),
  • Truyền các lệnh trong truy vấn, tìm nạp dữ liệu từ db và
  • Hiển thị kết quả [s]

Một mẫu có thể là:

<?php
// Get data from URL into variables
$_name = $_GET['name'] != '' ? $_GET['name'] : '';
$_model = $_GET['model'] != '' ? $_GET['model'] : '';

// Start the Query
$v_args = array(
        'post_type'     =>  'vehicle', // your CPT
        's'             =>  $_name, // looks into everything with the keyword from your 'name field'
        'meta_query'    =>  array(
                                array(
                                    'key'     => 'car_model', // assumed your meta_key is 'car_model'
                                    'value'   => $_model,
                                    'compare' => 'LIKE', // finds models that matches 'model' from the select field
                                ),
                            )
    );
$vehicleSearchQuery = new WP_Query( $v_args );

// Open this line to Debug what's query WP has just run
// var_dump($vehicleSearchQuery->request);

// Show the results
if( $vehicleSearchQuery->have_posts() ) :
    while( $vehicleSearchQuery->have_posts() ) : $vehicleSearchQuery->the_post();
        the_title(); // Assumed your cars' names are stored as a CPT post title
    endwhile;
else :
    _e( 'Sorry, nothing matched your search criteria', 'textdomain' );
endif;
wp_reset_postdata();
?>

Vì vậy, đây là điều cuối cùng của bạn. Nhưng vẫn còn nhiều thách thức:

  • Giá trị thay thế - một tìm kiếm nâng cao có thể được thực hiện với TẤT CẢ các trường hoặc BẤT K of trường nào, vì vậy bạn phải đảm bảo Truy vấn lấy tất cả các kết quả theo tìm kiếm và dữ liệu. Bạn có thể sử dụng $wpdbtruy vấn SQL tùy chỉnh cho kết quả tìm kiếm phức tạp và đó sẽ là MySQL thuần túy - WordPress không có gì ở đó.
  • Khử trùng & Xác nhận - trường văn bản và textarea rất dễ bị tổn thương có thể gây ra hành vi mal cho trang web của bạn. Vì vậy, truyền dữ liệu thô sẽ không an toàn, bạn sẽ cần Vệ sinh và Xác thực chúng trước khi chuyển vào truy vấn db. ( Xác thực và xác thực dữ liệu với WordPress - TutsPlus )
  • Thiết kế - bạn có thể chọn mẫu page.php(hoặc search.php) và tạo trang này trên cơ sở đó.

Vì vậy, bạn đã có ý tưởng, bây giờ đến lượt bạn khám phá và khám phá con đường . Hãy nhớ rằng, cách của mọi người là khác nhau. Làm cho bạn, để tôi có thể theo bạn. :)


Cảm ơn bạn đã dành thời gian, rất tử tế của bạn. Bạn có biết làm thế nào tôi có thể có nó để menu thả xuống cho "Makes" sẽ tự động hiển thị bất kỳ thực hiện nào đã được nhập vào một trong các bài đăng xe?
absdigital

Sẽ vui mừng nếu nó làm việc cho bạn. :)
Hồi giáo Mayeenul

Bạn có biết làm thế nào tôi có thể có nó để menu thả xuống cho "Makes" sẽ tự động hiển thị bất kỳ thực hiện nào đã được nhập vào một trong các bài đăng xe?
absdigital

sử dụng một WP_Query()tham số trường tùy chỉnh và lặp kết quả để hiển thị <option>s.
Hồi giáo Mayeenul

Tôi muốn thấy "tìm kiếm nâng cao" này được thực hiện bằng cách sử dụng pre_get_postshook và không phải là một vòng lặp thứ cấp.
cybmeta

23

Mặc dù câu trả lời của @ MayeenulIslam có thể hoạt động, tôi nghĩ cách chính xác để thực hiện tìm kiếm nâng cao là sử dụng pre_get_postsmóc hành động.

Bước 1: Mẫu tìm kiếm

Bước này tương đương với bước 1 trong câu trả lời khác, chỉ cần thay đổi idcác namelĩnh vực ( <input type="text" ...>sử dụng cho các tìm kiếm để "s" , vì vậy nó sẽ được sử dụng trực tiếp cho như lĩnh vực tìm kiếm. Lưu mã này trong advanced-searchform.phptrong thư mục chủ đề của bạn. Sau đó, sử dụng get_template_part( 'advanced', 'searchform' );để tải nó ở nơi bạn muốn nó xuất hiện trong chủ đề của bạn:

<?php /**`advanced-searchform.php`*/ ?>
<form method="get" id="advanced-searchform" role="search" action="<?php echo esc_url( home_url( '/' ) ); ?>">

    <h3><?php _e( 'Advanced Search', 'textdomain' ); ?></h3>

    <!-- PASSING THIS TO TRIGGER THE ADVANCED SEARCH RESULT PAGE FROM functions.php -->
    <input type="hidden" name="search" value="advanced">

    <label for="s" class=""><?php _e( 'Name: ', 'textdomain' ); ?></label><br>
    <input type="text" value="" placeholder="<?php _e( 'Type the Car Name', 'textdomain' ); ?>" name="s" id="name" />

    <label for="model" class=""><?php _e( 'Select a Model: ', 'textdomain' ); ?></label><br>
    <select name="model" id="model">
        <option value=""><?php _e( 'Select one...', 'textdomain' ); ?></option>
        <option value="model1"><?php _e( 'Model 1', 'textdomain' ); ?></option>
        <option value="model2"><?php _e( 'Model 2', 'textdomain' ); ?></option>
    </select>

    <input type="submit" id="searchsubmit" value="Search" />

</form>

Bước 2: Thêm bộ lọc vào truy vấn tìm kiếm

add_action( 'pre_get_posts', 'advanced_search_query' );
function advanced_search_query( $query ) {

    if ( isset( $_REQUEST['search'] ) && $_REQUEST['search'] == 'advanced' && ! is_admin() && $query->is_search && $query->is_main_query() ) {

        $query->set( 'post_type', 'vehicle' );

        $_model = $_GET['model'] != '' ? $_GET['model'] : '';

        $meta_query = array(
                            array(
                                'key'     => 'car_model', // assumed your meta_key is 'car_model'
                                'value'   => $_model,
                                'compare' => 'LIKE', // finds models that matches 'model' from the select field
                            )
                        )
        );
        $query->set( 'meta_query', $meta_query );

    }
}

Bước 3: Tạo khuôn mẫu (tùy chọn)

Với phương pháp này, mẫu tìm kiếm mặc định của WordPress sẽ được sử dụng để lọc kết quả mà không cần truy vấn phụ. Nếu bạn muốn sử dụng một mẫu khác cho tìm kiếm nâng cao, bạn có thể sử dụng template_includebộ lọc. Ví dụ: nếu bạn muốn sử dụng advanced-search-template.phptệp làm mẫu cho kết quả từ biểu mẫu tìm kiếm nâng cao:

add_action('template_include', 'advanced_search_template');
function advanced_search_template( $template ) {
  if ( isset( $_REQUEST['search'] ) && $_REQUEST['search'] == 'advanced' && is_search() ) {
     $t = locate_template('advanced-search-template.php');
     if ( ! empty($t) ) {
         $template = $t;
     }
  }
  return $template;
}

3
Cảm ơn bạn rất nhiều vì cách của WordPress. Chỉ cần làm việc với cái này và nó thật tuyệt vời. :)
Mayeenul Hồi giáo
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.