新しいWordPressRESTAPIについて知っておくべきこと

公開: 2018-01-25

WordPress 4.4は、WordPress RESTAPIをコアの一部にしました。

この記事では、この開発がWordPress（および一般的なテーマとプラグインの作成者）にとって巨大である理由を説明し、WordPressと他のアプリ間の通信プロセスを簡素化するためにそれを使用する方法を示します。

WordPress Rest APIを使用すると、WordPress WebサイトでデフォルトのWordPress管理インターフェイスを削除して、さまざまなテクノロジースタックを使用して完全にパーソナライズされた管理またはコンテンツエクスペリエンスを提供することもできます。

カリプソ– WordPressのデスクトップアプリ–はこの美しい例です。 Calypsoは、WordPress RESTAPIを使用してWordPress.comとコアの間で通信する単一のJavascriptアプリケーションを使用して構築されています。

WordPress REST APIは現在WordPressコアの不可欠な部分であるため、開発者はそれがどのように機能するか、そしてWordPressと対話するためにそれが開く新しい可能性をうまく理解することが重要です。

そのため、このWordPress REST APIの概要とチュートリアルでは、WP REST APIの基本を説明し、それを使用してHeroic Knowledgeの最新の投稿を表示する（プラグイン）ウィジェットを作成する方法を示します。基本カスタム投稿タイプ。

WordPress RESTAPIの入門書

WordPress REST APIを使用して（プラグイン）ウィジェットを作成する方法を理解する前に、まずこの用語をもう少しよく理解しましょう。

では、APIは何の略ですか？

APIはApplicationProgramInterfaceの略です。

簡単に言うと、これは2つの異なるアプリケーション間の通信手段です。

動作中のAPIの一般的な例は、多くのWebサイトが表示するTweetDeckです。このTweetDeckの表示は、WebサイトがTwitterからデータを取得して表示するAPIを介して可能になります。

RESTはどうですか？

RESTは、 REpresentational StateTransferの略です。

RESTは、APIを構築するためのHTMLベースのアーキテクチャスタイルです。 RESTfulアーキテクチャは、HTTPリクエストを使用して、2つのソース間でデータを投稿、読み取り、更新、および削除します。

したがって、REST APIとは、基本的にHTMLメソッドを使用して通信するAPIを意味します。

そして、JSONはどうですか？

WordPress REST APIは、WordPress JSON RESTAPIと同じ形式です。

JSON（またはJavascript Object Notation ）は、（プラットフォームが異なる言語を使用している場合でも）異なるプラットフォーム間でシームレスにデータを交換するために使用される最小限のテキストベースのデータ交換形式です。

JSONは、XMLベースのソリューションの軽量な代替手段であり、帯域幅に制限のあるモバイルアプリに最適です。

WordPress RESTAPIを使用する理由

WordPress REST APIの何がそれほど例外的で、なぜそれを気にする必要があるのか疑問に思われるかもしれません。

ええと…WordPressREST APIを使用すると、WordPressでより多くのことができるようになります。

例えば：

知っている任意の言語でアプリケーションを作成し、WordPressサイトと対話できるようにします（アプリの言語がHTMLメソッドを使用し、JSONを解釈できる必要があるという2つの要件のみ）
完全にパーソナライズされた管理およびコンテンツエクスペリエンスを設計する
WordPress上でシングルページアプリケーションを開発する

そして、はるかに。

REST APIを使用して作成できる可能性のあるすべてのアプリケーション/インターフェース/エクスペリエンスをリストアップすることは、ほとんど不可能です。 WordPressのRESTAPIハンドブックには正しく次のように書かれています。

私たちの想像力は、WordPress RESTAPIで実行できることの唯一の制限です。肝心なのは、HTTPを介してWordPressにデータを出し入れするための構造化された拡張可能でシンプルな方法が必要な場合は、おそらくRESTAPIを使用することです。

しかし、理論を理解するよりも実装が常にはるかに難しいことを私は知っています。

それでは、WordPress REST APIを使用してカスタム（プラグイン）ウィジェットを作成する方法についての簡単なチュートリアルを見てみましょう。

WordPress RESTAPIの使用方法に関するクイックチュートリアル

