Ajouter un widget personnalisé dans le Tableau de bord de WordPress

31 commentaires
Ajouter un widget personnalisé dans le Tableau de bord de WordPress

Le Tableau de bord de WordPress peut être facilement personnalisé en ajoutant un widget sur-mesure, pratique pour ajouter des informations techniques ou commerciales.

L’ajout d’un widget n’a rien de compliqué hormis la nécessité de connaitre quelques bases en HTML.

Connectez-vous à votre administration WordPress puis rendez-vous dans Apparence puis Éditeur.

Là, dans la liste de droite, cliquez sur le fichier functions.php que vous pouvez également y accéder via un client FTP dans le dossier /wp-content/themes/NOM_DU_THEME/

Rajoutez à présent les lignes de code ci-dessous :

// Ajouter un widget dans le tableau de bord de WordPress
function wpc_dashboard_widget_function() {

// Saisie du texte entre les guillemets
echo "
<ul>
<li>Date de réalisation : mai 2011</li>
<li>Auteurs : Aurélien Denis.</li>
<li>Hébergement : Mavenhosting</li>
</ul>
";
}
function wpc_add_dashboard_widgets() {
wp_add_dashboard_widget('wp_dashboard_widget', 'Informations techniques', 'wpc_dashboard_widget_function');
}
add_action('wp_dashboard_setup', 'wpc_add_dashboard_widgets' )

Dans l’exemple ci-dessous, il convient d’ajouter le texte de votre choix dans la balise echo après les guillemets. Vous pouvez y insérer le code HTML de votre choix. Ici, il s’agit d’une liste à puces.

Pour donner un nom à votre widget – nom qui sera affiché en tant que titre, remplacez 'Informations techniques' par ce que vous souhaitez.

N’oubliez pas de cliquez sur le bouton Mettre à jour le fichier.

Voici un aperçu du résultat final :

Capture d'écran - Widget sur-mesure dans WordPress
Le widget peut contenir du code HTML et donc un logo par exemple

Si vous ne visualisez pas le widget, cliquez sur le menu Options de l’écran en haut à droite de votre écran pour cochez-le.

Dans le cadre de la réalisation d’un site Web professionnel avec WordPress, il m’apparaît comme essentiel de transformer le CMS en marque blanche et de le personnaliser pour le client. D’autres tutoriels aborderont cette thématique prochainement.

Par Aurélien Denis

Consultant & Développeur WordPress / WooCommerce. Un site à créer, à maintenir ou à débuguer ? Contactez-moi.

