So integrieren Sie externe APIs in Ihr WordPress-Thema oder Plugin

() translation by (you can also view the original English article)

Mithilfe von APIs können Sie Ihren WordPress-Plugins und -Themen Funktionen hinzufügen. In diesem Tutorial werde ich Ihnen zeigen, wie Sie eine beliebige API (ob von Flickr, Google, Twitter usw.) mit WordPress verwenden. Sie lernen, wie Sie eine Verbindung herstellen, Daten sammeln, speichern und rendern - alles, was Sie wissen müssen, um Ihr Plugin oder Theme um neue Funktionen zu erweitern!

Wir werden Flickr als Beispiel verwenden und ein einfaches Widget erstellen, das die neuesten Flickr-Bilder in der Reihenfolge des Benutzernamens anzeigt.

Warten Sie, was ist eine API?

"API" steht für Application Programming Interface; Ein Vermittler zwischen Anwendungen, der es ihnen ermöglicht, zu kommunizieren und Informationen in Echtzeit hin und her zu senden. Wir werden eine Web-API verwenden, die HTTP verwendet, um Daten von einem entfernten Ort im Internet irgendwo abzurufen.

"APIs werden von Softwareanwendungen ähnlich verwendet wie Schnittstellen für Apps und andere Software von Menschen." -
David Berlind, ProgrammableWeb

Wenn Sie sich noch klarer ein Bild von den APIs machen möchten, bevor wir uns mit unserem Tutorial befassen, finden Sie hier einige weitere Ressourcen, die Ihnen helfen können:

Nachrichten

Die zunehmende Bedeutung von APIs in der Webentwicklung

Janet Wagner
WordPress

Verwenden Sie die WooCommerce-API, um Ihren Online-Shop anzupassen

Rachel McCollin

API WordPress Plugins auf dem Envato Market

Wenn Sie sehen möchten, was andere WordPress-Entwickler mit APIs erstellen, sehen Sie sich diese Sammlung von Plugins auf Envato Market an - jede Menge API-Vorteile, in die Sie sich vertiefen können!

api wordpress plugins on codecanyon — API WordPress Plugins auf Envato Market

1. Organisieren Sie Ihre Arbeitsumgebung

Beginnen wir mit der Organisation unseres Arbeitsumfelds. Laden Sie zunächst die Postman-App herunter, die eine API-Entwicklungsumgebung bietet, mit der Sie problemlos APIs verbinden, testen und entwickeln können. Für Einzelpersonen und kleine Teams ist es völlig kostenlos.

Wir werden ein Widget in einem einfachen WordPress-Plugin erstellen. Stellen Sie also sicher, dass Sie WordPress installiert haben.

2. Codieren Sie die Plugin-Grundlagen

Zunächst erstellen wir ein einfaches Plugin namens flickr-widget. Erstellen Sie einen Ordner mit diesem Namen und erstellen Sie darin eine flickr-widget.php-Datei. Fügen Sie oben in der Datei den folgenden Code ein (Sie können den Autor und die URIs mit Ihren eigenen Daten ändern):

/*
    Plugin Name: Flickr widget
    Plugin URI: https://www.enovathemes.com
    Description: Display recent Flickr images
    Author: Enovathemes
    Version: 1.0
    Author URI: https://enovathemes.com
*/

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}

Hinweis: Dies ist ein rudimentäres Plugin, daher lade ich keine Sprachdatei und erstelle keine zusätzlichen Parameter.

Legen Sie den frisch erstellten Plugin-Ordner in Ihre WordPress-Installation: wp-content > plugins. Sie können es jetzt über das WordPress-Admin dashboard > plugins aktivieren. Sie werden keine Änderungen an Ihrem WordPress sehen, da wir keinen Funktionscode hinzugefügt haben.

Ein Hinweis zur Verwendung von APIs

