Lorsque nous créons des sites WordPress pour des clients, nous ajoutons souvent des widgets personnalisés au tableau de bord. C'est un moyen simple d'afficher des notes utiles, des liens ou des instructions juste là où l'utilisateur se connecte.
Le tableau de bord par défaut n'affiche pas toujours les informations dont les gens ont réellement besoin. C'est pourquoi nous aimons le personnaliser — pour rendre la zone d'administration plus utile et personnelle.
Vous pourriez vouloir afficher un message de bienvenue, des informations de contact pour le support, ou inclure un tutoriel rapide. Quelle que soit la raison, c'est facile à faire une fois que vous savez comment.
Dans ce guide, nous vous montrerons comment ajouter un widget personnalisé au tableau de bord WordPress — en utilisant du code ou un plugin, selon votre préférence.
Que sont les widgets du tableau de bord d'administration WordPress ?
Les widgets du tableau de bord sont les petites boîtes que vous voyez lorsque vous vous connectez à votre site WordPress. Ils affichent des informations rapides, des liens utiles et des mises à jour sur votre site Web.
Par défaut, WordPress vous propose des widgets tels que « Aperçu », « Activité », « Santé du site » et « Brouillon rapide ». Mais vous pouvez ajouter vos propres widgets avec du contenu personnalisé qui correspond à vos besoins.
Astuce rapide : Chaque utilisateur de votre site peut choisir les widgets qu'il souhaite voir. Il peut les afficher, les masquer ou les réorganiser pour correspondre à son flux de travail.
Pourquoi les widgets du tableau de bord sont-ils utiles :
- Ils affichent des données utiles dès que vous vous connectez.
- Vous pouvez accéder rapidement aux outils ou au contenu sans avoir à parcourir les menus.
- Les widgets personnalisés vous permettent de personnaliser le tableau de bord pour vos besoins spécifiques.
Où les trouver :
Ces widgets apparaissent sur l'écran principal du tableau de bord dans la zone d'administration WordPress. Vous pouvez les déplacer en les faisant glisser, ou les masquer en utilisant l'onglet Options d'écran en haut.
Pourquoi et comment nous utilisons des widgets d'administration personnalisés dans WordPress
Les widgets de tableau de bord personnalisés sont un excellent moyen de personnaliser l'expérience d'administration de WordPress. Nous les avons utilisés sur de nombreux sites clients pour afficher des informations utiles, lier des outils importants ou simplifier le processus d'intégration.
Que vous gériez votre propre site ou plusieurs sites pour des clients, les widgets personnalisés peuvent vous faire gagner du temps et rendre la zone d'administration plus utile.
Cas d'utilisation réels :
- Personnalisation : Ajoutez un message de bienvenue, affichez des statistiques clés ou créez des liens vers des pages que votre équipe utilise souvent.
- Utilisation par les développeurs : Les développeurs créent souvent des widgets qui guident les clients avec des raccourcis vers des tâches courantes comme les mises à jour ou les sauvegardes.
Comment nous les utilisons sur nos sites :
Nous nous appuyons sur un ensemble de plugins WordPress indispensables, et beaucoup d'entre eux incluent des widgets de tableau de bord intégrés.
L'un que nous utilisons souvent est le widget Vue d'ensemble de All in One SEO. Il affiche les scores TruSEO pour notre contenu et donne des liens directs pour les améliorer.
Nous utilisons également le widget MonsterInsights. Il nous donne un aperçu rapide de notre trafic web et de nos performances directement depuis le tableau de bord.
C'est aussi flexible — nous pouvons choisir quelles données afficher en fonction de qui l'utilise.
Comme chaque membre de l'équipe a des besoins différents, ils peuvent afficher ou masquer des widgets et réorganiser le tableau de bord comme ils le souhaitent. C'est une petite fonctionnalité qui fait une grande différence en matière de productivité.
Comment créer des widgets personnalisés pour l'administration WordPress
Il existe deux méthodes principales pour créer des widgets personnalisés pour le tableau de bord WordPress. Vous pouvez utiliser les liens rapides ci-dessous pour accéder à la méthode que vous souhaitez utiliser :
- Méthode 1 : Créer des widgets de tableau de bord à l'aide de code personnalisé (plus personnalisable)
- Method 2: Create Custom Dashboard Widget Using Plugin (Easier)
Méthode 1 : Créer des widgets de tableau de bord à l'aide de code personnalisé (plus personnalisable)
Pour cette méthode, vous devrez ajouter du code personnalisé à votre site WordPress pour créer un widget de tableau de bord. Cela nécessite une compréhension de base de la programmation WordPress. Donc, si vous ne voulez pas écrire de code, vous pouvez passer à la méthode suivante.
Nous montrons cette méthode en premier car elle est plus flexible et vous laisse la possibilité d'ajouter tout code que vous souhaitez exécuter à l'intérieur de votre widget personnalisé.
Nous vous montrerons le code dont vous avez besoin, puis vous pourrez le personnaliser pour ajouter votre code à l'aide de PHP, HTML ou JS.
Lorsqu'il s'agit d'ajouter du code personnalisé à votre site WordPress, de nombreux utilisateurs pensent au fichier functions.php du thème. Bien que cette méthode fonctionne, nous pensons qu'il existe un moyen meilleur et plus sûr de gérer les extraits de code personnalisés : en utilisant WPCode.
La modification du fichier functions.php peut parfois faire planter votre site s'il y a une erreur dans le code. De plus, vous perdrez votre code personnalisé si vous changez ou mettez à jour le thème sans sauvegarder vos modifications.
WPCode, en revanche, vous permet d'ajouter du code personnalisé en toute sécurité sans faire planter votre site. Il facilite également la gestion des extraits de code et leur activation ou désactivation selon les besoins.
Note : Une version gratuite appelée WPCode Lite est également disponible, que vous pouvez utiliser pour ce tutoriel. Cependant, nous vous recommandons de passer à un plan payant pour débloquer plus de fonctionnalités.
Tout d'abord, vous devez installer et activer le plugin WPCode. Pour plus de détails, consultez notre article sur l'installation d'un plugin WordPress.
Une fois activé, vous devez vous rendre sur la page Extraits de code » +Ajouter un extrait et sélectionner ‘Ajouter votre code personnalisé (Nouvel extrait)’ pour créer un nouvel extrait.
Sur l'écran suivant, vous devez entrer un nom pour votre code personnalisé et choisir ‘Extrait PHP’ comme ‘Type de code’.
Après cela, ajoutez le code suivant dans la boîte de prévisualisation du code :
//hooks up your code to dashboard setup
add_action('wp_dashboard_setup', 'my_custom_dashboard_widgets');
function my_custom_dashboard_widgets() {
global $wp_meta_boxes;
// Register your custom WordPress admin dashboard widget
wp_add_dashboard_widget('custom_help_widget', 'Theme Support', 'custom_dashboard_help');
}
function custom_dashboard_help() {
// Replace this with any code you want to show in your custom admin widget
echo '<p>Welcome to Custom Blog Theme! Need help? Contact the developer <a href="mailto:yourusername@gmail.com">here</a>. For WordPress Tutorials visit: <a href="https://www.wpbeginner.com" target="_blank">WPBeginner</a></p>';
}
Voici à quoi cela devrait ressembler dans votre interface WPCode :
Voici une petite explication du code :
La fonction my_custom_dashboard_widgets() enregistre le widget personnalisé à l'aide de la fonction wpb_add_dashboard_widget(). Elle prend trois arguments. Le premier est l'ID du widget personnalisé, le second est le titre du widget, et le troisième argument est la fonction de rappel.
La fonction custom_dashboard_help() est notre fonction de rappel, et à l'intérieur, nous avons ajouté le code HTML que nous voulons afficher lorsque le widget est affiché.
Nous avons accroché notre fonction my_custom_dashboard_widgets au hook wp_dashboard_setup en utilisant add_action. Ce hook configure essentiellement la page du tableau de bord pour l'affichage.
Après avoir ajouté le code personnalisé, vous devez faire défiler vers le bas jusqu'à la section ‘Insertion’ et sélectionner ‘Admin uniquement’ dans le menu déroulant Emplacement.
Enfin, cliquez sur le bouton « Enregistrer le fragment » et basculez l'option de statut sur « Actif ».
C'est tout. Vous pouvez maintenant visiter la page Tableau de bord pour voir votre widget de tableau de bord d'administration WordPress personnalisé en action.
Méthode 2 : Créer un widget de tableau de bord personnalisé à l'aide d'un plugin (plus facile)
Cette méthode est plus facile, mais nous l'avons placée en deuxième position car elle est un peu moins flexible que l'ajout de code personnalisé.
Pour cette méthode, nous utiliserons le plugin Ultimate Dashboard. C'est l'un des meilleurs plugins de tableau de bord d'administration WordPress et il vous aide à créer facilement des widgets d'administration personnalisés.
Pour plus de détails, consultez notre avis complet sur Ultimate Dashboard.
Tout d'abord, vous devez installer et activer le plugin Ultimate Dashboard. Pour plus de détails, consultez notre article sur l'installation d'un plugin WordPress.
Après l'activation, vous devez visiter la page Ultimate Dash…» Ajouter nouveau. Tout d'abord, vous devez fournir un titre pour votre widget, puis sélectionner un type de widget.
Il existe trois types de widgets que vous pouvez créer :
- Widget Icône – Affiche une grande icône et la pointe vers n'importe quelle page de votre site.
- Widget Texte – Utilise un éditeur visuel où vous pouvez ajouter le texte de votre choix avec quelques options de formatage de base.
- Widget HTML – Ajoute du code HTML à votre widget personnalisé.
Examinons chacun d'eux.
1. Créer un widget icône personnalisé
Sélectionnez « Widget Icône » comme « Type de widget », puis choisissez l'icône que vous souhaitez afficher. Par défaut, il est livré avec un nombre limité d'icônes parmi lesquelles choisir.
Ci-dessous, vous pouvez ajouter du texte sous « Info-bulle » pour expliquer aux utilisateurs ce qui se passe lorsqu'ils cliquent sur l'icône. Par exemple : « Vous emmène à la page des paramètres WordPress. »
Après cela, ajoutez le lien vers lequel vous souhaitez rediriger les utilisateurs lorsqu'ils cliquent sur l'icône.
Enfin, cliquez sur « Publier » pour enregistrer vos modifications et visitez le Tableau de bord pour voir le widget en action.
Voici à quoi cela ressemblerait.
2. Créer un widget texte personnalisé
Si vous n'y êtes pas déjà, allez à la page Ultimate Dash…» Ajouter nouveau. Sélectionnez « Widget Texte » comme type de widget.
Le plugin vous présentera un éditeur de texte visuel (le même que l'ancien éditeur classique) où vous pouvez ajouter le texte que vous souhaitez afficher avec un formatage HTML de base.
Lorsque vous avez terminé, cliquez sur « Publier » pour enregistrer vos modifications.
Vous pouvez maintenant visiter votre tableau de bord d'administration pour voir ce widget d'administration personnalisé en action.
3. Créer un widget HTML personnalisé
Si vous n'y êtes pas déjà, vous devez aller à la page Ultimate Dash…» Ajouter nouveau. Sélectionnez « Widget HTML » comme type de widget.
Le plugin vous montrera un éditeur HTML où vous pouvez ajouter n'importe quel code HTML avec CSS en ligne.
Lorsque vous avez terminé, cliquez sur « Publier » pour enregistrer vos modifications.
Vous pouvez maintenant visiter votre tableau de bord d'administration pour voir ce widget d'administration personnalisé en action.
En utilisant Ultimate Dashboard, vous pouvez créer autant de widgets personnalisés que vous le souhaitez et mélanger différents types de widgets pour créer une expérience de tableau de bord d'administration utile.
Faire passer votre tableau de bord d'administration WordPress au niveau supérieur
La zone d'administration de WordPress est l'endroit où la plupart des propriétaires de sites Web passent beaucoup de temps à écrire du contenu, à créer des pages, à gérer des commandes, et plus encore.
Voici quelques ressources supplémentaires pour optimiser le tableau de bord d'administration de WordPress :
- Comment personnaliser le tableau de bord d'administration de WordPress
- Comment personnaliser le tableau de bord d'administration WordPress avec votre marque
- Comment créer des flux de travail automatisés dans WordPress
- Plugins et astuces pour améliorer la zone d'administration de WordPress
Nous espérons que cet article vous a aidé à ajouter des widgets de tableau de bord personnalisés dans la zone d'administration de WordPress. Vous voudrez peut-être aussi consulter notre guide de sécurité WordPress ou jeter un œil à ce tutoriel sur comment masquer les éléments de menu inutiles de la zone d'administration.
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
Brandon
Très utile. Merci.
Support WPBeginner
Heureux que cela ait été utile !
Admin
Jef Vermeire
Pouvez-vous ajouter plusieurs widgets du même type sur le tableau de bord WordPress. Par exemple : puis-je ajouter le widget personnalisé « custom_help_widget » deux fois sur mon tableau de bord ?
Support WPBeginner
You could if you wanted to, you would want to add an additional line of the wp_add_dashboard_widget if you wanted it twice
Admin
Xavier Barbot
Very useful, thank you, I’ve tried all the plugins but none achieved adding a simple widget for my clients, very slick and easy to replicate by cresting a custom plugin, I give you 5 stars!
Support WPBeginner
Glad our recommendation was helpful
Admin
Syed Ali Ahmed
Merci de partager ceci, c'est trop génial, j'adore.
Support WPBeginner
Glad you found our guide helpful
Admin
Mike
Est-il possible de styliser le widget avec des attributs personnalisés via HTML ou CSS ?
Support WPBeginner
Vous pourriez, mais c'est un peu au-delà de ce que nous couvrons dans nos articles.
Admin
daan van middendorp
Comment puis-je utiliser ceci avec un rôle personnalisé ?
Support WPBeginner
Si votre rôle personnalisé peut voir les widgets du tableau de bord, il devrait pouvoir voir le widget personnalisé.
Admin
haqem
comment mettre ce widget personnalisé dans la zone « Ajouter un nouvel article » pour l'écriture
Ron Sierra
Cela a été demandé une fois mais je n'ai pas pu trouver la réponse. Comment créer plusieurs widgets de tableau de bord ?
Bjornen
Comment puis-je ajouter la fonction wp_mail à ce widget ?
Signification ; comment puis-je fournir au client un formulaire de contact dans ce widget ?
Vishah
Comment puis-je ajouter un bouton ?
Wade
J'ai utilisé votre code et j'ai obtenu l'écran blanc de la mort. WP 4.7.2
Des idées ?
Support WPBeginner
Salut Wade,
Vous pouvez supprimer le code via FTP. Veuillez également consulter notre guide sur la façon de résoudre le problème de l'écran blanc de la mort dans WordPress
Admin
gobinda das
puis-je changer l'en-tête du thème Flowtown pour autre chose
Javier
Bonjour, j'essaie de créer des widgets personnalisés par utilisateur. Chaque utilisateur doit avoir un widget avec un texte différent.
Y a-t-il un moyen d'y parvenir ?
David Guerreiro
C'est très facile ! Avec PHP, récupérez l'utilisateur actuel dans la fonction que vous utilisez pour afficher le contenu de la boîte de métadonnées et modifiez le HTML en fonction de l'utilisateur récupéré. Jetez un œil à ceci :
Lại Đình Cường
Bonjour Syed Balkhi, comment puis-je ajouter un nouveau widget d'administration avec un ordre ?
shakun
Comment ajouter plusieurs widgets sur le tableau de bord
Nishant
J'ai essayé d'insérer un do_shortcode() avec un shortcode pour un formulaire de contact afin de donner à l'utilisateur un accès rapide pour signaler tout bug ou fournir des commentaires, mais cela ne fonctionne pas... une idée pour faire fonctionner CF 7 avec ça ?
Merci
Dustin
Ce serait formidable de le savoir. J'essaie également d'utiliser un shortcode dans un widget de tableau de bord.
Mike
Cela ne fonctionne pas pour moi dans la version 3.5. Y a-t-il des mises à jour pour que cela fonctionne ? Merci !
smayzes
Est-il possible de faire cela en utilisant la POO ?
par exemple :
à l'intérieur d'une classe :
wp_add_dashboard_widget(‘custom_help_widget’, ‘Aide et Support’, array($this, ‘customDashboardHelp’));
function customDashboardHelp() {
echo ‘<p>Bienvenue dans votre CMS personnalisé !’;
}
Nick Powers
Je sais que votre message est assez ancien, mais pour le bien des autres qui arrivent ici et qui ont la même question. Oui, cela fonctionne avec la POO, tout comme vous l'avez indiqué.
luxsub
Est-il possible de mettre un widget avec adsense dans votre tableau de bord pour un site multi-utilisateurs ?
y3kgeek
Excellente idée. Et si je veux créer un widget de tableau de bord personnalisé que seules les personnes ayant un certain rôle d'utilisateur, disons Rédacteur, peuvent voir ?
Personnel éditorial
Vous pouvez le faire en utilisant l'instruction conditionnelle if user_can ou même les rôles d'utilisateur.
Admin
DramaKing
Je sais que ça fait trois ans, mais si d'autres tombent sur cette page en cherchant une réponse (comme moi), voici comment j'ai fait. Je ne connais pas grand-chose au codage, donc ce n'est probablement pas très propre, mais c'est comme ça que j'ai réussi à le faire fonctionner :
add_action(‘wp_dashboard_setup’, ‘dashboard_widget_mail’);
function dashboard_widget_mail() { $wp_meta_boxes; }
if ( current_user_can( ‘delete_users’ ) ) {
wp_add_dashboard_widget(‘custom_mail_widget’, ‘Nom du widget à afficher sur le tableau de bord’, ‘custom_dashboard_mail’); } return true; }
function custom_dashboard_mail() {
echo ‘Votre texte personnalisé ici.’;
—
Vous pouvez bien sûr remplacer ‘delete_users’ par n'importe quelle capacité que vous souhaitez.
Martin
Merci pour ça ! Ça fonctionne très bien.
Juste une question rapide :
Si je veux ajouter 2 widgets personnalisés ou plus dans le functions.php, dois-je changer le nom de "action" et de "function" ?
Personnel éditorial
Oui, vous devriez ajouter deux fonctions et actions distinctes…
Admin
ACS04
Ça a l'air bien, mais il vaudrait mieux créer un plugin simple pour le faire, de manière à ce que ce widget soit indépendant des thèmes… Vous ne pensez pas ?
Personnel éditorial
Eh bien, vous pouvez, mais dans notre cas, il contient des informations de support que nous voulons que nos clients connaissent. C'est surtout pour les conceptions de thèmes personnalisés, donc c'est seulement utile lorsque notre thème est activé.
Admin
Frankie Jarrett
Thanks a lot for the easy example. I was able to get something up and running in just a few seconds
Stéphane
Wow ! Je n'avais jamais entendu parler de cette astuce auparavant… Très bien, merci !
Daniel
Worked like a charm. Using this as a workaround for one of my membership site that locked all dashboard menus; this will point members to the appropriate edit posts links again.
richard
quand on crée deux widgets, comment les faire côte à côte au lieu d'un au-dessus de l'autre ?
Personnel éditorial
Salut Richard, vous pouvez faire en sorte que votre widget s'affiche tout en haut en utilisant le code de l'API des widgets du tableau de bord de WordPress. Nous ne savons pas comment les mettre côte à côte sans y aller manuellement et les enregistrer pour le client. Peut-être qu'envoyer un e-mail à Jake pour lui demander serait une bonne idée.
N'oubliez pas cependant que les paramètres que vous définissez dans functions.php ne remplacent pas les paramètres normaux si l'utilisateur a déjà modifié les paramètres. Cela ne fonctionne que si l'utilisateur n'a jamais organisé son tableau de bord auparavant.
Admin
Bleu cendre
Utilisez `display: block` sur l'élément le plus externe et `float: left`, assurez-vous de définir une largeur, mais cela pourrait le casser. C'est très similaire à une mise en page de galerie. Ce n'est pas suggéré et pas nécessairement la façon dont WordPress a conçu les widgets à utiliser (utilisez à vos risques et périls).
david
wpmu. J'ai trouvé /wp-includes/functions.php mais où dois-je insérer le code ? Merci pour votre aide
Personnel éditorial
Vous incluez cela dans le fichier functions.php de votre thème, pas dans le fichier principal.
Admin
cho
que voulez-vous dire par thèmes function.php ?
je ne trouve pas un tel fichier
Personnel éditorial
Il y a un fichier functions.php situé dans le dossier de votre thème.
Bleu cendre
Intéressant, j'ai fait tout cela avec la ligne ci-dessous. L'une est-elle meilleure, ou les deux sont-elles aussi bonnes ?
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name'=>'Contact',
));
}
Personnel éditorial
Votre code sert à enregistrer des widgets de barre latérale. Le code que nous partageons dans cet article sert à ajouter un widget de tableau de bord personnalisé. Lorsque l'on se connecte à leur wp-admin, ils voient les statistiques des articles et d'autres informations. Cette boîte sera ajoutée là.
Deux sujets complètement différents.
Admin
Vivek @ InfoEduTech
merci pour le tutoriel.
s'il vous plaît ne le prenez pas mal chaque fois que vous allez publier un article, publiez-le avec la capture d'écran appropriée afin qu'il soit facile pour les novices.
Jim
C'est génial, merci de partager.