Einführung in das Advanced View Framework

Video

Sie können sich die Einleitung als Video ansehen oder die Textversion unten lesen.

1. Über das Framework

Hallo alle miteinander! Wir sind WPLake, eine WordPress-Entwicklungsagentur. Lassen Sie uns Advanced Views vorstellen, ein spezielles WordPress-Framework, das eine bessere Möglichkeit zum Abfragen und Anzeigen von Inhalten bietet.

Das Hauptziel von Advanced Views besteht darin, die Erstellung eines hochwertigen WordPress-Frontends zu beschleunigen und zu vereinfachen. Mit dem Framework können Sie das Frontend genauso schnell beherrschen wie mit Seitenerstellern, ohne auf Best Practices und moderne Toolsets verzichten zu müssen.

Obwohl es sich bei Advanced Views von Natur aus um ein Framework handelt, sollten Sie sich von dieser Bezeichnung nicht abschrecken lassen. Hinter den Kulissen basiert Advanced Views auf einem einfachen modularen Konzept und umfasst eine Reihe bekannter Techniken und Best Practices.

Es handelt sich um ein flexibles Tool, mit dem Sie neue Abschnitte zu jeder vorhandenen Website hinzufügen oder eine ganze Website von Grund auf erstellen können. Advanced Views wird als Plugin vertrieben und kann nicht nur von erfahrenen Entwicklern, sondern auch von Web-Erstellern und Website-Besitzern für eine Vielzahl einfacher Aufgaben verwendet werden.

Um den Prozess zu optimieren, verwendet das Framework einen hybriden Ansatz: Es stellt eine Benutzeroberfläche für die anfängliche Erstellung und Einrichtung der Grundlage bereit und verlässt sich gleichzeitig auf direkte Codeanpassungen, um das gewünschte Layout zu erreichen.

Das Beherrschen von Layouts erfordert mindestens Grundkenntnisse in HTML und CSS, während die Verwendung erweiterter Funktionen des Frameworks Kenntnisse in PHP und JavaScript erfordert.

2. Demo-Beispiel

2.1) Installation und Ansichtserstellung

Machen wir uns anhand einer häufigen Aufgabe – dem Hinzufügen eines neuen Seitenabschnitts – mit den erweiterten Ansichten vertraut. Stellen Sie sich vor, wir haben eine bestehende Website mit einem bestimmten Thema erstellt und unsere Aufgabe besteht darin, einer Seite einen neuen Abschnitt hinzuzufügen.

Dieser Abschnitt sollte auf den ACF-Feldern basieren, die dieser Seite beigefügt sind. Neben ACF unterstützt Advanced Views auch andere Datenquellen. In diesem Fall verwenden wir ACF jedoch zu Demonstrationszwecken.

Zuerst müssen wir das Advanced Views Framework aus dem WordPress-Repository installieren und aktivieren.

Als nächstes erstellen wir eine neue ACF-Gruppe für unsere Homepage, die wir „Über uns“ nennen. Nachdem wir die Felder hinzugefügt und die Standortregeln eingerichtet haben, können wir eine erstellen Betrachten im Rahmen.

A Betrachten ist eine von Advanced Views eingeführte Komponente. Alle Betrachten ist eine intelligente Vorlage, die für die Anzeige von Inhalten verantwortlich ist. Wir können eine erstellen Betrachten von einem speziellen Bildschirm aus oder über einen speziellen Link direkt vom Bildschirm „Feldgruppe“ aus. Durch die Verwendung des Links auf dem Bildschirm „Feldgruppe“ müssen wir die Felder nicht manuell auswählen, daher verwenden wir diese Methode.

Wie Sie sehen, wir Betrachten wurde bereits erstellt und von Advanced Views mit Feldern aus unserer Feldgruppe gefüllt. Wir können die Standardeinstellungen ändern, z.B. Ändern Sie die Bildgröße. Advanced Views hat auch die Standardvorlage für uns generiert. Die Vorlage verwendet die berühmte Twig-Engine. Die Syntax ist selbsterklärend und in der Vorlage können Sie alle nativen Twig-Funktionen verwenden.

