So erstellen Sie eine fast kopflose WordPress -Website

Herkömmliche WordPress -Themen können auch so effizient ausgeführt werden wie statische Websites oder kopflose Webanwendungen. Die überwiegende Mehrheit der WordPress -Websites wird mit herkömmlichen WordPress -Themen erstellt. Viele dieser Websites haben sogar gute Caching -Stufen und Abhängigkeitsoptimierungen, sodass sie ziemlich schnell laufen. Aber als Entwickler haben wir Wege gemeistert, um bessere Ergebnisse für unsere Websites zu erzielen. Durch die Verwendung kopfloser WordPress können viele Websites schnelleres Laden, eine bessere Benutzerinteraktion und nahtlose Übergänge zwischen den Seiten erreichen.

Das Problem ist: Wartung. Lassen Sie mich Ihnen eine andere Möglichkeit zeigen!

Lassen Sie uns zunächst definieren, was ich über "traditionelle" WordPress, "kopflos" WordPress und "fast kopflos" WordPress spreche.

Traditionelle WordPress -Websites

Traditionell verwenden WordPress -Websites PHP, um HTML -Tags auf Seiten zu rendern. Jedes Mal, wenn ein Link geklickt wird, sendet der Browser eine weitere Anfrage an den Server und rendert das HTML -Tag der geklickten Website.

Dies ist die Methode, die von den meisten Websites verwendet wird. Es ist am einfachsten zu warten, hat die niedrigste technische Komplexität und verwendet das richtige serverseitige Caching-Tool und funktioniert auch recht gut. Das Problem ist, dass es sich wie eine traditionelle Website anfühlt , da es sich um eine traditionelle Website handelt. In dieser Art von Website sind Übergänge, Effekte und andere stilvolle moderne Funktionen oft schwieriger zu erstellen und zu warten.

Vorteil:

1. Die Website ist leicht zu warten.
2. Die Technologie ist relativ einfach.
3. Gute Kompatibilität mit WordPress -Plugins.

Mangel:

1. Wie die Gesellschaft eine App-ähnliche Erfahrung im Browser erwartet, erscheint Ihre Website möglicherweise etwas veraltet.
2. Da Websites JavaScript -Frameworks nicht zur Steuerung des Verhaltens von Websites verwenden, ist JavaScript oft schwieriger zu schreiben und zu warten.
3. Traditionelle Websites laufen in der Regel langsamer als kopflose und fast kopflose Optionen.

Kopflose WordPress -Website

Headless WordPress-Websites verwenden modernes JavaScript und eine Art serverseitigem Ruhestand, wie z. B. WordPress Rest API oder GraphQL. Anstatt HTML in PHP zu erstellen und zu rendern, sendet der Server minimales HTML und eine große JavaScript -Datei, mit der die Rendern einer Seite auf der Website das Rendern einer Seite übernommen wird. Dieser Ansatz lädt die Seite schneller und bietet die Möglichkeit, wirklich coole Übergänge und andere lustige Funktionen zwischen Seiten zu erstellen.

Egal was Sie sagen, für die meisten kopflosen WordPress -Sites müssen ein Entwickler wichtige Änderungen vornehmen. Möchten Sie das Formular Plugin installieren? Entschuldigung, Sie benötigen möglicherweise einen Entwickler, um es einzurichten. Möchten Sie ein neues SEO -Plugin installieren? Nein, Entwickler müssen die Anwendung ändern. Möchten Sie diesen schicken Block verwenden? Schade - Sie brauchen zuerst einen Entwickler.

Vorteil:

1. Die Website selbst wird sich modern und schnell anfühlen.
2. Es ist einfach, sich in andere erholsame Dienste außerhalb von WordPress zu integrieren.
3. Die gesamte Website ist in JavaScript integriert, wodurch es einfacher ist, komplexe Websites zu erstellen.

Mangel:

1. Sie müssen die vielen Funktionen neu erfinden, die WordPress Plugin für Sie aus der Box bietet.
2. Diese Einstellung ist schwer zu pflegen.
3. Das Hosting ist komplex und kann im Vergleich zu anderen Optionen teuer sein.