Bevor wir weiter gehen, möchte ich kurz die API-Verwendung erwähnen. Jeder Dienst, dessen API Sie verwenden möchten, verfügt über Dokumentation. Ich kann Ihnen nur empfehlen, sich das genau anzuschauen. Sie können APIs mit allen Arten von Entwicklungssprachen verwenden und Daten häufig in jedem gewünschten Format zurückerhalten: PHP, JSON, Java usw. Eine gute Dokumentation enthält detaillierte Informationen zum Herstellen einer Verbindung mit der API sowie Anweisungen für jede Sprache und auch die Haupt-API-Endpunkte (ein Endpunkt ist ein Ende eines Kommunikationskanals).

Web-APIs werden normalerweise als SOAP oder REST kategorisiert. SOAP verwendet ausschließlich XML, um Messaging-Dienste bereitzustellen, während REST eine einfachere Methode bietet, bei der in den meisten Fällen URLs zum Empfangen oder Senden von Informationen verwendet werden. In unserem Beispiel verwenden wir eine REST-API.

Programmiergrundlagen

Was bedeutet REST?

Matthew Machuga

3. Konfigurieren und testen Sie die API mit Postman

Also, hier ist unser Plan:

Konfigurieren und testen Sie die API mit Postman
Verbinden, sammeln und formatieren Sie Daten über die Flickr REST-API
Zwischenspeichern Sie die Daten mit WordPress-Transienten

Lesen wir die Flickr-API-Dokumentation. Im Abschnitt Anforderungsformate haben Sie REST, XML-RPC, SOAP. Wir brauchen den REST. Klicken Sie darauf und Sie sehen ein Beispiel für einen allgemeinen Flickr-REST-API-Endpunkt: https://www.flickr.com/services/rest/.

Mit der Flickr-REST-API können wir alle gewünschten Flickr-Daten abrufen, veröffentlichen und löschen. Kopieren Sie den Beispielendpunkt und fügen Sie ihn in Postman ein (stellen Sie sicher, dass Ihr Anforderungstyp auf GET eingestellt ist).

Klicken Sie auf die Schaltfläche Senden und... Fehler!

Die Beispielanforderung enthielt die obligatorische Flickr-API-Methode, aber wir haben nicht den API-Schlüssel angegeben, der für die Verbindung erforderlich ist (Schlüssel werden verwendet, um zu verfolgen und zu steuern, wie eine API verwendet wird, beispielsweise um eine böswillige Verwendung oder einen Missbrauch von zu verhindern die API, wie sie möglicherweise durch die Nutzungsbedingungen definiert ist).

4. Holen Sie sich den API-Schlüssel

Nachdem wir festgestellt haben, dass wir einen API-Schlüssel benötigen, holen wir uns einen. Um einen zu erstellen, benötigen Sie zunächst ein Flickr / Yahoo-Konto. Sobald Sie das API-Dashboard aufgerufen haben, klicken Sie auf den Link und erstellen Sie Ihren ersten:

Klicken Sie anschließend auf API-Schlüssel anfordern. Viele API-Anbieter haben ihre eigenen spezifischen Bedingungen für die API-Nutzung. Einige beschränken den Zugriff, andere haben Light- und Pro-Versionen oder kommerzielle und nichtkommerzielle Versionen. Manchmal werden API-Schlüssel nach manueller Genehmigung bereitgestellt. Dies hängt vollständig vom API-Anbieter ab. Ich habe mich für Flickr entschieden, weil es einfache API-Anforderungen hat. Beispielsweise benötigt Twitter eine detaillierte Beschreibung der App, die Sie erstellen möchten, bevor Sie einen API-Schlüssel bereitstellen. Diese wird dann vom Überprüfungsteam überprüft.

Klicken Sie jedoch auf die Schaltfläche Übernehmen für einen nicht kommerziellen Schlüssel und geben Sie einige grundlegende Informationen zum Namen der App an.

