In Teil 1 dieses Guides habe ich einen Blick auf die HTTP API im Allgemeinen geworfen. Wir haben gelernt, was HTTP ist, haben über die Struktur von HTTP-Anfragen und -Antworten gesprochen und wie Aktionstypen und URLs zusammenkommen, um zu bestimmen, was du im Austausch für deine Anfrage erhältst. In diesem Beitrag werden wir einen Blick auf die WordPress HTTP API werfen.

Die WordPress HTTP API

Seit etwa Version 2.7 hat WordPress eine API für die Handhabung von HTTP. Sie besteht aus 9 Funktionen, von denen du wahrscheinlich nur ein paar benutzen wirst. Die Funktionen können in zwei verschiedene Gruppen eingeteilt werden – eine für das Stellen von Anfragen, eine für das Lesen von Ergebnissen.

wp_remote_get(), wp_remote_post(), wp_remote_head() verwenden die Methoden GET, POST und HEAD, um Daten von einer bestimmten URL anzufordern. Die Funktion wp_remote_request() ist eine allgemeine Funktion, die es dir erlaubt, eine URL und eine dazugehörige Methode anzugeben.

Die Funktionen zum Lesen von Antworten sind ähnlich selbstbeschreibend. wp_remote_retrieve_body() holt den Body der Antwort, die Funktion wp_remote_retrieve_header() holt einen benannten Header. Die Funktion wp_remote_retrieve_headers() gibt alle Header in Arrayform zurück, wp_remote_retrieve_response_code() gibt dir den Antwortcode und wp_remote_retrieve_response_message() gibt die Antwortnachricht zurück.

Das ist im Grunde alles, was wir tun müssen, ist herauszufinden, wie wir Header angeben können, um richtige Anfragen zu stellen.

Anfragen stellen

Benutzen wir die Funktion wp_remote_get(), um eine Anfrage zu stellen. Wir benutzen den ersten Parameter, um die URL zu setzen und den zweiten, um Argumente hinzuzufügen. Du kannst alle unterstützten Parameter im Codex nachlesen, ich werde mich hier auf die Header-Informationen konzentrieren.

Um die Statusmeldung eines Nutzers von Twitter zu erhalten, musst du den statuses/user_timeline.json Pfad neben der https://api.twitter.com/1.1 URL verwenden und ein Bearer Token zur Authentifizierung übergeben – welches ich zuvor generiert habe. Das Überbringer-Token muss als Autorisierungs-Header in Form von Bearer [TOKEN] hinzugefügt werden.

$token = 'Sijbwrf82wdaBief'; 
$response = wp_remote_get('https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=kinsta', array(
    'headers' => array(
        'Authorization' => 'Bearer ' . $token
    ),
));

Diese Anfrage gibt eine Fülle von Informationen zurück, die durch das Ausdrucken der $response-Variable abgerufen werden können. Du kannst auch die Funktionen vom Typ wp_remote_retrieve verwenden, um einen Teil der Antwort zu erhalten.

Meistens enthält der Body die notwendigen Informationen, normalerweise im JSON Format. In PHP können wir das mit Leichtigkeit in ein Array umwandeln:

$data = json_decode( $response['body'], true )

Zugriff auf die Github API

Lass uns ein schnelles Beispiel bauen, das unsere neuesten Github Repos in einem WordPress Widget auflistet. Als erstes musst du dich bei Github einloggen und zu deinem Profil gehen, es bearbeiten und zu „Personal access tokens“ gehen, wo du ein Token generieren kannst.

Github Zugangstoken
Github Zugangstoken

Als nächsten Schritt erstellen wir ein leeres Template für ein Widget. Dieses Widget wird zwei Optionen haben: einen Platz, an dem du dein API-Token hinzufügen kannst und einen Titel. Dies ist nicht die beste Methode, da es dein Token in der Datenbank speichert, aber für unser Beispiel reicht es.

class My_Github_Widget extends WP_Widget {

	public function __construct() {
		parent::__construct(
			'my_github_widget',
			'My Github Repos',
			array( 'description' => 'A widget that showcases your Github repos' )
		);
	}

	public function widget( $args, $instance ) {
		// Widget output
	}

	public function form( $instance ) {
		$token = ! empty( $instance['token'] ) ? $instance['token'] : '';
		$title = ! empty( $instance['title'] ) ? $instance['title'] : 'From Github';
		?>
<label for="get_field_id( 'title' ); ?>">Title <input class="widefat" id="get_field_id( 'title' ); ?>" name="get_field_name( 'title' ); ?>" type="text" value="">

<label for="get_field_id( 'token' ); ?>">Github API Token <input class="widefat" id="get_field_id( 'token' ); ?>" name="get_field_name( 'token' ); ?>" type="text" value="">

<?php } }

