Question

我想创建一个自定义搜索页面，可以在其中过滤结果，如下面的屏幕截图所示：

目前，我的问题是列表中的所有项目都归为一个类别，而我想根据不同的类别（例如， “设备功能”，“手机操作系统”等。到目前为止，我已经在下面的PHP代码段中进行了编写：

  private Date lastDayOfMonth(Date month) {
    Date lastDay = (Date) month.clone();
    CalendarUtil.addMonthsToDate(lastDay, 1);
    CalendarUtil.setToFirstDayOfMonth(lastDay);
    CalendarUtil.addDaysToDate(lastDay, -1);
    GWT.log("lastDay :: "+lastDay);
    return lastDay;
}

Answer 1

我已经创建了自己的自定义插件，用于搜索和过滤搜索结果。

1。插件文件（index.php）

<?php
/*
Plugin Name: Search and Filter
Plugin URI: http://wordpress.org
Description: Search and Filter
Author: Naveen
Version: 1.0
*/

class SearchAndFilter{
    public function __construct()
    {
        add_action('wp_enqueue_scripts', array($this, 'AddScript'));
        add_action('wp_ajax_affordance_search_data' , array($this, 'AffordanceSearchData'));
        add_action('wp_ajax_noprev_affordance_search_data' , array($this, 'AffordanceSearchData'));

        add_action('wp_ajax_affordance_search_page_data' , array($this, 'AffordanceSearchPageData'));
        add_action('wp_ajax_noprev_affordance_search_page_data' , array($this, 'AffordanceSearchPageData'));
        add_shortcode('Search', array($this, 'CreateShortcode'));
    }

    public function AddScript()
    {
        wp_enqueue_script('saf-app', plugin_dir_url(__FILE__) . '/js/app.js', array('jquery'));
        wp_localize_script('saf-app', 'my_ajax_object', array('ajaxurl' => admin_url('admin-ajax.php')));
    }   

    function CreateShortcode($atts)
    {
        ob_start();
        $keyword = $_REQUEST['s'];
    ?>
        <form action="<?php echo home_url('/'); ?>" method="get">
            <input type="text" name="s" id="search_keyword" value="<?php echo $keyword; ?>" class="form-control search-input" placeholder="Search..." />
        </form>
        <div class="search-suggestion"></div>
    <?php 
        $output = ob_get_clean();
        return $output;
    }

    // search autocomplete
    function AffordanceSearchData()
    {
        $args = array('post_type'=>array('post'),'status'=>'publish');
        $output = '';
        $output = '<ul class="grid effect-3" id="grid">';

        if(isset($_POST['keyword']) && !empty($_POST['keyword']))
        {
            $args['s'] =  $_POST['keyword'];
        }

        $wpPosts = new WP_Query($args);

        if($wpPosts->have_posts()) : 
        while($wpPosts->have_posts()) :
        $wpPosts->the_post();
        $output .= '<li class="col-md-4 col-sm-6 col-xs-12"><a href="'.get_permalink().'">'.get_the_title().'</a></li>';
        endwhile;
        endif;
        $output .= '<li><a href="'.home_url().'?s='.$_POST['keyword'].'">See All Result of '.$_POST['keyword'].' </a></li>';
        $output .= '</ul>';
        wp_reset_query();
        echo $output; die;
    }

    // filters search data
    function AffordanceSearchPageData()
    {
        $args = array('post_type'=>'post','status'=>'publish');
        $output = '';
        $output .= '<ul class="grid effect-3" id="grid">';
        if(isset($_POST['keyword']) && !empty($_POST['keyword']))
        {
            $args['s'] =  $_POST['keyword'];
        }

        if(isset($_POST['page_number']) && !empty($_POST['page_number']) && $_POST['page_number'] != 1){
            $args['paged'] =  $_POST['page_number'];
        }

        if(isset($_POST['categories']) && !empty($_POST['categories'])){
            $args['cat'] =  $_POST['categories'];
        }

        $wpPosts = new WP_Query($args);

        if($wpPosts->have_posts()) : 
        while($wpPosts->have_posts()) :
        $wpPosts->the_post();

        $output .= '<li class="col-md-4 col-sm-6 col-xs-12">
                        <h3 class="resources-content-heading"><a href="'.get_permalink().'">'.get_the_title().'</a></h3>
                        <p class="resources-content-description">'.get_the_excerpt().'</p>
                        <div class="resources-action-area">
                            <a href="'.get_permalink().'" class="more-link">Read More <i class="fa fa-angle-right" aria-hidden="true"></i></a>
                        </div>
                    </li>';
        endwhile;
        else :
            $output .= "No records";
        endif;
        wp_reset_query();
        $output .= the_posts_pagination();
        $output .= '</main>';
        echo $output; die;
    }
}

new SearchAndFilter();

2。 Js文件（app.js）

jQuery(document).ready(function ($) {
    // on searching keyword
    $('#search_keyword').keyup(function () {
        var inputvalue = $(this).val();

        if (inputvalue != '') {
            GetSuggestion(inputvalue);
        }
    });

    // on pagination click
    $('.ajaxclick').on('click', "a", function () {
        var page_number = $(this).attr('data-page-num');
        //console.log(page_number);
        var current_page = $('.ajaxclick .current').attr('data-page-num');
        var keyword = $('#search_keyword').val();
        GetSearchData(keyword, page_number);
    });

    // on category select
    $('.category_check').on('click', function () {
        var page_number = 1;
        var keyword = $('#search_keyword').val();
        var blogWrapper = $('.blogWrapper');
        var catTagHTML = '<ul>';
        blogWrapper.find('input.category_check:checked').each(function () {
            catTagHTML += '<li><a class="exclude_cat" href="javascript:void(0)" data-cat-id="' + $(this).attr('value') + '">' + $(this).attr('data-name') + '</a></li>';
        });
        $('#selected-category-tags').html(catTagHTML);
        GetSearchData(keyword, page_number);
    });

    // on tag click
    $('#selected-category-tags').on('click', "a.exclude_cat", function () {
        var page_number = 1;
        var keyword = $('#search_keyword').val();
        var catID = $(this).attr('data-cat-id');
        $('#cat' + catID).attr('checked', false);
        $(this).closest('li').remove();
        GetSearchData(keyword, page_number);
    });

    function GetSuggestion(keyword) {
        var formData = {
            'action': 'affordance_search_data',
            'keyword': keyword
        }

        $.ajax({
            type: "post",
            url: my_ajax_object.ajaxurl,
            data: formData,
            success: function (data) {
                setTimeout(function () {
                    $('.search-suggestion').html(data);
                }, 1000);
            }
        });
    }

    function GetSearchData(keyword, page_number) {
        if (page_number == '') {
            page_number = 1;
        }

        var blogWrapper = $('.blogWrapper');
        var categories = [];

        blogWrapper.find('input.category_check:checked').each(function () {
            categories.push($(this).attr('value'));
        });

        var formData = {
            'action': 'affordance_search_page_data',
            'page_number': page_number,
            'keyword': keyword,
            'categories': categories,
        }

        $.ajax({
            type: "post",
            url: my_ajax_object.ajaxurl,
            data: formData,
            success: function (data) {
                setTimeout(function () {
                    $('.site-main').html(data);
                }, 1000);
            }
        });
    }
});

在这里，我正在使用ajax实现此功能。

如何在Wordpress中创建自定义搜索和过滤页面？

1 个答案: