Share
In de eerste vijf delen van deze serie heb ik je laten zien hoe je de WordPress-beheerder op verschillende manieren kunt aanpassen, inclusief het aanpassen van het inlogscherm, het dashboard en het postbewerkingsscherm.
In deze tutorial leer je hoe je styling en branding kunt toevoegen aan je beheerdersschermen. Specifiek leer je hoe je:
Ik ga een plug-in maken om dit te doen - als je al een plug-in hebt gemaakt na Deel 1 tot en met 5 van deze serie te volgen, geef je er misschien de voorkeur aan om de code uit deze tutorial aan die plug-in toe te voegen, waardoor je één plug-in met alle uw beheerdersaanpassingen.
Om deze tutorial te voltooien, hebt u nodig:
Omdat ik met deze plug-in afbeeldingen en stylesheets zal opnemen, maak ik hiervoor een map aan in plaats van een enkel PHP-bestand. Binnen die map maak ik een PHP-bestand dat de kernfuncties in mijn plug-in bevat.
Dit betekent dat ik een map heb gebeld wptutsplus-customizing-admin6-styling, waarin ik twee mappen heb - afbeeldingen en css, en een PHP-bestand.
Aan het begin van dat bestand voeg ik de volgende regels toe:
/ * Naam van de plug-in: WPTutsPlus De beheerder aanpassen Deel 6 - het dashboard en de dashboard-plug-in inpluggen URI: http://rachelmccollin.co.uk Beschrijving: Deze plug-in ondersteunt de zelfstudie in wptutsplus. Het past het WordPress dashboardscherm aan. Versie: 1.0 Auteur: Rachel McCollin Auteur URI: http://rachelmccollin.com Licentie: GPLv2 * /
Omdat ik al wat wijzigingen in het dashboard heb aangebracht in de eerdere delen van deze serie, ziet het er niet hetzelfde uit als het standaarddashboard. De onderstaande screenshot laat zien waarmee ik begin:
In deze tutorial zal ik wat styling toevoegen om verschillende kleuren op te nemen, die kunnen worden gebruikt om uw eigen merk weer te geven.
Voordat ik iets anders doe, ga ik het stylesheet correct instellen. In plaats van de wp_enqueue_scripts haak zoals u zou doen bij het toevoegen van een stylesheet voor gebruik in de voorkant van uw website admin_enqueue_scripts in plaats daarvan.
Voeg dus in uw plug-in het volgende toe:
Accentsconagua
// laten we beginnen met het in de juiste volgorde zetten van onze stijlen 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'); U moet ook een stylesheet maken in de / css map in de map van uw plug-in, waar u later in deze zelfstudie styling zult toevoegen.
De standaard voettekst in WordPress luidt: 'Bedankt voor het maken met WordPress'. Als u een installatie op meerdere locaties uitvoert of zich ontwikkelt voor klanten, kunt u in plaats daarvan verwijzen naar uw eigen merk. Gelukkig kan dit worden gedaan met behulp van de admin_footer_text filter.
Ik ga de tekst wijzigen en een logo toevoegen, dus ik maak een /afbeeldingen map in de map van mijn plug-in en voeg daar mijn logo aan toe.
Voeg in het hoofdbestand van uw plug-in het volgende toe:
// verander de voettekst-functie wptutsplus_admin_footer_text () echo 'Deze tutorial wordt u aangeboden door wptutsplus. '; add_filter ('admin_footer_text', 'wptutsplus_admin_footer_text');
Dit voegt de nieuwe afbeelding en voettekst toe zoals getoond in de screenshot:
De afbeelding is echter een beetje groot, hoewel ik een kleine heb geüpload. Het is ook veel te dicht bij de tekst. Om dat te corrigeren, voeg je wat stijl toe aan het stylesheet dat je al hebt geregistreerd.
Voeg het volgende toe aan het stylesheet dat u voor uw plug-in hebt gemaakt:
/ * styling voor de voettekst * / #wpfooter # footer-left img height: 1.2em; breedte: auto; margin-right: 0.5em;
Nu is de afbeelding de juiste maat:
In deel 3 van deze serie heb ik je laten zien hoe je de inhoud van het admin-menu kunt aanpassen - nu zal ik laten zien hoe je de styling aanpast. Ik ga de kleuren behoorlijk drastisch veranderen - je mag dan wel of niet van het resultaat houden, maar het laat zien hoe het moet!
Voeg het volgende toe aan de stylesheet die u hebt gemaakt:
/ * styling voor admin-menu * / / * achtergrond en tekstkleur * / #adminmenuback, #adminmenuwrap background-colour: # 58595b; randkleur: #fff; #adminmenu li.menu-top: hover, #adminmenu li.opensub> a.menu-top, #adminmenu li> a.menu-top: focus background-color: # 58595b; kleur: # d54e21; text-shadow: 0 1px 0 rgba (255,255,255,0,4); #adminmenu li.wp-menu-separator background: #fff; randkleur: #fff; / * links in admin-menu * / #adminmenu a, #adminmenu li.menu-top: hover, #adminmenu li.opensub> a.menu-boven, #adminmenu li> a.menu-top: focus kleur: # fff; #adminmenu a: hover, #adminmenu a: active color: #fff; tekstdecoratie: onderstrepen; #adminmenu .wp-submenu a color: # 58595b; / * verander de kleur van de pijl in de submenu's * / #adminmenu li.wp-not-current-submenu .wp-menu-pijl, #adminmenu li.wp-not-current-submenu .wp-menu-arrow div background: # 58595b; / * actief scherm zoals te zien in menu - verander de achtergrond en pijlkleur * / #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, #adminmenu li.current a.menu-top, .folded #adminmenu li.wp-has-current-submenu, .folded #adminmenu li.current.menu-top, #adminmenu. wp-menu-pijl, #adminmenu. wp-has-current-submenu .wp-submenu. wp-submenu-head background: # 9e4059; #adminmenu li.wp-has-current-submenu .wp-menu-pijl, #adminmenu li.wp-has-current-submenu .wp-menu-arrow div background: # 9e4059;
Dit resulteert in een aantal heel verschillende kleuren voor het admin-menu:
Het lastigste element om te restylen is de pijl die naar de huidige pagina verwijst of naar een submenu - deze is opgemaakt met de .wp-menu-arrow element en de .wp-menu-arrow div element erin. Het mooie is dat WordPress pure CSS gebruikt om deze pijl te bereiken en niet een afbeelding, dus als je de elementen eenmaal hebt geïdentificeerd, kun je de kleur wijzigen met CSS.
Het dashboard ziet er nu als volgt uit:
Ik wil dat mijn links overeenkomen met de merkkleuren die ik heb gebruikt voor het dashboard-menu - ik wil met name de schaduw van rood wijzigen die wordt gebruikt wanneer links worden verplaatst of actief zijn.
Voeg in de stylesheet het volgende toe:
/ * links elders * / a: hover, a: active color: # 9e4059;
Dit tweaks het rood van mijn links zoals weergegeven in de screenshot:
De laatste stijlverandering die ik wil aanbrengen is naar knoppen. Ik ga de kleur van knoppen in de beheerdersschermen wijzigen, zowel wanneer ze actief zijn als niet-actief zijn. Dit is om de aandacht op hen te vestigen en ook om aan te sluiten bij de menukleuren.
Voeg in de stylesheet de onderstaande code toe:
/ * buttons * / .wp-core-ui .button-primary background: # 4b8938; achtergrondafbeelding: -webkit-gradiënt (lineair, linkerbovenkant, linkeronderkant, van (# 7ea367), tot (# 4b8938)); achtergrondafbeelding: -webkit-lineaire gradiënt (bovenaan, # 7ea367, # 4b8938); achtergrondafbeelding: -moz-lineaire gradiënt (bovenaan, # 7ea367, # 4b8938); achtergrondafbeelding: -ms-lineaire gradiënt (boven, # 7ea367, # 4b8938); achtergrondafbeelding: -o-lineaire gradiënt (boven, # 7ea367, # 4b8938); achtergrondafbeelding: lineair verloop (naar beneden, # 7ea367, # 4b8938); randkleur: # 4b8938; kleur: rgba (255,255,255,0,95); -webkit-box-shadow: inzet 0 1px 0 rgba (0,0,0,0.1); box-shadow: inzet 0 1px 0 rgba (0,0,0,0.1); text-shadow: 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: active background: # 9e4059; achtergrondafbeelding: -webkit-gradiënt (lineair, linkerbovenkant, linkeronderkant, van (# ba7582), tot (# 9e4059)); achtergrondafbeelding: -webkit-lineaire gradiënt (boven, # ba7582, # 9e4059); achtergrondafbeelding: -moz-lineaire gradiënt (boven, # ba7582, # 9e4059); achtergrondafbeelding: -ms-lineaire gradiënt (boven, # ba7582, # 9e4059); achtergrondafbeelding: -o-lineaire gradiënt (boven, # ba7582, # 9e4059); achtergrondafbeelding: lineair verloop (naar beneden, # ba7582, # 9e4059); randkleur: # 9e4059; kleur: rgba (255,255,255,0,95); -webkit-box-shadow: inzet 0 1px 0 rgba (0,0,0,0.1); box-shadow: inzet 0 1px 0 rgba (0,0,0,0.1); text-shadow: 0 1px 0 rgba (0,0,0,0.1);
Hiermee worden de achtergrondkleuren en randkleuren voor knoppen gewijzigd, zowel in hun standaardstatus als wanneer ze over zweven of actief zijn. De onderstaande schermafbeelding toont de standaardstatus:
En dit is de kleur wanneer er op een knop wordt gedrukt of geklikt:
En dat is al mijn styling - gedaan!
In deze serie heb ik zes verschillende technieken voor het aanpassen van de WordPress-beheerder getoond.
Ik heb het behandeld:
Hopelijk heeft dit je inspiratie gegeven om met eigen ideeën te komen.
WordPress is een echt geweldig contentbeheersysteem, met wat aanpassingen die je zelf kunt maken en je gebruikers en klanten een ervaring kunt geven die extra hulp voor hen toevoegt en ook jouw merk weerspiegelt.
 . '){kind=icon}
Deze tutorial wordt u aangeboden door wptutsplus. '; add_filter ('admin_footer_text', 'wptutsplus_admin_footer_text');