"WordPress und Jamstack" finden Sie einen detaillierteren Vergleich der Unterschiede zwischen WordPress und Static Hosting.

Ich liebe die Ergebnisse , die kopflos WordPress erzeugen kann. Ich mag keine Wartung. Ich möchte eine Webanwendung, mit der ich eine schnelle Ladegeschwindigkeit, Übergänge zwischen Seiten und das allgemeine App-ähnliche Gefühl der Website haben kann. Ich möchte aber auch frei sein, das Plugin -Ökosystem zu verwenden, das WordPress so beliebt macht. Ich will etwas kopflos. Fast kopflos .

Ich konnte nichts finden, was zu dieser Beschreibung passt, also habe ich eines gebaut. Seitdem habe ich mehrere Websites erstellt, die diesen Ansatz verwenden und die erforderlichen JavaScript-Bibliotheken erstellt haben, um es anderen erleichtert, ihre eigenen nahezu headlosen WordPress-Themen zu erstellen.

Einführung in fast kopflosen WordPress

Fast Headless ist eine WordPress -Webentwicklungsmethode, die Ihnen viele der Vorteile ähnlicher Anwendungen bietet, die durch den kopflosen Ansatz sowie die Entwicklung herkömmlicher WordPress -Themen verwendet werden. Dies geschieht mit einer kleinen JavaScript -Anwendung, die das Routing behandelt und Ihre Website wie eine kopflose Anwendung rendert, jedoch einen Fallback -Mechanismus enthält, der genau die gleiche Seite mit normalen WordPress -Anfragen laden kann. Sie können auswählen, welche Seiten mithilfe der Fallback -Methode geladen werden sollen, und Sie können Logik in JavaScript oder PHP injizieren, um festzustellen, ob die Seite so geladen werden soll.

Sie können sehen, wie es tatsächlich auf der von mir erstellten Demo -Website funktioniert, was zeigt, was dieser Ansatz erreichen kann.

Eine Website, die diese Methode implementiert, verkauft beispielsweise WordPress -Kurse online über ein Lernmanagementsystem namens LifterLMS. Dieses Plugin verfügt über integrierte E-Commerce-Funktionen und verfügt über die erforderliche Schnittstelle, um Hosting-Kursinhalte einzurichten und eine Paywall zu stellen. Diese Website verwendet viele integrierte Funktionen von LifterLMs-ein großer Teil davon ist der Checkout-Wagen. Anstatt die gesamte Seite wieder aufzubauen, um in meiner Anwendung zu arbeiten, habe ich sie einfach mit der Fallback -Methode geladen. Diese Seite funktioniert also wie jedes alte WordPress -Thema und funktioniert daher genauso wie erwartet - alles ohne mich wieder aufzubauen.

Vorteil:

1. Sobald dies eingerichtet ist, ist dies leicht zu warten.
2. Hosting ist so einfach wie ein typisches WordPress -Thema.
3. Die Website fühlt sich genauso modern und schnell an wie eine kopflose Website.

Mangel:

1. Sie müssen immer zwei verschiedene Möglichkeiten berücksichtigen, Ihre Website zu rendern.
2. Diese Methode enthält nur begrenzte Auswahlmöglichkeiten für effektive JavaScript -Bibliotheken.
3. Diese Anwendung ist eng mit WordPress gebunden, daher ist die Verwendung einer REST-API von Drittanbietern schwieriger als kopflos.

Wie es funktioniert

Um fast kopflos zu sein, erfordert es die Fähigkeit, mehrere Aktionen auszuführen, darunter:

1. Verwenden Sie die WordPress -Anforderung, um die Seite zu laden.
2. Seiten mit JavaScript laden,
3. Lassen Sie die Seiten gleich sein, egal wie sie rendern,
4. Bietet eine Möglichkeit, zu wissen, wann eine Seite mit JavaScript oder PHP geladen werden soll, und
5. Gewährleisten Sie eine 100% ige Konsistenz aller Routing -Seiten, unabhängig davon, ob sie in JavaScript oder PHP gerendert werden.

