Question

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

我还尝试将搜索表单HTML复制到＆＃39;帖子＆＃39;页。这导致了同样的问题 - 被重定向到＆＃39; General＆＃39;设置页面。

Answer 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>

Answer 2

我不想为此使用AJAX，但我最终不得不这样做。我想出的解决方案是使用AJAX生成一个“重定向”＆＃39;使用add_query_arg()的URL和追加查询参数然后返回带有查询参数的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);
                }
            }
        });
    });

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

Wordpress插件选项页面搜索

2 个答案: