Bei der Suche in Google und im Archiv der Websites unter der Abfrage React
habe ich einige interessante Fragen gefunden:
- Kann ich ein Wordpress-reagierendes Thema in das Wp-Themen-Repository hochladen?
- Isomorphes JavaScript (React JS) in Wordpress implementieren?
- Verwenden von React.js in WordPress
- Kann diese Seite mit WordPress erstellt werden?
und das lesen, das theme development documentation
besagt:
Ein WordPress-Theme besteht mindestens aus zwei Dateien:
- style.css
- index.php
Also im Abschnitt Reagieren, wenn index.html
durch ersetzt index.php
und syle.css
auf der Hauptebene mit dem Stylesheet-Header platziert wurde. Gibt es einen Grund, warum das Frontend der Website nicht funktioniert?
Die React-App würde die API aufrufen, sodass ich nicht sehe, was das Problem wäre, wenn ich anrufen würde http://foobar.com/wp-json/wp/v2/posts/
. Ich würde ein PNG für das Thema hinzufügen, aber laut Recherche habe ich keine bessere Alternative gefunden und versuche, eine WP-Instanz in einer Unterdomäne und eine React-Site in der Hauptdomäne zu verhindern. Gibt es irgendetwas, das Probleme in einem React-WordPress-Theme verursachen würde?
quelle
Antworten:
Sie können Reagieren in einem Thema verwenden. Ja, wenn Ihr Thema nur die eine Vorlage hat und sich auf JS verlässt, um das gesamte Frontend zu rendern und zu navigieren, Daten abzurufen, dann sehe ich nicht, wie es anders ist, wenn Sie es verwenden oder nicht Verwenden Sie Reagieren
Sie müssten verschiedene URLs berücksichtigen und Daten in Ihre Reaktions-App laden, aber zu diesem Zeitpunkt handelt es sich um ein Reaktionsproblem, nicht so sehr um ein WP-Problem.
Kein Problem hier
Die einzige Sorge, die ich habe, ist, dass Sie das Routing selbst verwalten müssen, wenn Sie in der Anwendung herumklicken, und sicherstellen müssen, dass beim Besuch von etwas, das beim ersten Laden nicht die Startseite ist, der richtige Inhalt geladen wird. Dies ist jedoch ein Problem mit dem React Router (vorausgesetzt, dies ist die Bibliothek, die Sie für das Routing verwenden).
Das klingt nach einer großartigen Möglichkeit, Dinge unnötig zu komplizieren. Lassen Sie das Thema einfach der React-App dienen. Das Laden von Ressourcen aus einem Thema heraus ist das gleiche Problem, wenn es sich um React oder jQuery oder Backbone handelt und der Browser sie auf dieselbe Weise lädt. Sagen Sie Ihrem JS einfach, wo sich die Themen-URL befindet.
Dies ist eine äußerst offene Frage, die davon abhängt, was Sie tun möchten.
Ehrlich gesagt klingt es so, als ob Sie nach Sicherheit suchen. Denken Sie daran, React ist Javascript. Sie können Javascript in Themen verwenden und die REST-API aus Javascript in einem Thema aufrufen. Es spielt keine Rolle, welches UI-Framework diesen Code antreibt. Wenn es sich um React, Vue, jQuery, Vanilla JS oder Angular handelt, ist alles JS.
Wenn Sie das Laden von Posts und das Rendern von Posts in Ihrem Javascript übernehmen möchten, können Sie dies tun. Wenn Sie als Mittel dafür Reagieren wählen, liegt das bei Ihnen.
Es gibt jedoch einige offensichtliche Dinge, die Sie tun müssen:
Denken Sie daran, dass Sie anrufen möchten
wp_footer
undwp_head
, damit Sie einheader.php
und benötigenfooter.php
, auch ein,functions.php
damit Sie Ihre JS und Stile in die Warteschlange stellen können.Nichts davon ist reaktionsspezifisch, jedes Thema sollte das tun. Möglicherweise möchten Sie auch das WP-API-Skript in die Warteschlange stellen, damit die REST-API-URL übergeben wird. Auch dies ist nicht spezifisch für eine React-Anwendung.
Vor allem aber gibt es kein React-Thema. Es gibt Themen, die zufällig React verwenden. Es ist leicht, sich etwas anderes vorzustellen, aber am Ende des Tages ist es wirklich nur JS in einem eher leer aussehenden Thema
quelle
footer.php
,header.php
,functions.php
undindex.php
. Wenn ich das Sub- und Main-Setup mache, ist es einfach, aber ich hasse die Idee, nicht alles unter einer Domain zu haben.functions.php
über enqueue und haben den Eintrittspunkt inindex.php
und eine minimalefooter.php
undheader.php
um sicherzustellen , dass die richtigen Haken sind gefeuert<html><head><?php wp_head(); ?></head><body>
usw. Keiner dieser Schritte ist React-Theme-Schritte, sondern Theme-Grundlagen 101. Erstellen Sie einfach ein minimales Theme ohne Styling oder Inhalt und platzieren Sie eine React-App in der Mitte