您需要了解的有關新的 WordPress REST API 的內容

已發表: 2018-01-25

WordPress 4.4 使 WordPress REST API 成為核心的一部分。

在本文中，我將解釋為什麼這種開發對於 WordPress（以及一般的主題和插件作者）來說意義重大，並向您展示如何使用它來簡化 WordPress 和其他應用程序之間的通信過程。

WordPress Rest API 還使 WordPress 網站可以擺脫默認的 WordPress 管理界面，使用多種技術堆棧提供完全個性化的管理或內容體驗。

Calypso——WordPress 的桌面應用程序——就是一個很好的例子。 Calypso 是使用單個 Javascript 應用程序構建的，該應用程序使用 WordPress REST API 在 WordPress.com 和核心之間進行通信。

因為 WordPress REST API 現在是 WordPress 核心的一個組成部分，所以開發人員必須很好地掌握它的工作原理以及它為與 WordPress 交互開闢的新可能性。

因此，在這個 WordPress REST API 概述和教程中，我將向您介紹 WP REST API 的基礎知識，並向您展示如何使用它來創建一個（插件）小部件，以顯示來自 Heroic Knowledge 的最新帖子基本自定義帖子類型。

WordPress REST API 入門

在我們了解如何使用 WordPress REST API 創建（插件）小部件之前，讓我們先更好地理解這個術語。

那麼 API 代表什麼？

API 代表應用程序接口。

簡單來說，它是兩個不同應用程序之間的一種通信方式。

API 的一個常見示例是許多網站顯示的 Tweet Deck。可以通過 API 顯示此 Tweet Deck，在該 API 中，網站只需從 Twitter 中提取數據並顯示它。

REST 呢？

REST 是REpresentational State Transfer的縮寫。

REST 是一種基於 HTML 的構建 API 的架構風格。 RESTful 架構使用 HTTP 請求在兩個源之間發布、讀取、更新和刪除數據。

因此，當我們談論 REST API 時，我們本質上是指使用 HTML 方法進行通信的 API。

那麼 JSON 呢？

WordPress REST API 的格式與 WordPress JSON REST API 相同。

JSON（或Javascript Object Notation ）是一種基於文本的最小數據交換格式，用於在不同平台之間無縫交換數據（即使平台使用不同的語言）。

JSON 是基於 XML 的解決方案的輕量級替代方案，非常適合有帶寬限制的移動應用程序。

為什麼使用 WordPress REST API

您可能想知道 WordPress REST API 有什麼特別之處，以及為什麼要關心它。

嗯……WordPress REST API 使您能夠使用 WordPress 做更多事情。

例如：

使用您知道的任何語言編寫應用程序並使其與 WordPress 網站交互（唯一的兩個要求是您的應用程序的語言應該使用 HTML 方法並能夠解釋 JSON）
設計完全個性化的管理和內容體驗
在 WordPress 之上開發單頁應用程序

以及更多。

幾乎不可能列出所有可以使用 REST API 創建的潛在應用程序/接口/體驗。 WordPress 的 REST API 手冊正確地說：

我們的想像力是使用 WordPress REST API 可以完成的唯一限制。底線是，如果您想要一種結構化、可擴展且簡單的方法來通過 HTTP 將數據輸入和輸出 WordPress，您可能需要使用 REST API。

但我知道實施總是比理解理論困難得多。

因此，讓我們看一個關於如何使用 WordPress REST API 創建自定義（插件）小部件的快速教程。

關於如何使用 WordPress REST API 的快速教程

如果您擁有我們的知識庫產品之一，例如我們的 KnowAll 幫助中心主題或帶有 Heroic Knowledge Base 插件的您自己的主題，您將擁有一個包含支持文章知識庫的站點。使用這些產品不是必須遵循本教程的原則，但是請注意，您需要根據自己的設置定制任何代碼。

那麼，準備好本地設置了嗎？

偉大的！

現在我們要做的是在不同的服務器上創建另一個網站。

那麼我們為什麼要創建第二個網站呢？

我們這樣做是因為我們想要實現 WordPress REST API 來與第二個網站進行通信，而且正如您現在所知，WordPress REST API 就是為了讓對話發生。

因此，我們將使用 WordPress REST API 讓兩個網站相互交談並交換數據。

