새로운 WordPress REST API에 대해 알아야 할 사항

게시 됨: 2018-01-25

WordPress 4.4는 WordPress REST API를 핵심의 일부로 만들었습니다.

이 기사에서는 이 개발이 WordPress(일반적으로 테마 및 플러그인 작성자)에게 왜 큰 영향을 미치는지 설명하고 WordPress와 다른 앱 간의 통신 프로세스를 단순화하기 위해 이를 사용하는 방법을 보여줍니다.

또한 WordPress Rest API를 사용하면 WordPress 웹 사이트에서 기본 WordPress 관리 인터페이스를 제거하여 다양한 기술 스택을 사용하여 완전히 개인화된 관리 또는 콘텐츠 경험을 제공할 수 있습니다.

Calypso – WordPress의 데스크탑 앱 –이 이에 대한 아름다운 예입니다. Calypso는 WordPress REST API를 사용하여 WordPress.com과 코어 간에 통신하는 단일 Javascript 애플리케이션을 사용하여 구축되었습니다.

WordPress REST API는 이제 WordPress 코어의 필수적인 부분이므로 개발자가 작동 방식과 WordPress와 상호 작용하기 위해 열리는 새로운 가능성에 대해 잘 이해하는 것이 중요합니다.

따라서 이 WordPress REST API 개요 및 자습서에서는 WP REST API의 기본 사항을 안내하고 이를 사용하여 Heroic Knowledge의 최신 게시물을 표시하는 (플러그인) 위젯을 만드는 방법을 보여줍니다. 기본 사용자 정의 게시물 유형.

WordPress REST API 입문서

WordPress REST API를 사용하여 (플러그인) 위젯을 만드는 방법을 보기 전에 먼저 용어를 조금 더 잘 이해합시다.

그렇다면 API는 무엇을 의미합니까?

API는 응용 프로그램 인터페이스 를 나타냅니다.

간단히 말해서 두 개의 서로 다른 응용 프로그램 간의 통신 수단입니다.

실행 중인 API의 일반적인 예는 많은 웹사이트에 표시되는 Tweet Deck입니다. 이 트윗 데크를 표시하는 것은 웹사이트가 Twitter에서 데이터를 가져와 표시하는 API를 통해 가능합니다.

REST는 어떻습니까?

REST는 REpresentational State Transfer 의 줄임말입니다.

REST는 API를 구축하는 HTML 기반 아키텍처 스타일 입니다. 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로 더 많은 작업을 수행할 수 있습니다.

예를 들어:

  1. 알고 있는 모든 언어로 애플리케이션을 작성하고 WordPress 사이트와 상호 작용하도록 합니다(단 두 가지 요구 사항은 앱 언어가 HTML 메서드를 사용하고 JSON을 해석할 수 있어야 한다는 것).
  2. 완전히 개인화된 관리 및 콘텐츠 경험 설계
  3. 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' ); } );

이 코드는 선택한 제목을 표시하는 매우 간단한 위젯을 만듭니다.

템플릿 상단에 코드를 추가하고 plugins 디렉토리에 저장함으로써 (테마의 기능 파일에 코드를 추가하는 대신) 플러그인으로 생성했습니다.

작지만 이 스타일의 플러그인으로 위젯을 만들면 복사하여 붙여넣을 필요 없이 원하는 경우 나중에 다른 테마에서 다시 사용할 수 있습니다.

설치 및 활성화하면 대시보드의 위젯 영역에 새 위젯이 생깁니다.

위젯 관리자

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 메서드로 구분되는 3개의 끝점이 있습니다. 이러한 끝점은 다음과 같습니다.

  • 가져 오기
  • 놓다
  • 삭제

이 예에서는 '로컬' 웹 사이트에서 최신 게시물 목록을 검색(또는 '가져오기')할 수 있도록 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에서 사용자 정의 게시물 유형을 사용할 수 있도록 하려면 약간의 해결 방법이 필요합니다.

따라서 사용자 정의 게시물 유형을 생성할 때 공개적으로 사용할 수 있도록 게시물 유형 인수 등록에 새 매개변수를 추가해야 합니다.


'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'가 플러그인의 사용자 정의 게시물 유형 이름이기 때문입니다.

위젯을 업데이트하고 '외부' 웹사이트를 미리 보면 이제 기술 자료의 최신 기사를 볼 수 있습니다.

위젯-kb-콘텐츠

마지막 생각들

우리가 보았듯이 PHP와 HTML의 몇 가지 간단한 스니펫을 사용하여 새로운 기능, 위젯 및 플러그인을 만들 수 있습니다.

방금 만든 플러그인을 수정하여 WP REST API를 사용하여 지식 기반 문서를 검색하고 결과를 위젯에 반환하는 검색 상자를 만들 수 있습니다.

또는 인증을 사용하여 결과를 볼 수 있는 사람을 제어할 수 있습니다(제한된 콘텐츠를 만든 경우 유용).

시도할 수 있는 것이 너무 많습니다! 기본만 제대로 하면 모든 준비가 완료됩니다.

추가 읽기

워드프레스 REST API 주변에는 쓸모없는 콘텐츠가 많이 있으므로 업데이트된 내용만 읽어야 합니다. 게시물 전체에 걸쳐 몇 가지 유용한 리소스를 링크했지만 여기에도 일부를 나열합니다.

따라서 관련 내용을 읽고 REST API를 사용할 수 있는 다양한 창의적인 방법을 찾으십시오.

  • REST API 핸드북
  • REST API FAQ
  • WP REST API: 이것이 우리가 향하고 있는 방향입니까?

WordPress REST API 구현에 대한 질문이 있으면 아래 의견에 남겨주세요!