Foxhound | CSS-Tricks

Seit WordPress 4.7 (Dezember 2016) wird WordPress mit einer integrierten JSON-API ausgeliefert. Möchtest du es sehen? Rufe diese URL auf hier auf CSS-Tricks. Es gibt viele Dokumentationen dafür.

Diese JSON-API kann für alle möglichen Dinge verwendet werden. Ich denke, APIs werden oft im Hinblick auf externe Nutzung betrachtet, zum Beispiel um Daten für eine andere Website verfügbar zu machen. Aber es ist ebenso interessant, die API direkt auf der Website selbst zu verarbeiten. So werden heutzutage viele Websites aufgebaut, mit „modernem JavaScript“ und allem Drum und Dran.

Es ist also möglich, ein WordPress-Theme zu erstellen, das seine eigene API für alle Daten nutzt und somit eine komplett clientseitig gerenderte Website erstellt.

Ich hätte gedacht, es gäbe eine Menge solcher Themes, aber es scheint, dass es sich noch um ein so neues Konzept handelt, dass es nicht viele gibt. Jedenfalls nicht, was ich gefunden habe. Ich habe aber Foxhound von Kelly Dwan gefunden. Es ist einfach und sieht ziemlich gut aus.

Es basiert auf React, daher ist das Ganze logisch in Komponenten unterteilt.

Ich habe es auf einer Testseite hochgeladen und es funktioniert ziemlich gut! Damit ich mich durchklicken und verschiedene Dinge tun konnte, habe ich die „theme test unit“-Daten importiert, was eine schnelle und gute Möglichkeit ist, eine frische WordPress-Installation für Testzwecke mit vielen typischen Inhalten (Beiträge, Autoren, Kommentare usw.) zu füllen.

Nur eine Hülle der Seite wird serverseitig gerendert, so sieht es aus. Ohne JavaScript bekommt man also gar nichts. Sicherlich könnte man all das auf die herkömmliche serverseitig gerenderte WordPress-Art zum Laufen bringen, man würde nur eine Menge Arbeit duplizieren, daher ist es nicht überraschend, dass dies hier nicht gemacht wurde. Ich würde denken, es ist wahrscheinlicher, dass man versucht, React serverseitig zu rendern, als PHP und React synchron zu halten.

Ungefähr 50 % der angeklickten URLs laden sofort, wie man es von einer SPA-Seite erwarten würde. Es sieht so aus, als ob alle Links, die in der Hülle der Seite generiert werden, die PHP rendert, einen Refresh auslösen, und Links, die in React-Komponenten gerendert werden, laden im SPA-Stil.

Ich denke, dies wäre eine wirklich starke Grundlage, wenn Sie daran interessiert wären, eine mit React betriebene WordPress-Website zu erstellen. Das ist heutzutage definitiv eine Sache. Ich habe mir gerade die Human Made-Website angesehen, und sie sagen, dass sie genau das für ustwo getan haben.

ustwo wollte eine entkoppelte Website mit einem WordPress-Backend und einem React-Frontend erstellen. Human Made trat dem Entwicklungsteam bei, um die WordPress-Komponente zu erstellen, einschließlich benutzerdefinierter Beitragstypen und einer benutzerdefinierten REST-API, um strukturierte Daten für die Frontend-Anzeige zu liefern.

Damit Sie es wissen, Leute bezahlen heutzutage für diese Art von Arbeit.

Kommentare

Gans

# 28. September 2017

„Aber es ist ebenso interessant, die API direkt auf der Website selbst zu verarbeiten.“

Das habe ich schon einmal gemacht. In meinem Fall holte der Server die Daten von seiner eigenen API und leitete diese Daten direkt an die Ansicht weiter, sodass es keine JavaScript-gerenderten Ansichten waren, aber die meisten Leute würden über die API mit der Website interagieren und nicht über das Frontend, daher war es perfekt, um sicherzustellen, dass meine API einfach zu verwenden und fehlerfrei war.

Brian Compton

# 28. September 2017

Das ist cool und alles, aber gibt das nicht einfach alle meine Beiträge in einem hübschen kleinen Paket für jeden preis, der sie haben möchte? Ich bin auf die WP-Website meines Unternehmens gegangen und habe /wp-json/wp/v2/posts angehängt, und es hat jeden Beitrag in JSON ausgegeben, ohne jegliche Authentifizierung oder Ähnliches. Das mag für einen Blog in Ordnung sein, könnte aber ein Problem für Unternehmen mit Konkurrenten sein.