Sobald Sie die Anfrage gesendet haben, erhalten Sie sofort den API-Schlüssel (der Sie identifiziert) und den Geheimcode (der beweist, dass Sie der sind, für den Sie sich ausgeben). Bewahren Sie diese Daten sicher auf!

5. Legen Sie die Anforderungsparameter fest

Jetzt brauchen wir eine Methode, um Daten anzufordern. Aus der Flickr-API-Dokumentation können wir ersehen, dass Flickr eine Menge zur Auswahl hat. Einige Methoden, wie das Posten oder Löschen von Bildern, erfordern eine Authentifizierung. Flickr verwendet hierfür OAuth. Ein offenes, einfaches und sicheres Protokoll, mit dem Anwendungen Benutzer authentifizieren und in ihrem Namen mit API-Anbietern interagieren können. Die Informationen des Endbenutzers werden sicher übertragen, ohne die Identität des Benutzers preiszugeben.

Im Moment verwenden wir einfache Methoden, für die oAuth nicht erforderlich ist. Klicken Sie auf die Methode flickr.photos.getRecent, um zu sehen, was erforderlich ist. Diese Methode benötigt keine Authentifizierung, benötigt jedoch mehrere Argumente: api_key (erforderlich), extras, per_page, page. Lassen Sie uns eine einfache Anfrage in Postman mit unseren Parametern stellen:

Allgemeiner API-Endpunkt - https://flickr.com/services/rest
API-Schlüssel - f49df4a290d8f224ecd56536af51FF77 (Dies ist ein Beispiel-API-Schlüssel, den Sie durch Ihren eigenen ersetzen müssen.)
Methode - flickr.photos.getRecent

Es wird so aussehen:

1	https://www.flickr.com/services/rest/?api_key=f49df4a290d8f224ecd56536af51FF77&method=flickr.photos.getRecent

Dadurch wird die Liste der letzten öffentlichen Bilder von Flickr im XML-Format zurückgegeben.

Ich habe das Datenformat immer auf auto eingestellt, damit Postman entscheiden kann, welches Format die Daten haben. Mit Postman haben Sie verschiedene Datenformatoptionen: JSON (mein Favorit), XML, HTML und Text. Flickr gibt Daten im XML-Format zurück, dies ist jedoch kein Problem für uns, da wir einen zusätzlichen Parameter hinzufügen können, um Daten in JSON &format=json abzurufen:

6. Daten verbinden, sammeln und formatieren

Jetzt wissen wir, wie man Daten mit der REST-API anfordert. Lassen Sie uns unser WordPress Flickr-Widget erstellen. Fügen Sie in der Haupt-PHP-Datei des Plugins den Widget-Code ein. Ich werde in diesem Tutorial nicht auf die Besonderheiten der Erstellung von WordPress-Widgets eingehen, da unser Fokus anders ist. Wir haben eine Lernanleitung Einführung in das Erstellen Ihres ersten WordPress-Widgets von Rachel McCollin, die Sie bei Bedarf auf den neuesten Stand bringen soll.

Navigieren Sie im WordPress-Administrator zu Darstellung > Widgets und fügen Sie das Widget "Fotos von Flickr" einem Widget-Bereich hinzu. Wenn Sie jetzt zum Front-End gehen, sehen Sie den Widget-Titel, aber noch keine Ergebnisse.

Zurück in unserer Plugin-PHP-Datei rendern wir hier die Widget-Ausgabe selbst. Wir haben unseren API-Schlüssel, die Methode und das Format, nach dem wir suchen. Jetzt müssen wir sicherstellen, dass die Flickr-Benutzer-ID und die Anzahl der Fotos, die der Benutzer abrufen möchte, angegeben sind. Diese werden in den Widget-Einstellungen erfasst.

Hinweis: Um eine Flickr-Benutzer-ID zu erhalten, verwenden Sie diesen Dienst. Ich verwende envato als Benutzernamen und die ID lautet 52617155@N08. Geben Sie den folgenden Code in die IF-Anweisung ein:

