Unser Affiliate Theme ist da! Spare 10% mit dem Gutschein DRWP10 - mehr erfahren!
Achtung! Dieser Artikel wurde nach dem Relaunch von wpsnippets.de noch nicht überarbeitet und kann fehlerhaft in der Formatierungen sein.

WordPress Beiträge und Seiten im Dashboard farblich unterscheiden

Es gibt nichts schlimmeres, als ein unübersichtliches Dashboard bzw. dessen Beitragsaansicht. Zwar werden alle Beiträge oben in einer Art „Tab“ in verschiedene Kategorien wie Alle, Veröffentlichte, Geplant, Entwurf, Austehend, Privat, und Papierkorb einsortiert und sind somit filterbar, doch gerade der Überblick bei „Alle“ ist nicht das gelbe vom Ei und hier besteht definitiv Optimierungsbedarf.

Mit diesem kleinen aber feinem Snippet kann man dem Ganzen abhilfe schaffen. Je nach dem, welcher Status bei dem einzelnen Beitrag gesetzt ist, bekommt dieser eine bestimmte Klasse zugewiesen über deren Hilfe man mit etwas CSS das Ganze ein klein wenig übersichtlicher gestalten kann. Live sieht das dann in etwa so aus.

WordPress Beiträge farblich getrennt

Zur Umzusetzen, bedarf es nicht viel. Wie gesagt hat jeder Status eine eigene Klasse, die ich hier einmal kurz etwas näher erläutern will und zeitgleich auf die von mir gewählte Farbe eingehe. Die Farben können natürlich später je nach Bedarf und eigenen vorlieben angepasst werden.

Veröffentlichter Beitrag

Da es sich bei veröffentlichten Beiträgen um die „Norm“ handelt, belassen wir diese in der normalen, von WordPress vordefinierten, Farbe. Wer trotzdem den CSS-Selektor benötigt, hier bitte:

[css].status-publish{ }[/css]

…weiter gehts mit 3 irgendwie identischen und dennoch total verschiedenen Beitragsarten. Daher habe ich mich bei der Farbe für ein Art Ampelsystem entschieden

Geplanter Beitrag

Da es sich hierbei um einen fertigen Beitrag handelt, bekommt diese „grünes Licht“. Demnach setzen wir den Hintergrund hier auf ein dezentes Grün.

[css].status-future {background:rgba(0,255,0,0.1);opacity:0.7;}[/css]

Entwurf

Entwürfe sind ja so ein gewisses Zwischending. Sie können noch nicht geplant werden, sind aber auch nicht das gleiche wie ein ausstehender Review. Daher habe ich mir hierbei für ein dezentes Orange entscheiden.

[css].status-draft {background:rgba(255,127,0,0.2);opacity:0.7;}[/css]

Ausstehender Review

Dieser Art von Beitrag wurde von einem Autor veröffentlicht und muss noch durch einen Redakteur oder Administrator überprüft werden. Hier verwenden wir ein leichtes Rot.

[css].status-pending {background:rgba(255,0,0,0.1);opacity:0.7;}[/css]

Passwortgeschützter Beitrag (post-password-required)

Beiträge die mit einem Passwort geschützt sind und somit etwas verborgen sind, bekommen ein mittleres Grau.

[css].post-password-required {background:rgba(0,0,0,0.1);opacity:0.7;}[/css]

Privater Beitrag

Privat Beiträge, die sonst keiner sieht, bekommen ein etwas dunkleres Grau als ein Passwort geschützer Beitrag.

[css].status-private {background:rgba(0,0,0,0.2); opacity:0.7}[/css]

Um die einzelnen Reihen in eurem WordPress nun so einzufärben, müsst ihr folgendes Snippet einfach in eure functions.php einfügen:

