So fügen Sie WordPress-APIs von Drittanbietern hinzu (Plugin und kein Plugin).

Mit APIs können Sie Ihre WordPress-Site mit Diensten und Datenquellen von Drittanbietern verbinden. Auf diese Weise können Sie neue Funktionen und Funktionen hinzufügen, Ihre Website interaktiver und informativer gestalten oder in Tools wie Analytics, E -Mail -Marketinganbieter oder CRMs integrieren.

WordPress kann sowohl einfache als auch komplexe API -Integrationen mithilfe von Plugins sowie benutzerdefinierten Code verarbeiten. In diesem Tutorial werden wir Ihnen beibringen, wie Sie sowohl die potenziellen Leistungen Auswirkungen von API -Integrationen und die Minderung des Minderung der potenziellen Leistungen erörtern.

Was ist eine API und warum für WordPress eine hinzufügen?

API steht für "Anwendungsprogrammierschnittstelle". Beim Computer ist eine Schnittstelle etwas, das zwei oder mehr Komponenten miteinander verbindet. In diesem Fall sind die Komponenten unterschiedliche Systeme oder Anwendungen.

APIs ermöglichen es ihnen, Daten in Echtzeit und in einer Weise sicher zu tauschen, die jeder von ihnen verstehen und verarbeiten kann. Sie sind im Internet sehr häufig. Wenn Sie sich jemals mit Ihrem Google- oder Facebook -Konto auf einer Website angemeldet haben, geschah dies dank der Authentifizierungs -API.

In WordPress können Sie APIs verwenden, um Informationen aus externen Diensten in Ihre WordPress -Site zu ziehen - oder Daten auszugeben. Zum Beispiel können Sie sie verwenden, um:

• Zeigen Sie auf Ihrer Website Live -Wetter-, Wechselkurse oder Aktienmarktaktualisierungen.

• Zeigen Sie Social -Media -Feeds an.

• Veröffentlichen Sie Ihre Inhalte automatisch in sozialen Netzwerken.

• Integrieren Sie Ihre Website in ein Zahlungsgateway wie Stripe oder PayPal.

• Zeigen Sie Echtzeit-Versandpreise in Ihrem Online-Shop.

• Ziehen Sie Produktinformationen aus einem Lagersystem an.

• Senden Sie Abonnentendaten aus einem Webformular an einen E -Mail -Marketing -Service.

Mit APIs können Sie auch Prozesse auf Ihrer Website automatisieren. Sie können beispielsweise die Bildoptimierung in einen Dienst wie Abbildungen auslagern. Kurz gesagt, APIs machen Websites funktionaler und benutzerfreundlicher.

Wichtige API -Komponenten

Um eine API zu verwenden, benötigen Sie normalerweise einige grundlegende Teile:

• Endpunkt -URL : Die URL, an die Sie Ihre Anfrage senden. Dies sagt der API, wonach Sie fragen (z. B. aktuelles Wetter, Liste der Blog -Beiträge usw.).

• Parameter: Dies sind optionale Werte, die Sie weitergeben, um die Anforderung anzupassen, z. B. Speicherort, ID, Suchbegriffe oder Datumsbereich. Parameter helfen zu verfeinern, was die API Ihnen zurückgibt.

• Datenformat: Dies ist das Format, in dem die Daten übertragen werden. Das häufigste Format ist JSON, da es sowohl in JavaScript als auch in PHP leicht und einfach zu bedienen ist. XML oder einfacher Text sind ebenfalls Optionen.

• Authentifizierung: Viele APIs erfordern einen API -Schlüssel oder einen Token, um zu überprüfen, ob Sie auf die Daten zugreifen dürfen. Sie müssen es ansenden, um Ihre Anfrage zu legitimieren.

Nicht jede API verlangt von jedem dieser Stücke, um Ihnen eine Antwort zu geben. Wir werden im Folgenden reale Beispiele weiter diskutieren.

Die WordPress -REST -API

WordPress selbst hat mehrere integrierte APIs. Am prominentesten ist die Rest -API. Ruhe steht für „Repräsentationsstatusübertragung“, was einfach bedeutet, dass die API ein bestimmtes Format und eine bestimmte Architektur verwendet.

