Wie kann ich mit vue.js und wordpress rest api eine bestimmte Seite erstellen?

Question

Kann jemand dieses Thema (https://github.com/gilbitron/wp-rest-theme) erweitern, um themenspezifische Seiten zu erstellen? Ich möchte zum Beispiel eine Seite mit dem Namen "Menü" erstellen, die über eine einzigartige Navigation verfügt, um die untergeordneten Seiten Frühstück, Mittagessen, Abendessen usw. ohne Nachladen durchzublättern. Ich bin es gewohnt, individuelle .php-Dateien zu themenspezifischen Seiten nach meinem Geschmack über page- {slug} .php zu erstellen - Gibt es einen gleichwertigen Workflow mit vue.js und wp rest api?

Anstatt page-menu.php zum Anpassen der Menüseite zu verwenden, würde ich mir vorstellen, dass ich etwas wie eine menu-page.vue-Datei erstellen und eine benutzerdefinierte Methode hinzufügen müsste, um diese Seite aufzurufen Vorlage es.

Ich kann keine Beispiele für dieses Verfahren finden. Jede Hilfe würde sehr geschätzt werden.

Answer 1

Was ich getan habe, war ein Feld mit erweiterten benutzerdefinierten Feldern hinzufügen, die bestimmt, welche Vorlage die Seite verwenden soll. Ich wickelte die Anzeige in einer Komponente namens PageContent die wie folgt aussieht:

<div :is="page.template" 
    :page="page" 
    v-if="!$loadingRouteData" 
    transition="fade" 
    transition-mode="out-in"> 
</div> 

Router:

'/:slug': { 
    component: PageContent, 
    name: 'Page' 
    } 

Also, wenn jemand auf dieser Route navigiert, hole ich die Seite auf der Basis der slug param. Die page Variable hat dann ein template Attribut durch ACF, die die Komponente bestimmt, auf eine generische Seite anzuzeigen und Standardwerte:

if(pages[0].acf.template){ 
    return pages[0].acf.template; 
} 
return 'page' 

Sie benötigen die API WP JSON-Plugin sowie die ACF-Plugin, das ACF Daten an die Adds json

My site nutzt diese Einrichtung, gerne mehr Code zu teilen, wenn Sie weitere Fragen haben.