$url = 'https://www.flickr.com/services/rest/';
$arguments = array(
    'api_key' => 'f49df4a290d8f224ecd56536af51FF77',
    'method'  => 'flickr.people.getPublicPhotos',
    'format'  => 'json',
    'user_id' => $user_id,
    'per_page'=> $photos_number,
);
$url_parameters = array();
foreach ($arguments as $key => $value){
    $url_parameters[] = $key.'='.$value;
}
$url = $url.implode('&', $url_parameters);

Zu diesem Zeitpunkt können wir die endgültige REST-API-Endpunkt-URL mit allen von uns gesammelten Argumenten zusammenfügen.

Jetzt stellen wir eine API-Anfrage mit der PHP-Funktion file_get_contents():

1	$response = file_get_contents($url);
2	if ($response) {
3	print_r($response);
4	}

Wenn Sie jetzt zum Frontend gehen, wird so etwas ausgegeben:

jsonFlickrApi({"photos":{"page":1,"pages":1033,"perpage":1,"total":"1033","photo":[{"id":"15647274066","owner":"52617155@N08","secret":"2ee48c3fe9","server":"3940","farm":4,"title":"Halloween 2014 at Envato in Melbourne","ispublic":1,"isfriend":0,"isfamily":0}]},"stat":"ok"})

Unsere Anfrage war erfolgreich und hat nützliche Daten zurückgegeben. Jetzt dekodieren und formatieren wir sie. Wir beginnen mit der Bereinigung der JSON-Zeichenfolge. Entfernen Sie zunächst den Wrapper (jsonFlickrApi({...});) mit einem str_replace. Dann dekodieren wir die JSON-URL:

1	$response = str_replace('jsonFlickrApi(', '', $response);
2	$response = str_replace('})', '}', $response);
3	$response = json_decode($response,true);

Wenn wir nun unsere Ergebnisse drucken, sehen wir ein assoziatives Array mit Daten. Wenn wir fertig sind, können wir dieses Array durchlaufen und die Datenausgabestruktur erstellen. Schauen Sie sich zunächst den kleinen Parameter stat genauer an. Laut Flickr-Dokumentation gibt dies den Antwortstatus an. Bevor Sie also die Struktur des Widgets erstellen, verwenden wir diesen Status, um sicherzustellen, dass wir über die richtigen Daten verfügen. Fügen Sie eine IF-Anweisung hinzu:

1	if ($response['stat'] == 'ok') {
2	// code here…
3	}

Erstellen Sie vor der IF-Anweisung ein leeres Array. Dieses Array wird dann verwendet, um die gesammelten Daten zu enthalten:

1	$response_results = array();

Ihre foreach-Schleife sollte nun folgendermaßen aussehen:

if ($response['stat'] == 'ok') {
    foreach ($response['photos']['photo'] as $photo) {
        $response_results[$photo['id']]['link'] = esc_url('//flickr.com/photos/'.$photo["owner"].'/'.$photo["id"]);
        $response_results[$photo['id']]['url']  = esc_url('//farm'.$photo["farm"].'.staticflickr.com/'.$photo["server"].'/'.$photo["id"].'_'.$photo["secret"].'_s.jpg');
        $response_results[$photo['id']]['alt']  = esc_attr($photo["title"]);
    }
}

Hier durchlaufen wir jedes Fotoobjekt im Fotoarray aus unseren Antwortdaten. Unser Widget benötigt die folgenden Informationen, um ordnungsgemäß zu funktionieren:

Bild absolute URL
Bildlink zu Flickr
Bildbeschreibung/Alternativtext

Wenn Sie diese Seite untersuchen, werden Sie verstehen, warum ich die angegebene Struktur verwendet habe. Hier finden Sie detaillierte Informationen zum Erstellen des Bildpfads und der Bildverknüpfung.

Widget-Ausgabe erstellen

Jetzt enthält unser Array $response_results genau die Daten, die wir zum Erstellen unseres Widgets benötigen:

