Mit Data Views eine Post-Liste erstellen - WordPress Custom Post Types Workshop Teil 3

  • Veröffentlicht am: 16. 11. 2017
WordPress Custom Post Types Workshop Teil 3

Im dritten und letzten Teil dieses Workshops zeige ich nun, wie die angelegten Noten-Daten in der WordPress-Website dargestellt werden können. Normalerweise braucht man Programmierkenntnisse um eine Custom Post Type Liste darzustellen. Damit dies auch für normale Anwender schnell und einfach möglich ist, habe ich das Plugin "Data Views" geschrieben.

Das Endergebnis dieses Workshops

Auf dieser Demo-Seite kann man sich das Endergebnis ansehen: https://www.florianwetzl.de/wordpress/dataviews/noten-uebersicht/

Die Installation von Data Views

Zunächst muss Data Views von der Plugin-Seite heruntergeladen und installiert werden.

In der ZIP-Datei befindet sich der Ordner "data-views". Dieser muss mit einem FTP-Programm (z.B. mit FileZilla) in den Ordner "wp-content/plugins" hochgeladen werden.

Anschliessend muss das Plugin auf der Plugin-Seite aktiviert werden:

Den Noten-View mit Data Views einrichten

Data Views steht jetzt im Backend zur Verfügung:

Zunächst ist noch kein View, zu deutsch Ansicht oder Darstellung, angelegt. Um den Noten-View zu erstellen, klicken wir auf den Button "Neuen View erstellen". Anschließend öffnet sich folgende Maske:

 

 

In das Feld Name geben wir "noten" ein, in das Feld Beschreibung kann eine kurze Info eingetragen werden. Im Feld Post Type Name muss der Custom Post Type "noten" ausgewählt werden. Dies legt fest, dass Data Views die Inhalte von diesem Post Type auflistet.

Anschließend klicken wir auf den Button "Speichern und weiter bearbeiten". Danach kommen wir zur Maske mit den Detaileinstellungen für den View. Im ersten Abschnitt muss "Filter anzeigen" gewählt werden. Durch diese Einstellung wird eine dynamische Filterbox für unsere 3 Taxonomies "Komponist", "Stück" und "Instrument" erstellt, mit der die Postliste gezielt gefiltert werden kann.

Danach müssen nur noch 3 Einstellungen vorgenommen werden, schon ist der View einsatzbereit. Die Checkbox "Seiten-Navigation hinzufügen" muss gewählt werden, dies erzeugt eine Seiten-Navigation unterhalb der Postliste. Bei "'Kein Ergebnis' Text" tragen wir "Zu diesen Filtern wurden keine Noten gefunden." ein. Dieser Text wird ausgegeben, wenn keine Noten den Filtern entsprechen. Im Feld "Einträge pro Seite" geben wir 10 ein. Dies ist auch der Standard-Wert von WordPress für die normalen Artikel-Seiten.

Danach klicken wir auf "View speichern und Preview". Hierdurch werden die Einstellungen für den View gespeichert und ein Preview wird im unteren Bereich der Seite angezeigt.

Hier können wir z.B. schon einmal sehen, wie die Filterbox aussehen wird und welche Noten auf Seite 1 ausgegeben werden. Nun ist der View fertig angelegt. Ganz oben auf der Editier-Seite ist ein Feld "Shortcode" vorhanden. In diesem Fall lautet der Shortcode [dataviews id=1]. Um den View nun in eine Seite einzubinden, muss nur dieser Shortcode in die Seite kopiert werden.

Fertig ist die filterbare, dynamische Custom-Post-Type-Liste.

Ein Vektor-Noten-Icon mit dem Font-Awesome Feature hinzufügen

Um die Liste noch etwas ansprechender zu gestalten, habe ich noch ein Noten-Icon vor die einzelnen Listenzeilen platziert. Wer dies umsetzen will, der kann auf der Seite "Optionen" folgende Optionen aktivieren: "Font Awesome in die Website einbinden (rund 100 KB)" und "Data Views Font Awesome Feature aktivieren".

Bei der Benutzung von Font Awesome sollte beachtet werden, dass die enthaltenen Marken-Logos nur verwendet werden dürfen, um die entsprechende Marke zu repräsentieren. Alle anderen Icons können natürlich überall eingesetzt werden. Nachdem diese Optionen aktiviert wurden, stehen neue Editiermöglichkeiten zur Verfügung. Wenn man den Noten-View im Backend wieder aufruft, dann kann man mit einem von mir selbst erstellten Icon-Picker alle Font-Awesome Icons durchsuchen und bis zu 10 Icons auswählen.

Anschließend kann für das oder die Icons eine Farbe gewählt werden. Ich habe schwarz für das Noten-Icon gewählt.

 

Anschließend muss auf "View speichern" geklickt werden, dann steht das Noten-Icon vor den Zeilen der Liste. Falls dieser Workshop oder das Plugin hilfreich war, freue ich mich über einen Kommentar unten im Kommentarbereich. Es werden auf jeden Fall weitere Updates für Data Views folgen, darüber werde ich dann wieder hier im Blog informieren.

Zum Abschluss noch ein Tipp: wer die Spotify-Player-Boxen umsetzen will, wie z.B. hier https://www.florianwetzl.de/wordpress/noten/noten-klavier-die-zauberfloete/, kann einfach direkt in Spotify mit rechts auf einen Titel klicken, und dann "Teilen > Code zum Einbetten auswählen" verwenden.

Dadurch wird ein Code zum Einbetten dieser Spotify-Player-Boxen in die Zwischenablage kopiert. Dieser kann dann in WordPress in den Text der Noten kopiert werden, dann erscheint auf den Noten-Seiten die jeweilige Playerbox.

Zum 2. Teil des Workshops

Kommentare

Noten Download

Kommentar: 
Hallo Florian, vielen Dank für diese super Tutorial Reihe! Es tut exakt das, was es soll und ist super einfach schnell und intuitiv einzurichten. Super Support durch den Entwickler (dich) bei Problemen. Danke! Weiter so! Ich setze das Plugin auf www.koenigsbrunner-kammer-orchester.de im internen Bereich ein.

:-)

Kommentar: 
Hallo Simon, danke für Dein Feedback! Es freut mich, dass das Plugin nützlich ist. Bei Fragen zu Data Views oder zum Workshop frag gerne wieder nach. Viele Grüße, Florian

Neuen Kommentar schreiben