Der Zweck der Rest -API ist es, WordPress -Daten für andere Systeme zugänglich zu machen. Dies ist beispielsweise für das Erstellen mobiler Apps zur Verwaltung Ihrer Website nützlich. Die Rest-API ermöglicht auch sogenannte kopflose WordPress-Setups. Hier verbinden Sie eine benutzerdefinierte, häufig javaScript-basierte Benutzeroberfläche mit dem WordPress-Back-End über API.

Dies ist ein wichtiges Thema, aber nicht unser Fokus hier. Stattdessen werden wir damit umgehen, wie Sie Ihrer WordPress -Site externe APIs hinzufügen können.

So fügen Sie WordPress mit einem Plugin eine API hinzu

Es gibt zwei Hauptmöglichkeiten, wie Sie APIs in Ihre WordPress -Site integrieren können:

• Code: Wenn Sie über die Fähigkeiten verfügen oder jemanden einstellen, der dies tut, können Sie Ihre Site mit einem benutzerdefinierten Code, dem normalerweise PHP oder JavaScript, mit einer API verbinden.

• Plugins: WordPress verfügt über Plugin -Lösungen für fast alles, einschließlich Hinzufügen und Konfigurieren von APIs auf Ihrer Website.

Wir werden beide durchgehen, beginnend mit Plugin -Lösungen. Diese sind für Nichtentwickler bequem, da Sie sie über eine Benutzeroberfläche konfigurieren und ihre Daten mit Shortcodes, Widgets oder Blöcken anzeigen können, anstatt sich mit Code- oder Website-Dateien zu befassen.

Greifen Sie auf die Google Maps -API zu

Für unser erstes Beispiel lernen wir, wie Sie Ihrer Website eine Google Maps -Karte hinzufügen. Diese Fähigkeit ist dank der Google Maps -API möglich, mit der Sie Karten einbetten, Marker wie Speicherorte hinzufügen und das Kartendesign ändern können.

Das erste, was Sie brauchen, ist, ein kostenloses Google Cloud -Konto mit aktivierter Abrechnung zu erstellen. Sobald Sie das haben, melden Sie sich an und erstellen Sie an der Spitze ein neues Projekt.

Greifen Sie auf Ihr Projekt zu und gehen Sie entweder über das Navigationsmenü oder die Verknüpfung im Dashboard zu APIs & Services .

Klicken Sie auf die Bibliothek und finden Sie dann die Karten -JavaScript -API .

Zugang und aktivieren. Sie erhalten während des Prozesses einen API -Schlüssel, können sie jedoch später auch unter Schlüssel und Anmeldeinformationen finden. Stellen Sie sicher, dass Sie die Verwendung Ihrer Domain für die Sicherheit einschränken.

Installieren und aktivieren Sie das WP -GO -Karten -Plugin im WordPress -Plugins -Menü. Sobald Sie fertig sind, gehen Sie zu Maps> Einstellungen> Erweiterte Einstellungen , fügen Sie Ihre Google Maps -API -Schlüssel ein und speichern Sie die Einstellungen.

Danach können Sie eine neue Karte über die Schnittstelle des Plugins erstellen.

Speichern Sie es, sobald Sie zufrieden sind. Sie können es dann auf Ihrer Website anmelden, wo immer Sie den Kartenblock oder mit dem Shortcode des Plugins für Ihre benutzerdefinierte Karte erzeugt.

Herzlichen Glückwunsch, Sie haben gerade eine API zu Ihrer WordPress -Site hinzugefügt.

Verwenden Sie WPGetapi für fast jede API

Das obige Beispiel funktioniert nur für eine bestimmte API. Wenn Sie eine Plugin -Lösung wünschen, die allgemeiner für die Integration von APIs in Ihre Website ist, ist eine der beliebtesten WPGetapi.

So funktioniert es: Für dieses Beispiel möchten wir Wetterinformationen von OpenWeatherMap.org anzeigen. Der erste Schritt dafür besteht darin, ein Konto für diesen Service zu erstellen und sich für einen Plan anzumelden (es gibt eines mit 1000 kostenlosen Anrufen pro Tag, die Sie zum Testen verwenden können).

