UX-Tipp für mehr Übersicht in WordPress: Beiträge nach Status farblich organisieren

Wenn du regelmäßig mit WordPress bloggst, weißt du, wie schnell das Dashboard unübersichtlich wird. Die Beiträge sind nur in Weiß und Hellgrau gehalten, wie auch die Seiten. Luft nach oben? Aber sowas von.

Kürzlich habe ich mir das Backend mit der UX-Brille angesehen, quasi ein Mini-Audit. Es ist nicht so, dass die Funktionen fehlen. Aber die Benutzerführung ist einfach nicht optimal. Warum muss ich erst klicken, filtern oder suchen, wenn ich schon auf einen Blick erkennen könnte, was los ist? Genau da setzt dieser kleine Farbtrick an.

Mit ein paar Zeilen CSS-Code kannst du nämlich die Hintergrundfarbe im Dashboard nach Status anpassen – Entwurf, veröffentlicht, ausstehend – und so die Übersicht um Welten verbessern. Damit siehst du auf einen Blick und OHNE zu klicken, was noch in der Pipeline steckt.

Um diesen Blogbeitrag übersichtlich zu halten, schreibe ich nur über Beiträge in WordPress. Aber sowohl der Inhalt als auch der Code decken ebenso Seiten ab.

Was ist ein Beitragsstatus in WordPress?

Der Beitragsstatus ermöglicht es Nutzern, an einem Beitrag zu arbeiten, ohne ihn gleich zu veröffentlichen. Die Status erleichtern Arbeitsabläufe, auch im Team und mit einem Redaktionsplan. Die wesentlichen Status sind diese 5:

Beim Bloggen nutze ich meistens nur „Entwurf“ und „veröffentlicht“. Im Dashboard lassen sich die Beiträge danach filtern. Es gibt unter anderem ganz oben den Reiter „Entwürfe“.

Doch wie das so ist: Da es gezielt geklickt werden muss, rutscht es auch mal hinten runter. Auch das ist UX. Bei mir geraten jedenfalls Entwürfe gerne mal in Vergessenheit, was suboptimal ist. Oder besser gesagt: gingen. Denn mit ein paar Zeilen Code lässt sich Überblick im Dashboard schaffen und der Klick wird überflüssig. Du kannst den jeweiligen Status mit einer Hintergrundfarbe deiner Wahl darstellen lassen, und zwar ganz ohne Plugin.

Heute suchte ich etwa Inspiration zum Schreiben und habe beim Durchblättern meiner Beiträge nur auf die Farbe Gelb – siehe dir dazu das Headerbild an – geachtet. Bäm, da war er, dieser vergessene Entwurf. Bereits vor Monaten habe ich ihn angefangen und dann allerdings im Trubel vergessen, weil bei der Blogparade so viel los war.

Warum die Hintergrundfarbe in WordPress ändern?

Klar, WordPress kennzeichnet den Status eines Beitrags, allerdings nur dezent. Neben den oben genannten Filtern und die abwechselnd grauen und weißen Zeilen, gibt es den Status als Text in Schwarz nach dem blauen Titel. Die Information ist da, muss aber Zeile für Zeile gelesen werden.

Bei 10 Beiträgen ist das noch ok. Aber wer regelmäßig bloggt, hat bald deutlich mehr, und dann geht die Sucherei los. Farbe bringt hier Klarheit und spart Zeit. So erkennst du sofort, ob ein Beitrag noch bearbeitet wird oder schon live ist.

Das, was du mit dieser kurzen Anleitung erreichen kannst, ist eine farbliche Sortierung wie diese hier:

Gute UX hört nicht im Frontend auf. Auch wir, die im Backend arbeiten, verdienen eine klare Nutzeroberfläche, die leicht zu bedienen ist. Wer täglich mit WordPress arbeitet, merkt schnell, wie kleine Details – wie diese Farbcodierung – den Arbeitsablauf spürbar verbessern.

Bevor du loslegst

Um die farbliche Markierung umzusetzen, ergänzt du Code in der functions.php. Diese PHP-Datei ist nicht irgendeine PHP-Datei, sondern das Herzstück deines Themes. Mit einem einzigen Fehler darin kannst du deine Website abschießen. Hust, das kenne ich nicht nur in der Theorie.

BEVOR du startest, erledige unbedingt diese zwei Dinge:

1. Mache ein Backup: Sichere deine Website und die Datenbank. Nur so kannst du sie im Notfall wiederherstellen.
2. Nutze ein Child Theme: Das ist Vorbeugung, denn sonst werden deine Änderungen beim nächsten Theme-Update einfach überschrieben.

Du willst dich nicht mit Code oder Backups herumschlagen? Melde dich gerne bei mir, ich übernehme das gerne für dich.

Fünf Status in WordPress, fünf Farben – so geht’s

Du hast deine Daten gesichert, richtig?

Dann öffne die functions.php deines Child Themes. Diese findest du im Dashboard hier: Design > Theme-Datei-Editor > rechts oben ist die functions.php. Füge den folgenden Code-Snippet unten in der Datei ein:

 
/**
* Dashboard (Seiten, Beiträge): Farbe je nach Veröffentlichungsstatus */

add_action('admin_footer','posts_status_color');
function posts_status_color(){
?>
<style>  
.status-draft{background: #fef1c2 !important;}  
.status-pending{background: #ffd6ff !important;}  
.status-publish{background: #e3ffd4  !important;}   
.status-future{background: #f0d4ff !important;}  
.status-private{background: #ffe1c7 !important;} 
</style> 
<?php
}

Speichern, zack, fertig. Prüfe nun im Dashboard die Beiträge und Seiten, sie sollten nun so farblich codiert sein wie im Headerbild. Dir gefällt eine Farbe nicht? Kein Problem, ändere einfach den entsprechenden 6-stelligen Farbwert.

Kleiner Tipp: Die Bezeichnungen wie .status-draft oder .status-publish kommen direkt von WordPress. Du musst da nichts extra anlegen. Einfach nur den 6-stelligen Farbcode ändern und fertig.

Warum ich das liebe

Farben schaffen im Backend sofort Klarheit. Statt zu suchen, erkenne ich mit einem Blick, was ansteht. Das bringt Ruhe in meinen Kopf und macht mir das Arbeiten leichter. Für mich als Nutzende ist das entsprannter.

Mein Tipp: Wenn du öfter am Backend arbeitest, probiere weitere kleine Optimierungen. Farben sind ein guter Start, aber auch die Spaltenübersicht und Filter kannst du individuell anpassen.

Fazit: Mehr Übersicht und weniger Sucherei

Mit nur wenigen Handgriffen machst du dein WordPress-Backend nicht bloß farbenfroh, sondern auch sehr viel übersichtlicher. Ich liebe solche kleinen UX-Hacks.

Wenn deine Website mehr Klarheit braucht, schau dir gerne meinen Website Check-up an. Dabei sehen wir uns gemeinsam die Baustellen an und ich biete dir Lösungen, um deine Website zu verbessern.

Hast du Fragen zum Inhalt? Möchtest du etwas ergänzen? Teile deine Gedanken gerne unten in den Kommentaren.