KnowAllヘルプセンターテーマやHeroicKnowledge Baseプラグインを使用した独自のテーマなど、ナレッジベース製品の1つをお持ちの場合は、サポート記事のナレッジベースを備えたサイトがあります。このチュートリアルの原則に従うためにこれらの製品を使用する必要はありませんが、独自の設定に合わせてコードを調整する必要があることに注意してください。

では、ローカル設定の準備はできていますか？

素晴らしい！

次に、別のサーバーに別のWebサイトを作成します。

では、なぜこの2番目のWebサイトを作成するのでしょうか。

これは、WordPress REST APIを実装してこの2番目のWebサイトと通信するためです。ご存知のとおり、WordPress REST APIは、会話を実現するためのものです。

そこで、WordPress REST APIを使用して、2つのWebサイトが相互に通信し、データを交換できるようにします。

そして、チュートリアルの最終目標は次のとおりです。

ヘルプセンターのWebサイトから最新の公開されたナレッジベースの記事を選択し、新しいWebサイトのサイドバーにあるウィジェットに表示します。

この記事では、すべてのナレッジベース記事を含むヘルプセンターWebサイトを「ローカル」Webサイトと呼び、ウィジェットを表示する新しいWebサイトを「外部」Webサイトと呼びます。

この時点で、1）「ローカル」ヘルプセンターのWebサイト、および2）別のサーバーに設定された新しい「外部」Webサイトがあると想定しています。

そして、チュートリアルの最後に、カスタム（プラグイン）ウィジェットを使用して、（WordPress REST APIを介して）新しい「外部」Webサイトに「ローカル」Webサイトのナレッジベース記事のリストを正常に表示できたはずです。

これで、開始する準備が整いました。

ステップ1：次のボイラープレートコードを新しい.phpファイルにコピーして、「外部」Webサイトのプラグインフォルダーに保存することから始めます。

このWordPressRESTAPIチュートリアルの完全なコードはこちらをご覧ください。

/**
* HeroThemes Example Widget
*/
class My_Widget extends WP_Widget { 

    //set up widget
    public function __construct() { 

        $widget_ops = array( 
                        'classname' => 'rest-api-test-widget',
                        'description' => 'This example provides a framework for how we will build our widget'
        );

        parent::__construct( 'my_widget', 'My Widget', $widget_ops );
    }


    /**
     * Outputs the content of the widget
     * @param array $args
     * @param array $instance
     */

    public function widget( $args, $instance ) {
        //outputs the content of the widget
        echo $args['before_widget'];

        if( !empty( $instance['title'] ) ) {
          echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'], $instance, $this->id_base ) . $args['after_title'];

        }

        // Main Widget Content Goes Here

        echo $args['after_widget'];
    }


    /**
     * Outputs the options form on admin
     * @param array $instance The widget options
     */

    public function form( $instance ) {
        //outputs the options form on admin
        $title = ( !empty( $instance['title'] ) ) ? $instance['title'] : ''; ?>

        <label for="<?php echo $this->get_field_name( 'title' ); ?>">Title: </label>

        <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" 
        name="<?php echo $this->get_field_name( 'title' ); ?>" 
        type="text" value="<?php echo esc_attr( $title ); ?>" />
    
        <?php 
    } 

} 

 add_action( 'widgets_init', function(){ register_widget( 'My_Widget' ); } );

このコードは、選択したタイトルを表示する非常に単純なウィジェットを作成します。

テンプレートの上部にコードを追加してプラグインディレクトリに保存することで、（テーマの関数ファイルにコードを追加するのではなく）プラグインとして作成しました。

小さなことですが、このスタイルでプラグインとしてウィジェットを作成すると、ウィジェットをオンとオフに切り替えたり、必要に応じてコピーして貼り付けることなく、後で他のテーマで再利用したりできます。

インストールしてアクティブ化すると、ダッシュボードの[ウィジェット]領域に新しいウィジェットが表示されます。

ウィジェット-管理者

ステップ2： WordPress REST APIを使用して、最近のナレッジベースの記事を取得します

この開発では何も編集または削除したくないので、widget（）関数のみに焦点を当てます。これは、ウィジェットのコンテンツが「外部」Webサイトに出力される場所です。

「ローカル」Webサイトから最近のナレッジベース記事のリストを「取得」するには、知っておく必要のあることがいくつかあります。