Alle Informationen zur Verwendung der API der Website finden Sie in der Dokumentation.

Richten Sie den API -Anruf ein

Wenn Sie anfangen, installieren und aktivieren Sie WPGetAPI und gehen Sie dann zu WPGetAPI> Setup in Ihrem Dashboard.

Füllen Sie die Informationen auf dem ersten Bildschirm wie folgt aus:

• API -Name: Sie wissen also, wofür jede API ist.

• Eindeutige Kennung: Der WordPress-Internal Name der API zur Anzeige. Verwenden Sie nur Kleinbuchstaben und Unterstriche, z. B. "open_weather_map".

• Basis -URL: Die allgemeine Adresse der API ohne Endpunkt. In diesem Beispiel ist das https://api.openweathermap.org .

Sobald Sie fertig sind, sparen Sie, um fortzufahren.

Konfigurieren Sie Ihren Endpunkt und Ihre Parameter

Klicken Sie anschließend oben auf die Registerkarte der API, um den Rest des API -Aufrufs zu konfigurieren.

Hier erfahren Sie, wie man das macht:

• Eindeutige ID: Der Name des Endpunkts, den Sie verwenden werden.

• Endpunkt: Dies wird an die Basisadresse beigefügt (hier ist „Daten/3.0/OneCall“).

• Methode: Die HTTP -Anfrage, in der angegeben ist, ob Sie etwas am Endpunkt senden, lesen, erstellen, aktualisieren oder löschen sollen. Wir wollen etwas erhalten, also verwenden wir Get.

• Ergebnisformat: Unabhängig davon, ob Sie die Daten im PHP- oder JSON -Format von der API empfangen möchten, verwenden wir JSON hier.

• Timeout: Wie lange sollte die Verbindung geöffnet bleiben.

Setzen Sie darunter die Parameter. Die offene Wetterkarte -API erfordert drei:

• LAT: Die Breite des Ortes, für den Sie Wetterinformationen wünschen.

• LON: Wie Sie wahrscheinlich vermuten können, ist dies die Länge Ihres Zielortes.

• Appid: Ihr API -Schlüssel, den Sie in Ihrem Konto finden können.

Die OpenWeatherMap -API akzeptiert auch optionale Parameter:

• Ausschließen: Ermöglicht Ihnen einige Teile der Wetterdaten, z. B. tägliche oder stündliche Prognosen.

• Einheiten: Stellen Sie Ihre bevorzugten Messeinheiten fest.

• Lang: Wählen Sie Ihre Ausgabesprache.

Setzen Sie die Parameter im Abschnitt Abfrage -Zeichenfolge in Schlüsselwertpaaren, z. B. "Lat" links und "48.8542" rechts.

Speichern und dann klicken Sie oben auf den Testendpunkt . Sie können sehen, ob es funktioniert und die Antwort überprüfen.

Zeigen Sie die Ausgabe an

Wenn alles in Ordnung ist, können Sie das Template -Tag oder den Shortcode WPGetAPI verwenden, um es auf Ihrer Website anzuzeigen.

Wenn Sie jetzt die Seite oder den Beitrag vorschauen, sehen Sie, dass die Daten angezeigt werden.

Derzeit sind es derzeit RAW -JSON -Daten, daher ist es nicht so informativ, sie anzusehen. Die kostenpflichtige Version des Plugins verfügt über eine Funktionalität, um die Ausgabe weiter zu formatieren und anzupassen.

Manuell auf APIs in WordPress zugreifen

Wenn Sie nicht die Plugin -Route gehen möchten, können Sie API -Anrufe von Hand erstellen. Dies gibt Ihnen mehr Kontrolle, da Sie die von Ihnen angeforderten Daten und der Ausgabe sofort anpassen können.

Mit PHP