if (!empty($response_results)) {
    $output = '';
    $output .= '<ul class="widget-flickr-list">';
        foreach ($response_results as $photo) {
            $output .= '<li>';
                $output .= '<a href="'.$photo['link'].'" target="_blank">';
                    $output .= '<img src="'.$photo['url'].'" alt="'.$photo['alt'].'" />';
                $output .= '</a>';
            $output .= '</li>';
        }
    $output .= '</ul>';
    echo $output;
}

Wir stellen zunächst sicher, dass unsere Antwort nicht leer ist. Danach erstellen wir eine ungeordnete Liste, speichern sie in $output, durchlaufen jedes Bild, fügen einen Wrapper-Link und alle anderen Details hinzu und geben das Ganze schließlich mit echo; aus.

Wenn Sie jetzt zum Site-Frontend gehen, sehen Sie eine Liste von Bildern!

Fügen wir mit CSS ein grundlegendes Styling hinzu, damit es besser aussieht.

Erstellen Sie eine leere flickr-widget.css-Datei im Root-Plugin-Ordner. Fügen Sie oben in der Plugin-Datei den folgenden Code ein:

if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
function register_script(){
wp_register_style('widget-flickr', plugins_url('/widget-flickr.css', __FILE__ ));
}
add_action( 'wp_enqueue_scripts', 'register_script' );

Fügen Sie dann in der IF-Anweisung ganz oben den folgenden Code hinzu:

