DEV Community

Rin
Rin

Posted on

2 1

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!

AWS Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (0)

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay