Johan BLEUZEN - Customiser le design de votre page d'administration WordPress

Customiser le design de votre page d'administration WordPress

10 Février 2011

L'administration d'un CMS ou d'un moteur de blog est probablement l'un des aspects les plus importants mais le moins pris en compte lors du choix de l'outil. Il est nécessaire d'y attacher un soin particulier car c'est cette interface qui sera utilisée pour présenter le contenu aux visiteurs. L'interface de l'admin WordPress est plutot réussie, mais elle pourrait être facilement améliorable, c'est ce que nous allons voir dans cet article...

Préambule

Cet article est ciblé aux personnes qui utilisent WordPress seul. Les conseils de cet article peuvent être appliqués à un blog multi-utilisateur dans une certaine mesure, mais je ne garantis pas leur fonctionnement. Voici une capture qui montre le résultat après customisation :

A chaque transformation de l'interface une partie de l'article lui est dédié, commençons sans plus attendre.

Tous les traitements qui seront présentés seront à placer dans votre fichier functions.php</code>, je vous recommande donc de créer un fichier functions-admin.php que vous inclurez dans votre fichier functions.php standard avec la ligne suivante :</p> ``` php ```

Bien entendu, ceci n'est qu'un conseil et si vous voulez uniquement utiliser un seul fichier de function, cela fonctionnera très bien également.

Suppression du header et du footer

Le header de l'admin est trop gros pour le peu d'information pertinente qu'il apporte à la page, voici un moyen très simple et très connu de supprimer le header. Quant à lui le footer n'apport absolument aucun intérêt. Dans le fichier functions.php de votre thème, il suffit d'ajouter le code suivant, on va injecter une balise style ou l'on indiquera que l'on ne veut pas afficher le header :

``` php /*--- Gestion du header de l'administration ---*/ function my_clean_admin_style() { echo ''; } add_action('admin_head', 'my_clean_admin_style', 11); ```

Néanmoins, dans ce header il y a deux liens que j'appréciais : celui qui permet d'ouvrir un nouvel onglet vers son site et le second qui permet la déconnexion. L'information de l'utilisateur n'est pas importante puisque je suis le seul utilisateur de mon blog et je n'utilisais pas les actions "favorites". Heureusement, il y a moyen de les recréer ailleurs.

Ajout et création de liens en haut de page

Nous venons donc de supprimer le header avec quelques liens, mais nous allons restaurer certains bouton (que l'on peut adapter selon ses besoins). En fait, nous allons imiter le style des boutons "Options de l'écran" et "Aide" qui déplient un panneau. L'insertion de ces liens se fait de manière assez cavalière pour ne pas dire "sale", mais je m'en fiche car je suis seul sur mon blog et que cette page n'est que pour moi...

Il suffit d'éditer la fonction my_clean_admin_style qui cachait le header et la remplacer par le code suivant :

``` php /*--- Gestion du header de l'administration ---*/ function my_clean_admin_style() { echo ''; echo ""; } add_action('admin_head', 'my_admin_style', 11); ```

Attention aux erreurs de quotes !!!

Ce bout de code ajoute des styles pour les boutons qui vont être générés. Ensuite il utilise jQuery pour insérer deux liens "meta-lijnks" qui vont permettre de voir le site et de se déconnecter. Cette solution n'impacte pas le design de WordPress et les messages de mises à jour apparaissent comme avant :

Edition des menus inutiles

Cette partie est encore une gros "hack", on va modifier les objets utilisés par WordPress pour générer le menu et le customiser pour n'afficher que certaines parties des menus. Par exemple il y a des doublons dans les menus. Le premier objectif va être de nettoyer la première partie du menu et de le simplifier au maximum en suppriment tous les liens "Ajouter" (regardez bien il y a beaucoup de liens "Ajouter"). Toujours dans votre fichier functions-admin.php ajouter le code suivant :

``` php add_action( 'admin_menu', 'my_clean_admin_menu'); function my_clean_admin_menu() { global $submenu, $menu; // Suppression des fils de Tableaux de bords unset($submenu['index.php']); // Création des nouveaux fils du premier menu add_dashboard_page("Articles", "Articles", "administrator", "edit.php", ""); add_dashboard_page("Commentaires", "Commentaires", "administrator", "edit-comments.php", ""); add_dashboard_page("Pages", "Pages", "administrator", "edit.php?post_type=page", ""); add_dashboard_page("Catégories", "Catégories", "administrator", "edit-tags.php?taxonomy=category", ""); add_dashboard_page("Bibliothèque", "Bibliothèque", "administrator", "upload.php", ""); // Suppression de l'éditeur de thème remove_action('admin_menu', '_add_themes_utility_last', 101); // Renomme le titre du menu $menu[2][0] = "Blog"; // Suppression des anciens menus unset($menu[5]); // Posts unset($menu[10]); // Medias unset($menu[15]); // Links unset($menu[20]); // Pages unset($menu[25]); // Commentaires unset($menu[70]); // Users unset($menu[100]); // Contact // Suppression if(!empty($submenu['plugins.php'])) { foreach($submenu['plugins.php'] as $key => $sm) { if($sm[2] == "plugin-editor.php" || $sm[2] == "plugin-install.php") { unset($submenu['plugins.php'][$key]); } } } } ```

Cet exemple permet de générer le menu comme présenté dans les captures en début d'article. Je vous conseille de faire des tests et de conserver et/ou supprimer ce qui vous intéresse. Pour visualiser le contenu du menu, vous pouvez ajouter la ligne suivante dans la fonction my_clean_admin_style, juste en dessous de la récupération des variables globales :

``` php // Pour afficher le contenu des menus var_dump($menu); //Pour afficher le contenu des sous-menus var_dump($submenu); ```

Cette modification des menus est à manipuler avec précautions et surtout pas directement en environnement de prod. A la moindre erreur dans un fichier functions.php et c'est votre site entier qui affichera une page blanche !

Conclusion

Avec ces bases, vous allez maintenant être capable de customiser votre administration WordPress afin de parfaitement coller à vos besoins. Adapter les menus permet également être un moyen de s'approprier son environnement WordPress ou encore de le customiser pour ses utilisateurs. On peut imaginer que vous ne voulez pas que vos contributeur accèdent à la bibliothèque, il suffit de le désactiver pour ces utilisateurs.

Cela fais un mois que j'ai tweaké mon WordPress comme montré sur la première capture, je n'ai pas remarqué de problèmes bloquant et j'en ai même profiter pour supprimer les liens que certains plugins créés à l'insu de mon plein gré. Si jamais vous avez des petites questions simples n'hésitez pas à les poser dans vos commentaires.

Source photo : Stock.xchng