In het huidige digitale landschap is het creëren van dynamische en interactieve webervaringen een topprioriteit geworden voor ontwikkelaars. Met de opkomst van JavaScript-frameworks zoals Vue.js en het wijdverbreide gebruik van contentmanagementsystemen (CMS) zoals WordPress, is het combineren van deze technologieën een krachtige oplossing geworden voor het bouwen van websites met veel functies.
In deze handleiding onderzoeken we hoe we de kracht van Vue.js binnen het WordPress-ecosysteem kunnen benutten. We doorlopen het proces van het instellen van Vue.js met WordPress, waarbij we alles behandelen, van installatie tot geavanceerde technieken voor naadloze integratie. Of u nu een beginner of een ervaren ontwikkelaar bent, deze gids voorziet u van de kennis en hulpmiddelen die u nodig hebt om Vue.js effectief te gebruiken met WordPress en boeiende webervaringen te creëren.
Wat is Vue Js?
Vue.js is een vooruitstrevend JavaScript-framework dat wordt gebruikt voor het bouwen van gebruikersinterfaces. Het staat bekend om zijn eenvoud en flexibiliteit, waardoor het een populaire keuze is onder ontwikkelaars voor het creëren van dynamische en interactieve webapplicaties.
Vue.js maakt gebruik van een op componenten gebaseerde architectuur, waardoor ontwikkelaars hun applicaties kunnen opsplitsen in herbruikbare en modulaire componenten, die gemakkelijk kunnen worden beheerd en onderhouden. Met zijn zachte leercurve en uitgebreide documentatie stelt Vue.js ontwikkelaars in staat om met gemak moderne webapplicaties efficiënt te bouwen.
Maak geweldige websites
Met de beste gratis paginabuilder Elementor
Begin nuWaarom Vue gebruiken in WordPress?
Er zijn verschillende dwingende redenen om Vue.js te gebruiken in combinatie met WordPress.
Ten eerste staat Vue.js bekend om zijn eenvoud, waardoor het een ideale keuze is voor ontwikkelaars die snel een modern JavaScript-framework willen leren en adopteren.
Bovendien zijn er praktische voordelen verbonden aan de integratie van Vue.js met WordPress.
Traditionele bibliotheken zoals jQuery kunnen bijvoorbeeld minder schaalbaar zijn en in bepaalde scenario's tot conflicten leiden. Door Vue.js naast WordPress als API te gebruiken, kunnen ontwikkelaars de snelheid en prestaties van hun websites aanzienlijk verbeteren.
Vue.js is ook zeer goed samen te stellen, waardoor gebruikersinterfaces eenvoudiger kunnen worden geïmplementeerd binnen plug-ins, beheerderspanelen en andere delen van een WordPress-site. De componentgestuurde architectuur maakt het een veelzijdige en efficiënte tool voor het bouwen van moderne webapplicaties binnen het WordPress-ecosysteem.
Bovendien beheert WordPress meer dan 25% van het bekende web, wat betekent dat het waarschijnlijk al deel uitmaakt van uw ontwikkelingsstack of die van uw klanten. Deze wijdverbreide adoptie van WordPress maakt de integratie van Vue.js een logische keuze voor front-end-ontwikkeling.
Manieren om WordPress en Vue te gebruiken?
Hier bespreken we twee manieren om Vue en WP in totaal te gebruiken. Laten we eens kijken hoe we ze kunnen laten samenwerken!
1. Maak een SPA als subwebsite/app
Vue kan worden gebruikt om een "subwebsite" te ontwikkelen binnen het WordPress-beheerderspaneel. Deze aanpak is gunstig voor het maken van complexe plug-ins of aangepaste beheerderspagina's waarvoor tabbladsystemen of systemen met meerdere pagina's nodig zijn.
In tegenstelling tot reguliere WordPress-methoden zorgt het gebruik van Vue voor vloeiendere overgangen tussen pagina's zonder herladen van de volledige pagina, waardoor de gebruikerservaring wordt verbeterd.
Bovendien maakt Vue het mogelijk om elegantere en aangepaste UI-elementen te creëren in vergelijking met de standaard WordPress UI-elementen. Hieronder ziet u een voorbeeld van een aangepaste beheerderspagina gemaakt met Vue.
De hier getoonde gebruikersinterface (UI) behoort tot de WP Rocket-plug-in in het WordPress-beheerderspaneel. Deze gebruikersinterface is volledig op maat gemaakt en beschikt over eigen subpagina's die als tabbladen worden gepresenteerd. Elk tabblad komt overeen met een aparte sub-URL, waardoor het eenvoudig delen met anderen wordt vergemakkelijkt. In wezen lijkt het op een miniatuurwebsite binnen het WP-beheerderspaneel.
Het bereiken van dergelijke aanpassingen is eenvoudig met Vue en Vue-router. Er is echter één aspect dat zorgvuldige aandacht vereist: het omgaan met URL's. Gezien het naast elkaar bestaan van twee ‘websites’ – het WordPress-beheerderspaneel en de door Vue aangedreven interface – kunnen er potentiële URL-conflicten ontstaan.
Om dit probleem aan te pakken, volstaat een eenvoudige aanpassing binnen de Vue Router-instantie. Concreet moet u twee opties wijzigen:
- De basisoptie: deze moet worden ingesteld op uw aangepaste WP-paginaroute.
- De modusoptie: Deze moet worden ingesteld op "hash".
Het gebruik van de "hash"-modus zorgt ervoor dat hashes worden gebruikt in plaats van dat de hele URL wordt gewijzigd, waardoor potentiële conflicten worden beperkt.
Bovendien is het vermeldenswaard dat u ook andere WordPress-pagina's, zoals de inhoudseditorpagina, kunt vervangen met behulp van vergelijkbare technieken, zoals geïllustreerd door de Elementor- editor.
De conventionele WordPress-editor verandert in een gestructureerde interface, waarbij hash-symbolen worden gebruikt om sub-URL's af te bakenen.
In wezen is het mogelijk om een subwebsite op te zetten binnen verschillende secties van het WordPress-beheerderspaneel, zoals plug-inpagina's, editors, dashboards of middle-office-interfaces.
Om dit te bereiken, omvat het proces het gebruik van Vue CLI of een alternatief hulpmiddel om een zelfstandige Vue Single Page Application (SPA) te genereren. Configureer vervolgens de basis- en modusopties van de router dienovereenkomstig, exporteer de applicatie en integreer deze in WordPress via de juiste hooks binnen het WordPress-ecosysteem.
2. Maak herbruikbare componenten op de frontend of beheerder
Websites bevatten verschillende micro-interacties, zoals menuschakelaars, vervolgkeuzelijsten, accordeons en carrousels. Deze elementen vormen samen een zogenaamde UI Kit. Bovendien kunnen bepaalde componenten asynchroon met gegevens communiceren, zoals like- of stemknoppen, formulieren en aangepaste mediaspelers.
Het is belangrijk op te merken dat bij het integreren van Vue.js-componenten in WordPress of een andere backend-sjabloon het nodig kan zijn om te kiezen voor de Runtime + Compiler- versie van Vue. Dit zorgt voor naadloze functionaliteit en compatibiliteit met de backend-omgeving.
Bepaalde componenten zullen interageren met weergegeven gegevens, terwijl andere dat niet doen. Op basis van dit onderscheid zullen verschillende soorten componenten moeten worden gemaakt. Sommige componenten hebben hun sjabloon.
Vue.component('alert-box', {
template: `
<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>
`
})
Terwijl anderen de gegenereerde markup zullen gebruiken.
<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 kan ook worden gebruikt om native webcomponenten te maken, wat het voordeel biedt van herbruikbaarheid in verschillende projecten, vergelijkbaar met ionicons (gemaakt met stencil JS).
Deze componenten kunnen worden geïntegreerd in WordPress PHP-sjablonen of functies die HTML genereren. Gegevens kunnen vanuit WordPress worden doorgegeven aan Vue-instanties of componenten door deze aan een globale variabele te koppelen of deze rechtstreeks aan de componentprop toe te wijzen. Het concept omvat het laden van Vue en het koppelen van Vue-instanties aan HTML-ID's voor naadloze integratie.
<?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 is het bovenste en onderste deel van een WP-sjabloon.
<html>
<div id="app">
{{ message }}
</div>
</html>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
3. Maak een aparte frontend-website
Ten slotte is het belangrijk om een kenmerk te benadrukken dat voor sommigen misschien wel duidelijk is, maar niet voor iedereen.
Sinds versie 4.7 heeft WordPress een REST API ingebouwd, waardoor ontwikkelaars toegang kunnen krijgen tot verschillende eindpunten en gegevens zoals berichten, pagina's en aangepaste velden kunnen ophalen met behulp van plug-ins. Deze functionaliteit sluit aan bij het concept van een Headless CMS.
In feite reiken de toepassingen van deze mogelijkheid veel verder dan wat in eerste instantie in je opkomt. Uw afzonderlijke frontend, die de WordPress REST API gebruikt, kan verschillende vormen aannemen:
- Een SPA-app of -website (Single Page Application).
- Een SSR-app of -website (Server-Side Rendered).
- Een statisch gegenereerde website volgens de JAMStack-architectuur
- Een progressieve webapp (PWA)
- Een mobiele applicatie
- Nog een monolithische backend die gebruik maakt van een eenvoudigere of snellere sjabloonengine
In wezen is elke client die de API kan gebruiken en waarbij u de volledige controle over de frontend behoudt, levensvatbaar. WordPress dient in wezen als een gegevensbron die lijkt op een backend-API. Met name plug-ins zoals ACF (Advanced Custom Fields) of Pods kunnen ook aangepaste velden via de API beschikbaar stellen.
Bovendien heeft u de flexibiliteit om aangepaste eindpunten toe te voegen aan de WordPress API en het authenticatiesysteem te gebruiken, inclusief het genereren van nonces en andere noodzakelijke componenten.
Afsluiten
Concluderend biedt de integratie van Vue.js met WordPress ontwikkelaars een robuuste oplossing voor het creëren van dynamische en interactieve webervaringen binnen het WordPress-ecosysteem. Vue.js, bekend om zijn eenvoud en flexibiliteit, stelt ontwikkelaars in staat om efficiënt moderne webapplicaties te bouwen dankzij de op componenten gebaseerde architectuur.