Ich möchte hier nicht zu sehr darauf eingehen, wie Widgets erstellt werden. Wenn du mehr wissen willst, schau dir den Widgets API Guide im Codex an. Das Wichtigste ist, dass der Inhalt der widget()-Methode den Inhalt unseres Widgets ausgeben wird. Innerhalb dieser Funktion verbinden wir uns mit Github über eine HTTP-Anfrage und formatieren und geben die Antwort aus. Der folgende Code wird in die widget()-Methode eingefügt.

echo $args['before_widget']; 

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

$args = array( 
  'headers' => array( 
    'Accept' => 'application/vnd.github.v3+json', 
    'Authorization' => 'token 3f4f654ab31c2f15e839c74c952e5de2f562f1ee' 
  ) 
); 

$response = wp_remote_get( 'https://api.github.com/user/repos', $args ); 
$repos = json_decode( $response['body'], true ); 

if( !empty( $repos ) ) { 
  echo '<ul>'; 
  foreach( $repos as $repo ) { 
    echo '<li><a href="' . $repo['url'] . '" target="_blank">' . $repo['name'] . '</a></li>'; 
  } 
  echo '</ul>'; 
} 

echo $args['after_widget'];

Es beginnt damit, dass ich einfach das Wrapper-Element und den Titel des Widgets oben hinzufüge und endet damit, dass ich den Wrapper des Widgets schließe, der Hauptteil des Codes befindet sich zwischen den beiden.

Zuerst richte ich meine HTTP-Request-Header ein. Die erste Frage ist vielleicht: Woher weiß ich, welche Parameter ich hinzufügen muss? Der Authorization Header ist das Wichtigste, das habe ich im Abschnitt Authentication in den API Docs gelesen.

Der Accept-Header ist nicht erforderlich, aber oben auf der gleichen Doku-Seite wird dazu ermutigt, diesen anzugeben.

Ich verwende dann json_decode() auf den Body der Antwort und gehe einfach durch das resultierende Array, um eine Liste von Links zu erstellen.

Nächste Schritte

Wenn du denkst, dass das einfach war, hast du vollkommen recht, das ist es! Der schwierige Teil ist sicherzustellen, dass du alle Winkel abdeckst, ohne Ressourcen zu verschwenden. Es gibt zwei Probleme mit dem Code, die unsere sofortige Aufmerksamkeit erfordern würden.

Wenn es ein Problem mit der API gibt – was unbekannte Fehler, ratenbeschränkte Konten und so weiter einschließen kann – könnten wir auf einen großen Fehler stoßen. Wir überprüfen nur, ob der Body leer ist oder nicht, bevor wir die Liste anzeigen.

Wenn wir auf einen Fehler stoßen, wird der Body wahrscheinlich Fehlerinformationen enthalten, also wäre er auch in diesem Fall nicht leer. Es ist wahrscheinlich, dass wir die Elemente der Fehlerantwort auflisten würden, aber da diese keine url und name Eigenschaften hätten, würden wir mit leeren Listenelementen und PHP Warnungen enden.

Das zweite Problem ist, dass dies einfach verschwenderisch ist. Wir verbinden uns bei jedem Seitenaufruf mit einem externen Dienst, was unsere Server belastet und dazu führen kann, dass der Account auf Github limitiert wird. Selbst wenn dies nicht der Fall ist, wie wahrscheinlich ist es, dass sich deine Github Repo-Liste zwischen zwei Seitenaufrufen ändert und wie wichtig ist es, hier sekundengenaue Informationen zu haben?

Ich persönlich würde in einem Fall wie diesem empfehlen, Transients zu verwenden. Ein Transient erlaubt es dir, die Antwort der Anfrage mit einer Verfallszeit zu speichern. Wenn du die Verfallszeit auf einen Tag setzt, werden die Daten einmal von Github abgerufen, dann direkt von deiner Datenbank für die nächsten 24 Stunden. Nach Ablauf werden es wieder von Github abgerufen und in der Datenbank gespeichert.

Das reduziert deine API-Aufrufe von einem pro Seitenaufruf auf einen pro Tag, was eine große Verbesserung ist und auch kein großer Nachteil.

Zusammenfassung

WordPress macht es einfach, mit APIs aus dem ganzen Web zu interagieren. Mit ein paar eingebauten Funktionen kannst du reichhaltigere und relevantere Daten für deine Nutzer einholen.

Gepaart mit Sanitization, Error Checking und einem Caching-Mechanismus kannst du eine effiziente Anwendung erstellen, die nicht nur nützlicher ist, sondern auch weniger Ressourcen verbraucht, als du vielleicht denkst.

Wenn du die WordPress HTTP API benutzt hast, um WordPress mit einer API eines Drittanbieters zu verbinden, lass es uns wissen, es wäre toll von deiner Arbeit zu hören!

Daniel Pataki

Hi, my name is Daniel, I'm the CTO here at Kinsta. You may know me from Smashing Magazine, WPMU Dev, Tuts+ and other WordPress/Development magazines. Aside from WordPress and PHP I spend most of my time around Node, React, GraphQL and other technologies in the Javascript space.

When not working on making the best hosting solution in the Universe I collect board games, play table football in the office, travel or play guitar and sing in a pretty bad band.