DEV Community

Rin
Rin

Posted on

Set up your own endpoint using the WP REST API.

Set up your own endpoint using the WP REST API.

Reference material

WP REST API Official Document
https://www.sofplant.com/blog/tech/wp-rest-api-tips/

From WordPress 4.7 onwards, we set up our own endpoint using [WP REST API] which became available as standard, and acquire and display data in cross domain.

Wordpress site hogehoge.jp

Assume that the site that receives and displays data is fugafuga.jp.

hogehoge.jp

Please describe it in functions.php.

<?php
//wordpressに用意されているアクションフックで独自APIを作成します。

add_action('rest_api_init', function() {
    register_rest_route( 'wp/v2', '/org_api', array(
        'methods' => 'GET',
        'callback' => 'org_api',
    ));
});
function org_api( ) {

    $contents = array();//return用の配列を準備
    $myQuery = new WP_Query();//取得したいデータを設定
    $param = array(
        'post_type' => 'blog',
        'posts_per_page' => 3,
        'order' => 'DESC'
    );
    $myQuery->query($param);
     if($myQuery->have_posts()):
         while ( $myQuery->have_posts() ) : $myQuery->the_post();
                $ID = get_the_ID();
                $title = get_the_title();
                array_push($contents, array(
                    "title" => $title,
                    "id" => $ID
                ));
         endwhile;
     endif;
     return $contents;// WP REST APIを利用するときはjsonで返ってくる様に設定されているので、json_encodeは必要ありません。
 }

Please visit http://hogehoge.jp/wp-json/wp/v2/org_api and check that json will come back.

If an error occurs at this point, there may be syntax errors on the php side.

Receive data.
When using in cross domain, specify jsonp as dataType.
fugafuga.jp

<p id="view_area"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
    $(function(){
            $.ajax({
            type: 'GET',
            url: 'http://hogehoge.jp/wp-json/wp/v2/org_api?_jsonp=callback',//コールバック関数名を指定する。 
            dataType: 'jsonp',
            jsonpCallback: 'callback',//コールバック関数名を指定する。
            success: function (jsonp) {
                    $(jsonp).each(function(index,el){
                    let id = (jsonp[index]['id']);
                    let title = (jsonp[index]['title']);
                        $('#view_area').append(
                        '<p>' + id + '</p>'
                         + '<p>' + title  + '</p>'
                        );
                });
            }
        });
    });
</script>

I think whether data display is possible with the above.
Processing etc. when data could not be acquired are omitted.
By using your own endpoint, data that is difficult to acquire a bit with the standard API, (custom posting etc.)
I think that it is possible to obtain flexible data by passing a favorite parameter to the request url and using it on the php side.

data : {
    'param' : 'key_word'
}

<?php
//wordpressに用意されているアクションフックで独自APIを取得します。

add_action('rest_api_init', function() {
    register_rest_route( 'wp/v2', '/org_api', array(
        'methods' => 'GET',
        'callback' => 'org_api',
    ));
});
function org_api( ) {
$param = $_GET['param'];
}

Thanks!

Top comments (0)