APIのベースパス（サイトで使用するAPI、この場合は最新のWP API）
使用されるルート（WP APIには、使用可能なさまざまなデータセットと操作に対して複数のルートがあります）
使用されるエンドポイント（実行されるアクション）
パラメータ（リクエストに関連付けられたデータ）

APIのベースパスは常に次のとおりです。

 json/wp/v2/

したがって、絶対APIパスは次のようになります。

 http://example.com/json/wp/v2/

（http://example.comはあなたの「ローカル」ウェブサイトです）

使用されるルートは次のとおりです。

 json/wp/v2/posts/

エンドポイントについて：このルートには、実際にはHTTPメソッドによって区別される3つのエンドポイントがあります。これらのエンドポイントは次のとおりです。

得る
置く
消去

この例では、GETエンドポイントを選択して、「ローカル」Webサイトから最新の投稿のリストを取得（または「取得」）できるようにします。

したがって、RESTAPIと対話するコードの最初の行は次のようになります。

$response = wp_remote_get( 'http://products-website.com/wp-json/wp/v2/posts/' );

次に、エラーが返されるかどうかを確認する必要があります。

if( is_wp_error( $response ) ) {
    return;
}

このコードが行うのは、返される応答を確認することだけです。応答がいくつかの投稿を返す場合、エラーはありません。

このセクションの最後の部分は次のとおりです。


$posts = json_decode( wp_remote_retrieve_body( $response ) );

if( empty( $posts ) ) {
   return;
}

$ responseは、Postデータを含むJSONエンコードされた文字列です。つまり、ここで行っているのは、出力できるようにデコードすることだけです。

ここでも、$ postsが空でないことを確認するためのチェックを追加します。そうである場合、何も返されません。

したがって、この時点で、APIを使用して「ローカル」Webサイトと正常に通信できました。この実装により、表示する投稿のリストが残ります。

次の段階は、実際に「外部」Webサイトのウィジェットにそれらを表示することです。

ステップ3：次のコードを追加して、「外部」Webサイトに最新の投稿を表示します。

		if( !empty( $posts ) ) {
		
			echo '<ul>';
			foreach( $posts as $post ) {
				echo '<li><a href="' . $post->link. '">' . $post->title->rendered . '</a></li>';
			}
			echo '</ul>';
			
		}

完成したウィジェットのコードは次のようになります。

/**
* HeroThemes REST API Widget
*/
class REST_API_Widget extends WP_Widget { 

	//set up widget 
	public function __construct() { 
		$widget_ops = array( 	'classname' => 'rest-api-widget',
 								'description' => 'A REST API widget that pulls posts from a different website'
 		);
 		parent::__construct( 'rest_api_widget', 'REST API Widget', $widget_ops );
 	}

	/**
	* Outputs the content of the widget
	*
	* @param array $args
	* @param array $instance
	*/
	public function widget( $args, $instance ) {
		//change this url to the WP-API endpoint for your site!
		$response = wp_remote_get( 'https://example.com/wp-json/wp/v2/ht-kb/' );

		if( is_wp_error( $response ) ) {
			return;
		}

		$posts = json_decode( wp_remote_retrieve_body( $response ) );

		if( empty( $posts ) ) {
			return;
		}

		echo $args['before_widget'];
		if( !empty( $instance['title'] ) ) {
			echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'], $instance, $this->id_base ) . $args['after_title'];
		}
		
		//main widget content
		if( !empty( $posts ) ) {
		
			echo '<ul>';
			foreach( $posts as $post ) {
				echo '<li><a href="' . $post->link. '">' . $post->title->rendered . '</a></li>';
			}
			echo '</ul>';
			
		}

		echo $args['after_widget'];
	}

	/**
	* Outputs the options form on admin
	*
	* @param array $instance The widget options
	*/
	public function form( $instance ) {
		// outputs the options form on admin
		$title = ( !empty( $instance['title'] ) ) ? $instance['title'] : '';
		?>

		<label for="<?php echo $this->get_field_name( 'title' ); ?>">Title: </label>
		<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" 
		  name="<?php echo $this->get_field_name( 'title' ); ?>" 
		  type="text" value="<?php echo esc_attr( $title ); ?>" />
		
		<?php 
	} 

 } 

 add_action( 'widgets_init', function(){ register_widget( 'REST_API_Widget' ); } );