1	if (!empty($response_results)) {
2	wp_enqueue_style('widget-flickr');

Fügen Sie in der CSS-Datei das grundlegende Styling hinzu:

.widget-flickr-list {
    list-style: none;
        margin:0 -4px 0 -4px;
        padding: 0;
}

.widget-flickr-list:after {
        content: "";
        clear: both;
}

.widget-flickr-list li {
        display: block;
        float: left;
        width: 25%;
        margin:0;
        padding: 4px;
}

Jetzt sieht es viel besser aus!

Bonus: Zwischenspeichern Sie die Daten mit WordPress-Transienten

Zu diesem Zeitpunkt haben wir das Widget fertiggestellt, aber es gibt noch eine Kleinigkeit, die unsere Entwicklung auf die nächste Stufe bringt: das Caching.

Jede API-Anforderung verwendet die Ressourcen Ihrer Site und erhöht die Ladezeit. Bei jedem erneuten Laden des Browsers wird eine API-Anforderung gesendet, bei der es sich um mehrere Benutzer gleichzeitig handeln kann. Was ist, wenn Ihr API-Provider-Host aus irgendeinem Grund nicht verfügbar ist? Ihre Site wird unter Ladeproblemen leiden. Die Lösung besteht darin, die Ergebnisse zwischenzuspeichern und in einem bestimmten Zeitintervall zu aktualisieren. Wenn ein Benutzer unsere Seite zum ersten Mal besucht, wird die API-Anfrage gesendet. Beim nächsten Mal oder mit einem anderen Benutzer müssen wir keine API-Anfrage senden, sondern die Ergebnisse aus unserem Site-Cache abrufen.

Ändern Sie den Widget-Code, um die Ergebnisse zwischenzuspeichern:

if (!empty($flickr_id))
{

    $api_key = 'f49df4a290d8f224ecd56536af51FF77';

    $transient_prefix = esc_attr($flickr_id . $api_key);

    if (false === ($response_results = get_transient('flickr-widget-' . $transient_prefix)))
    {

        $url = 'https://www.flickr.com/services/rest/';

        $arguments = array(
            'api_key' => $api_key,
            'method' => 'flickr.people.getPublicPhotos',
            'format' => 'json',
            'user_id' => $flickr_id,
            'per_page' => $photos_number,
        );

        $url_parameters = array();
        foreach ($arguments as $key => $value)
        {
            $url_parameters[] = $key . '=' . $value;
        }

        $url .= '?' . implode('&', $url_parameters);

        $response = file_get_contents($url);

        if ($response)
        {

            $response = str_replace('jsonFlickrApi(', '', $response);
            $response = str_replace('})', '}', $response);
            $response = json_decode($response, true);

            $response_results = array();

            if ($response['stat'] == 'ok')
            {
                foreach ($response['photos']['photo'] as $photo)
                {
                    $response_results[$photo['id']]['link'] = esc_url('//flickr.com/photos/' . $photo["owner"] . '/' . $photo["id"]);
                    $response_results[$photo['id']]['url'] = esc_url('//farm' . $photo["farm"] . '.staticflickr.com/' . $photo["server"] . '/' . $photo["id"] . '_' . $photo["secret"] . '_s.jpg');
                    $response_results[$photo['id']]['alt'] = esc_attr($photo["title"]);
                }

                if (!empty($response_results))
                {
                    $response_results = base64_encode(serialize($response_results));
                    set_transient('flickr-widget-' . $transient_prefix, $response_results, apply_filters('null_flickr_cache_time', HOUR_IN_SECONDS * 2));
                }

            }

        }
        else
        {
            return new WP_Error('flickr_error', esc_html__('Could not get data', 'your-text-domain'));
        }

    }

    if (!empty($response_results))
    {
        $response_results = unserialize(base64_decode($response_results));
        wp_enqueue_style('widget-flickr');
        $output = '';
        $output .= '<ul class="widget-flickr-list">';
        foreach ($response_results as $photo)
        {
            $output .= '<li>';
            $output .= '<a href="' . $photo['link'] . '" target="_blank">';
            $output .= '<img src="' . $photo['url'] . '" alt="' . $photo['alt'] . '" />';
            $output .= '</a>';
            $output .= '</li>';
        }
        $output .= '</ul>';
        echo $output;
    }
}

Ich werde nicht beschreiben, was der Übergang ist und wie er funktioniert, sondern nur, was er tut. Jedes Mal, wenn das Widget gerendert wird, prüfen wir zuerst, ob der Übergang vorhanden ist. Wenn es vorhanden ist, rufen wir Ergebnisse von Transienten ab. Wenn nicht, stellen wir eine API-Anfrage. Und alle zwei Stunden läuft unser Transient ab, um unsere neuesten Flickr-Bilder aktuell und aktuell zu halten.

Mit dem WordPress-Plugin Transients Manager können Sie sogar sehen, wie Ihre zwischengespeicherten Flickr-API-Anforderungsergebnisse aussehen:

Und der letzte Schliff hier ist das Entfernen von Transienten für jedes Widget-Update. Wenn Sie beispielsweise die Anzahl der angezeigten Bilder oder den Benutzernamen ändern möchten, müssen Sie eine neue API-Anfrage stellen. Dies kann mit dem WordPress-Filter widget_update_callback oder dem Update der öffentlichen Funktion der Widget-Klasse erfolgen:

public function update($new_instance, $old_instance)
{
    $instance = $old_instance;
    $instance['title'] = strip_tags($new_instance['title']);
    $instance['photos_number'] = strip_tags($new_instance['photos_number']);
    $instance['flickr_id'] = strip_tags($new_instance['flickr_id']);

    $api_key = 'f49df4a290d8f224ecd56536af51FF77';
    $transient_name = 'flickr-widget-' . esc_attr($instance['flickr_id'] . $api_key);

    delete_transient($transient_name);

    return $instance;
}

Abschluss

Das war eine Menge Aufwand, aber jetzt wissen Sie, wie man mit WordPress und APIs arbeitet! Wenn Ihnen dieser Beitrag gefallen hat und Sie zusätzliche Tutorials zu APIs oder Transienten sehen möchten, lassen Sie es mich im Kommentarbereich wissen.

Um die Widget-Beispieldateien abzurufen, gehen Sie zum GitHub-Repository.