Așa cum revigorează noul tablou de bord WordPress, nu toată lumea este mulțumită de unele schimbări. Îmi place personal noul stil minimal.
A fost un singur lucru pe care mi-e dor de fapt: Navigarea din partea stângă nu avea separarea vizuală a diferitelor zone WordPress.
În acest sfat rapid, vă voi arăta cum să inspectați backend-ul CSS și să aduceți separatoarele înapoi cu doar câteva rânduri de cod.
Separatorii pe care vom încerca să le refacem nu sunt de fapt plecați - sunt doar transparenți. Faceți clic dreapta în spațiul gol între Comentarii și Aspect și inspectați acest element.
Ar trebui să vedeți HTML-ul redat. Meniurile sunt ul
-elemente cu Li
-elemente pentru fiecare element de meniu.
Deschis ul role = "navigare"
. Vedeți toate elementele de meniu din Li
-elemente înfășurate, dar veți vedea și a Li
intre. Când faceți clic pe el, veți putea vedea stilurile și ar trebui să observați CSS pentru acest element.
#adminmenu li.wp-meniu-separator fundal: transparent; culoarea frontală: transparentă;
Acesta este stilul nostru de separare. Mai exact, este cea pe care trebuie să o modificăm.
Acum vom scrie o funcție, pentru a conecta propriile noastre stiluri CSS la WordPress Backend.
Adăugați acest cod la temele dvs. functions.php
fişier.
funcția tutsplus_separators () add_action ('admin_head', 'tutsplus_separators');
Prima parte definește funcția și cârligul add_action îl va adăuga în antetul tabloului de bord al WordPress. În mijloc, vom adăuga acum un ecou pentru postarea propriului cod CSS.
funcția tutsplus_separators () echo '„; add_action ('admin_head', 'tutsplus_separators');
Dacă reîncărcați paginile, separatoarele dvs. vor fi în culoare # 444
- gri. Am schimbat marginea separatorului, de asemenea, deoarece am nevoie de o aliniere în opinia mea.
Dacă sunteți un perfecționist, veți observa această culoare doar costume pentru stilul de administrare alb-negru alb-negru WordPress. Să aruncăm o privire asupra modului în care putem acoperi toate schemele de culori noi.
corp
-tag-ul WordPress are o mulțime de clase la îndemână pentru a identifica diferite utilizări. Dacă vă uitați mai aproape, veți vedea și o clasă pentru schema de culori. Se numește valoarea implicită admin-culoare-verde
.
Încercați să vă schimbați stilul în "Utilizatori"> "Profilul dvs." și să vedeți cum schimbă clasa. Cu această clasă disponibilă, putem oferi fiecărui stil de culoare propria culoare separator. Doar adăugați numele clasei în fața codului dvs. css ca acesta .admin-color-fresh #adminmenu li.wp-meniu-separator fundal: # 444;
Iată codul acum cu toate stilurile de culoare pentru potrivirea separatoarelor:
funcția tutsplus_separators () echo '„; add_action ('admin_head', 'tutsplus_separators');
Dacă doriți linii de separare între fiecare elementul de meniu încercați să modificați clasa de meniu din partea de sus a paginiiLi
-articole cu un pic cu border-bottom
și border-top
.
Am făcut această mică bucată de cod într-un plugin pentru a-l adăuga rapid la unele dintre instalațiile mele. Dacă doriți, puteți să-l obțineți din Directorul Plugin WordPress.