Trang chủ »  Mẹo - thủ thuật »  Hướng dẫn tạo chức năng search autocomplete trong wordpress

Hướng dẫn tạo chức năng search autocomplete trong wordpress

20/07/2021  -   141 views

Hôm nay mình sẽ hướng dẫn đến các bạn một bài viết liên quan về ajax củng như mẹo và thủ thuật trong wordpress. Theo mình thì chức năng Search autocomplete củng khá hay và cần thiết cho trang web của chúng ta, nó giúp trang web trở nên chuyên nghiệp và khách hàng cảm thấy thích thú hơn.

  • Tạo custom post type và taxonomy trong wordpress
  • Chuyển hướng người dùng đến URL trước đó sau khi login thành công
  • Hướng dẫn cách import/export dữ liệu giữ nội dung và hình ảnh
  • Hướng dẫn tạo chức năng search autocomplete trong wordpress
  • Hướng dẫn cách chuyển javascript ở header xuống footer trong wordpress
  • Chuyển hướng trang lỗi 404 về trang chủ
  • Hiện tại trong blog của mình thì củng có sử dụng chức năng này, nếu các bạn để ý thì mình đã làm nó lâu rồi.

    Nào !!!!. Chúng ta cùng đến cách chuẩn bị củng như cách thực hiện nó như thế nào nhé.

    Để thực hiện chức năng này, chúng ta làm như sau:

    Bước 1: Tạo form search trong file header.php hoặc ở nơi nào mà muốn. Đoạn code form search sẽ như thế này.

     

    <div class="header__search">
       <form action="<?php bloginfo('url'); ?>/" method="GET" role="form">
          <div class="main-input"><i class="fa fa-search"></i>
             <input type="text" id="form-search" name="s" autocomplete="off" placeholder="Từ khóa ...... " class="form-control input-search">
          </div>
       </form>
       <div id="load-form"></div>
    </div>
    • <div id=”load-form”></div> Là khu vực hiển thị kết quả trả về

     

    Bước 2: Sử dụng jquery để gọi ajax và gởi dữ liệu về server để xử lý, chúng ta dùng ajax để thao tác dữ liệu nhanh hơn. Các bạn có thể chèn đoạn code này ở footer hay file js tùy các bạn nha. Như mình thì sẽ tạo 1 file js mới dành cho ajax load data này.

     

    <script>
        var timeout = null; // khai báo biến timeout
        $(".main-input .input-search").keyup(function(){ // bắt sự kiện khi gõ từ khóa tìm kiếm
            clearTimeout(timeout); // clear time out
            timeout = setTimeout(function (){
               call_ajax(); // gọi hàm ajax
            }, 500);
        });
        function call_ajax() { // khởi tạo hàm ajax
            var data = $('.main-input .input-search').val(); // get dữ liệu khi đang nhập từ khóa vào ô
            $.ajax({
                type: 'POST',
                async: true,
                url: my_ajax_object.ajax_url, // Hàm đăng ký ajax
                data: {
                    'action' : 'Post_filters', 
                    'data': data
                },
                beforeSend: function () {
                },
                success: function (data) {
                    $('#load-form').html(data); // show dữ liệu khi trả về
                }
            });
        }
    </script>
    • Hàm keyup là một hàm trong jquery để bắt sự khi chúng ta gõ bàn phím

     

    Hàm đăng ký js ajax mình tạo ở trong file functions.php như sau. Các bạn tham khảo đoạn code ở dưới đây nhé !

     

    //---------------tạo js ajax
    function my_enqueue() {
    	wp_register_script('loadajax-js', get_template_directory_uri() .'/assets/js/myloadmore.js', array(), 1, 1, 1 );
    	wp_enqueue_script('loadajax-js');
        wp_localize_script( 'loadajax-js', 'my_ajax_object',
                array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
    }
    add_action( 'wp_enqueue_scripts', 'my_enqueue' );

    Bước 3: Nhận dữ liệu, xử lý và sau đó trả kết quả về về người dùng.Các bạn chèn đoạn code này vào file functions.php nhé. Nếu bạn chưa biết file functions.php ở đâu thì có thể tìm hiểu bài cấu trúc theme trong wordpress nha

     

    // Xử lý Ajax
    add_action('wp_ajax_Post_filters', 'Post_filters');
    add_action('wp_ajax_nopriv_Post_filters', 'Post_filters');
    function Post_filters() {
    	if(isset($_POST['data'])){
    		$data = $_POST['data']; // nhận dữ liệu từ client
    		echo '<ul>';
    		$getposts = new WP_query(); $getposts->query('post_status=publish&showposts=10&s='.$data);
    		global $wp_query; $wp_query->in_the_loop = true;
    		while ($getposts->have_posts()) : $getposts->the_post();
    		echo '<li><a href="'.get_the_permalink().'">'.get_the_title().'</a></li>'; 
    		endwhile; wp_reset_postdata();
    		echo '</ul>';
    		die(); 
    	}
    }

    Bước 4: Hiễn thị kết quả. Như các bạn để ý ở bước 2 mình có dùng $(‘#load-form’).html(data). Đây là nơi để show dữ liệu ra.

    Hiện tại mình hiễn thị dữ liệu theo thẻ <ul></ul>. Các bạn củng có thể thay đổi tùy biến tùy theo style của các bạn nhé. Và đừng quên thêm css vào cho đẹp nha.

     

    Tổng kết

    Trên đây là toàn bộ đoạn code củng như quá trình tạo ra một form search autocomplete trong wordpress. Các bạn đọc và làm theo nhé, kết quả sẽ như mong đợt nha :). Trong quá trình làm nếu bạn gặp thắc mắc thì hãy để lại comment cho mình nhé. Cảm ơn mọi người !!!

    Hãy tham gia group của mình để cùng xây dựng cộng đồng mạnh mẽ và follow các bài viết mới nhất về wordpress của mình nhé. Tvcdev WordPress Community 

    Thân ái, chào quyết thắng. See you !!!!

    5 1 đánh giá
    Article Rating
    Theo dõi
    Thông báo của
    guest
    0 Comments
    Phản hồi nội tuyến
    Xem tất cả bình luận

    Bài viết liên quan

    Mẹo - thủ thuật 10/05/2022

    Chuyển hướng người dùng đến URL trước đó sau khi login thành công

    Đoạn code sau đây sinh ra để giải quyết vấn đề sau khi login thành công thì sẽ điều hướng ng(...)

    WP Theme 25/09/2021

    Hướng dẫn tạo child theme trong wordpress

    Chào các bạn, hôm nay mình hướng dẫn đến các bạn một bài viết củng khá quan trọng trong wordp(...)

    Mẹo - thủ thuật 25/07/2021

    Hướng dẫn cách import/export dữ liệu giữ nội dung và hình ảnh

    Có nhiều cách để export/import dữ liệu chuyển từ website này sang website khác. Nếu các bạn dùng (...)

    WP Theme 04/06/2021

    Cấu trúc theme của wordpress

    Chào cả nhà, hôm nay mình viết bài về cách tìm hiểu cấu trúc theme cho wordpress. Để hiểu rõ cá(...)

    0
    Rất thích suy nghĩ của bạn, hãy bình luận.x