Share
In den ersten fünf Teilen dieser Serie habe ich Ihnen gezeigt, wie Sie den WordPress-Administrator auf verschiedene Arten anpassen können, einschließlich des Anmeldebildschirms, des Dashboards und des Nachbearbeitungsbildschirms.
In diesem Lernprogramm erfahren Sie, wie Sie Ihren Verwaltungsbildschirmen Stil und Branding hinzufügen. Insbesondere lernen Sie, wie Sie:
Ich werde dazu ein Plugin erstellen - wenn Sie bereits ein Plugin erstellt haben, nachdem Sie die Teile 1 bis 5 dieser Serie befolgt haben, können Sie den Code aus diesem Lernprogramm zu diesem Plugin hinzufügen und erhalten so ein Plugin mit allem Ihre Administratoranpassungen.
Um dieses Tutorial abzuschließen, benötigen Sie:
Da ich diesem Plugin Bilder und Stylesheets beifüge, erstelle ich einen Ordner statt einer einzigen PHP-Datei. In diesem Ordner werde ich eine PHP-Datei erstellen, die die Kernfunktionen meines Plugins enthält.
Das heißt, ich habe einen Ordner namens wptutsplus-customizing-admin6-styling, in denen ich zwei ordner habe - Bilder und css, und eine PHP-Datei.
Am Anfang dieser Datei füge ich folgende Zeilen hinzu:
/ * Plugin-Name: WPTutsPlus Anpassen des Admin-Teils 6 - Gestaltung und Branding des Dashboard Plugin-URI: http://rachelmccollin.co.uk Beschreibung: Dieses Plugin unterstützt das Lernprogramm in wptutsplus. Es passt den WordPress-Dashboard-Bildschirm an. Version: 1.0 Autor: Rachel McCollin Autor URI: http://rachelmccollin.com Lizenz: GPLv2 * /
Da ich in den vorherigen Teilen dieser Serie bereits einige Änderungen am Dashboard vorgenommen habe, sieht es nicht wie das Standard-Dashboard aus. Der Screenshot unten zeigt, womit ich anfange:
In diesem Tutorial füge ich ein paar Stylings hinzu, um verschiedene Farben zu integrieren, die verwendet werden könnten, um Ihre eigene Marke widerzuspiegeln.
Bevor ich etwas anderes mache, muss ich das Stylesheet richtig einrichten. Anstelle der wp_enqueue_scripts Haken Sie wie beim Hinzufügen eines Stylesheets zur Verwendung im Frontend Ihrer Website admin_enqueue_scripts stattdessen.
Fügen Sie also in Ihrem Plugin Folgendes hinzu:
Accentsconagua
// Beginnen wir mit der korrekten Einreihung unserer Stile function wptutsplus_admin_styles () wp_register_style ('wptuts_admin_stylesheet', plugins_url ('/css/style.css', __FILE__)); wp_enqueue_style ('wptuts_admin_stylesheet'); add_action ('admin_enqueue_scripts', 'wptutsplus_admin_styles'); Sie müssen auch ein Stylesheet im erstellen / css Verzeichnis im Ordner Ihres Plugins. In diesem Lernprogramm fügen Sie später das Styling hinzu.
Der standardmäßige Fußzeilentext in WordPress lautet "Danke, dass Sie mit WordPress erstellt haben". Wenn Sie eine Installation mit mehreren Standorten ausführen oder für Kunden entwickeln, sollten Sie hier stattdessen auf Ihre eigene Marke verweisen. Zum Glück kann dies mit der admin_footer_text Filter.
Ich werde den Text ändern und auch ein Logo hinzufügen, also erstelle ich ein / Bilder Verzeichnis im Ordner meines Plugins und füge mein Logo hinzu.
Fügen Sie in der Hauptdatei Ihres Plugins Folgendes hinzu:
// die Fußzeilentextfunktion ändern wptutsplus_admin_footer_text () echo 'Dieses Tutorial wird Ihnen von wptutsplus zur Verfügung gestellt. '; add_filter ('admin_footer_text', 'wptutsplus_admin_footer_text');
Dies fügt den neuen Bild- und Fußzeilentext wie im Screenshot gezeigt hinzu:
Das Bild ist jedoch etwas groß, obwohl ich ein kleines hochgeladen habe. Es ist auch viel zu nah am Text. Um dies zu korrigieren, fügen Sie dem Stylesheet, das Sie bereits registriert haben, Stil hinzu.
Fügen Sie im Stylesheet, das Sie für Ihr Plugin erstellt haben, Folgendes hinzu:
/ * Styling für die Fußzeile * / #wpfooter # footer-left img height: 1.2em; Breite: Auto; Rand rechts: 0,5 em;
Nun hat das Bild die richtige Größe:
In Teil 3 dieser Serie habe ich Ihnen gezeigt, wie Sie den Inhalt des Admin-Menüs anpassen können. Jetzt zeige ich Ihnen, wie Sie das Styling anpassen. Ich werde die Farben ziemlich drastisch ändern - das Ergebnis mag Ihnen gefallen oder auch nicht, aber es zeigt, wie es gemacht wird!
Fügen Sie im von Ihnen erstellten Stylesheet Folgendes hinzu:
/ * Styling für das Admin-Menü * / / * Hintergrund- und Textfarbe * / #adminmenuback, #adminmenuwrap Hintergrundfarbe: # 58595b; Rahmenfarbe: #fff; #adminmenu li.menu-top: hover, #adminmenu li.opensub> a.menu-top, #adminmenu li> a.menu-top: fokus hintergrundfarbe: # 58595b; Farbe: # d54e21; Textschatten: 0 1px 0 rgba (255,255,255,0,4); #adminmenu li.wp-menu-separator background: #fff; Rahmenfarbe: #fff; / * Links im Admin-Menü * / #adminmenu a, #adminmenu li.menu-top: hover, #adminmenu li.opensub> a.menu-top, #adminmenu li> a.menu-top: focus color: # F f f; #adminmenu a: hover, #adminmenu a: active color: #fff; Textdekoration: Unterstrichen; #adminmenu .wp-Untermenü a color: # 58595b; / * Farbe des Pfeils in Untermenüs ändern * / #adminmenu li.wp-not-current-submenu .wp-menu-arrow, #adminmenu li.wp-not-current-submenu .wp-menu-arrow div background: # 58595b; / * aktiver Bildschirm wie im Menü zu sehen - Hintergrund- und Pfeilfarbe ändern * / #adminmenu li.wp-has-current-Untermenü a.wp-has-current-Untermenü, #adminmenu li.current a.menu-top, .folded #adminmenu li.wp-has-current-submenu, .folded #adminmenu li.current.menu-top, #adminmenu .wp-menu-pfeil, #adminmenu .wp-has-current-submenu .wp-submenu. wp-submenu-head background: # 9e4059; #adminmenu li.wp-has-current-submenu .wp-menu-arrow, #adminmenu li.wp-has-current-submenu .wp-menu-arrow div background: # 9e4059;
Dies führt zu sehr unterschiedlichen Farben für das Admin-Menü:
Das schwierigste Element, das neu gestaltet werden muss, ist der Pfeil, der auf die aktuelle Seite oder auf ein Untermenü zeigt .wp-menüpfeil Element und die .wp-menüpfeil div Element in ihm. Das Tolle ist, dass WordPress reines CSS verwendet, um diesen Pfeil und nicht ein Bild zu erreichen. Sobald Sie die Elemente als Ziel identifiziert haben, können Sie ihre Farbe mit CSS ändern.
Das Dashboard sieht jetzt so aus:
Ich möchte, dass meine Links die Markenfarben wiedergeben, die ich für das Dashboard-Menü verwendet habe. Insbesondere möchte ich die Rottöne ändern, die verwendet werden, wenn Links überfahren oder aktiv sind.
Fügen Sie im Stylesheet Folgendes hinzu:
/ * Links zu anderen Seiten * / a: hover, a: active color: # 9e4059;
Dies verbessert das Rot meiner Links, wie im Screenshot gezeigt:
Die letzte Änderung, die ich vornehmen möchte, betrifft Schaltflächen. Ich werde die Farbe der Schaltflächen in den Admin-Bildschirmen ändern, sowohl wenn sie aktiv als auch inaktiv sind. Dies soll die Aufmerksamkeit auf sie lenken und auch in die Menüfarben einbinden.
Fügen Sie im Stylesheet den folgenden Code hinzu:
/ * Tasten * / .wp-core-ui .button-primary background: # 4b8938; Hintergrundbild: -webkit-gradient (linear, links oben, links unten, von (# 7ea367), bis (# 4b8938)); Hintergrundbild: -webkit-linearer Farbverlauf (oben, # 7ea367, # 4b8938); Hintergrundbild: -moz-linearer Gradient (oben, # 7ea367, # 4b8938); Hintergrundbild: -ms-linearer Gradient (oben, # 7ea367, # 4b8938); Hintergrundbild: -o-linearer Gradient (oben, # 7ea367, # 4b8938); Hintergrundbild: linearer Farbverlauf (nach unten, # 7ea367, # 4b8938); Rahmenfarbe: # 4b8938; Farbe: rgba (255,255,255,0,95); -webkit-box-shadow: Einfügung 0 1px 0 rgba (0,0,0,0,1); Box-Schatten: Einfügung 0 1px 0 rgba (0,0,0,0,1); Text-Schatten: 0 1px 0 rgba (0,0,0,0,1); .wp-core-ui .button-primary.active, .wp-core-ui .button-primary: hover, .wp-core-ui .button-primary: aktiv background: # 9e4059; Hintergrundbild: -webkit-gradient (linear, links oben, links unten, von (# ba7582) bis (# 9e4059)); Hintergrundbild: -webkit-linearer Gradient (oben, # ba7582, # 9e4059); Hintergrundbild: -moz-linearer Gradient (oben, # ba7582, # 9e4059); Hintergrundbild: -ms-linearer Gradient (oben, # ba7582, # 9e4059); Hintergrundbild: -o-linearer Gradient (oben, # ba7582, # 9e4059); Hintergrundbild: linearer Gradient (nach unten, # ba7582, # 9e4059); Rahmenfarbe: # 9e4059; Farbe: rgba (255,255,255,0,95); -webkit-box-shadow: Einfügung 0 1px 0 rgba (0,0,0,0,1); Box-Schatten: Einfügung 0 1px 0 rgba (0,0,0,0,1); Text-Schatten: 0 1px 0 rgba (0,0,0,0,1);
Dadurch werden die Hintergrund- und Rahmenfarben für Schaltflächen sowohl in ihrem Standardzustand als auch wenn sie über oder aktiv angezeigt werden, geändert. Der folgende Screenshot zeigt den Standardzustand:
Und dies ist die Farbe, wenn eine Schaltfläche über oder über eine Schaltfläche bewegt wird:
Und das ist alles mein Styling - fertig!
In dieser Serie habe ich Ihnen sechs verschiedene Techniken zum Anpassen des WordPress-Administrators gezeigt.
Ich habe abgedeckt:
Hoffentlich haben Sie hier Anregungen erhalten, um Ihre eigenen Ideen zu entwickeln.
WordPress ist ein wirklich großartiges Content-Management-System. Mit einigen Anpassungen können Sie es zu Ihrem eigenen machen und Ihren Benutzern und Kunden eine Erfahrung bieten, die zusätzliche Unterstützung für sie bietet und auch Ihre Marke widerspiegelt.
 . '){kind=icon}
Dieses Tutorial wird Ihnen von wptutsplus zur Verfügung gestellt. '; add_filter ('admin_footer_text', 'wptutsplus_admin_footer_text');