Share
I de første fem delene av denne serien viste jeg deg hvordan du tilpasser WordPress-administrasjonen på en rekke måter, inkludert tilpassing av påloggingsskjermbildet, dashbordet og innleggredigeringsskjermbildet.
I denne opplæringen lærer du hvordan du legger til styling og merkevarebygging på adminskjermbildene dine. Spesielt lærer du hvordan du:
Jeg skal lage et plugin for å gjøre dette - hvis du allerede har opprettet et plugin etter å ha fulgt del 1 til 5 i denne serien, kan du foretrekke å legge til koden fra denne opplæringen til det aktuelle pluginet, noe som gir deg ett plugin med alle dine admintilpasninger.
For å fullføre denne opplæringen trenger du:
Som jeg vil inkludere bilder og stilark med dette pluginet, lager jeg en mappe for det i stedet for en enkelt PHP-fil. I den mappen lager jeg en PHP-fil som vil inneholde kjernefunksjonene i pluginet mitt.
Dette betyr at jeg har en mappe som heter wptutsplus-tilpassing-admin6-styling, der jeg har to mapper - Bilder og css, og en PHP-fil.
I begynnelsen av den filen legger jeg til følgende linjer:
/ * Plugin Name: WPTutsPlus Tilpass Admin Part 6 - styling og branding av instrumentpanelet Plugin URI: http://rachelmccollin.co.uk Beskrivelse: Dette pluginet støtter opplæringen i wptutsplus. Det tilpasser WordPress dashboard skjermen. Versjon: 1.0 Forfatter: Rachel McCollin Forfatter URI: http://rachelmccollin.com Lisens: GPLv2 * /
Fordi jeg allerede har gjort noen endringer i dashbordet i de tidligere delene av denne serien, ser det ikke ut som det samme dashbordet. Skjermbildet nedenfor viser hva jeg starter med:
I denne opplæringen legger jeg til noen styling for å innlemme forskjellige farger, som kan brukes til å reflektere ditt eget merke.
Før jeg gjør noe annet, skal jeg sette stilarket riktig. Istedenfor å bruke wp_enqueue_scripts Krok som du vil hvis du legger til et stilark for bruk i ditt nettsteds forkant, bruker du admin_enqueue_scripts i stedet.
Så legg til følgende i plugin:
Accentsconagua
// la oss begynne med enqueuing våre stiler riktig funksjon 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'); Du må også lage et stilark i / css katalog i plugin-mappen din, hvor du legger til styling senere i denne opplæringen.
Standardtekstteksten i WordPress leser 'Takk for at du ble opprettet med WordPress'. Hvis du kjører en flersidig installasjon eller utvikler for kunder, kan du kanskje henvise til ditt eget merke her i stedet. Heldigvis kan dette gjøres ved hjelp av admin_footer_text filter.
Jeg skal endre teksten og legge til en logo også, så jeg lager en /Bilder katalog i Plugins mappe og legg til min logo til det.
Legg til følgende i pluginens hovedfil:
// endre teksttekstfunksjonen wptutsplus_admin_footer_text () echo 'Denne opplæringen er brakt av wptutsplus. '; add_filter ('admin_footer_text', 'wptutsplus_admin_footer_text');
Dette legger til den nye bildet og bunntekstteksten som vist på skjermbildet:
Men bildet er litt stort, selv om jeg har lastet opp en liten. Det er også altfor nær teksten. For å rette opp det, legger du til noen styling i stilarket som du allerede har registrert.
I stilarket du har opprettet for plugin, legg til følgende:
/ * styling for bunnteksten * / #wpfooter # bunntekst-venstre img høyde: 1.2em; bredde: auto; margin-høyre: 0.5em;
Nå er bildet riktig størrelse:
I del 3 i denne serien viste jeg deg hvordan du tilpasser innholdet på adminmenyen - nå skal jeg demonstrere hvordan du tilpasser stylingen. Jeg skal endre fargene ganske drastisk - du kan eller ikke liker resultatet, men det viser hvordan du gjør det!
Legg til følgende i stilarket du har opprettet:
/ * styling for admin meny * / / * bakgrunn og tekst farge * / #adminmenuback, #adminmenuwrap bakgrunnsfargen: # 58595b; border-color: #fff; #adminmenu li.menu-top: hover, #adminmenu li.opensub> a.menu-top, #adminmenu li> a.menu-top: fokus bakgrunnsfarge: # 58595b; farge: # d54e21; tekstskygge: 0 1px 0 rgba (255,255,255,0,4); #adminmenu li.wp-meny-separator bakgrunn: #fff; border-color: #fff; / * lenker i admin-menyen * / #adminmenu a, #adminmenu li.menu-top: hover, #adminmenu li.opensub> a.menu-top, #adminmenu li> a.menu-top: fokus color: # fff; #adminmenu a: svever, #adminmenu a: aktiv farge: #fff; tekst-dekorasjon: understreke; #adminmenu .wp-undermenyen en farge: # 58595b; / * endre farge på pil til undermenyer * / #adminmenu li.wp-ikke-nåværende undermeny .wp-meny-pil, #adminmenu li.wp-ikke-nåværende undermeny .wp-meny-pil div bakgrunn: # 58595b; / * aktiv skjerm som vist i menyen - endre bakgrunns- og pilfargen * / #adminmenu li.wp-has-current-undermenyen a.wp-has-current-undermenyen, #adminmenu li.current a.menu-top, .folded #adminmenu li.wp-has-current-undermenyen, .folded #adminmenu li.current.menu-top, #adminmenu .wp-meny-pil, #adminmenu .wp-has-current-undermenyen .wp-undermeny. wp-undermeny-hode bakgrunn: # 9e4059; #adminmenu li.wp-har-nåværende undermeny .wp-meny-pil, #adminmenu li.wp-har-nåværende undermeny .wp-meny-pil div bakgrunn: # 9e4059;
Dette resulterer i noen helt forskjellige farger for admin-menyen:
Det vanskeligste elementet for å restylle er pilen som peker til den aktuelle siden eller til en undermeny - dette er stylet ved hjelp av .wp-meny-pilen element og .wp-meny-pil div elementet inne i det. Det store er at WordPress bruker ren CSS for å oppnå denne pilen og ikke et bilde, så når du har identifisert elementene som skal målrettes, kan du endre farge ved hjelp av CSS.
Dashbordet ser nå slik ut:
Jeg vil at koblingene mine skal gjenspeile merkevarenes farger jeg har brukt til dashbordmenyen - spesielt jeg vil endre skyggen av rødt som brukes når koblinger er svevet over eller aktiv.
I stilarket legger du til følgende:
/ * lenker andre steder * / a: svever, a: aktiv farge: # 9e4059;
Dette tweaks den røde av mine lenker som vist på skjermbildet:
Endelig styling endring jeg vil gjøre er å knapper. Jeg skal endre fargen på knapper i administrasjonsskjermene, både når de er aktive og inaktive. Dette er å trekke oppmerksomhet mot dem og også å knytte seg til menyfarger.
I stilarket legger du til koden nedenfor:
/ * knapper * / .wp-core-ui. button-primary bakgrunn: # 4b8938; bakgrunnsbilde: -webkit-gradient (lineær, venstre topp, venstre bunn, fra (# 7ea367), til (# 4b8938)); bakgrunnsbilde: -webkit-lineær-gradient (topp, # 7ea367, # 4b8938); bakgrunnsbilde: -moz-lineær-gradient (topp, # 7ea367, # 4b8938); bakgrunnsbilde: -ms-lineær-gradient (topp, # 7ea367, # 4b8938); bakgrunnsbilde: -o-lineær-gradient (topp, # 7ea367, # 4b8938); bakgrunnsbilde: lineær gradient (til bunn, # 7ea367, # 4b8938); border-farge: # 4b8938; farge: rgba (255,255,255,0,95); -webkit-boks-skygge: innsett 0 1px 0 rgba (0,0,0,0,1); boks-skygge: innsett 0 1px 0 rgba (0,0,0,0,1); tekstskygge: 0 1px 0 rgba (0,0,0,0,1); .wp-core-ui. button-primary.active, .wp-core-ui. knapp-primær: svever, .wp-core-ui. knapp-primær: aktiv bakgrunn: # 9e4059; bakgrunnsbilde: -webkit-gradient (lineær, venstre topp, venstre bunn, fra (# ba7582) til (# 9e4059)); bakgrunnsbilde: -webkit-lineær-gradient (topp, # ba7582, # 9e4059); bakgrunnsbilde: -moz-lineær-gradient (topp, # ba7582, # 9e4059); bakgrunnsbilde: -ms-lineær-gradient (topp, # ba7582, # 9e4059); bakgrunnsbilde: -o-lineær-gradient (topp, # ba7582, # 9e4059); bakgrunnsbilde: lineær gradient (til bunn, # ba7582, # 9e4059); border-farge: # 9e4059; farge: rgba (255,255,255,0,95); -webkit-boks-skygge: innsett 0 1px 0 rgba (0,0,0,0,1); boks-skygge: innsett 0 1px 0 rgba (0,0,0,0,1); tekstskygge: 0 1px 0 rgba (0,0,0,0,1);
Dette endrer bakgrunns- og kantfarger for knapper både i standardstatus og når de svinger over eller er aktive. Skjermbildet under viser standardstatus:
Og dette er fargen når en knapp er svevet over eller klikket:
Og det er all min styling - ferdig!
I denne serien har jeg vist deg seks forskjellige teknikker for å tilpasse WordPress admin.
Jeg har dekket:
Forhåpentligvis har dette gitt deg litt inspirasjon til å komme opp med egne ideer.
WordPress er et virkelig flott Content Management System, med litt tilpasning kan du gjøre det til ditt eget, og gi brukerne og kundene en opplevelse som gir ekstra hjelp til dem og gjenspeiler også merkevaren din.
 . '){kind=icon}
Denne opplæringen er brakt av wptutsplus. '; add_filter ('admin_footer_text', 'wptutsplus_admin_footer_text');