Co musisz wiedzieć o nowym WordPress REST API

Opublikowany: 2018-01-25

WordPress 4.4 uczynił WordPress REST API częścią rdzenia.

W tym artykule wyjaśnię, dlaczego ten rozwój jest ogromny dla WordPressa (i ogólnie dla twórców motywów i wtyczek) i pokażę, jak go wykorzystać, aby uprościć proces komunikacji między WordPressem a innymi aplikacjami.

Interfejs API WordPress Rest umożliwia również stronom WordPress pozbycie się domyślnego interfejsu administratora WordPress, aby zaoferować całkowicie spersonalizowaną obsługę administratora lub treści przy użyciu zróżnicowanego stosu technologicznego.

Calypso – aplikacja komputerowa WordPress – jest tego pięknym przykładem. Calypso jest zbudowany przy użyciu pojedynczej aplikacji JavaScript, która wykorzystuje WordPress REST API do komunikacji między WordPress.com a rdzeniem.

Ponieważ WordPress REST API jest teraz integralną częścią rdzenia WordPressa, ważne jest, aby programiści dobrze zapoznali się z jego działaniem i nowymi możliwościami, jakie otwiera w zakresie interakcji z WordPressem.

W tym przeglądzie i samouczku WordPress REST API przeprowadzę Cię przez podstawy WP REST API, a także pokażę, jak możesz go użyć do stworzenia (wtyczki) widżetu, który wyświetla najnowsze posty z Heroic Knowledge Podstawowe niestandardowe typy postów.

Elementarz na WordPress REST API

Zanim zobaczymy, jak wykorzystać WordPress REST API do stworzenia widżetu (wtyczki), najpierw zrozummy ten termin nieco lepiej.

Więc co oznacza API?

API to skrót od Application Program Interface .

Mówiąc najprościej, jest to środek komunikacji między dwoma różnymi aplikacjami.

Typowym przykładem działania API jest Tweet Deck, który wyświetla wiele stron internetowych. Wyświetlanie tego Tweet Decka staje się możliwe za pośrednictwem interfejsu API, w którym witryna po prostu pobiera dane z Twittera i wyświetla je.

A co z ODPOCZYNEK?

REST jest skrótem od REpresentational State Transfer .

REST to oparty na HTML styl architektoniczny budowania interfejsów API. Architektura RESTful wykorzystuje żądania HTTP do publikowania, odczytywania, aktualizowania i usuwania danych między dwoma źródłami.

Więc kiedy mówimy o REST API, zasadniczo mamy na myśli API, które wykorzystuje do komunikacji metody HTML.

A co z JSON?

WordPress REST API ma ten sam format, co WordPress JSON REST API.

JSON (lub Javascript Object Notation ) to minimalny, tekstowy format wymiany danych, który służy do bezproblemowej wymiany danych między różnymi platformami (nawet jeśli platformy używają różnych języków).

JSON to lekka alternatywa dla rozwiązań opartych na XML, dzięki czemu idealnie nadaje się do aplikacji mobilnych z ograniczeniami przepustowości.

Dlaczego warto korzystać z API REST WordPress

Być może zastanawiasz się, co jest tak wyjątkowego w API REST WordPressa i dlaczego powinieneś się tym przejmować.

Cóż… WordPress REST API daje Ci więcej możliwości dzięki WordPressowi.

Na przykład:

  1. Pisz aplikacje w dowolnym języku, który znasz, i spraw, by wchodziła w interakcję z witryną WordPress (jedyne 2 wymagania to to, że język Twojej aplikacji powinien używać metod HTML i być w stanie interpretować JSON)
  2. Zaprojektuj całkowicie spersonalizowane środowiska administracyjne i treści
  3. Twórz aplikacje jednostronicowe na WordPressie

I wiele więcej.

Wypisanie wszystkich potencjalnych aplikacji/interfejsów/doświadczeń, które można stworzyć za pomocą interfejsu API REST, jest prawie niemożliwe. Podręcznik WordPressa REST API słusznie mówi:

Nasza wyobraźnia jest jedynym ograniczeniem tego, co można zrobić z WordPress REST API. Najważniejsze jest to, że jeśli chcesz mieć ustrukturyzowany, rozszerzalny i prosty sposób na pobieranie danych do i z WordPressa przez HTTP, prawdopodobnie chcesz użyć interfejsu API REST.

Ale wiem, że implementacja jest zawsze o wiele trudniejsza niż zrozumienie teorii.

Zobaczmy więc krótki samouczek dotyczący korzystania z interfejsu API REST WordPress do tworzenia niestandardowego widżetu (wtyczki).

Szybki samouczek dotyczący korzystania z WordPress REST API