上記の手順を実行した後、「外部」Webサイトを表示しようとすると、サイドバーに「ローカル」Webサイトからの投稿のリストが表示されます。

ウィジェット

これはすべて素晴らしいです。

ただし、ナレッジベースの最新の記事のみを表示したいので、これらは適切な投稿ではありません。

ナレッジベースプラグインは独自のカスタム投稿タイプを使用するため、現在の実装ではこれを行いません。また、カスタム投稿タイプはデフォルトではAPIで公開されていないため、これにより問題が発生します。（注：ナレッジベースの最新バージョンはREST APIで公開されており、次のセクションはスキップできます）

カスタム投稿タイプでのRESTAPIの使用

カスタム投稿タイプをRESTAPIで使用できるようにするには、少し回避策が必要です。

したがって、カスタム投稿タイプを作成するときは、投稿タイプ引数のレジスタに新しいパラメータを追加して、公開できるようにする必要があります。


'show_in_rest' = true,
'rest_base' = 'ht_kb',
'rest_controller_class' = 'WP_REST_Posts_Controller',

ただし、この場合、ナレッジベースの記事の投稿タイプを強化するためにプラグインを使用しているため、プラグインファイルを直接編集して、カスタム投稿タイプをRESTAPIで使用できるようにすることはありません。（プラグインファイルを直接編集することは決して良い考えではありません！）

代わりに、「ローカル」Webサイトの子テーマのfunctions.phpファイルに次のコードを追加します。

KnowAllとHeroicナレッジベースの最新バージョンではすでにRESTサポートが有効になっています。これはht_kb_show_in_restフィルターで無効にできますが、以下のコードを独自のカスタム投稿タイプに変更できます。

/**
* Add rest support to an existing post type
*/
add_action( 'init', 'my_custom_post_type_rest_support', 25 );

function my_custom_post_type_rest_support() {
    global $wp_post_types;

    //set this to the name of your post type!
    $post_type_name = 'ht_kb';
    if( isset( $wp_post_types[ $post_type_name ] ) ) {
        $wp_post_types[$post_type_name]->show_in_rest = true;
        $wp_post_types[$post_type_name]->rest_base = $post_type_name;
        $wp_post_types[$post_type_name]->rest_controller_class = 'WP_REST_Posts_Controller';
    }
}

現在、カスタム投稿タイプ「ht_kb」はWP RESTAPIで公開されています。

カスタム投稿タイプをWordPressREST APIで使用できるようにした後、その投稿タイプの投稿を表示するようにウィジェットを修正する必要があります。そのために、ステップ2の$ responseコードに戻り、次のように更新します。

$response = wp_remote_get( 'http://example.com/wp-json/wp/v2/ht_kb/' );

'ht_kb'はプラグインのカスタム投稿タイプの名前であるため、基本的にAPIルートで/ posts /を/ ht_kb /に変更します。

ウィジェットを更新して「外部」Webサイトをプレビューすると、ナレッジベースの最新の記事が表示されます。

ウィジェット-kb-コンテンツ

最終的な考え

これまで見てきたように、PHPとHTMLのいくつかの単純なスニッパーを使用して、新しい関数、ウィジェット、およびプラグインを作成できます。

作成したプラグインを修正して、WP REST APIを使用してナレッジベースの記事を検索し、ウィジェットに結果を返す検索ボックスを作成することができます。

または、認証を使用して、結果を表示するユーザーを制御することもできます（制限付きコンテンツを作成した場合に便利です）。

試すことができることはたくさんあります！基本を正しく理解すれば、準備は完了です。

参考文献

WordPress REST APIには廃止されたコンテンツがたくさんあるので、更新されたものだけを読んでください。投稿を通じていくつかの有用なリソースにリンクしましたが、ここにもいくつかリストしています。

それで、それらを読んで、RESTAPIを使用できるさまざまな創造的な方法を見つけてください。

RESTAPIハンドブック
RESTAPIに関するFAQ
WP REST API：これは私たちが向かっているところですか？

WordPress REST APIの実装について質問がある場合は、以下のコメントにドロップしてください。