Lassen Sie uns die Anpassung vorerst überspringen und hinzufügen Betrachten zu unserer Seite. Beliebig Betrachten kann auf verschiedene Arten zur Zielseite hinzugefügt werden, einschließlich benutzerdefinierter Gutenberg-Blöcke, aber jetzt verwenden wir zunächst den Shortcode.

Also haben wir unsere Seite geöffnet, die bereits mit einem bestimmten Thema erstellt wurde. Während wir den neuen Abschnitt mit den Tools des Themes erstellen konnten, zu denen normalerweise ein Seitenersteller gehört, haben wir durch die Verwendung der erweiterten Ansichten eine fein abgestufte Kontrolle und können den Prozess gleichzeitig beschleunigen.

Jetzt müssen wir den Shortcode am Zielort einfügen und die Felder ausfüllen. Alles ist fertig, wir können also auf „Aktualisieren“ klicken und zur Seite wechseln, um die Ergebnisse anzuzeigen.

Wir sehen die dort bereits angezeigten Felder. Derzeit gibt es für den Abschnitt keine Stilregeln, aber die Felder sind vorhanden. Dies ist eine erhebliche Zeitersparnis, da Advanced Views die Feldtypen erkennt und automatisch die erforderlichen Details in die Vorlage lädt.

Wenn Sie mit ACF und anderen Metafeld-Anbietern vertraut sind, wissen Sie, wie viel Vorarbeit in verschiedenen Feldern erforderlich ist – von der Überprüfung ihrer Feldnamen bis hin zur Dokumentation von Details zum Rückgabeformat.

2.2) Anpassung der Ansicht

Kommen wir nun zurück zum Betrachten und etwas Styling hinzufügen. Ich habe meine vorbereiteten Stile verwendet. Erweiterte Ansichten verfügen über einen integrierten Code-Editor, der für kleine Änderungen nützlich ist. Darüber hinaus gibt es eine Dateisystemspeicheroption, mit der Sie Code direkt in Ihrer bevorzugten IDE bearbeiten können.

Also haben wir das Styling hinzugefügt. Das Tolle daran ist, dass diese Stile nur auf der Seite angezeigt werden, auf der wir unseren Shortcode eingefügt haben, da Advanced Views einen Just-in-Time-Ansatz für die Asset-Bereitstellung verwendet. Jetzt können wir auf „Aktualisieren“ klicken und unsere Seite aktualisieren.

Ja das ist es! Der neue Abschnitt ist nun fertig. Erweiterte Ansichten verfügen über viele nützliche Funktionen und können Daten aus mehreren Quellen abrufen, einschließlich Benutzern und Taxonomien.

2.3) Über Karten und Dateisystemspeicheroptionen

Zusätzlich zu den Ansichten werden in „Erweiterte Ansichten“ Karten eingeführt, mit denen Sie Beitragssätze abfragen und anzeigen können. Der Karten Das Konzept ist ebenfalls einfach: Es basiert auf der integrierten WP_Query-Klasse und diese Einstellungen sind Abfrageargumente. Als Ansichten, Karten Enthält außerdem anpassbare Vorlagen, die uns eine detaillierte Kontrolle über den Inhalt ermöglichen.

Wenn Sie eine Website von Grund auf erstellen, können Sie dank der Dateispeicheroption jedes CSS-Framework wie Tailwind oder Bootstrap verwenden. Bei WPLake verwenden wir normalerweise Tailwind und haben ein blockbasiertes Startup-Theme veröffentlicht, damit Sie schneller loslegen können.

Weitere Informationen zum Framework finden Sie im Help Center. Das Help Center ist die offizielle Framework-Dokumentation, die alle wichtigen Konzepte und Funktionen abdeckt und Tipps und Tricks enthält.

3. Nützliche Links

1. Rezension zu „Erweiterte Ansichten“ (wo Sie sich besser mit Ansichten und Karten vertraut machen können)
2. Erläuterung der wichtigsten Aspekte
3. Starter-Thema
4. Warum Twig verwendet wurde, seine Vorteile und Hauptmerkmale
5. Option zur Dateisystemspeicherung
6. So verwenden Sie die WordPress-Interaktivitäts-API innerhalb des Frameworks

Probieren Sie Advanced Views jetzt aus und steigern Sie Ihre Produktivität!