本教程的最終目標是：

從幫助中心網站中挑選最新發布的知識庫文章，並將它們顯示在新網站側邊欄中的小部件中。

就本文而言，包含所有知識庫文章的幫助中心網站將被稱為“本地”網站，您將在其中顯示小部件的新網站將被稱為“外部”網站。

此時，我假設您有 1) 您的“本地”幫助中心網站，以及 2) 在不同服務器上設置的新“外部”網站。

在教程結束時，我們將使用自定義（插件）小部件成功地在新的“外部”網站（通過 WordPress REST API）上顯示來自“本地”網站的知識庫文章列表。

有了這個，我們準備開始：

步驟#1：首先將以下樣板代碼複製到一個新的 .php 文件中，並將其保存在“外部”網站的插件文件夾中。

在此處查看此 WordPress REST API 教程的完整代碼。

/**
* 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() 函數。這是小部件的內容輸出到“外部”網站的地方。

為了從“本地”網站“獲取”最近的知識庫文章列表，我們需要了解以下幾點：

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 方法區分。這些端點是：

得到
放
刪除

在此示例中，您將選擇 GET 端點，以便您可以從“本地”網站檢索（或“獲取”）最新帖子列表。

因此，與 REST API 交互的第一行代碼將是：

$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 成功地與您的“本地”網站進行了通信。此實現為您提供要顯示的帖子列表。

下一階段是在“外部”網站上的小部件中實際顯示它們。

步驟#3：通過添加以下代碼在“外部”網站上顯示最新帖子：

		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' ); } );

完成上述步驟後，當您現在嘗試查看“外部”網站時，您會在側邊欄中看到來自“本地”網站的帖子列表。

小部件

這一切都很棒。

但是，如果您還記得，這些不是正確的帖子，因為我們只想顯示知識庫中的最新文章。

我們當前的實現沒有這樣做，因為知識庫插件使用它自己的自定義帖子類型。並且由於默認情況下自定義帖子類型不對 API 公開可用，這會導致問題。（注：最新版知識庫對 REST API 公開可用，可跳過下一節）

將 REST API 與自定義帖子類型一起使用

要使自定義帖子類型可用於 REST API，您需要一些變通方法。

因此，在創建自定義帖子類型時，您需要在註冊帖子類型 args 中添加一個新參數以使其公開可用：


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

但是因為在我們的例子中，我們使用插件來支持知識庫文章帖子類型，我們不會直接編輯插件文件以使自定義帖子類型可用於 REST API。（直接編輯插件文件絕不是一個好主意！）

我們要做的是將以下代碼添加到“本地”網站的子主題中的 functions.php 文件中：

最新版本的 KnowAll 和 Heroic Knowledge Base 已經啟用了 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 REST API 公開可用。

在使自定義帖子類型可用於 WordPress REST API 之後，我們現在需要修復我們的小部件以顯示具有該帖子類型的帖子。為此，我們將返回步驟 #2 中的 $response 代碼並將其更新為：

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

我們基本上將 API 路由中的 /posts/ 更改為 /ht_kb/，因為“ht_kb”是插件自定義帖子類型的名稱。

更新小部件並預覽“外部”網站後，您現在應該會看到知識庫中的最新文章。

小部件知識庫內容

最後的想法

正如我們所見，使用一些簡單的 PHP 和 HTML 代碼片段，您可以創建新的函數、小部件和插件。

您可以修改我們剛剛製作的插件以創建一個使用 WP REST API 搜索知識庫文章並在小部件中返回結果的搜索框。

或者，您可以使用身份驗證來控制誰可以看到結果（如果您創建了受限內容，這很有用）。

有這麼多你可以嘗試！只要掌握好基礎知識，你就會萬事俱備。

進一步閱讀

WordPress REST API 周圍有很多過時的內容，因此請確保您剛剛閱讀了更新的內容。我在整個帖子中都鏈接到了一些有用的資源，但我也在這裡列出了一些。

因此，請閱讀它們並找出可以使用 REST API 的不同創意方式。

REST API 手冊
REST API 常見問題
WP REST API：這是我們要去的地方嗎？

如果您對實現 WordPress REST API 有任何疑問，請將它們放在下面的評論中！