Share
Come rinfrescante come il nuovo cruscotto di WordPress, non tutti sono contenti di alcune delle modifiche. Personalmente amo il nuovo stile minimal.
C'era solo una cosa che mi mancava davvero: la navigazione di sinistra mancava della sua separazione visiva di diverse aree di WordPress.
In questo suggerimento rapido, ti mostrerò come controllare il back-end CSS e riportare i separatori con poche righe di codice.
I separatori che tenteremo di ripristinare non sono in realtà scomparsi: sono solo trasparenti. Fare clic con il tasto destro nell'area vuota tra Commenti e Aspetto e ispezionare questo elemento.
Dovresti vedere l'HTML reso. I menu sono ul-elementi con Li-elementi per ogni voce di menu.
Aperto ul role = "navigazione". Vedi tutte le voci del menu in Li-elementi avvolti, ma vedrai anche a Li nel mezzo. Quando fai clic su di esso, sarai in grado di vedere gli stili e dovresti notare il CSS per questo elemento.
#adminmenu li.wp-menu-separator background: transparent; border-color: trasparente;
Questo è il nostro stile separatore. In particolare, è quello che dobbiamo modificare.
Ora scriveremo una funzione per collegare i nostri stili CSS al backend di WordPress.
Aggiungi questo codice ai tuoi temi functions.php file.
Accentsconagua
function tutsplus_separators () add_action ('admin_head', 'tutsplus_separators'); La prima parte definisce la funzione e il hook add_action la aggiungerà all'intestazione del dashboard di WordPress. Nel mezzo, aggiungeremo un'eco per pubblicare il nostro codice CSS.
function tutsplus_separators () echo ''; add_action ('admin_head', 'tutsplus_separators'); Se ricarichi le tue pagine, i separatori saranno a colori # 444 - grigio. Ho cambiato anche il margine del separatore perché aveva bisogno di un allineamento secondo me.
Se sei un perfezionista, noterai che questo colore si adatta solo allo stile admin nero e blu predefinito di WordPress. Diamo un'altra occhiata a come possiamo coprire tutti i nuovi schemi di colori.
Il corpo-tag di WordPress ha un sacco di classi a portata di mano per identificare usi diversi. Se osservi da vicino vedrai anche una classe per la combinazione di colori. Viene chiamato quello predefinito admin-colore-fresh.
Prova a cambiare il tuo stile in "Utenti"> "Il tuo profilo" e guarda come cambia la classe. Con questa classe disponibile, possiamo dare a ogni stile di colore il proprio colore separatore. Basta aggiungere il nome della classe davanti al tuo codice css come questo .admin-color-fresh #adminmenu li.wp-menu-separator background: # 444;
Ecco il codice ora con tutti gli stili di colore per i separatori corrispondenti:
function tutsplus_separators () echo ''; add_action ('admin_head', 'tutsplus_separators'); Se vuoi separare le linee di separazione ogni voce di menu prova a modificare la classe menu-top delLi-articoli un po 'con border-bottom e border-top.
Ho creato questo piccolo pezzo di codice in un plugin per aggiungerlo rapidamente ad alcune delle mie installazioni. Se lo desideri, puoi ottenerlo dalla directory dei plugin di WordPress.
