Trick # 397 | Dieser Beitrag beinhaltet 1060 Wörter. – Geschätzte Lesezeit: ca. 6 Minuten.
Das Divi-Theme verfügt über das Posttitel-Modul. Damit lassen sich einige zusätzliche Inhalte praktisch anzeigen: Natürlich den Titel, etwa eine Autorenzeile, das Datum, die Kategorien des fraglichen Beitrags – nicht aber die Schlagwörter. Macht nichts. Sie können letztere auf anderem Weg ganz einfach anzeigen lassen.
So wie nebenan präsentiert sich das Posttitel-Modul des aktuellen Beitrags:
Neben dem Titel werden das Datum und die Beitragskategorien angezeigt.
Divi-Theme: Schlagwörter in Beiträgen anzeigen
Das Posttitel-Modul lässt es aber nicht zu, dass auch die Schlagwörter (oder Tags) angezeigt werden. Dies lässt sich aber auf einfache Weise ausbessern.
Hierzu verwenden Sie ein ganz normales Textmodul, welches Sie zusätzlich einfügen. 
Geben Sie darin aber keinen Text ein, sondern klicken Sie auf das kleine Icon für den dynamischen Content oben rechts im Fenster.
Im Anschluss öffnet sich ein neues Auswahlfenster, das ungefähr aussieht wie nebenan:
In unserem Fall sind die Beitrags-Tags interessant. Wählen Sie diese aus.
Nun öffnet sich ein weiteres Fenster – in diesem lönnen Sie unter anderem auswählen, welche Beitrags-Tags angezeigt werden sollen. Für unseren Zweck sind es die «Schlagwörter»:
Nun können Sie das Textfenster schliessen. Es zeigt nun die bislang fehlenden Schlagwörter an und verlinkt diese auch gleich mit der zugehörigen Index-Seite. Siehe nebenan:
Supplement: Links als Buttons anzeigen
Wenn Sie statt der normalen Text-Links lieber einen Button anzeigen möchten, geht natürlich auch das. Hierfür vergeben Sie dem entsprechenden Text-Modul eine Klasse: «post-tag-links». Bearbeiten Sie hierfür das Textmodul, wechseln Sie auf den Tab «Erweitert», dann auf «CSS-ID und Klassen» und fügen Sie den Klassennamen «post-tag-links» ins Feld «CSS-Klasse» ein.
Nun kopieren Sie den nachfolgenden CSS-Code und fügen ihn in das CSS-Stylesheet Ihrer Website ein – unter Design/Customizer/Zusätzliches CSS:
.post-tag-links {
font-weight: bold!important;
}
.post-tag-links a {
background: #293280;
padding: .5em 1em;
border-radius: 5px;
border: 1px solid #293280;
color: #ffffff;
font-size: .8em;
transition: .3s ease all;
}
.post-tag-links a:hover {
background: #ffffff;
color: #293280;
transition: .3s ease all;
}Dies ergibt eine Anzeige wie nebenan:
Werbung
Werbung
