Share
So erfrischend das neue WordPress-Dashboard auch ist, nicht jeder ist mit den Änderungen zufrieden. Ich persönlich liebe den neuen Minimalstil.
Es gibt nur eines, was ich wirklich vermisse: Der linken Navigation fehlte die visuelle Trennung der verschiedenen WordPress-Bereiche.
In diesem kurzen Tipp zeige ich Ihnen, wie Sie das Backend-CSS untersuchen und die Trennzeichen mit nur wenigen Codezeilen zurückholen.
Die Separatoren, die wir wiederherstellen möchten, sind eigentlich nicht verschwunden - sie sind nur transparent. Klicken Sie mit der rechten Maustaste in den leeren Bereich zwischen Bemerkungen und Aussehen und prüfen Sie dieses Element.
Sie sollten das gerenderte HTML sehen. Die Menüs sind ul-Elemente mit li-Elemente für jeden Menüpunkt.
Öffnen ul role = "navigation". Sie sehen alle Menüpunkte in li-Elemente verpackt, aber Sie sehen auch eine li zwischen. Wenn Sie darauf klicken, können Sie die Stile sehen und sollten das CSS für dieses Element erkennen.
#adminmenu li.wp-menu-separator Hintergrund: transparent; Randfarbe: transparent;
Das ist unser Trennungsstil. Insbesondere müssen wir dies ändern.
Jetzt schreiben wir eine Funktion, um unsere eigenen CSS-Styles an das WordPress-Backend anzuschließen.
Fügen Sie diesen Code Ihren Designs hinzu Functions.php Datei.
Accentsconagua
Funktion tutsplus_separators () add_action ('admin_head', 'tutsplus_separators'); Der erste Teil definiert die Funktion und der add_action-Hook fügt sie dem WordPress-Dashboard-Header hinzu. In der Mitte fügen wir nun ein Echo hinzu, um unseren eigenen CSS-Code zu veröffentlichen.
Funktion tutsplus_separators () echo ''; add_action ('admin_head', 'tutsplus_separators'); Wenn Sie Ihre Seiten neu laden, werden Ihre Trennzeichen in der Farbe angezeigt # 444 - grau. Ich habe auch den Rand des Trennzeichens geändert, da er meiner Meinung nach ein gewisses Maß an Ausrichtung benötigt.
Wenn Sie ein Perfektionist sind, werden Sie feststellen, dass diese Farbe nur für den standardmäßigen schwarzen und blauen Admin-Stil von WordPress geeignet ist. Lassen Sie uns noch einen Blick darauf werfen, wie wir alle neuen Farbschemata abdecken können.
Das Karosserie-Tag von WordPress hat viele praktische Klassen, um verschiedene Anwendungen zu identifizieren. Bei näherer Betrachtung sehen Sie auch eine Klasse für das Farbschema. Die Standardeinstellung wird aufgerufen admin-color-fresh.
Versuchen Sie, Ihren Stil unter "Benutzer"> "Ihr Profil" zu ändern, und sehen Sie, wie sich die Klasse ändert. Mit dieser verfügbaren Klasse können wir jedem Farbstil eine eigene Trennfarbe geben. Fügen Sie einfach den Klassennamen wie folgt vor Ihren CSS-Code ein .admin-color-fresh #adminmenu li.wp-menu-separator background: # 444;
Hier ist der Code mit allen Farbstilen für übereinstimmende Trennzeichen:
Funktion tutsplus_separators () echo ''; add_action ('admin_head', 'tutsplus_separators'); Wenn Sie Trennlinien zwischen haben möchten jeden Menüpunkt Versuchen Sie, die Menü-Top-Klasse des zu optimierenli-Artikel ein bisschen mit Rand unten und Rand oben.
Ich habe dieses kleine Stück Code zu einem Plugin gemacht, um es einfach zu einigen meiner Installationen hinzuzufügen. Wenn Sie möchten, können Sie es aus dem WordPress Plugin-Verzeichnis erhalten.
