Wordpress 插件选项页面搜索答案

【问题标题】：Wordpress Plugin Options Page SearchWordpress 插件选项页面搜索
【发布时间】：2015-06-23 15:02:55
【问题描述】：

我正在构建一个 Wordpress 插件，并希望在我的选项页面中添加一个帖子搜索字段。我试图使用<input type="text" name="s" id="searchform"> 添加标准的 WP 搜索表单，但是当我单击“提交”时，我被重定向到“常规”设置页面。如何在我的插件选项页面中实现搜索表单并将帖子列表返回到同一页面？如果可能的话，我想在没有 AJAX 的情况下这样做。帖子列表标记相当复杂，必须用 JS 来实现它并不理想。

我还尝试在“帖子”页面上复制搜索表单 HTML。这会导致同样的问题——被重定向到“常规”设置页面。

【问题讨论】：

标签： php search wordpress

【解决方案1】：

输入文本框必须包含在表单中。这是一个默认的 html5 表单。只需用此替换您的代码，然后修复样式即可。

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
    <label>
        <span class="screen-reader-text"><?php echo _x( 'Search for:', 'label' ) ?></span>
        <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
    </label>
    <input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />
</form>

【讨论】：

抱歉，这并不完全有帮助。显然，表单必须包含在表单元素中，并且在操作中使用home_url() 会将我重定向到网站的前端。如问题所述，我需要留在提交表单的同一选项页面上的仪表板中。
您是否希望在管理面板（选项页面）内实现搜索功能？

【解决方案2】：

我不想为此使用 AJAX，但我最终不得不这样做。我想出的解决方案是使用 AJAX 生成“重定向”URL 并使用 add_query_arg() 附加查询参数，然后返回带有查询参数的 URL 并使用 window.location.href 重定向用户。该页面被重定向并附加了查询参数，然后在页面加载时WP_Query(); 使用包含查询参数的s= 参数运行。

可能不是最有效的方法，甚至不是正确的方法，但它可以完成工作。如果有人有其他解决方案，我很乐意听到。

示例 PHP 函数：

public function user_redirect_by_search() {
    $search_arr = array();

    parse_str($_POST['search_data'], $search_arr);

    $return = array();
    $post_type_arr = array();
    $post_type_count = 0;
    foreach($search_arr['post_type'] as $post_type) {
        $post_type_count++; 
        $post_type_arr[$post_type_count] = $post_type;
    }

    $redirect_url = add_query_arg( array('post_type' => implode(",", $post_type_arr), 'keywords' => $search_arr['s']),  $search_arr['page_url']);

    $return['status'] = 1;
    $return['redirect_url'] = $redirect_url;

    echo json_encode($return);
    die();
}

然后是 jQuery：

// Post keyword search
    jQuery('#searchform').on('submit', function(e) {
        e.preventDefault();

        var search_data = jQuery(this).serialize();

        jQuery.ajax({
            type: "POST",
            url: ajaxurl,
            dataType: 'json',
            data: {"action": "user_search", search_data},
            success: function(data) {
                if(data.status == 1) {
                    window.location.href = data.redirect_url;
                    //console.log(data);
                } else {
                    alert("Oops, an error occurred. Please try again or contact the plugin developer.");
                    console.log(data);
                }
            }
        });
    });

请注意，上述代码并未投入生产使用，只是为了显示手头问题的示例解决方案而编写/修改。

【讨论】：