Eigene Templates in Wordpress entwickeln

Letztes Update:
von sanchez.s
Eigene Templates in WordPress entwickeln

Templates sind Vorlagen für deine Beiträge. Sie sind die Grundlage für dynamische Websites, auf der Inhalte nach bestimmten Regeln an immer derselben Stelle ausgespielt werden.

Du weist Templates einem Post Type zu, kannst die Zugehörigkeit der Templates aber noch weiter eingrenzen. So kann ein Template nur für einen bestimmten Taxonomie-Begriff oder einen Beitrag mit einem bestimmten Meta-Wert gelten.

Templates anlegen

Du benötigst 3 Templates für die Nachrichten, jeweils eine Vorlage für

  • Text
  • Podcast
  • Video

Lege zuerst das Template Text an. Es handelt sich um ein Template des Typs Single.

Single-Templates sind Vorlagen für einzelne Items, wie Beiträge oder Produkte.

Lege die Bedingungen fest, unter denen deine Website dieses Template zukünftig benutzt: Deine Website nutzt dieses Template, wenn die Taxonomie Typ der Nachricht gleich Text ist.

Wähle eine Nachricht des Typs Text als Preview aus, damit du das Template original getreu aufbauen kannst.

Diese Schritte wiederholst du für das Template Podcast … und das Template Video.

Template für Texte

Nachdem du alle Templates angelegt hast, baue sie inhaltlich auf. Du startest mit dem Template Text.

Listing kopieren

Für den ersten Teil des Template bedienst du dich beim Listing Liste, das du zuvor erstellt hast. Das spart Zeit .   

Social-Media-Leiste

Danach fügst du eine Leiste mit Social-Media-Icons ein. Diese Leiste hat zwei Funktionen. Sie verlinkt auf deine Social-Media-Kanäle und trennt den Teaser optisch von Rest des Artikels.

  1. Färbe die Primär-Farbe Weiß und die Sekundär-Farbe Grau, um die Icons optisch dezenter wirken zu lassen.
  2. Ergänze einen gepunkteten Rahmen, um eine optische Trennung zu erreichen
  3. Platziere die Icons linksbündig.
  4. Mit ein wenig Abstand nach oben und unten kommt die Leiste noch besser zur Geltung.

Beitragsbild

Platziere unter der Leiste das Beitragsbild mit dem Widget Dynamic Image und der Quelle Post Thumbnail. Damit sorgst du dafür, dass das Widget automatisch das jeweilige Beitragsbild der Nachricht anzeigt. 

Richte das Bild mittig aus und sorge dafür, dass das Widget unsichtbar wirst, wenn kein Beitragsbild vorhanden ist.

Inhalt

Unter dem Bild ist der perfekte Platz für den eigentlichen Inhalt der Nachricht.

Setze einen kleinen Abstand zwischen den beiden Bild und Text, um beides voneinander abzugrenzen.

Verwandte Nachrichten

Unter dem Inhalt der Nachricht sollen verwandte Artikel deine Leser mit Leseempfehlungen versorgen und auf der Seite halten.

Jetzt kommen zum ersten Mal die Listings zum Einsatz, die du zuvor erstellt hast, in diesem Fall das Listing Box.

Das Listing zeigt zunächst die neuesten 6 Beiträge deiner Seite an. Noch dazu erscheint die aktuelle Nachricht in der Liste mit verwandten Artikeln.

Um 6 verwandte Nachrichten der Nachricht anzuzeigen, befehle dem Listing folgendes:

  • Zeige Nachrichten an, die aus dem gleichen Ressort stammen, wie du aktuelle Nachricht.
  • Schließe außerdem die derzeitige Nachricht aus.

Damit dein Leser weiß, was er da sieht, setze eine passende Überschrift über dem Listing.

Verwandte Themen

Verwandte Themen sind eine weitere Möglichkeit, deinen Leser mit mehr Lesestoff zu versorgen. Verlinke die Archive der Themen, die der derzeitigen Nachricht zugeordnet sind.

Setze eine passende Überschrift und ergänzen zum Schluss jeweils einen Abstand zwischen Überschrift und verwandten Artikeln bzw. Themen.

Mobile Check

Prüfe, wie deine Seite auf Tablets und Smartphones aussehen. Das ist besonders wichtig, wenn du mit Spalten arbeitest.

Auf dem Smartphone sind drei Spalten zu eng. Deshalb soll das Widget auf dem Smartphone einspaltig sein.

Templates für Videos und Podcasts

Weiter geht’s mit den beiden anderen Templates Podcast und Video. Du sparst Zeit und kopierst alle Inhalte des fertigen Templates Text.

Youtube- und Soundcloud-Link im Preview ergänzen

Die Videos und Podcasts sollen sich ihre jeweilige URL von Youtube oder Soundcloud dynamisch aus den jeweiligen Nachrichten ziehen.

Ergänze zunächst in den Preview-Nachrichten der beiden Templates exemplarisch ein Video und ein Podcast in den Meta-Feldern.

Diese Meta-Felder haben wir zuvor definiert und sie werden im Backend jeder Nachricht angezeigt, sodass du oder ein anderer Redakteur den jeweiligen Video- oder Podcast-Link nachher einfach hinterlegst. 

Videoplayer

Lösche im Template Video das große Beitragsbild und füge einen Videoplayer ein. Als Youtube-URL hinterlegst du das Meta-Feld Video.

Wenn du statt YouTube lieber Vimeo nutzen oder dein Video selber hosten möchtest, änderst du den Video Type.

Überschrift

Weil der Inhalt der Nachricht des Typs Video vermutlich das Video-Transkript sein wird, füge eine entsprechende Überschrift und einen kleinen Abstand.

Weilter geht‘s jetzt mit dem Podcast.

Soundcloud

Lösche das große Beitragsbild und füge das Widget Soundcloud ein. Als Link hinterlegst du das Meta-Feld Podcast, sodass sich das Widget den Link zieht, den der Redakteur zuvor im Backend der jeweiligen Nachricht hinterlegt hat.

Überschrift

Ergänze über dem Inhalt eine Überschrift, die den Inhalt als Podcast-Transkript beschreibt.

Im nächsten Schritt baust du ebenfalls Templates, allerdings nicht für deine Beiträge, sondern für deine Archive. 

Das könnte dich auch interessieren

WordPress-Plugins erweitern deinen Blog um bestimmte Funktionen – und das...
Du hast dein eigenes Nachrichten-Portal gebaut. Nimm dir jetzt einen...
Deine Besucher starten immer seltener auf der Startseite – auch...
Footer-Seiten erstellen Bevor du deinen Footer entwickelst, sollten zunächst alle...

Kommentare

{{ reviewsTotal }} Review

{{ reviewsTotal }} Reviews

{{ options.labels.newReviewButton }}
{{ currentUserData.canReviewMessage }}