Michael Mizner

Permalink zum Kommentar# 28. September 2017

Hallo Brian, viele dieser Informationen sind bereits über RSS auf jeder WordPress-Website verfügbar (es sei denn, Sie haben es ausdrücklich deaktiviert).

Ein RSS-Beispiel finden Sie auf CSS Tricks selbst.
https://css-tricks.de/feed/?post_type=posts

Hier ist das entsprechende WP REST API-Äquivalent.
https://css-tricks.de/wp-json/wp/v2/posts

Beide sind ab Werk verfügbar, können aber mit ein wenig Anpassung durch Hooks und Filter (oder ein Plugin, das dies für Sie erledigt) gesperrt werden.
Johnny

Permalink zum Kommentar# 29. September 2017

Ich dachte dasselbe und habe ein wenig recherchiert. WordPress gibt standardmäßig alle Artikel frei, aber Sie können die Authentifizierung einfach hinzufügen: https://developer.wordpress.org/rest-api/using-the-rest-api/authentication/

Ich bin nur traurig, dass sie keine OAuth-Authentifizierung nativ, sondern nur Cookie-Authentifizierung aufgenommen haben. Aber Plugins können dabei helfen.

Ben Robertson

# 28. September 2017

Ich habe die WordPress API in letzter Zeit viel genutzt, um beim Tippen in ein Suchfeld Vorschläge für die Suche anzuzeigen. Es ist so einfach wie das Hinzufügen eines ?s= Parameters zu Ihrer API-Anfrage, wenn Sie in einem einzelnen Beitragstyp suchen. Wenn Sie über mehrere Beitragstypen hinweg suchen müssen, können Sie einen benutzerdefinierten Endpunkt erstellen. Das macht ziemlich Spaß!

Wolfr

# 28. September 2017

Ich wäre etwas besorgt über den Zugriff auf Dinge aus Plugins wie ACF oder WPML… Ich bin stark auf diese angewiesen (und auf viel Googeln nach Lösungen).

Marcelo Franzen

Permalink zum Kommentar# 28. September 2017

Für ACF kenne ich zumindest eine Lösung: https://br.wordpress.org/plugins/acf-to-rest-api/
Michael Mizner

Permalink zum Kommentar# 28. September 2017
Hallo Wolfr, im Allgemeinen gibt es keinen Grund zur Sorge. Die Verwendung von Plugins wie den von Ihnen genannten wird die REST-API standardmäßig nicht mit sensiblen Informationen überladen (abhängig von Ihrer Definition dessen, was sensibel ist).

Sie müssen absichtlich zusätzliche Informationen über eine Funktion wie register_rest_field freigeben.

Dokumentation: https://developer.wordpress.org/reference/functions/register_rest_field/

Gelegentlich habe ich absichtlich alle meine ACF-Felder über etwas wie https://wordpress.org/plugins/acf-to-rest-api/ freigegeben.

Das alles soll bedeuten, soweit ich das beurteilen kann, gibt die REST-API im Allgemeinen nichts frei, was RSS nicht bereits freigegeben hätte.

Es gibt Plugins, mit denen Sie sie vollständig deaktivieren oder verwenden können.
```
add_filter('rest_enabled', '__return_false');
add_filter('rest_jsonp_enabled', '__return_false');

remove_action( 'xmlrpc_rsd_apis', 'rest_output_rsd' );
remove_action( 'wp_head', 'rest_output_link_wp_head', 10 );
remove_action( 'template_redirect', 'rest_output_link_header', 11 );
```

WPezDeveloper

# 28. September 2017

Technisch gesehen, kann man das Frontend nicht vom Backend entkoppeln und das Frontend trotzdem in PHP machen? Es gibt nichts in der API, das erfordert, dass Anfragen von JS im Browser kommen, richtig?

Ich erwähne dies lediglich als Möglichkeit, die Lernkurve zu erleichtern.

Merlinni

Permalink zum Kommentar# 9. Oktober 2017

Die API verlangt nicht, dass Sie Anfragen über JS stellen. Für PHP würden Sie etwas wie CURL verwenden.

Dieser Kommentarbereich ist geschlossen. Wenn Sie wichtige Informationen teilen möchten, kontaktieren Sie uns bitte.