Wordpress 插件：使用 REST api

Question

在开始之前，我想告诉你们，我没有任何与 Wordpress 相关的经验。我之前确实在 PHP 和 Codeigniter 工作过。

用户案例

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

大致应该是这样的。

到目前为止我有什么 显示在 Wordpress 管理面板中的空插件。

问题

如何为这个插件创建前端？
如何以及在何处创建表单操作？
如何访问表单操作？

我have/know到目前为止

我知道有一些操作挂钩可以通过创建如下内容将您的内容放在页眉和页脚中：

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

Answer 1

在你的空插件 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]') ?>

相同的结果

解释：

当我们添加 [searchbox] 短代码时，它会通过 get_searchbox() 函数处理并替换为表单。
在 jQuery 代码中在表单 submit 上我们发送了一个 action : get_search（在 wp_localize_script 中定义）。
服务器通过 wp_ajax_get_search 接收该请求并处理 get_search_results() 和 return 输出。
In jQuery done(function(r){ r 是服务器的响应。使用该数据来操纵您的 html.

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

理解后，根据需要修改动作和响应。

有用的文章：Daniel's, wpmudev

Wordpress 插件：使用 REST api

Wordpress plugin: Working with REST api

rest

wordpress

plugins

frontend