Trick # 188 | 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:
Der Speed-Booster-Hack: WordPress-Seite in Rekordzeit laden – der 550. Beitrag von Dr. Code
Zur Feier des 550. Website-Hacks hat Dr. Code in der Trickkiste gekramt. Wir bauen uns heute den eigenen Speed-Booster für die WordPress-Website. Funktioniert garantiert und macht die Website merklich schneller.
Link-Special – Trick #1: Externe Links automatisch mit einem Icon versehen
Externe Links in einem Blogbeitrag oder auf einer Website zu kennzeichnen, ist nicht nur eine Frage des Designs, sondern auch der Benutzerfreundlichkeit. Es hilft den Besuchern, schnell zu erkennen, dass sie die Website verlassen, wenn sie auf einen bestimmten Link klicken. Eine elegante Lösung dafür ist das Hinzufügen eines Icons zu externen Links.
Link-Special – Trick #2: Automatische Verlinkung von Schlagwörtern in WordPress-Beiträgen
Schlagwörter (Tags) sind ein wesentlicher Bestandteil, um Inhalte auf einer WordPress-Website besser zu organisieren und die Navigation für User zu vereinfachen. Doch meist werden die Schlagwörter in den Lauftexten der Beiträge nicht mit den entsprechenden Tag-Archiven verlinkt. Dieser Beitrag zeigt, wie Sie mit einem einfachen PHP-Snippet Schlagwörter in Texten automatisch verlinken können.
WordPress-Beiträge zwingend einer Kategorie zuordnen
Das Erstellen eines klar strukturierten und benutzerfreundlichen WordPress-Blogs ist das A & O. Inhalte sollen den gewünschten Richtlinien entsprechen. Heute schauen wir uns eine einfache, aber effektive Lösung an, die sicherstellt, dass Beiträge immer einer Kategorie, aber auch nicht mehr als einer, zugewiesen sind.
Mit Farben spielen: Original-Designfarben beliebig mischen und aufhellen
Für Webprojekte verwenden Sie immer auch Farben – selbst dann, wenn es «nur» schwarz und weiss ist. Um meinem Farbkonzept treu zu bleiben und dennoch Nuancen zur Hand zu haben, habe ich mich auf die Suche nach Lösungen gemacht. Zwei patente Varianten stelle ich Ihnen heute vor.
Beitragsaufrufe-Special – Trick #1: Aufrufe zählen und im Backend anzeigen
Manchmal wäre es doch interessant zu wissen, welche Beiträge der eigenen WordPress-Website die meistgelesenen sind. Das lässt sich ganz einfach einrichten. Die Beitragsaufrufe werden mit einem einfachen PHP-Skript im Backend angezeigt.
Beitragsaufrufe-Special – Trick #2: Meistaufgerufene Beiträge im Admin-Dashboard anzeigen
Das Dashboard im WordPress-Backend ist der zentrale Anlaufpunkt für Administratorinnen und Administratoren, um einen schnellen Überblick über die Website zu erhalten. Heute zeigen wir Ihnen, wie Sie ein benutzerdefiniertes Widget erstellen, welches die beliebtesten Beiträge basierend auf ihren Aufrufzahlen direkt im Dashboard anzeigt. Damit haben Sie die letzten (und höchsten) Visitorzahlen Ihrer Posts stets im Blick.
Beitragsaufrufe-Special – Trick #3: Meistaufgerufene Beiträge in einem Sidebar-Widget darstellen
Womöglich möchten Sie die Aufrufstatistik der meistbesuchten Beiträge Ihres Blogs anzeigen. Dazu eignet sich ein Widget in der Seitenleiste ganz besonders. Wie Sie ein solches Widget erstellen, zeigen wir Ihnen im heutigen Trick.
Kurzlinks mit dem Gutenberg-Editor: URL-Shortener «Marke Eigenbau»
WordPress-Beiträge erhalten von Haus aus oft sehr lange URL, welche auf dem Beitragstitel basieren. Doch es geht auch kürzer: Mit einem URL-Shortener. Damit Sie aber nicht von externen Diensten abhängig sind, zeigen wir Ihnen heute eine Variante, wie Sie sowas selber umsetzen können. Der Hack funktioniert – anders als ein früherer Trick – auch mit dem Gutenberg-Editor von WordPress. Ein heisser Tipp für das Teilen von Beiträgen auf den sozialen Medien.
Admin-Link zum «Visual Builder» des Divi-Themes loswerden
Heute ein ganz kurzer Hack: Wenn Sie des Links im Admin-Menu auf den Visual Builder überdrüssig sind, dann lässt sich der ganz einfach ausblenden. Ein wenig CSS-Code und gut ist.
Tabellen stylen und Zeilen abwechselnd einfärben
Einst waren Tabellen auf Websites allgegenwärtig. Heute deutlich weniger – auch weil Tabellen im Responsive Design nicht ganz unproblematisch sind. Aber so ganz verzichten kann man denn doch nicht auf Tabellen. Damit sie aber wenigstens übersichtlich daher kommen, empfiehlt sich ein wenig CSS-Design. Zum Beispiel mittels abwechselnder Farbgebung.
Bild-Links in WordPress-Beiträgen deaktivieren
Eine Freundin hatte in ihrem umfangreichen Fotoblog hunderte von Bildern dargestellt. Unglücklicherweise war jedes einzelne Bild mit einem Link auf sich selbst versehen. Wir haben eine Lösung gesucht, um die Bildlinks in allen Beiträgen zu deaktivieren. Nun: wir sind fündig geworden.
Werbung
Werbung
