Von einer frischen WordPress-Installation zur ersten Seite aus Leitvia-Patterns.
Voraussetzungen
- WordPress 7.1 oder neuer
- PHP 8.2 oder neuer
- Kein weiteres Plugin. Leitvia Studio ist optional und funktioniert mit jedem Block-Theme.
- Eine einzelne Website oder ein Multisite-Netzwerk. Im Netzwerk funktionieren Theme und Studio auf jeder Website.
1. Theme installieren
Leitvia steht noch nicht auf WordPress.org, die kostenlose Veröffentlichung ist in Vorbereitung. Bis dahin lädst du das Zip aus den Releases im Theme-Repository auf GitHub herunter und lädst es unter Design, Themes, Theme hinzufügen, Theme hochladen hoch, oder du siehst es dir vorher in den Demos an. Sobald es gelistet ist, gehst du im Admin zu Design, Themes, Theme hinzufügen, suchst nach Leitvia und installierst und aktivierst es. Mit WP-CLI:
wp theme install leitvia --activate
Leitvia hat keinen Build-Schritt und keine Einstellungsseite. Alles stellst du im Website-Editor unter Design, Editor ein.
2. Stil wählen
Öffne Design, Editor, Stile. Wähle eine der sechs Stilvarianten: Warm Editorial, Swiss Editorial oder Corporate, jeweils hell oder dunkel. Farb- und Typografie-Vorlagen ändern jeweils nur eine Seite davon. Jede Kombination hält alle Farbpaare beim Kontrast auf WCAG 2.2 AA.
3. Navigation einrichten
Bearbeite den Template-Teil Header und füge deine Seiten zum Navigationsblock hinzu. Untermenüs öffnen sich per Klick und funktionieren mit der Tastatur. Gib dem Footer eine Navigation mit allen Hauptseiten, damit Besucher einen zweiten Weg zu den Inhalten haben.
4. Eine Seite aus Patterns bauen
Erstelle eine Seite und wähle für Seiten, die mit einem Hero beginnen, das Template „Landing page (no title)“. Öffne den Block-Inserter, wechsle zu Patterns und wähle einen Hero, dann Inhalt, Belege und eine Handlungsaufforderung. Die Beschreibung jedes Patterns sagt, wann es passt. Ersetze die Beispieltexte und Bilder durch deine eigenen.
Setz nicht zwei Abschnitte mit gleichem Layout und gleichem Hintergrund direkt hintereinander. Wechsle dichte und luftige Abschnitte ab und nutze höchstens einen Abschnitt in Akzentfarbe pro Bildschirmhöhe.
5. Studio dazunehmen, wenn du es brauchst
Leitvia Studio installierst du auf demselben Weg über die Plugin-Seite oder mit WP-CLI:
wp plugin install leitvia-studio --activate
Studio ergänzt das Menü Leitvia Studio mit den Bildschirmen Pattern Lab, Tokens, Content Model, Recipes, Agents (mit der Inbox als Tab) und Settings. Seine Blöcke erscheinen in der Blockkategorie Leitvia. Führ im Pattern Lab die Prüfung der Barrierefreiheit eines Patterns aus, bevor du es auf vielen Seiten nutzt. Studio speichert seine Daten in den Strukturen von WordPress selbst, die Website funktioniert also weiter, wenn du es deaktivierst.
Statt Seiten einzeln zu bauen, richtet ein Rezept eine ganze Website ein: Stilvariante, Header und Footer, Seiten aus Patterns, Navigation und Einstellungen. Studio bringt die Rezepte Blog, Company, Publication und Documentation mit, dazu Shop für Schritt 6. Ein zweiter Durchlauf fügt nichts hinzu:
wp leitvia recipe apply leitvia/company --user=admin
Jeder Teil des Rezepts läuft mit der Autonomiestufe seines Bereichs. Was nicht sofort live gehen darf, landet in einem Änderungspaket. Der Befehl gibt dessen Nummer aus. Prüfe und übernimm es unter Leitvia Studio, Agents, Tab Inbox, oder mit wp leitvia package apply <number> --user=admin.
6. Einen Shop ergänzen
Leitvia unterstützt WooCommerce schon in der kostenlosen Version. Installiere und aktiviere WooCommerce, wende dann das Rezept „Shop“ von Leitvia Studio an und übernimm sein Änderungspaket wie oben:
wp plugin install woocommerce --activate
wp leitvia recipe apply leitvia/shop --user=admin
Das Rezept setzt den Shop-Header mit Produktsuche, Konto und Mini-Warenkorb, baut eine Startseite aus den Shop-Patterns, legt die Seiten Über uns und Kontakt an sowie die Rechtstexte Impressum, Datenschutzerklärung, AGB, Widerrufsbelehrung und Versand und Zahlung. Außerdem schaltet es Bestellzuordnung, Nutzungs-Tracking und Marktplatz-Vorschläge von WooCommerce ab, damit der Shop kein Cookie setzt, bevor ein Besucher ein Produkt in den Warenkorb legt. Ersetze die Platzhaltertexte der Rechtstexte durch deine eigenen, bevor du den Shop öffnest.
Warenkorb, Kasse, Produktseiten und Archive nutzen ohne weitere Einrichtung die Shop-Templates des Themes. Für die Preisangaben, die das deutsche Recht verlangt, installierst du Germanized: Die Produktseite zeigt dann Steuerhinweis, Versandkosten, Grundpreis und Lieferzeit unter dem Preis, und das Pattern „Legal price information“ setzt sie an weitere Stellen.
7. Einen Agenten helfen lassen
KI-Agenten arbeiten über die Abilities von Studio an der Website, per MCP oder über die REST-API. Für MCP installierst du das Plugin MCP Adapter 0.7. Dann öffnest du Leitvia Studio, Agents: Leg einen Agenten-Benutzer an, kopiere sein Anwendungspasswort (es wird nur einmal angezeigt) und lege für jeden Bereich fest, wie viel der Agent selbstständig tun darf. Preise, Rechtstexte, Slugs und Organisationsdaten ändern sich höchstens als Vorschlag, solange du sie dort nicht freischaltest.
Der Agent verbindet sich mit dem MCP-Server leitvia unter /wp-json/leitvia-studio/v1/mcp. Änderungen, die er nicht live stellen darf, warten unter Leitvia Studio, Agents, Tab Inbox. Dort siehst du einen Block-Diff und eine Vorschau, übernimmst sie ganz oder teilweise oder lehnst sie ab. Jede übernommene Änderung lässt sich zurücksetzen.
8. Deine Seiten prüfen
Das Theme ist getestet, deine Inhalte sind es nicht. Gib jedem Bild einen Alternativtext, nutze eine h1 pro Seite, überspring keine Überschriftenebene und schreib Linktexte, die für sich allein verständlich sind. Veröffentliche danach die Erklärung zur Barrierefreiheit: Das Pattern „Accessibility statement“ liefert dir die Vorlage.
9. Leitvia Pro ergänzen
Leitvia Pro ist ein kostenpflichtiges Add-on für Studio mit Premium-Blöcken, Branchen-Kits, einem Hub für die Designsysteme deines Teams und White Label. Du brauchst Leitvia Studio und einen Tarif von der Preisseite.
- Öffne dein Konto auf leitvia.com und lade die Zip-Datei über den Link „Leitvia Pro … herunterladen“ mit der Versionsnummer herunter.
- Geh in WordPress zu Plugins, Plugin hinzufügen, Plugin hochladen, wähle die Zip-Datei und installiere und aktiviere sie.
- Erstelle zurück in deinem Konto unter „Lizenz und Websites“ deinen Zugangsschlüssel. Ein Schlüssel gilt für alle deine Websites. Kopiere ihn in deinen Passwortmanager; mit deinem Passwort kannst du ihn dort später noch einmal anzeigen.
- Öffne Leitvia Studio, Pro, füge den Schlüssel ein und wähle „Save and check“. Beim Speichern wird die Website aktiviert und auf das Website-Limit deines Tarifs angerechnet.
Ab dann erscheinen neue Versionen von Leitvia Pro unter Dashboard, Aktualisierungen wie jedes andere Plugin-Update. Branchen-Kits wendest du unter Leitvia Studio, Kits an, ganz oder in Teilen (Kits und Bausteine); mit Pro Solo wählst du dein Kit vorher in deinem Konto. Damit die Website einem Designsystem deines Teams folgt, öffne Leitvia Studio, Sync, Tab Leitvia account. Das Zip enthält außerdem den Agent-Skill leitvia-pro-kits in leitvia-pro/skills/. Kopiere ihn zu den anderen Skills, dann kann dein Agent ein Kit anwenden und füllen. Jedes Kit siehst du in den Demos.