[php]function post_status_color(){
?>
<style>
.status-publish{}
.status-future{background:rgba(0,255,0,0.1);opacity:0.7;}
.status-draft{background:rgba(255,127,0,0.2);opacity:0.7;}
.status-pending{background:rgba(255,0,0,0.1);opacity:0.7;}
.post-password-required{background:rgba(0,0,0,0.1);opacity:0.7;}
.status-private{background:rgba(0,0,0,0.2); opacity:0.7}
</style>
<?php
}

add_action(‚admin_footer‘,’post_status_color‘);[/php]

Ich hoffe ich konnt euch heute einen Weg zeigen, wie ihr für einen besseren Übeblick in eurem Dashboard sorgt.

Über Christian

Die Webentwicklung ist seit 2006 ein großer Teil meines Lebens und seit 2010 kann ich damit auch meine Brötchen verdienen. Ich beschäftige mich speziell mit WordPress und entwickle auch eigene Themes. Die Anpassungsfähigkeit von Wordpress begeistert mich immer wieder, daher möchte ich euch interessante Snippets und Plugins nicht vorenthalten.

WordPress Affiliate ThemeAnzeige

6 Kommentare

Avatar von Marcel

Marcel 10. Juli 2013 um 22:37

Hab ich als Laie sogar umsetzen können, aber da war der Perun ein wenig eher. Dennoch finde ich es eine toole Sache. In meinem Blog arbeite ich mit krassen Farben wie z.B. Grün = online, Rot = Entwurf etc.

Sollte einer Farbenblind sein, dann haben wir ein Problem, aber bisher war es noch nicht der Fall. Solche Tipps & Kniffe sind recht genial. Mehr davon in Zukunft auch solche, wofür es kein Plugin zwingend braucht!

Antworten
Avatar von André Köbel

André Köbel 10. Juli 2013 um 23:02

Hallo Marcel,

hatte garnicht mitbekommen, dass Vladimir das Snippet ebenfalls gepostet hat. Bin vor einiger Zeit auf einer englischsprachigen Seite darüber gestolpert und hatte es als Bookmark drin.

Klar, farblich kann man oder muss das Ganze auf seine Bedürfnisse anpassen. Wir haben das hier im Backend z.B. nur mit ganz ganz dezenten Farbtönen umgesetzt, also viel „heller“ als im Beispiel oben.

Gruß
André

Antworten
Avatar von ben

ben 16. Juli 2013 um 15:40

Coole und simple Lösung, die einem super weiterhilft. Nur warum den Code in die Functions.php packen und nicht in die style.css des Backends? Und jetzt sag nicht wegen der Updatefähigkeit :P

Antworten
Avatar von André Köbel

André Köbel 17. Juli 2013 um 10:46

Aufgrund der fehlenden Möglichkeit WordPress auf den neusten Stand zu setzen, ohne die getätigten Einstellungen zu verwerfen. :P

Nein, über Design > Editor kommst du nicht an die CSS-Files für den Adminbereich, also müsste es umständlich via FTP gemacht werden. :)

Antworten
Avatar von Torsten

Torsten 16. Juli 2013 um 16:00

Hatte ich schon bei Perun/Vladimir gepostet: Ich habe das per Stylish in meinem Browser. So funktioniert das in jedem WordPress. Inklusive WP.com. Deutlich praktischer als functions.php, Plugin oder jede andere lokale Lösung. :)

Antworten
Avatar von André Köbel

André Köbel 16. Juli 2013 um 16:42

Stimmt, das ganze per stylish zu lösen wäre natürlich auch eine Idee.

Wer nicht weiß wovon wir reden, stylish ist ein Plugin für Firefox oder Chrome, mit dessen Hilfe den bestehenden CSS-Code einer Webseite (natürlich nur bei sich lokal) verändern / erweitern kann.

Firefox: https://addons.mozilla.org/de/firefox/addon/stylish/
Chrome: https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=de

Antworten

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <strong>, <em>, <u>, <a href="">, <del>, <ul>, <ol>, <blockquote>. Für Code benutze bitte pastebin.com und kopiere den Link in dein Kommentar.
*
*