Share
Dans les cinq premières parties de cette série, je vous ai montré comment personnaliser l’administrateur de WordPress de différentes manières, notamment en personnalisant l’écran de connexion, le tableau de bord et l’écran de post-édition..
Dans ce tutoriel, vous allez apprendre à ajouter du style et de la marque à vos écrans d’administrateur. Plus précisément, vous apprendrez à:
Je vais créer un plugin pour le faire. Si vous avez déjà créé un plugin après avoir suivi les parties 1 à 5 de cette série, vous préférerez peut-être ajouter le code de ce tutoriel à ce plugin, ce qui vous donnera un plugin complet. vos personnalisations administratives.
Pour compléter ce tutoriel, vous aurez besoin de:
Comme je vais inclure des images et des feuilles de style avec ce plugin, je crée un dossier pour celui-ci plutôt qu'un seul fichier PHP. Dans ce dossier, je créerai un fichier PHP contenant les fonctions principales de mon plugin..
Cela signifie que j'ai un dossier appelé wptutsplus-customizing-admin6-styling, dans lequel j'ai deux dossiers - images et css, et un fichier PHP.
Au début de ce fichier, j'ajoute les lignes suivantes:
/ * Nom du plug-in: WPTutsPlus Personnalisez la partie 6 de l'administrateur - Styliser et personnaliser le tableau de bord. URI du plug-in: http://rachelmccollin.co.uk Description: Ce plug-in prend en charge le didacticiel de wptutsplus. Il personnalise l'écran du tableau de bord WordPress. Version: 1.0 Auteur: Rachel McCollin URI de l'auteur: http://rachelmccollin.com Licence: GPLv2 * /
Comme j'ai déjà apporté certaines modifications au tableau de bord dans les parties précédentes de cette série, il ne ressemble pas au tableau de bord par défaut. La capture d'écran ci-dessous montre par quoi je commence:
Dans ce tutoriel, je vais ajouter quelques styles pour incorporer différentes couleurs, qui pourraient être utilisées pour refléter votre propre marque..
Avant de faire quoi que ce soit, je vais configurer correctement la feuille de style. Au lieu d'utiliser le wp_enqueue_scripts accrocher comme vous le feriez si vous ajoutiez une feuille de style à utiliser dans le frontal de votre site Web, vous utilisiez admin_enqueue_scripts au lieu.
Alors, dans votre plugin, ajoutez ce qui suit:
Accentsconagua
// commençons par mettre correctement en file d'attente nos styles function 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'); Vous devrez également créer une feuille de style dans le / css répertoire dans le dossier de votre plugin, où vous ajouterez un style plus tard dans ce tutoriel.
Le texte de pied de page par défaut dans WordPress se lit comme suit: "Merci d'avoir créé avec WordPress". Si vous exécutez une installation multisite ou développez pour des clients, vous voudrez peut-être faire référence à votre propre marque ici. Heureusement, cela peut être fait en utilisant le admin_footer_text filtre.
Je vais changer le texte et ajouter un logo aussi, donc je vais créer un /images répertoire dans le dossier de mon plugin et ajouter mon logo à celui.
Dans le fichier principal de votre plugin, ajoutez ce qui suit:
// change la fonction de texte de pied de page wptutsplus_admin_footer_text () echo 'Ce tutoriel vous est présenté par wptutsplus. '; add_filter ('admin_footer_text', 'wptutsplus_admin_footer_text');
Cela ajoute la nouvelle image et le texte de pied de page, comme indiqué dans la capture d'écran:
Cependant, l'image est un peu grande, même si j'en ai téléchargé une petite. C'est aussi beaucoup trop proche du texte. Pour corriger cela, vous ajoutez un style à la feuille de style que vous avez déjà enregistrée..
Dans la feuille de style que vous avez créée pour votre plugin, ajoutez ce qui suit:
/ * style pour le pied de page * / #wpfooter # footer-left img height: 1.2em; largeur: auto; marge droite: 0.5em;
Maintenant, la taille de l'image est correcte:
Dans la troisième partie de cette série, je vous ai montré comment personnaliser le contenu du menu administrateur. Je vais maintenant expliquer comment personnaliser le style. Je vais changer les couleurs assez radicalement - vous pouvez ou non aimer le résultat, mais cela montre comment le faire.!
Dans la feuille de style que vous avez créée, ajoutez ce qui suit:
/ * style pour le menu administrateur * / / * couleur de fond et texte * / #adminmenuback, #adminmenuwrap background-color: # 58595b; border-color: #fff; #adminmenu li.menu-top: survolez, #adminmenu li.opensub> a.menu-top, #adminmenu li> a.menu-top: focus background-color: # 58595b; couleur: # d54e21; ombre de texte: 0 1px 0 rgba (255,255,255,0,4); #adminmenu li.wp-menu-separator background: #fff; border-color: #fff; / * liens dans le menu administrateur * / #adminmenu a, #adminmenu li.menu-top: survol, #adminmenu li.opensub> a.menu-top, #adminmenu li> a.menu-top: focus color: # fff; #adminmenu a: survolez, #adminmenu a: active color: #fff; texte-décoration: souligné; #adminmenu .wp-submenu a color: # 58595b; / * change la couleur de la flèche en sous-menus * / #adminmenu li.wp-non-courant-sous-menu .wp-menu-arrow, #adminmenu li.wp-non-actuel-sous-menu .wp-menu-arrow div background: # 58595b; / * écran actif, comme indiqué dans le menu - modifie l’arrière-plan et la couleur de la flèche * / #adminmenu li.wp-a-sous-menu actuel a.wp-a-sous-menu actuel, #adminmenu li.current a.menu-top, .folded #adminmenu li.wp-a-current-sous-menu, .folded #adminmenu li.current.menu-top, #adminmenu .wp-menu-arrow, #adminmenu .wp-a-actuel-sous-menu .wp-submenu. wp-submenu-head background: # 9e4059; #adminmenu li.wp-sous-menu-courant. wp-menu-flèche, #adminmenu li.wp-sous-menu-actuel .wp-menu-flèche div background: # 9e4059;
Cela donne des couleurs très différentes pour le menu admin:
L’élément le plus délicat à redessiner est la flèche pointant vers la page en cours ou vers un sous-menu - elle est stylée à l’aide de la touche .wp-menu-arrow élément et le .wp-menu-arrow div élément à l'intérieur. Le grand avantage est que WordPress utilise du CSS pur pour réaliser cette flèche et non une image. Ainsi, une fois que vous avez identifié les éléments à cibler, vous pouvez modifier sa couleur à l'aide de CSS..
Le tableau de bord ressemble maintenant à ceci:
Je souhaite que mes liens reflètent les couleurs de la marque que j'ai utilisées pour le menu du tableau de bord - en particulier, je souhaite modifier la nuance de rouge utilisée lorsque les liens sont survolés ou actifs..
Dans la feuille de style, ajoutez ce qui suit:
/ * liens ailleurs * / a: survoler, a: actif color: # 9e4059;
Cela modifie le rouge de mes liens comme indiqué dans la capture d'écran:
Le dernier changement de style que je souhaite apporter concerne les boutons. Je vais changer la couleur des boutons dans les écrans d’administrateur, qu’ils soient actifs ou inactifs. C’est pour attirer l’attention sur eux et aussi pour correspondre aux couleurs du menu.
Dans la feuille de style, ajoutez le code ci-dessous:
/ * boutons * / .wp-core-ui .button-primary background: # 4b8938; background-image: -webkit-gradient (linéaire, gauche, supérieur, inférieur gauche, de (n ° 7ea367) à (n ° 4b8938)); background-image: -webkit-linear-gradient (haut, n ° 7ea367, n ° 4b8938); image d'arrière-plan: -moz-linear-gradient (en haut, n ° 7ea367, n ° 4b8938); image d’arrière-plan: -ms-linear-gradient (haut, n ° 7ea367, n ° 4b8938); image d'arrière-plan: -o-linear-gradient (haut, n ° 7ea367, n ° 4b8938); image d'arrière-plan: dégradé linéaire (vers le bas, # 7ea367, # 4b8938); couleur de bordure: # 4b8938; couleur: rgba (255,255,255,0,95); -webkit-box-shadow: encadré 0 1px 0 rgba (0,0,0,0,1); box-shadow: encart 0 1 px 0 rgba (0,0,0,0,1); ombre de texte: 0 1px 0 rgba (0,0,0,0,1); .wp-core-ui .button-primaire.active, .wp-core-ui .button-primaire: survol, .wp-core-ui .button-primaire: active background: # 9e4059; background-image: -webkit-gradient (linéaire, de gauche à droite, de gauche à droite, de (# ba7582) à (# 9e4059)); background-image: -webkit-linear-gradient (haut, # ba7582, # 9e4059); image d'arrière-plan: -moz-linear-gradient (en haut, # ba7582, # 9e4059); image d'arrière-plan: -ms-linear-gradient (top, # ba7582, # 9e4059); image d'arrière-plan: -o-linear-gradient (en haut, # ba7582, # 9e4059); image d'arrière-plan: dégradé linéaire (vers le bas, # ba7582, # 9e4059); couleur de bordure: # 9e4059; couleur: rgba (255,255,255,0,95); -webkit-box-shadow: encadré 0 1px 0 rgba (0,0,0,0,1); box-shadow: encart 0 1 px 0 rgba (0,0,0,0,1); ombre de texte: 0 1px 0 rgba (0,0,0,0,1);
Cela change les couleurs d'arrière-plan et de bordure des boutons dans leur état par défaut et lorsqu'ils sont survolés ou actifs. La capture d'écran ci-dessous montre l'état par défaut:
Et c'est la couleur lorsqu'un bouton est survolé ou cliqué:
Et c'est tout mon style - fait!
Dans cette série, je vous ai montré six techniques différentes pour personnaliser l'administrateur WordPress..
J'ai couvert:
J'espère que cela vous a donné une certaine inspiration pour proposer vos propres idées..
WordPress est un système de gestion de contenu vraiment génial, avec quelques personnalisations que vous pouvez personnaliser et donner à vos utilisateurs et clients une expérience qui leur ajoute une aide supplémentaire pour eux et qui reflète également votre marque..
 . '){kind=icon}
Ce tutoriel vous est présenté par wptutsplus. '; add_filter ('admin_footer_text', 'wptutsplus_admin_footer_text');