Search Issue in the theme

时间:2017-07-24 作者:The WP Intermediate

如果我的理解没有错的话☻

search.php 负责渲染部分和serachform.php 负责触发搜索事件,对吗?

示例searchform.php 可能看起来像这样→

<form role="search" method="get" class="search-form" action="<?php echo home_url( \'/\' ); ?>">
    <label>
        <span class="screen-reader-text"><?php echo _x( \'\', \'label\',\'simplisto\' ) ?></span>
        <input type="search" class="search-field"
            placeholder="<?php echo esc_attr_x( \'Search\', \'placeholder\',\'simplisto\' ) ?>"
            value="<?php echo get_search_query() ?>" name="s"
            title="<?php echo esc_attr_x( \'Search for:\', \'label\',\'simplisto\' ) ?>" />
    </label>
    <input type="submit" class="search-submit"
        value="<?php echo esc_attr_x( \'Search\', \'submit button\',\'simplisto\' ) ?>" />
</form>
现在我有了一个搜索设置,它通过jQuery弹出一个窗口,如下所示→

<div class="overlay" id="searchpop">
        <div class="class1">
            <div class="class2">
                <div class="class3">
                    <span class="close closepopup">X</span>
                    <div class="class 4">
                        <div class="class 5">
                            <i class="fa fa-search searchfield_icon" aria-hidden="true"></i>
                            <input type="text" class="searchfieldinput" placeholder="How can we help you ?">
                       </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!--End search popup -->
我如何集成,以便搜索开始工作?有点困惑。

1 个回复
最合适的回答,由SO网友:Johansson 整理而成

发送到的每个请求http://example.com/?s=string 将导致搜索查询,WordPress将使用search.php 渲染输出。请求来自哪里并不重要。

如果需要进行AJAX搜索,则必须编写自己的函数进行搜索,然后返回。我有个答案here, 全面解释如何在WordPress安装中实现AJAX。

按照说明编写您自己的查询,如下所示进行搜索:

$args =  array(
    \'s\' => $string // This is how a search functions
    \'posts_per_page\' => 4
);
$query = new WP_Query($args);
// Now save your query in an array using a loop and return it
要进行实时搜索,必须将操作绑定到keyupkeydown 使用jQuery。您还可以检查用户的输入值,因为搜索少于3个字符的字符串并不总是一个好主意。

因此,假设您正在跟踪链接的答案,并且输入的ID为my-ajax-search, 这将在用户每次输入超过3个字符的内容时发送AJAX请求,并将结果附加到ID为的元素中$ajax-results:

(function($){
    $(\'#my-ajax-search\').on(\'keyup\',function(){
        var searchString = $(this).value();
        // Check the input value\'s length
        if (searchString .length > 3) {
            $.get( \'http://example.com/wpnovice/ajax_search/\', {
                ajaxString: searchString
            }).done( function( response ) {
                if ( response != null) {
                    $.each(response, function(index, el) {
                        $(\'#ajax-results\').append(
                            \'<a href="\'+el.url+\'">\'+
                                \'<img src="\'+el.thumbnail+\'" alt="\'+el.title+\'"/>\'+
                                \'<span>\'+el.title+\'</span>\'+
                            \'</a>\'
                        );
                    });
                }
            });
        }
    });
})(jQuery);
现在,让我们在后端注册一个REST路由并返回搜索查询:

add_action( \'rest_api_init\', function () {
    //Path to AJAX endpoint
    register_rest_route( \'wpnovice\', \'/ajax_search/\', array(
            \'methods\' => \'GET\', 
            \'callback\' => \'wpnovice_ajax_search\' 
    ) );
});
function wpnovice_ajax_search() {
    if (isset($_GET[\'ajaxString\'])) {
        $string = $_GET[\'ajaxString\'];
        $ajax_search = new WP_Query(array( 
                        \'posts_per_page\' => 8,
                        \'s\' => $string,
                    ));
        if ($ajax_search->have_posts()){
            while ($ajax_search->have_posts()){
                $ajax_search->the_post();
                $data_inner[\'title\'] = get_the_title();
                $data_inner[\'url\'] = get_the_permalink();
                if (has_post_thumbnail()) {
                    $data_inner[\'thumbnail\'] = get_the_post_thumbnail_url(get_the_ID(),\'thumbnail\');
                }
                $search_result[$ajax_search->current_post] = $data_inner;
            }
            return $search_result;
        } else {
            return null;
        }
    } else {
        return __(\'You must enter a string to search\',\'text-domain\');
    }
}

结束

相关推荐

如何确保IS_Search()在QUERY_POST后返回FALSE

我知道我不应该使用query\\u帖子问题是我有一个程序已经做到了这一点。query_posts(\"\"); echo \"is_search():\" . is_search(); query_posts(\"s=kucing\"); echo \"is_search after():\" . is_search(); 现在,第一个回声返回为空。第二个返回1我想知道是否有一些全局变量可以设置为0,这样即使我设置了,也会返回falsequery_posts(\"s=ku