管理画面を使わず、Vue.js と WP REST API を使って、Webページから直接記事データ等を更新する

libe-irevo@master 2023年10月1日

WP REST API を使えばWebページから直接WordPress製サイトの記事データを更新することもできます。
ただしセキュリティ的には推奨されませんので、本記事の内容は社内システムのようにIPアドレスなどでアクセス制限されたWebサイトだけを対象とします。
その点だけご注意ください。
　
それでは具体的に、WordPressで制作された sample.com というサイトの記事ID：99の記事のタイトルを、Vue.js と WP REST API を使って別のサイトから更新してみます。
　
まず、更新される側のサイトsample.com で
sample.com/wp-json/myrest/v1/update/記事ID
に対して投げられたPOSTを受けてタイトルを更新するための REST API を新規で登録します。
テーマのfunctions.php に以下のように追加します。


/* REST APIの定義 */
add_action( 'rest_api_init', 'add_custom_endpoint' );
function add_custom_endpoint() {
    register_rest_route( 'myrest/v1', '/update/(?P<id>d+)', [
        [
            'methods' => 'POST',
            'permission_callback' => function() {
                return true; // ※ ここをtrueで返すことで誰でも更新できるようになります
            },
            'callback' => function( WP_REST_Request $request ) {
                $title = $request->get_param( 'title' );
                $id = $request['id'];
                $result = wp_update_post( [
                    'ID' => $id,
                    'post_type'   => 'post',
                    'post_status' => 'publish',
                    'post_title'  => $title
                ], true );
 
                if ( is_wp_error( $result ) ) {
                    return $result;
                } else {
                    return new WP_REST_Response( get_post( $result ) );
                }
            }
        ],
    ] );
}

この要領で、REST API はいくつでも追加できます。

これで sample.com 側の受け皿はできましたので、次は出し側のほうです。

Vue.js を使って WP REST API で取得した他サイトの投稿データを自サイトに表示する

を参考にしながら Vue.js のCDN参照の宣言をします。
そして、そのすぐ下に次のようにjavascriptを書きます。


<script>
    var vue = new Vue({
        el: "#app",
        data: {
            theTitle
        },
        methods: {
            editPost: function() {
                axios.post('https://sample.com//wp-json/myrest/v1/update/99', {
                    title: this.theTitle
                })
                .then(response => {
                    console.log(response)
                })
                .catch(error => {
                    console.log(error.response)
                });
            },
        },
    });
</script>

最後に入力のhtmlを以下のように書きます。

<input type="text" v-model="theTitle" >
<button type="button" v-on:click="editPost">更新</button>

これで、input にテキストを入れて「更新」ボタンを押すと、sample.com というサイトの記事ID：99の記事のタイトルが入力されたテキストの内容に更新されます。

Vue.js,Wordpress,Wordpressカスタマイズ,REST API

関連記事:

Latest Posts

LINE入門

JavaScript入門

JavaScript JSON編集（記事）

post categories

Post Tags