Auf diese Weise kann die Website die progressive Verbesserung nutzen. Da die Seite mit oder ohne JavaScript angezeigt werden kann, können Sie die am besten geeignete Version basierend auf den von Ihnen gestellten Anforderungen verwenden. Gibt es einen vertrauenswürdigen Bot, der Ihre Website kriecht? Senden Sie ihnen eine Nicht-JavaScript-Version, um die Kompatibilität sicherzustellen. Funktioniert eine Kasse nicht wie erwartet? Erzwingen Sie es vorübergehend, ohne Anwendung zu laden und später zu beheben.

Um diese Projekte abzuschließen, habe ich eine Open -Source -Bibliothek namens Nicholas veröffentlicht, die eine vorgefertigte Kesselplatte enthält.

Trocken halten

Das größte Problem, das ich beim Erstellen einer nahezu headlosen Anwendung überwinden möchte, ist, die Seite zu halten, die in PHP und JavaScript konsistent ist. Ich möchte mein Markup nicht an zwei verschiedenen Orten erstellen und pflegen - ich möchte so viel einzelner Quellcode wie möglich verwenden. Dies schränkt sofort die JavaScript -Bibliothek ein, die ich tatsächlich verwenden kann (sorry, reagieren!). Nach einigen Nachforschungen und vielen Experimenten habe ich Alpinejs verwendet. Diese Bibliothek hält meinen Code trocken plausibel. Einige Teile müssen für jeden Teil unbedingt umschreiben (z. B. Schleifen), aber die wichtigsten Markup -Blöcke können wiederverwendet werden.

Eine einzelne Postvorlage, die mit PHP wiedergegeben wird, könnte so aussehen:

 <code><?php if ( have_posts() ) { while ( have_posts() ) { the_post(); if ( is_singular() ) { echo nicholas()-?>templates()->get_template( 'index', 'post', [ 'content' => Nicholas::get_buffer( 'the_content' ), 'title' => Nicholas::get_buffer( 'the_title' ), ] ); } } } ?></code>

Die gleiche Post -Vorlage, die mit dem JavaScript von Alpine gerendert wurde:

<code><template :key="index" x-for="(post, index) in $store.posts"> = niccholas ()-> templates ()-> get_template ('index', 'post')?>
</template></code>

Sie alle verwenden dieselbe PHP -Vorlage, sodass der gesamte Code in der tatsächlichen Schleife trocken ist:

 <code>$title = $template->get_param( 'title', '' ); // 获取传递到此模板的标题，回退到空字符串。 $content = $template->get_param( 'content', '' ); // 获取传递到此模板的内容，回退到空字符串。 ?></code> = $ title?>

  <div x-html="content">= $ Inhalt?></div>

Verwandte: Diese Alpine.js -Methode ähnelt mental der von Jonathan Land eingeführten VUE.JS -Methode in "Wie man Vue -Komponenten im WordPress -Thema baut".

Erkennen Sie, wann die Seite im kompatiblen Modus ausgeführt wird

Mit dem Kompatibilitätsmodus können Sie jede Anforderung zum Laden erzwingen, ohne eine kopflose Version von JavaScript auf Ihrer Website auszuführen. Wenn die Seite im Kompatibilitätsmodus geladen wird, lädt die Seite nur in PHP und die Anwendungsskripte werden niemals in der Warteschlange gestellt. Auf diese Weise können die "Fragenseiten" ausgeführt werden, ohne etwas umzuschreiben, das bei Verwendung der App nicht wie erwartet funktioniert.

Es gibt eine Reihe verschiedener Möglichkeiten, wie Sie die Seite zum Ausführen im kompatiblen Modus zwingen können - einige benötigen Code und einige nicht. Nicholas fügt zu jedem Post -Typ einen Toggle -Switch hinzu, der die Posts zum Laden des Kompatibilitätsmodus zwingt.