Jeśli masz jeden z naszych produktów z bazy wiedzy, taki jak motyw centrum pomocy KnowAll lub własny motyw z wtyczką Heroic Knowledge Base, będziesz mieć witrynę z bazą wiedzy z artykułami pomocy. Korzystanie z tych produktów nie jest konieczne, aby przestrzegać zasad tego samouczka, jednak pamiętaj, że będziesz musiał dostosować dowolny kod do własnej konfiguracji.

Czy jesteś gotowy na lokalną konfigurację?

Świetny!

Teraz zamierzamy stworzyć kolejną stronę na innym serwerze.

Dlaczego więc tworzymy tę drugą stronę internetową?

Robimy to, ponieważ chcemy zaimplementować WordPress REST API do komunikacji z tą drugą witryną, a jak już wiesz, WordPress REST API służy do prowadzenia rozmów.

Zamierzamy więc użyć interfejsu API REST WordPressa, aby obie strony mogły ze sobą komunikować się i wymieniać dane.

Ostatecznym celem samouczka jest:

Wybierz najnowsze opublikowane artykuły z bazy wiedzy z witryny Centrum pomocy i wyświetl je w widżecie na pasku bocznym nowej witryny.

Na potrzeby tego artykułu witryna Centrum pomocy zawierająca wszystkie artykuły z bazy wiedzy będzie określana jako witryna „ lokalna ”, a nowa witryna, w której będzie wyświetlany widżet, będzie witryną „ zewnętrzną ”.

W tym momencie zakładam, że masz 1) swoją „lokalną” witrynę centrum pomocy oraz 2) nową „zewnętrzną” witrynę internetową skonfigurowaną na innym serwerze.

A na końcu samouczka z powodzeniem wyświetlilibyśmy listę artykułów z bazy wiedzy z „lokalnej” witryny na nowej „zewnętrznej” witrynie (poprzez WordPress REST API) za pomocą niestandardowego widżetu (wtyczki).

Dzięki temu jesteśmy gotowi do rozpoczęcia:

Krok #1: Zacznij od skopiowania następującego kodu wzorcowego do nowego pliku .php i zapisz go w folderze wtyczek swojej „zewnętrznej” witryny.

Zobacz pełny kod tego samouczka WordPress REST API tutaj. 

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

Ten kod tworzy bardzo prosty widżet, który wyświetli wybrany przez Ciebie tytuł.

Dodając kod na górze szablonu i zapisując go w katalogu plugins, stworzyliśmy go jako wtyczkę (zamiast dodawać kod do pliku funkcji motywu).

To drobiazg, ale utworzenie widżetu jako wtyczki w tym stylu pozwala na włączanie i wyłączanie go, a także ponowne użycie w innych motywach później, jeśli chcesz, bez konieczności kopiowania i wklejania.

Po zainstalowaniu i aktywacji będziesz mieć nowy widżet w obszarze Widgety na pulpicie nawigacyjnym:

admin-widżet

Krok #2: Użyj WordPress REST API, aby pobrać najnowsze artykuły z bazy wiedzy

Ponieważ nie chcesz niczego edytować ani usuwać w tym rozwoju, skupimy się tylko na funkcji widget(). W tym miejscu treść z widżetu jest wyprowadzana na „zewnętrzną” stronę internetową.

Aby „uzyskać” listę najnowszych artykułów z bazy wiedzy z „lokalnej” witryny, musimy wiedzieć o kilku rzeczach:

  • Podstawowa ścieżka API (jakiego API użyć w Twojej witrynie, w naszym przypadku najnowszego API WP)
  • Użyta trasa (WP API ma wiele tras dla różnych dostępnych zestawów danych i operacji)
  • Używany punkt końcowy (jakie działanie ma zostać wykonane)
  • Parametry (dane związane z żądaniem)

Podstawową ścieżką API jest zawsze:

 json/wp/v2/

I tak bezwzględna ścieżka API staje się:

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