31 commentaires
  1. Victor

    Bonjour Aurélien
    Merci pour votre retour et réponse aussi rapide, alors que le tutoriel est créer depuis un moment.
    C’est très gentil.
    J’ai tenté, mais je ne trouve pas ce bout de code que j’ai entré dans le function.php

  2. Victor

    Bonjour
    Merci pour vos tutoriels et celui-ci en particulier 🙂
    J’avais une petite question
    J’ai ajouté mon logo et un petit texte à côté.
    Le texte est bien placé tout juste à côté de l’image, mais il est trop bas (il touche le bas du logo)
    J’aimerais bien le mettre en haut (en haut du logo) et mettre un autre texte juste en dessous sans saut de ligne.
    Ainsi qu’ajouter à l’extrémité (tout à droite et sur la même ligne) un bouton avec un lien (comme le widget “Vu d’ensemble ELEMENTOR) dans le tableau de bord de WP.
    Comment pourrais-je faire ?
    Merci pour votre aide précieuse

    1. Aurélien Denis auteur de l’article

      Bonjour, il faut jouer avec les classes CSS existantes en back-office ou bien ajouter les vôtres en restant léger.

  3. Deuns26

    Bonjour, merci pour l’article.
    Est il possible dans créer plusieurs widget personnalisé dans le Tableau de bord de WordPress?
    J’essaye mais j’arrive pas.
    Merci pour l’aide
    Deuns26

    1. Aurélien Denis auteur de l’article

      Bien sûr ! En créant plusieurs fonctions du même genre.

  4. becaneweb

    Merci pour le lien c’est un tuto en or.

  5. Cédric - bécane WEB

    Bonjour Aurélien,

    Je viens de faire un bon petit tour sur le web et je n’ai pas trouvé l’info cherchées…WordPress Channel étant un des sites où je trouve 3/4 de mes infos, je te poses la question au cas ou tu aurais le tuto que je recherche :

    J’aimerai ajouter un champs “copyright” dans mon back-office WordPress (dans la section personnaliser le thème) pour que le client puisse changer facilement le copyright de son site sans aller dans le fichier footer.php.

    As tu une piste pour faire cela ?

    J’utilise le thème WordPress twentyeleven.

    Merci pour tous tes tutos.

  6. Akaralda

    J’ai une nouvelle question… Si je veux créer deux widgets comme tu a fais, en dupliquant le code et en changeant les noms évidemment, la deuxième ne d’affiche pas.
    Une soluce en gardant la même structure ou alors c’est une toute autre approche ?

    1. Aquabiofarm

      Salut, déjà un grand merci pour cette aide mais pareil que toi, lorsque je créé un nouveau widget perso, celui ci ne s’affiche pas. Dès que je désactive le premier créé, alors le deuxième s’affiche.
      Avez vous une solution?

      Merci

  7. mihalic

    Bonjour , je n ai pas reussi…
    il y a t il un moyen de personnalise totalement le tableau de bord
    pour ne plus voir de “signe” de wordpress …

    1. Gd6d

      Euh : Last Updated: 2007-9-28
      Moi je me méfierais…

  8. Fanny Sylvestre

    D’accord, merci, ça va m’aider à orienter ma recherche. J’y vais de ce pas ^^

    Bonne journée

  9. Fanny Sylvestre

    Merci, pour moi le code donné fonctionne nickel tel quel sur la toute dernière version que je viens de mettre à jour : 3.3.1

    j’ai déplacé le widget tout en haut de l’admin, par contre, je cherche à faire la même chose sur la page d’ajout d’un nouvel article…

    1. Aurélien Denis auteur de l’article

      Pour les articles, ce n’est pas du tout la même chose. On parlera de metaboxe et il ne s’agit pas d’un simple affichage d’informations mais bien de stockage ayant des conséquences sur la publication.

      Il existe de très bons articles en recherchant “metaboxes WordPress” dans Google. 😉

  10. Oufdeladingue

    Bonjour,

    Est-il possible de placer ce widget au dessus des autres sur le dashboard? (Par défaut j’entends…)
    J’en ai désactivé plusieurs et il ne me reste plus que le compteur d’article (titre: aujourd’hui) et ce petit widget ajouté mais je préférerais placer ce dernier au-dessus de l’autre.
    Très bon blog, très utile à mon travail ! Enjoy

      1. Oufdeladingue

        Merci pour le lien!
        Il semble que l’utilisation de cette hooking function ne soit pas encore au top.
        Tant pis pour le changement de position des widgets….

  11. Gd6d

    Salut,
    Encore une très bonne idée Aurélien !
    Comme ça je vais aussi pouvoir rajouter le doc. que je donne à mes clients. Merci !

    1. Aurélien Denis auteur de l’article

      De rien ! 😎

  12. Tsigorf

    Tout code XHTML n’est pas autorisé : les liens par exemple (<a href=”[votre lien]”>nom du lien<>/a> ne sont pas autorisé, le PHP affiche une erreur et… Plus de blog !). Il m’est arrivé cette erreur et j’ai du reprendre le code original afin de le réinsérer dans le fichier via http://FTP...

    Évitez de rajouter des liens !

    1. Aurélien Denis auteur de l’article

      Merci de la remarque !

      1. Jonathan

        Les liens ne posent pas de soucis pour les widgets présents de le Dashboard.

        Il y a en déjà pas mal dans ceux par défaut pour s’en rendre compte 🙂

        Dans le echo de la fonction que tu as rajouté, mets lui des simple quote au lieu des doubles. D’ailleurs tu as mal fermé ton echo car ce n’est pas un double quote que tu as utilisé mais un »

        C’est pour cette raison que tu as une erreur 🙂

        1. Akro Web

          Merci pour ce tuto et pour l’astuce de Jonathan. Je peux enfin mettre une vidéo dans le tableau de bord pour expliquer à mes clients comment utiliser l’interface.

  13. Tsigorf

    Moi ça ne marche pas, voici l’erreur :
    Parse error: syntax error, unexpected T_STRING, expecting ‘,’ or ‘;’ in /var/www/legtux.org/users/tsigorf/index/wp-content/themes/chocotheme/functions.php on line 13
    Et pourtant, j’ai corrigé le “wpc_dashboard_setup”, j’ai testé le code brut (corrigé quand même) mais rien n’y change… même sans ce code… (En gros, plus de tableau de bord.)
    J’ai donc ce code :
    <?php
    wp_enqueue_script('jquery');// Include jquery
    automatic_feed_links();

    // Ajouter un widget dans le tableau de bord de WordPress
    function wpc_dashboard_widget_function() {

    // Saisie du texte entre les guillemets
    echo "

    Date de réalisation : 22 février 2011
    Webmaster : PRENOM NOM
    Hébergement : Merveilleux Legtux.org, ne pas oublier de se connecter au moins tous les 2 mois.

    “;
    }
    function wpc_add_dashboard_widgets() {
    wp_add_dashboard_widget(‘wp_dashboard_widget’, ‘Informations techniques’, ‘wp_dashboard_widget_function’);
    }
    add_action(‘wp_dashboard_setup’, ‘wpc_add_dashboard_widgets’ );

    register_sidebar(array(
    ‘name’=>’sidebar’,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,
    ));

    function attach_theme_settings() {
    $theme_root = dirname(__FILE__) . DIRECTORY_SEPARATOR;
    include_once($theme_root . ‘lib/theme-options/theme-options.php’);
    include_once($theme_root . ‘options/theme-options.php’);
    include_once($theme_root . ‘options/navigation-options.php’);
    // include_once(‘options/theme-widgets.php’);
    }

    attach_theme_settings();

    function print_comment($comment, $args, $depth) {
    $GLOBALS[‘comment’] = $comment; ?>
    <li >
    <div class="comment-body" id="comment-“>

    at

    comment_approved == ‘0’) : ?>

    $depth, ‘max_depth’ => $args[‘max_depth’]))) ?>

     

    post_parent!=0) {
    $page_obj = get_page($page_obj->post_parent);
    }
    return get_page($page_obj->ID);
    }

    $nav_limit = 10;
    function choco_print_pages_nav() {
    global $post, $nav_limit;
    $current_page_ancestor = get_page_ancestor($post->ID);
    $excluded = get_option(‘header_nav_pages_exclude’);
    if ($excluded) {
    $excluded_pages = “exclude=” . implode(‘,’, $excluded);
    } else {
    $excluded_pages = ”;
    }

    $pages = get_pages(“parent=0&child_of=0&sort_column=menu_order&$excluded_pages”);

    $html = ”;

    $i = 0;
    foreach ($pages as $page) {
    $subpages = get_pages(‘child_of=’ . $page->ID . ‘&parent=’ . $page->ID . ‘&sort_column=menu_order’);
    $has_dropdown = !empty($subpages) && get_option(‘enable_dropdown’, ‘yes’)==’yes’;
    $classes = array();
    if (is_page() && $current_page_ancestor->ID==$page->ID) {
    $classes[] = “current_page_item”;
    }

    if ($has_dropdown) {
    $classes[] = “has_dropdown”;
    }
    $html .= ”;
    $html .= ‘ID) . ‘”>’;

    if ($has_dropdown) {
    $html .= ” . apply_filters(‘the_title’, $page->post_title) . ”;
    } else {
    $html .= apply_filters(‘the_title’, $page->post_title);
    }

    $html .= ‘‘;
    if ($has_dropdown) {
    $html .= choco_get_pages_nav_dropdown($page, intval(get_option(‘dropdown_depth’, 2)));
    }

    $html .= ”;
    if ($i==$nav_limit) {
    break;
    }
    $i++;
    }
    echo $html;
    }
    function choco_get_pages_nav_dropdown($page, $max_levels, $current_level=1) {
    $html = ”;
    $subpages = get_pages(‘child_of=’ . $page->ID . ‘&parent=’ . $page->ID . ‘&sort_columnm=enu_order’);
    if (count($subpages) > 0) {
    $html .= ”;
    foreach ($subpages as $subpage) {
    $html .= ”;
    $html .= ‘ID) . ‘”>’ . apply_filters(‘the_title’, $subpage->post_title) . ‘‘;
    if ($current_level < $max_levels) {
    $html .= choco_get_pages_nav_dropdown($subpage, $max_levels, $current_level + 1);
    }
    $html .= '’;
    }
    $html .= ”;
    }
    return $html;
    }
    function choco_print_categories_nav() {
    global $nav_limit;
    $excluded = get_option(‘header_nav_categories_exclude’);
    if ($excluded) {
    $excluded_cats = “exclude=” . implode(‘,’, $excluded);
    } else {
    $excluded_cats = ”;
    }

    $categories = get_categories(“$excluded_cats”);

    $html = ”;
    $i=0;
    foreach ($categories as $category) {
    $classes = array();
    if (is_category($category->term_id)) {
    $classes[] = “current_page_item”;
    }
    $html .= ‘term_id) . ‘”>’ . $category->name . ‘‘;

    if ($i==$nav_limit) {
    break;
    }
    $i++;

    }
    echo $html;
    }
    function choco_print_header() {
    $nav_type = get_option(‘nav_type’);
    if ($nav_type==’pages’) {
    choco_print_pages_nav();
    } else if ($nav_type==’categories’) {
    choco_print_categories_nav();
    } else /*shouldn’t happen*/ {
    choco_print_pages_nav();
    }
    }
    function choco_get_body_style() {
    $bg_color = get_option(‘background_color’, ‘#3A2820’);
    $bg_image = get_option(‘background_image’);
    $bg_repeat = get_option(‘background_repeat’);

    $style = ‘background: ‘ . $bg_color;
    if ($bg_image) {
    $style .= ‘ url(‘ . $bg_image . ‘) center top ‘ . $bg_repeat;
    }
    $style .= ‘;’;

    return $style;
    }

    function choco_get_theme_path() {
    $map = array(
    ‘Default Scheme’=>’default’,
    ‘Dark Scheme’=>’darkgray’,
    ‘Red Scheme’=>’red’,
    );
    $theme = get_option(‘choco_color_scheme’);
    if (isset($map[$theme])) {
    return $map[$theme];
    }
    return ‘default’;
    }
    ?>
    Normal ?

    PS : désolé de la taille du commentaire mais je n’ai pas trouvé de truc du type menu déroulant…

    1. Aurélien Denis auteur de l’article

      Si tu supprimes la fonction que tu viens d’ajouter tout devrait rentrer dans l’ordre à moins que tu n’utilises un système de cache qu’il te faudra mettre à jour…

      Pour le support, rendez-vous sur le forum de WordPress francophone. 😉

  14. billboc

    bizarre ça ne marche pas chez moi ?
    rien n’apparait ni dans les options de l’écran…

    1. Jonathan

      @billoc : Il y a une erreur de le nom du hook, c’est wp_dashboard_setup et non pas wpc_dashboard_setup.

      Ca devrait marcher si tu modifies 🙂

      1. Aurélien Denis auteur de l’article

        Merci de la correction que je vais m’empresser de mettre en oeuvre dans la soirée.

        Je n’avais pas fait suffisamment attention à bien renommer les bons préfixes après avoir mis en place cette fonction sur un site client. 🙂

        1. billboc

          ça marche ! merci à tous les 2 🙂

Laisser un commentaire