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

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

Dieser Beitrag beinhaltet 570 Wörter. Geschätzte Lesezeit: ca. 3 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:

Mit zwei kleinen PHP-Hacks Beitragsübersichten für alle Lebenslagen selber bauen – der 200. Beitrag von Dr. Code

So ein klein wenig stolz sind wir schon: 200 Tipps und Tricks für Wordpress, CSS, HTML und das Divi-Theme haben wir bis zum heutigen Tag veröffentlicht. Heute wagen wir uns an ein klein wenig PHP-Programmierung. Wir bauen uns kinderleicht massgeschneiderte Beitragsübersichten. Vorzüglich geeignet für Widgets in der Seitenleiste – aber natürlich auch für anderswo.

mehr lesen

Absendernamen in ausgehenden WordPress-E-Mails ändern

Wenn WordPress eine E-Mail-Benachrichtigung sendet, verwendet das System standardmässig «WordPress» als Absendernamen. Für Mails an Sie als AdministratorIn ist das ja noch OK – aber für Mails nach aussen (an Ihre WebsitebesucherInnen) sieht das etwas unprofessionell aus. Ändern Sie den Namen in eine echte Person oder den Titel Ihrer Website. Geht ganz einfach.

mehr lesen

WordPress-Updates ohne Standard-Themes

Kürzlich beglückte uns Wordpress wieder einmal mit einem neuen Standard-Theme. Immer um den Jahreswechsel herum, sind wir verdonnert, ein neues, unerwünschtes Theme aus dem Hause Wordpress von Bord zu werfen. Eine kleine Einstellung erlaubt aber, die Zwangsinstallation gleich ganz zu umgehen.

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