Share
Aussi rafraîchissant que soit le nouveau tableau de bord WordPress, tout le monde n’est pas satisfait de certains changements. J'aime personnellement le nouveau style minimal.
Il n’ya qu’une chose qui me manque vraiment: la navigation de gauche manquait de sa séparation visuelle des différentes zones WordPress.
Dans cette astuce, je vais vous montrer comment inspecter le CSS backend et ramener les séparateurs avec seulement quelques lignes de code..
Les séparateurs que nous allons essayer de restaurer ne sont pas réellement partis, ils sont simplement transparents. Cliquez avec le bouton droit dans la zone vide entre commentaires et Apparence et inspecter cet élément.
Vous devriez voir le code HTML rendu. Les menus sont ul-éléments avec li-éléments pour chaque élément de menu.
Ouvrir ul role = "navigation". Vous voyez tous les éléments de menu dans li-éléments enveloppés, mais vous verrez également un li entre. Lorsque vous cliquez dessus, vous pourrez voir les styles et remarquerez le code CSS pour cet élément..
#adminmenu li.wp-menu-separator background: transparent; couleur de bordure: transparent;
C'est notre style de séparateur. Plus précisément, c'est celui que nous devons modifier.
Maintenant, nous allons écrire une fonction, pour connecter nos propres styles CSS au backend WordPress.
Ajouter ce code à vos thèmes functions.php fichier.
Accentsconagua
fonction tutsplus_separators () add_action ('admin_head', 'tutsplus_separators'); La première partie définit la fonction et le hook add_action l'ajoutera à l'en-tête du tableau de bord WordPress. Au milieu, nous allons maintenant ajouter un écho pour poster notre propre code CSS.
fonction tutsplus_separators () echo ''; add_action ('admin_head', 'tutsplus_separators'); Si vous rechargez vos pages, vos séparateurs seront dans la couleur # 444 - gris. J'ai également changé la marge du séparateur car il me fallait un peu d'alignement.
Si vous êtes un perfectionniste, vous remarquerez que cette couleur ne convient que pour le style d’administrateur noir et bleu par défaut de WordPress. Voyons maintenant comment nous pouvons couvrir tous les nouveaux schémas de couleurs..
le corps-balise de WordPress a beaucoup de classes pratiques pour identifier différents usages. Si vous regardez de plus près, vous verrez également une classe pour le jeu de couleurs. Le défaut est appelé admin-couleur-frais.
Essayez de changer de style dans "Utilisateurs"> "Votre profil" et observez l'évolution de la classe. Avec cette classe disponible, nous pouvons donner à chaque style de couleur sa propre couleur de séparateur. Ajoutez simplement le nom de la classe devant votre code CSS comme ceci .admin-color-fresh #adminmenu li.wp-menu-separator background: # 444;
Voici le code maintenant avec tous les styles de couleur pour les séparateurs correspondants:
fonction tutsplus_separators () echo ''; add_action ('admin_head', 'tutsplus_separators'); Si vous voulez des lignes de séparation entre chaque élément de menu essayez de peaufiner la classe de menu supérieure de lali-articles un peu avec bas de la bordure et bordure supérieure.
J'ai transformé ce petit morceau de code en un plugin pour l'ajouter rapidement à certaines de mes installations. Si vous le souhaitez, vous pouvez l'obtenir à partir du répertoire du plugin WordPress.