Wenn Sie das Beispiel für offene Wetterkarte fortsetzen, erhalten Sie hier eine PHP -Funktion, um die gleichen Wetterinformationen wie oben zu erhalten:

 function get_weather_data() { $api_key = 'YOUR_API_KEY_HERE'; // Replace with your actual API key $endpoint = "https://api.openweathermap.org/data/3.0/onecall?" . http_build_query([ 'lat' => 48.8542, 'lon' => 2.3467, 'exclude' => 'minutely,hourly,daily,alerts', 'units' => 'metric', 'appid' => $api_key ]); $response = wp_remote_get($endpoint); if (is_wp_error($response)) { return '<div class="weather-widget error">Failed to fetch weather data.</div>'; } $body = wp_remote_retrieve_body($response); $data = json_decode($body, true); if (!empty($data) && isset($data['current']['temp'])) { $temp = esc_html($data['current']['temp']); return '<div class="weather-widget">Current temperature in Paris: <span class="weather-temp">' . $temp . '°C</span></div>'; } return '<div class="weather-widget error">Weather data not available.</div>'; } function weather_shortcode() { return get_weather_data(); } add_shortcode('weather', 'weather_shortcode');

Hier ist, was es tut:

• Fordert die gleichen Koordinaten und andere Parameter auf.

• Verwendet wp_remote_get (), um die HTTP -Anforderung zu erstellen.

• Zieht nur die aktuelle Temperatur aus der JSON -Reaktion.

• Wickelt die Ausgabe in einige HTML, damit Sie sie bei Bedarf stylen können.

• Registriert einen Shortcode namens "[Wetter]", um die Daten in WordPress auszugeben.

Geben Sie die Funktion entweder in die Datei functions.php Ihres (untergeordneten) Themas oder in ein benutzerdefiniertes Plugin ein. Verwenden Sie dann den Shortcode wie zuvor. So sieht es auf der Seite aus:

JavaScript

Sie können auch JavaScript verwenden, um eine Verbindung zu APIs herzustellen. Dies ist besonders nützlich für dynamische Inhaltsaktualisierungen, AJAX-Anforderungen oder einseitige Anwendungen.

Hier ist ein sehr einfaches Beispiel mit der Fetch () -Methode zum Anzeigen zufälliger Informationen über Katzen aus der Cat Facts -API:

 <div>Loading cat fact...</div> <div class="wp-block-buttons"> <div class="wp-block-button"><a class="wp-block-button__link wp-element-button">New Cat Fact</a></div> </div> <script> function loadCatFact() { fetch('https://catfact.ninja/fact') .then(response => response.json()) .then(data => { document.getElementById('cat-fact').textContent = data.fact; }) .catch(error => { document.getElementById('cat-fact').textContent = 'Failed to load cat fact.'; console.error(error); }); } // Load the first fact when the page loads loadCatFact(); // Add button click handler for new facts document.getElementById('new-fact').addEventListener('click', loadCatFact); </script>

Sie können dies in einen benutzerdefinierten HTML -Block eingeben, um ihn sofort in WordPress anzuzeigen.

APIs von Drittanbietern und Website-Leistung

Durch das Hinzufügen von APIs von Drittanbietern zu WordPress kann sich die Leistung und die Ladezeiten Ihrer Website auswirken, wenn sie nicht ordnungsgemäß behandelt werden. Jedes Mal, wenn eine Seite einen API -Anruf lädt und tätigt, werden Informationen zum Laden und Erhöhung der Serververarbeitungszeit hinzugefügt. Langsame oder nicht reagierende API -Antworten können auch Ihre Seitenrendern verzögern, leere Seitenabschnitte anzeigen oder Ihre Website brechen.

Um diese Probleme zu vermeiden, ist es wichtig, API -Antworten zu unterbrechen, sodass sie nicht auf jeder Seite geladen werden. Viele API-Plugins wie WPGetapi haben dafür integrierte Optionen. Wenn Sie API -Anrufe von Hand schreiben, müssen Sie Ihre eigenen Caching -Mechanismen einrichten.

Darüber hinaus können Sie die Leistungsauswirkungen reduzieren, indem Sie die API -Aufrufe auf bestimmte Ereignisse (z. B. ein Klicken auf eine Schaltfläche) anstelle jeder Seitenlast einschränken. Eine andere Option besteht darin, API -Aufrufe mit WP_CRON () zu planen und die Ergebnisse für die Anzeige später zu speichern.

Verbesserung der Leistung mit einem Plugin

Ein weiterer effektiver Schritt zur Minimierung des Effekts von API -Aufrufen auf die Leistung von Site ist die Verwendung von WP Rocket.

Zunächst erweitert das Plugin Ihre Website (einschließlich eines separaten mobilen Cache). Dies erzeugt statische Versionen Ihrer gerenderten Seiten und ermöglicht es den Besuchern, vorinstallierte Inhalte zu sehen, anstatt auf API -Antworten zu warten. Dies funktioniert besonders gut für API-Daten, die mit Shortcodes oder serverseitigem PHP angezeigt werden.

Wenn Sie API -Inhalte über JavaScript laden, verbessert WP Rocket die Ladezeit durch:

• Minimieren Sie JavaScript, um Dateien kleiner zu machen (standardmäßig aktiviert)

• Kombinieren Sie mehrere Dateien zu einem für schnellere Downloads

• Dateien aufschieben und asynchron laden

• Verzögerung der JavaScript -Ausführung

Sie haben die Möglichkeit, einzelne Skripte, Plugins und Dateien von der Optimierung auszuschließen, falls sie die Anzeige Ihres API -Inhalts beeinträchtigt. Außerdem können Sie alle oben genannten durchführen, indem Sie einfach einige Kästchen im Menü Dateioptimierung überprüfen.

Darüber hinaus verfügt WP Rocket mit einer Reihe automatischer Leistungsverbesserungen im Hintergrund, wie z. B.:

• GZIP -Komprimierung

• Vorspannung für Cache und Links

• Kritische Bildoptimierung (ausschließt Bilder über der Falte von fauler Laden), um die größte inhaltliche Farbe zu verbessern

• Automatisches Lazy -Rendering, um Elemente zu laden, die auf Ihren Webseiten schneller erscheinen

Wenn Sie nur das Plugin installieren und aktivieren, können Sie Ihre Website von 80% der Best Practices der Leistung profitieren und es sofort beschleunigt, ohne dass Sie von Ihnen erforderlich sind. Außerdem gibt es viele andere Funktionen, die Sie manuell aktivieren können, um Ihre Site -Geschwindigkeit zu erhöhen, z. B.:

• Faules Laden für Bilder, einschließlich CSS -Hintergründe, Videos und IFrames

• Vorspannung externe Dateien und Schriftarten

• Selbsthosting Google-Schriftarten

• Datenbankoptimierung

• Optionen, um einfach eine Verbindung zu einem CDN herzustellen, einschließlich RocketCDN

Fallstudie: Beschleunigen Sie API -Anrufe mit WP Rocket

Um besser zu verstehen, wie sich das Hinzufügen einer externen API auf die Standortleistung auswirkt - und wie ein Plugin wie WP -Rakete helfen kann -, richten wir eine kontrollierte Testumgebung ein. Wir haben eine Demo WordPress -Website mit Dummy -Inhalten erstellt und eine Karte von Google Maps mit WP Go Maps hinzugefügt.

Die Ergebnisse der PageSpeed Insights lagen völlig unoptimiert: folgt: folgt:

Wir haben dann die WP -Rakete und die folgenden Funktionen aktiviert:

• CSS und JavaScript minifieren

• Entfernen Sie ungenutzte CSS

• Laden Sie JavaScript aufgeschoben

• JavaScript -Ausführung verzögern

Dies lässt sich die folgenden Änderungen aus.

Das ist eine massive Verbesserung im Vergleich zur Grundlinie! Auch wenn Ihre Website viel ansprechender werden kann, sind dynamische Inhalte wie Google Maps mit viel zusätzlichen Code enthalten, was Ihre Website verlangsamen kann. WP Rocket mindert seine Wirkung - und alles, was es braucht, sind ein paar Klicks.

Fügen Sie WordPress API ohne die Leistung hinzu

APIs eröffnen endlose Möglichkeiten für dynamische, Echtzeitinhalte und leistungsfähige Integrationen. Dank WordPress -Plugins und einfachen Integrationen können Sie sie sogar zu Ihrer Website hinzufügen, ohne Entwickler zu sein.

Denken Sie nur daran, dass jeder API -Anruf die Seitenleistung beeinflussen kann. Fühlen Sie sich aus Ihrer Tiefe optimieren? WP Rocket ist hier, um zu helfen-probieren Sie es 15 Tage lang risikofrei!