7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. WordPress

Quick-Tip: Admin Menü Trenner Wiederherstellen

Scroll to top
Read Time: 3 mins

German (Deutsch) translation by Jonas Döbertin (you can also view the original English article)

So erfrischend des neue WordPress Dashboard auch ist, nicht jeder ist zufrieden mit allen Änderungen. Ich persönlich mag zwar den minimalistischen Stil, es gibt allerdings eine Kleinigkeit, die ich wirklich vermisse: Der Navigationsleiste auf der linken Seite fehlte die visuelle Trennung zwischen den verschiedenen WordPress-Bereichen.

In diesem Quick-Tip zeige ich Euch, wie Ihr den CSS-Code des Dashboards inspiziert und die Trenner mit nur ein paar Zeilen Code zurück bringt.

Die Styles Finden

Die Trenner, welche wir wiederherzustellen versuchen, sind nicht wirklich weg - sie sind lediglich unsichtbar. Macht einen Rechtsklick auf die Fläche zwischen Kommentare und Design und wählt Element untersuchen.

bring_back_separators_screenshot-2bring_back_separators_screenshot-2bring_back_separators_screenshot-2

Ihr solltet nun den dargestellten HTML-Code sehen. Die Menüs sind ul-Elemente mit li-Elementen für jeden Menüpunkt.

Öffnet ul id="adminmenu" role="navigation". Ihr seht nun alle Menüpunkte in li-Elementen verpackt. Zusätzlich seht Ihr dazwischen aber auch noch ein li class="wp-menu-separator"-Element. Wenn Ihr es anklickt, könnt Ihr die CSS-Regeln für dieses Element ansehen.

Das sind die Regeln für den Trenner. Genau diese gilt es zu bearbeiten.

Eigene CSS-Regeln Hinzufügen

Um unsere eigenen CSS-Regeln zum WordPress Dashboard hinzuzufügen, werden wir nun eine PHP-Funktion schreiben.

Füge diesen Code zu der functions.php-Datei deines Themes hinzu.

Der erste Teil definiert die Funktion, der zweite Teil sorgt mit add_actiondafür, das diese zum head-Element des WordPress Dashboards hinzugefügt wird. In der Mitte werden wir jetzt unsere eigenen CSS-Regeln hinzufügen.

Wenn ihr das Dashboard neu ladet, werden die Trenner in der Farbe#444 (Grau) erscheinen. In diesem Beispiel habe ich zusätzlich noch den margin-Wert der Trenner verändert, um diese besser zu platzieren.

Anpassung für die WordPress Dashboard Farbschemen

Perfektionisten wird jetzt auffallen, das die eben definierte Farbe nur zu dem schwarz-grau-blauen Standard-Farbschema passt. Lasst uns versuchen, die Farbe für alle Farbschemen anzupassen.

Das body-Element des WordPress Dashboard enthält eine Menge nützlicher Klassen um verschiedene Einstellungen zu identifizieren. Wenn wir uns diese einmal genau ansehen, fällt uns auch eine Klasse passend zum Farbschema auf: Für das Standard-Farbscheme ist dort die Klasseadmin-color-fresh eingefügt.

Ändert einmal das Farbschema in "Benutzer" > "Dein Profil" und beobachtet, wie sich die Klasse verändert. Mit diesem Wissen können wir jetzt für jedes Farbschema eine eigene Trenner-Farbe festlegen. Fügt einfach die Klasse wie folgend vor Eurem CSS-Code ein:.admin-color-fresh #adminmenu li.wp-menu-separator {background: #444;}.

Hier ist unser Code noch mal, diesmal aber mit unterschiedlichen Farbwerten für jedes Farbschema:

Bonus

Falls Ihr Trennlinien zwischen allen Menüpunkten bevorzugt, versucht doch einmal die menu-top-Klasse der li-Elemente mitborder-bottom und border-top zu verändern.

Plugin

Um Euch und mir ein bisschen Zeit zu sparen, habe ich unseren Code in ein kleines Plugin verwandelt, um es schnell in einigen meiner WordPress-Installationen einsetzen zu können. Ihr findet es im WordPress Plugin Directory, falls Ihr mögt.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.