(http://example.com to Twoja „lokalna” witryna)

Użyta trasa to:

 json/wp/v2/posts/

Informacje o punktach końcowych: ta trasa w rzeczywistości ma trzy punkty końcowe, które są różnicowane przez metody HTTP. Te punkty końcowe to:

  • DOSTWAĆ
  • UMIEŚCIĆ
  • KASOWAĆ

W tym przykładzie wybierzesz punkt końcowy GET, aby móc pobrać (lub „pobrać”) listę najnowszych postów z „lokalnej” witryny internetowej.

Tak więc Twój pierwszy wiersz kodu wchodzący w interakcję z REST API będzie wyglądał następująco:

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

Następnie musisz sprawdzić, czy zwracane są jakieś błędy:

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

Wszystko, co robi ten kod, to sprawdzanie, jaka odpowiedź jest zwracana. Jeśli odpowiedź zwróci niektóre posty, nie ma błędu.

Ostatnia część tej sekcji to:


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

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

$response to ciąg znaków zakodowany w formacie JSON z danymi Post. Więc wszystko, co tutaj robisz, to dekodowanie go, aby można go było wyprowadzić.

Ponownie dodaj dodatkowe sprawdzenie, aby upewnić się, że $posts nie jest puste. Jeśli tak, nic nie jest zwracane.

Tak więc w tym momencie pomyślnie komunikujesz się ze swoją „lokalną” witryną za pomocą interfejsu API. Ta implementacja pozostawia listę postów do wyświetlenia.

Następnym etapem jest faktyczne wyświetlenie ich w widżecie na „zewnętrznej” stronie internetowej.

Krok 3: Wyświetl najnowsze posty na „zewnętrznej” witrynie internetowej, dodając następujący kod:

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

Kod ukończonego widżetu powinien wyglądać tak: 

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

Po wykonaniu powyższego kroku, gdy spróbujesz teraz wyświetlić swoją „zewnętrzną” witrynę, na pasku bocznym zobaczysz listę swoich postów z „lokalnej” witryny.

widget

To wszystko świetnie.

Jeśli jednak pamiętasz, to nie są odpowiednie posty, ponieważ chcemy pokazywać tylko najnowsze artykuły z Bazy wiedzy.

Nasza obecna implementacja tego nie robi, ponieważ wtyczka bazy wiedzy używa własnego niestandardowego typu posta. A ponieważ niestandardowe typy postów nie są domyślnie publicznie dostępne dla interfejsów API, powoduje to problem. (Uwaga: najnowsza wersja bazy wiedzy jest publicznie dostępna dla interfejsu API REST i można pominąć następną sekcję)

Korzystanie z interfejsu API REST z niestandardowymi typami postów

Aby udostępnić niestandardowe typy postów w interfejsie API REST, potrzebujesz niewielkiego obejścia.

Tak więc, tworząc niestandardowy typ posta, musisz dodać nowy parametr do rejestru argumentów typu postu, aby był publicznie dostępny:


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

Ale ponieważ w naszym przypadku używamy wtyczki do obsługi typu postu artykułu w bazie wiedzy, nie będziemy bezpośrednio edytować pliku wtyczki, aby udostępnić niestandardowe typy postów dla interfejsu API REST. (Bezpośrednia edycja pliku wtyczki nigdy nie jest dobrym pomysłem!)

Zamiast tego dodamy następujący kod do pliku functions.php w motywie potomnym „lokalnej” witryny:

Najnowsza wersja KnowAll i Heroic Knowledge Base ma już włączoną obsługę REST, można to wyłączyć za pomocą filtra ht_kb_show_in_rest , ale możesz zmodyfikować poniższy kod dla własnego niestandardowego typu postu. 
/**
* 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';
    }
}

Teraz niestandardowy typ wpisu „ht_kb” jest publicznie dostępny dla interfejsu API WP REST.

Po udostępnieniu niestandardowego typu postu w API REST WordPressa musimy teraz poprawić nasz widżet, aby wyświetlał posty z tym typem postu. W tym celu wrócimy do kodu odpowiedzi z kroku 2 i zaktualizujemy go do:

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

Zasadniczo zmieniamy /posts/ na /ht_kb/ w trasie API, ponieważ „ht_kb” to nazwa niestandardowego typu posta wtyczki.

Po zaktualizowaniu widżetu i wyświetleniu podglądu „zewnętrznej” witryny internetowej powinieneś zobaczyć najnowsze artykuły z Bazy wiedzy.

widżet-kb-treść

Końcowe przemyślenia

Jak widzieliśmy, za pomocą kilku prostych fragmentów PHP i HTML możesz tworzyć nowe funkcje, widżety i wtyczki.

Możesz zmienić wtyczkę, którą właśnie stworzyliśmy, aby utworzyć pole wyszukiwania, które używa interfejsu API WP REST do przeszukiwania artykułów bazy wiedzy i zwracania wyników w widżecie.

Możesz też użyć uwierzytelniania, aby kontrolować, kto widzi wyniki (przydatne, jeśli utworzyłeś zawartość z ograniczeniami).

Tyle możesz spróbować! Po prostu dobrze zapoznaj się z podstawami, a wszystko będzie gotowe.

Dalsze czytanie

W interfejsie WordPress REST API jest wiele przestarzałych treści, więc upewnij się, że właśnie przeczytałeś zaktualizowane rzeczy. W całym poście podałem linki do przydatnych zasobów, ale tutaj również wymieniam niektóre.

Zapoznaj się z nimi i poznaj różne kreatywne sposoby wykorzystania interfejsu API REST.

  • Podręcznik API REST
  • Często zadawane pytania dotyczące interfejsu API REST
  • WP REST API: czy do tego zmierzamy?

Jeśli masz jakieś pytania dotyczące implementacji WordPress REST API, zamieść je w komentarzach poniżej!