Share
Så forfriskende som det nye WordPress dashbordet er ikke alle fornøyd med noen av endringene. Jeg personlig elsker den nye minimalistiske stilen.
Det var bare en ting jeg virkelig savner: Den venstre navigasjonen manglet sin visuelle adskillelse av forskjellige WordPress-områder.
I dette raske tipset skal jeg vise deg hvordan du inspiserer backend-CSS og ta separatorene tilbake med bare noen få linjer med kode.
Separatorene som vi skal forsøke å gjenopprette, er egentlig ikke borte - de er bare gjennomsiktige. Høyreklikk i det tomme området mellom kommentarer og Utseende og inspiser dette elementet.
Du bør se gjengitt HTML. Menyene er ul-elementer med li-elementer for hvert menyelement.
Åpen ul rolle = "navigasjon". Du ser alle menypunktene i li-elementer innpakket, men du vil også se en li imellom. Når du klikker på det, vil du kunne se stilene og bør legge merke til CSS for dette elementet.
#adminmenu li.wp-meny-separator bakgrunn: transparent; border-farge: gjennomsiktig;
Det er vår separator stil. Spesielt er det det vi trenger å endre.
Nå skal vi skrive en funksjon for å koble til egne CSS-stiler til WordPress Backend.
Legg til denne koden til temaene dine functions.php fil.
Accentsconagua
funksjon tutsplus_separators () add_action ('admin_head', 'tutsplus_separators'); Den første delen definerer funksjonen og add_action hook vil legge den til WordPress dashboard header. I midten vil vi nå legge til et ekko for å legge inn vår egen CSS-kode.
funksjon tutsplus_separators () echo ''; add_action ('admin_head', 'tutsplus_separators'); Hvis du oppdaterer sidene dine, vil separatorene dine være i fargen # 444 - grå. Jeg endret marginen på separatoren også fordi det trengte litt justering etter min mening.
Hvis du er en perfeksjonist, vil du legge merke til at denne fargen bare passer for standard svart og blått adminstiltype av WordPress. La oss ta en titt på hvordan vi kan dekke alle de nye fargeskjemaene.
De kropp-tag på WordPress har mange praktiske klasser for å identifisere forskjellige bruksområder. Hvis du ser nærmere, vil du også se en klasse for fargeskjemaet. Standardinnstillingen kalles admin-farge frisk.
Prøv å endre stilen din i "Brukere"> "Din profil" og se hvordan klassen endrer seg. Med denne klassen tilgjengelig, kan vi gi hver farge-stil sin egen separatorfarge. Bare legg klassenavnet foran css-koden som dette .admin-color-fresh #adminmenu li.wp-menu-separator bakgrunn: # 444;
Her er koden nå med alle fargestiler for matchende separatorer:
funksjon tutsplus_separators () echo ''; add_action ('admin_head', 'tutsplus_separators'); Hvis du vil ha separatorlinjer mellom hver menyelementet prøv å justere meny-topplassen avli-elementer litt med nedre kant og border-top.
Jeg laget dette lille koden i et plugin for å legge det raskt til noen av mine installasjoner. Hvis du vil, kan du få det fra WordPress Plugin Directory.