Abgesehen davon können Sie jede URL manuell hinzufügen, um sie zum Laden des kompatiblen Modus in Nicholas -Einstellungen zu zwingen.

Dies ist ein guter Start, aber ich habe festgestellt, dass ich normalerweise automatisch erkennen kann, wann die Seite im Kompatibilitätsmodus basierend auf den im Post gespeicherten Blöcken geladen werden muss. Angenommen, Sie haben Ninja -Formulare auf Ihrer Website installiert und möchten das von ihnen bereitgestellte Validierung JavaScript verwenden, anstatt Ihr eigenes JavaScript nachzubilden. In diesem Fall müssen Sie den Kompatibilitätsmodus auf jeder Seite mit Ninja -Form erzwingen. Sie können jede URL nacheinander manuell hinzufügen oder eine Abfrage verwenden, um alles mit einem Ninja -Formulierungsblock auf die Seite zu bringen. Zum Beispiel:

 <code>add_filter( 'nicholas/compatibility_mode_urls', function ( $urls ) { // 过滤Ninja Forms块$filtered_urls = Nicholas::get_urls_for_query( [ 'post_type' => 'any', 's' => 'wp:ninja-forms/form', // 查找Ninja Forms块] ); return array_merge( $urls, $filtered_urls ); } );</code>

Dies fügt automatisch jede Seite hinzu, die den Ninja -Formulare Block enthält, zu der Liste der URLs, die im Kompatibilitätsmodus geladen werden. Dies verwendet nur den Parameter WP_Query, sodass Sie hier alles übergeben können, um festzustellen, was zur Liste hinzugefügt werden soll.

Die Anwendung erweitern

Hinter den Kulissen verwendet Nicholas einen leichten Router, der über den Middleware -Modus erweitert werden kann, genau wie die Art und Weise, wie Expressanwendungen Middleware verarbeiten. Wenn die Klickseite geleitet wird, wird das System jedes Middleware -Element ausführen und schließlich die Seite weiterleiten. Standardmäßig tut der Router nichts .

Ein grundlegendes Beispiel ist wie folgt:

 <code>// 导入WordPress特定的中间件import { updateAdminBar, validateAdminPage, validateCompatibilityMode } from 'nicholas-wp/middlewares' // 导入通用中间件import { addRouteActions, handleClickMiddleware, setupRouter, validateMiddleware } from "nicholas-router"; // 按此顺序执行这些操作，当页面被路由时。 addRouteActions( // 首先，验证URL validateMiddleware, // 验证此页面不是管理页面validateAdminPage, // 验证此页面不需要兼容模式validateCompatibilityMode, // 然后，我们更新Alpine存储updateStore, // 如果启用，则可能获取评论fetchComments, // 更新历史记录updateHistory, // 可能更新管理栏updateAdminBar ) // 设置路由器。这也使用中间件模式。 setupRouter( // 为点击设置事件监听器handleClickMiddleware )</code>

Von hier aus können Sie erweitern, was passiert, wenn Sie die Seite weiterleiten. Vielleicht möchten Sie die Seite scannen, um den Code hervorzuheben, oder Sie möchten sie ändern Der Inhalt des Tags soll der Seite der neuen Route übereinstimmen. Sogar eine Cache -Ebene kann eingeführt werden. Was auch immer Sie tun müssen, fügen Sie die erforderlichen Aktionen einfach mit AddrouteAction oder SetUprouter hinzu.

Nächster Schritt

Hier ist mein kurzer Überblick über einige der Schlüsselkomponenten, die zur Implementierung eines nahezu headlosen Ansatzes verwendet werden. Wenn Sie daran interessiert sind, mehr kennenzulernen, empfehle ich, meinen Kurs an der WP Dev Academy zu belegen. Dieser Kurs ist eine Schritt-für-Schritt-Anleitung, wie man eine nahezu kopflose WordPress-Website mit modernen Tools erstellt. Ich empfehle auch, meine nahezu headlose Boilerplate zu überprüfen, mit der Sie Ihr eigenes Projekt beginnen können.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine fast kopflose WordPress -Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!