WordPress插件：使用REST API

Posted 2021-04-10

在开始之前，我想告诉大家，我没有任何与Wordpress相关的经验。 我以前曾经在php和Codeigniter中工作过。

用户案例

• 用户以表格（空调等）的形式输入首选功能。
• 当用户提交表单时，该功能将发送到REST API。
• REST API的结果（带有AC的汽车列表）将显示在页面上。

它应该大致看起来像这样。

到目前为止，我所拥有的WordPress管理面板中显示的一个空插件。

问题（S）

• 如何为该插件创建前端？
• 如何以及在哪里创建表单动作？
• 如何访问表单操作？

到目前为止我所知道的

我知道有些动作挂钩会通过创建类似以下内容的内容将您的内容放在页眉和页脚中：

<php add_action('wp_footer', 'mp_footer'); ?>

答案

在您的空插件php文件中放置以下内容：

function get_search_results(){
    $args = array( 's' => $_GET['term'] );
    $query = new WP_Query( $args );

    if ( $query->have_posts() ) {
        while ( $query->have_posts() ) {
            $query->the_post();
            echo '<li>'.get_the_title().'</li>';
        }
    } else {
        echo "Nothing Found";
    }
    die();
}
add_action( 'wp_ajax_get_search', 'get_search_results' );
add_action( 'wp_ajax_nopriv_get_search', 'get_search_results' );

function get_searchbox( $atts ){
    ob_start(); ?>
        <form id="searchform">
            <input type="text" id="searchbox">
            <button type="submit">Search</button>
        </form>
        <ul id="search-result"></ul>
    <?php
    $output = ob_get_clean();
    return $output;
}
add_shortcode( 'searchbox', 'get_searchbox' );

function add_search_script() {
    wp_enqueue_script( 'search', plugins_url( '/search.js' , __FILE__ ), array( 'jquery' ) );
    wp_localize_script( 'search', 'search_ajax', array( 'url'=>admin_url( 'admin-ajax.php' ), 'action'=>'get_search' ) );
}

add_action( 'wp_enqueue_scripts', 'add_search_script' );

在您插件的目录中，创建一个新的javascript文件-search.js并将其放置在此位置：

jQuery(function($){
    $('#searchform').submit(function(e){
        e.preventDefault();
        $.ajax({
            url: search_ajax.url,
            data: { 'action': search_ajax.action, 'term': $('#searchbox').val() }
        }).done(function(r) {
            $('#search-result').html(r);
        });
    });
});

现在，您可以在wordpress页面中使用简码[searchbox]来获取您的搜索框。 在PHP中，您可以通过<? echo do_shortcode('[searchbox]') ?>获得相同的结果<? echo do_shortcode('[searchbox]') ?> <? echo do_shortcode('[searchbox]') ?>

说明：

1. 当我们添加[searchbox]短代码时，将通过get_searchbox()函数对其进行处理并替换为表单。
2. 在jQuery代码中，在表单submit我们正在发送一个action ： get_search （在wp_localize_script定义）。
3. 服务器通过wp_ajax_get_search接收该请求，并处理get_search_results()并返回输出。
4. 在jQuery中done(function(r){ r是服务器的响应。使用该数据来处理您的html。

action是wordpress中REST api的重要组成部分。 我们不需要URL。 相反，我们定义一个动作，并为该动作返回响应。

了解这一点后，请根据需要修改操作和响应。

有用的文章： Daniel's ， wpmudev