Lesefortschritt:

Blog-Modul-Special #7: Beiträge im Blog-Modul nach Kategorien einfärben

19. Dezember 2022 | CSS-Stylesheet, Divi-Theme

Dieser Beitrag beinhaltet 631 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.

Dieses Sujet ist für mich ein Highlight. Und ums highlighten geht es auch gleich in diesem Hack: Die Beiträge, welche im Blog-Modul des Divi-Themes gelistet werden, können nämlich farblich unterschiedlich hinterlegt werden. So finden sich User noch besser zurecht und finden Inhalte zu Themen, die sie interessieren, besonders schnell. Das aufzusetzen, ist wirklich unglaublich einfach. Auch darum: Ein Highlight.

Konkret: Das Divi-Theme kann von Haus aus nicht unterscheiden, welcher Art die Artikel sind, welche in einem Blog-Modul angezeigt werden. Sie hingegen können das und vergeben vermutlich verschiedene Kategorien.

Das machen auch wir in der Praxis von Dr. Code nicht anders. Wobei WordPress jeder Kategorie einen Slug vergibt. Diese Slugs werden für diesen Tipp benötigt – Sie finden diese im WordPress-Backend unter Beiträge/Kategorien.

Wir verwenden etwa die Kategorien

  • Divi-Theme – Slug: divi-theme
  • WordPress – Slug: wordpress
  • PlugIns – Slug: plugins
  • Scripts – Slug: scripts

Nun benötigen Sie noch den CSS-Code, der die Farbe eingiesst. Der steht unten und gehört in das CSS-Stylesheet Ihrer Divi-Website – unter Design/Customizer/Zusätzliches CSS:

.et_pb_blog_grid .category-divi-theme.et_pb_post {
	background-color: lightgreen;
}
.et_pb_blog_grid .category-wordpress.et_pb_post {
	background-color: lightblue;
}
.et_pb_blog_grid .category-scripts.et_pb_post {
	background-color: lightgrey;
}
.et_pb_blog_grid .category-plugins.et_pb_post {
	background-color: pink;
}

Betrachten Sie z.B. Zeile 4. Da steht .et_pb_blog_grid .category-wordpress.et_pb_post {

Der Begriff wordpress ist der Slug unserer WordPress-Kategorie und spricht also diese Beiträge an. Sie ersetzen diese Namen also mit einem Ihrer existierenden Slugs und schon funktionierts. Wichtig ist bloss, dass Sie dem Slug noch ein category- voranstellen. Anpassen möchten Sie vielleicht überdies auch die Hintergrundfarben.

Tatsächlich ein Highlight.

Unser Code ergibt übrigens folgende Blog-Darstellung:

Kategorie- oder Schlagwort-Widget Marke Eigenbau – mit wenig PHP-Code

Wordpress liefert ein Widget für Kategorien und Schlagworte mit. Damit lassen sich die verwendeten Taxonomien praktisch anzeigen und auch gleich mit den entsprechenden Übersichtsseiten verlinken. Das Styling der Widgets ist aber ziemlich haarig. Also habe ich kurzerhand selbst ein wenig getüftelt und mit PHP-Code ein eigenes Kategorie-Widget erstellt. Das können Sie auch.

mehr lesen

Portfolio-Titel und Meta-Texte im Divi-Portfolio-Modul als Einblendung über dem Beitragsbild anzeigen

Die Module Portfolio und filterbares Portfolio des Divi-Themes haben einige Einschränkungen: Der Titeltext und der Metatext (Kategorie) befinden sich unter dem Bild. Was aber, wenn Sie das ändern und auf dem Bild platzieren möchten? Dafür gibt es in den Modulen keine Einstellungen. Hier erfahren Sie, wie Sie den Titel- und Metatext über dem Bild im Divi Portfolio-Modul platzieren können.

mehr lesen

ALT- und Title-Tags aus der Mediathek in Divi verwenden

Im Bild-Modul des Divi-Themes lassen sich ALT-Texte, welche etwa das abgebildete Bild in Worten beschreiben, problemlos erfassen. Ebenso die Title-Tags. Wer aber – und das tun sicher viele – Bilder direkt aus der Mediathek übernimmt, wird bald feststellen: Weder die ALT-Tags noch die Title-Tags werden in Divi nicht angezeigt. Das lässt sich aber nachbessern und wir zeigen Ihnen, wie das geht.

mehr lesen

Update-Option für das Divi-Theme ausschalten

Das Divi-Theme lässt sich in Wordpress automatisch aktualisieren. Das ist eigentlich keine schlechte Idee, denn Themes und Plugins sollten aktuell gehalten werden, um Sicherheitslücken zu vermindern. Jedoch kann das Update auch Fallstricke mit sich bringen – besonders bei umfangreichen Websites. In so einem Fall ist es klüger, Updates jeweils händisch auszuführen und zu kontrollieren, ob alle Funktionen noch wie gewünscht arbeiten.

mehr lesen

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This