Ajouter une zone widget à un thème WordPress

Un basique pour créer de nouvelles positions de contenu dans votre thème WordPress, il suffit d'éditer 2 fichiers.

Dans un premier temps, ouvrez wp-content/themes/VotreTheme/functions.php, vous y trouverez la fonction function VotreTheme_widgets_init() :

register_sidebar( array(
        'name'          => __( 'Widget Area', 'VotreTheme' ),
        'id'            => 'sidebar-1',
        'description'   => __( 'Add widgets here to appear in your sidebar.', 'VotreTheme' ),
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget'  => '</aside>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );

On voit ici comment la sidebar est intégrée au thème de base. Pour y ajouter une nouvelle zone, il suffit de rajouter dans la fonction un paragraphe similaire :

register_sidebar( array(
        'name'          => __( 'Slideshow Area', 'VotreTheme' ),
        'id'            => 'slideshow',
        'description'   => __( 'Ajoutez un widget ici pour faire apparaitre votre slideshow.', 'VotreTheme' ),
        'before_widget' => '<div id="slideshow">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );

L'id doit être unique et ne doit pas comporter de majuscules (tout semblera bien fonctionner, mais la sauvegarde en base de données ne se fera pas).

Les lignes before_widget, after_widget, before_title et after_title vous servirons à styliser les éléments dans votre feuille de style css.
Une fois le fichier édité et uploadé, vous verrez cette nouvelle zone dans le panneau d'aministration WordPress, et vous pourrez y assigner un widget.

Pour ensuite afficher cette zone en frontend, il vous suffit d'une ligne de code ajoutée à l'endroit où vous voulez afficher cette zone. Ici, j'intègre un slideshow sous le menu, donc j'édite le fichier wp-content/themes/VotreTheme/header.php.

<?php if(is_active_sidebar('slideshow')){dynamic_sidebar( 'slideshow' );} ?>

Actualisez votre page et le widget devrait s'afficher.

BLOG COMMENTS POWERED BY DISQUS