Accueil » Conseils & tutoriels sites internet » Tutoriels Wordpress » WordPress : Ajouter une zone de widget personnalisée

WordPress : Ajouter une zone de widget personnalisée

Posté dans : Tutoriels Wordpress 0

WORDPRESS: Ajouter une zone de widget personnalisée.

Parce que WordPress ne propose qu’un nombre limité de zone où insérer les widgets, nous mettons à votre disposition ce tutoriel qui permet de créer et de personnaliser facilement ces zones.

Afin de mieux illustrer la méthode, nous nous baserons sur un exemple concret. Ce tutoriel peut donc être adapté à n’importe quel wordpress, thême ou template.

Dans cet exemple, nous voulons ajouter un widget de newsletter à notre site. Avec cette newsletter, nous ne voulons pas encombrer le contenu de la page, ni le menu mais nous voulons qu’elle dispose d’une bonne visibilité.

Le pied de page (footer) semble parfait pour recevoir ce nouveau widget.

tuto_wid_foo_bef

Le footer dispose déjà, selon le thème choisi, de plusieurs colonnes permettant d’ajouter nombre de widgets. Mais pour cette newsletter, nous ne voulons pas d’un emplacement comme les autres. Nous voulons l’afficher au dessus du footer et sur toute la largeur de la page.

1. Editer function.php

Le code permettant la création de zone de widget se trouve, le plus souvent, dans le fichier “function.php” de votre thème wordpress: “/mon_Site/wp-content/themes/mon_Theme/function.php”. Je dis “le plus souvent” car selon le thème utilisé, le code peut se trouver dans un autre fichier du genre “/lib/widgets.php” comme c’est le cas avec Virtue.

Vous reconnaitrez ce code par son contenu et par sa forme:

    if ( function_exists('register_sidebar') )
          register_sidebar(array(
        'name' => __('Footer Column 1', 'virtue'),
        'id' => 'footer_1',
        'before_widget' => '<div class="footer-widget"><aside id="%1$s" class="widget %2$s">',
        'after_widget' => '</aside></div>',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
          )
        );
      if ( function_exists('register_sidebar') )
          register_sidebar(array(
        'name' => __('Footer Column 2', 'virtue'),
        'id' => 'footer_2',
        'before_widget' => '<div class="footer-widget"><aside id="%1$s" class="widget %2$s">',
        'after_widget' => '</aside></div>',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
          )
        );
      if ( function_exists('register_sidebar') )
          register_sidebar(array(
        'name' => __('Footer Column 3', 'virtue'),
        'id' => 'footer_3',
        'before_widget' => '<div class="footer-widget"><aside id="%1$s" class="widget %2$s">',
        'after_widget' => '</aside></div>',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
          )
        );

La fonction “register_sidebar” enregistre déjà différentes zones de widget qui sont ensuite appelées par les templates à l’endroit adéquat. Nous allons nous baser sur ce code afin de créer une nouvelle zone pour recevoir notre newsletter.

Il faut donc ajouter à cette fonction le code neccessaire à la création d’une nouvelle sidebar qui accueillera notre newsletter.

Toute les variables de ce code peuvent et doivent être adaptées à notre nouvelle zone (pour que celle-ci ait un peu de personnalité).

    if ( function_exists('register_sidebar') )
          register_sidebar( array(
           'name'       => __( 'Footer Top', 'virtue' ),
           'id'     => 'footer_top',
           'description'    => __( 'Add widgets here to appear above your footer.', 'virtue' ),
           'before_widget' => '<aside id="%1$s" class="newsL %2$s">',
           'after_widget'  => '</aside>',
           'before_title'  => '<h3>',
           'after_title'   => '</h3>',
         )
       );
  • ‘name’ est bien sûr à renomer.
  • ‘id’ devra prendre lui aussi une nouvelle identité.
  • ‘description’ n’est pas neccessaire mais peut servir. (Supprimez simplement la ligne si vous ne trouvez rien à lui faire faire)
  • ‘before/after_widget’ et ‘_title’ peuvent prendre pour valeur des ouvertures et des fermetures de balise html. Nous pouvons les remplacer par des div, des sections, des titres, des paragraphes… Il est aussi possible de modifier l’id et la class de ces balises comme vous le feriez dans tout autre code html.
  • Attention de modifier aussi le nom du thème présent dans les variables ‘name’ et ‘description’.

Pensez à sauvegarder le fichier modifié.

2. Appeler la nouvelle zone de widget dans un template

Maintenant que la zone Footer Top est créée par la fonction register_sidebar, il nous reste à appeler celle-ci depuis le template “footer.php”.

Attention, encore une fois, selon le thème utilisé, ce fichier peut se trouver à différents endroits mais se situe généralement dans “/mon_site/wp-content/themes/mon_theme/footer.php”. Avec le thème Virtue par exemple, il se trouve dans “/mon_site/wp-content/themes/virtue/templates/footer.php”.

Le code permettant d’appeler la nouvelle sidebar est le suivant:

    <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('<b>footer_top'))?></b>

Attention de bien renseigner l’id de la sidebar que vous venez de créer à la fin de cette commande.

Pour permettre une meilleure mise en page, il peut être utile d’encadrer ce code de balises html.

Dans notre cas, nous plaçons ce code au dessus des premières déclarations d’ouvertures des div row et container et même de la balise footer pour que notre widget s’affiche à l’endroit désiré.

En image:

tuto_wid_foo_cod

Enfin, enregistrez votre template.

3. Ajout du widget

Cette étape nous amène dans le menu “Apparence -> Widgets” du back-office de notre wordpress où il devrait maintenant vous être proposé la zone de widget fraichement créée.

tuto_wid_back

Il suffit de faire glisser le widget désiré sur la nouvelle zone (ici Footer Top) pour voir apparaître sur le site, en haut du pied de page, la newsletter.

4. Mise en page du widget.

Maintenant que la zone Footer Top est créée dans “function.php”, que celle-ci est correctement appelée par le template “footer.php” et que le widjet newsletter est ajouté dans ce nouvel espace via le back-office de wordpress, Il vous suffira de quelques rêgles CSS pour donner au widget l’apparence qui lui convient.

Un petit exemple de ce que j’ai construit en écrivant ce tutoriel:

tuto_wid_foo_aft

Avec un peu d’imagination et de la patience, je suis certain que vous pouvez faire beaucoup mieux que ça. ; )

Amusez-vous bien !

Un autre tuto sur ce sujet.

Imprimer Imprimer

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.