In der heutigen digitalen Landschaft ist die Schaffung dynamischer und interaktiver Web-Erlebnisse für Entwickler zur obersten Priorität geworden. Mit dem Aufkommen von JavaScript-Frameworks wie Vue.js und der weit verbreiteten Nutzung von Content-Management-Systemen (CMS) wie WordPress ist die Kombination dieser Technologien zu einer leistungsstarken Lösung für die Erstellung funktionsreicher Websites geworden.
In diesem Leitfaden erfahren Sie, wie Sie die Leistungsfähigkeit von Vue.js im WordPress-Ökosystem nutzen können. Wir führen Sie durch den Prozess der Einrichtung von Vue.js mit WordPress und behandeln alles von der Installation bis hin zu fortgeschrittenen Techniken für eine nahtlose Integration. Egal, ob Sie Anfänger oder erfahrener Entwickler sind, dieser Leitfaden vermittelt Ihnen das Wissen und die Tools, die Sie benötigen, um Vue.js effektiv mit WordPress zu nutzen und ansprechende Web-Erlebnisse zu erstellen.
Was ist Vue Js?
Vue.js ist ein fortschrittliches JavaScript-Framework zum Erstellen von Benutzeroberflächen. Es ist für seine Einfachheit und Flexibilität bekannt und daher bei Entwicklern eine beliebte Wahl für die Erstellung dynamischer und interaktiver Webanwendungen.
Vue.js verwendet eine komponentenbasierte Architektur, die es Entwicklern ermöglicht, ihre Anwendungen in wiederverwendbare und modulare Komponenten aufzuteilen, die einfach verwaltet und gewartet werden können. Mit seiner sanften Lernkurve und der umfassenden Dokumentation ermöglicht Vue.js Entwicklern, moderne Webanwendungen mit Leichtigkeit effizient zu erstellen.
Erstellen Sie erstaunliche Websites
Mit dem besten kostenlosen Seite Builder Elementor
Jetzt anfangenWarum Vue in WordPress verwenden?
Es gibt mehrere überzeugende Gründe, Vue.js in Verbindung mit WordPress zu verwenden.
Erstens ist Vue.js für seine Einfachheit bekannt und daher die ideale Wahl für Entwickler, die schnell ein modernes JavaScript-Framework erlernen und übernehmen möchten.
Darüber hinaus bietet die Integration von Vue.js in WordPress praktische Vorteile.
Beispielsweise können herkömmliche Bibliotheken wie jQuery weniger skalierbar sein und in bestimmten Szenarien zu Konflikten führen. Durch die Verwendung von Vue.js neben WordPress als API können Entwickler die Geschwindigkeit und Leistung ihrer Websites erheblich verbessern.
Vue.js ist außerdem hochgradig zusammensetzbar, was eine einfachere Implementierung von Benutzeroberflächen in Plugins, Admin-Panels und anderen Bereichen einer WordPress-Site ermöglicht. Seine komponentengesteuerte Architektur macht es zu einem vielseitigen und effizienten Tool zum Erstellen moderner Webanwendungen innerhalb des WordPress-Ökosystems.
Darüber hinaus basiert WordPress auf über 25 % des bekannten Webs, was bedeutet, dass es wahrscheinlich bereits Teil Ihres Entwicklungs-Stacks oder dem Ihrer Kunden ist. Diese weit verbreitete Verbreitung von WordPress macht die Integration von Vue.js zu einer natürlichen Wahl für die Front-End-Entwicklung.
Möglichkeiten zur Verwendung von WordPress und Vue?
Hier werden wir zwei Möglichkeiten zur gemeinsamen Verwendung von Vue und WP besprechen. Sehen wir uns an, wie sie zusammenarbeiten!
1. Erstellen Sie eine SPA als Sub-Website/App
Vue kann verwendet werden, um eine „Unterwebsite“ innerhalb des WordPress-Administrationsbereichs zu entwickeln. Dieser Ansatz ist vorteilhaft für die Erstellung komplexer Plugins oder benutzerdefinierter Admin-Seiten, die Tab-Systeme oder Mehrseitensysteme erfordern.
Im Gegensatz zu herkömmlichen WordPress-Methoden ermöglicht die Verwendung von Vue reibungslosere Übergänge zwischen Seiten ohne vollständiges Neuladen der Seite, was das Benutzererlebnis verbessert.
Darüber hinaus ermöglicht Vue die Erstellung eleganterer und individuellerer UI-Elemente im Vergleich zu den standardmäßigen WordPress-UI-Elementen. Unten sehen Sie ein Beispiel für eine benutzerdefinierte Admin-Seite, die mit Vue erstellt wurde.
Die hier gezeigte Benutzeroberfläche (UI) gehört zum WP Rocket-Plugin im WordPress-Administrationsbereich. Diese UI ist vollständig angepasst und verfügt über eigene Unterseiten, die als Registerkarten dargestellt werden. Jede Registerkarte entspricht einer eindeutigen Sub-URL, was das einfache Teilen mit anderen erleichtert. Im Wesentlichen ähnelt es einer Miniatur-Website im WP-Administrationsbereich.
Mit Vue und Vue-Router ist eine solche Anpassung problemlos möglich. Es gibt jedoch einen Aspekt, der besondere Aufmerksamkeit erfordert: der Umgang mit URLs. Angesichts der Koexistenz zweier „Websites“ – des WordPress-Administrationsbereichs und der Vue-basierten Schnittstelle – können potenzielle URL-Konflikte auftreten.
Um dieses Problem zu beheben, genügt eine einfache Anpassung innerhalb der Vue Router-Instanz. Konkret müssen Sie zwei Optionen ändern:
- Die Basisoption: Diese sollte auf Ihre benutzerdefinierte WP-Seitenroute eingestellt werden.
- Die Modusoption: Diese sollte auf „Hash“ eingestellt werden.
Durch die Übernahme des „Hash“-Modus wird sichergestellt, dass Hashes verwendet werden, anstatt die gesamte URL zu ändern, wodurch potenzielle Konflikte gemildert werden.
Darüber hinaus ist es erwähnenswert, dass Sie mit ähnlichen Techniken auch andere WordPress-Seiten, z.B. die Inhaltseditor-Seite, ersetzen können, wie es der Elementor- Editor veranschaulicht.
Der herkömmliche WordPress-Editor verwandelt sich in eine strukturierte Oberfläche, die Hash-Symbole zur Abgrenzung von Unter-URLs verwendet.
Grundsätzlich ist es möglich, in verschiedenen Bereichen des WordPress-Administrationsbereichs, beispielsweise Plugin-Seiten, Editoren, Dashboards oder Middle-Office-Schnittstellen, eine Unterseite einzurichten.
Um dies zu erreichen, wird Vue CLI oder ein alternatives Tool verwendet, um eine eigenständige Vue Single Page Application (SPA) zu generieren. Anschließend konfigurieren Sie die Basis- und Modusoptionen des Routers entsprechend, exportieren die Anwendung und integrieren sie über entsprechende Hooks innerhalb des WordPress-Ökosystems in WordPress.
2. Erstellen Sie wiederverwendbare Komponenten im Frontend oder Admin
Websites enthalten verschiedene Mikrointeraktionen, wie Menüschalter, Dropdown-Menüs, Akkordeons und Karussells. Diese Elemente bilden zusammen das, was als UI-Kit bezeichnet wird. Darüber hinaus können bestimmte Komponenten asynchron mit Daten interagieren, wie etwa Like- oder Vote-Buttons, Formulare und benutzerdefinierte Mediaplayer.
Es ist wichtig zu beachten, dass beim Integrieren von Vue.js-Komponenten in WordPress oder eine andere Backend-Vorlage möglicherweise die Auswahl der Runtime + Compiler- Version von Vue erforderlich ist. Dies gewährleistet nahtlose Funktionalität und Kompatibilität mit der Backend-Umgebung.
Bestimmte Komponenten interagieren mit gerenderten Daten, andere nicht. Basierend auf dieser Unterscheidung müssen unterschiedliche Komponententypen erstellt werden. Einige Komponenten haben ihre eigene Vorlage.
Vue.component('alert-box', {
template: `
<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>
`
})
Während andere das generierte Markup verwenden.
<my-component inline-template>
<div>
<p>These are compiled as the component's own template.</p>
<p>Not parent's transclusion content.</p>
</div>
</my-component>
Vue kann auch zum Erstellen nativer Webkomponenten genutzt werden und bietet den Vorteil der Wiederverwendbarkeit in verschiedenen Projekten, ähnlich wie Ionicons (erstellt mit Stencil JS).
Diese Komponenten können in WordPress-PHP-Vorlagen oder -Funktionen integriert werden, die HTML generieren. Daten können von WordPress an Vue-Instanzen oder -Komponenten übergeben werden, indem sie entweder in eine globale Variable umgewandelt oder direkt der Komponenteneigenschaft zugewiesen werden. Das Konzept beinhaltet das Laden von Vue und das Verknüpfen von Vue-Instanzen mit HTML-IDs für eine nahtlose Integration.
<?php
function themeslug_enqueue_style() {
wp_enqueue_style( 'my-theme', 'style.css', false );
}
function themeslug_enqueue_script() {
wp_enqueue_script( 'my-js', 'filename.js', false );
}
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style', 10 );
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script', 10 );
?>
Hier ist der obere und untere Teil einer WP-Vorlage.
<html>
<div id="app">
{{ message }}
</div>
</html>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
3. Erstellen Sie eine separate Frontend-Website
Abschließend ist es wichtig, eine Funktion hervorzuheben, die einigen, aber nicht allen klar sein mag.
Seit Version 4.7 verfügt WordPress über eine REST-API, die es Entwicklern ermöglicht, mithilfe von Plugins auf verschiedene Endpunkte zuzugreifen und Daten wie Beiträge, Seiten und benutzerdefinierte Felder abzurufen. Diese Funktionalität entspricht dem Konzept eines Headless CMS.
Tatsächlich reichen die Anwendungsmöglichkeiten dieser Funktion weit über das hinaus, was einem zunächst in den Sinn kommt. Ihr separates Frontend, das die WordPress REST API nutzt, könnte verschiedene Formen annehmen:
- Eine SPA-App (Single Page Application) oder Website
- Eine SSR-App (Server-Side Rendered) oder Website
- Eine statisch generierte Website nach der JAMStack-Architektur
- Eine Progressive Web App (PWA)
- Eine mobile Anwendung
- Ein weiteres monolithisches Backend, das eine einfachere oder schnellere Template-Engine verwendet
Im Wesentlichen ist jeder Client geeignet, der die API nutzen kann und bei dem Sie die volle Kontrolle über das Frontend behalten. WordPress dient im Wesentlichen als Datenquelle, ähnlich einer Backend-API. Insbesondere Plugins wie ACF (Advanced Custom Fields) oder Pods können benutzerdefinierte Felder auch über die API verfügbar machen.
Darüber hinaus haben Sie die Flexibilität, der WordPress-API benutzerdefinierte Endpunkte hinzuzufügen und das Authentifizierungssystem zu nutzen, einschließlich der Generierung von Nonces und anderen erforderlichen Komponenten.
Einpacken
Zusammenfassend lässt sich sagen, dass die Integration von Vue.js in WordPress Entwicklern eine robuste Lösung für die Erstellung dynamischer und interaktiver Web-Erlebnisse innerhalb des WordPress-Ökosystems bietet. Vue.js, bekannt für seine Einfachheit und Flexibilität, ermöglicht Entwicklern durch seine komponentenbasierte Architektur die einfache und effiziente Erstellung moderner Webanwendungen.
