Sur WordPress, les zones de “widget” peuvent s’avérer utiles, et permettent l’insertion de nombreuses extensions (plugins) et fonctionnalités.
Les thèmes par défaut ou ceux que l’on achète proposent ces zones de widget généralement dans la (les) sidebar(s) et dans le footer du site; limitant ainsi l’accès de nombreux plugins à ces zones
Nos besoins étant évolutifs, nous pouvons avoir besoin de zones de widgets dans d’autres sections d’un site (header, colonne principale, uniquement sur certaines pages,etc.

Voici donc comment créer et placer ces zones (widget area) ou vous le vouez sur votre site.

1 – La fonction

Dans un premier temps, nous allons créer la fonction de cette nouvelle zone (pour qu’elle apparaisse dans l’admin du site dans Apparence > Widget).
Pour ce faire, il faudra éditer votre fichier “functions.php” a l’aide d’un éditeur de texte.

Si votre thème possède déjà une zone de widget, recherchez dans le fichier (Ctrl+F) la ligne suivante:

if ( function_exists('register_sidebar') ) {

vous trouverez alors votre zone enregistrée, avec un code proche de celui-ci (selon le thème):

if ( function_exists('register_sidebar') ) {
register_sidebar(array(
        'name' => 'Sidebar',
      ));	
	}

Si ce n’est pas déjà le cas, il est possible de mettre en place des balises HTML autour des widgets, pour pouvoir plus facilement les mettre en forme (CSS – étape 3 de ce tuto).
On va donc ici mettre en place des balises autour du widget et du titre du widget.

if ( function_exists('register_sidebar') ) {
register_sidebar(array(
        'name' => 'Sidebar',
	'before_widget' => '<div class="widget_sidebar">',
        'after_widget' => '</div>',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
      ));	
	}

Dans l’exemple ci-dessus, la “class” servira a définir des propriétés CSs à tous les widget de cette zone et l'”ID” servira a définir des propriétés CSS uniquement à certains widgets (ceux-ci auront des numéros individuels).

[adsense]

Pour ajouter différentes zones de widget, il faut rajouter des “zones” comme indiqué ci-dessous

if ( function_exists('register_sidebar') ) {
register_sidebar(array(
        'name' => 'Sidebar',
	'before_widget' => '<div class="widget_sidebar">',
        'after_widget' => '</div>',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
      ));
register_sidebar(array(
        'name' => 'header_right',
	'before_widget' => '<div class="header_right" id="%1$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
      ));	  
	}

2- Le placement des zones de widget

Maintenant que la fonction a été créée, il faut placer ces zones de widget dans “le site”/le blog.
Selon l’endroit ou vous voulez placer ces zones (ici, le header) il faudra éditer les fichiers du thème correspondants (ex. dans un modèle de page spécifique).

Nous allons donc placer cette zone dans le fichier header.php, a l’endroit ou nous vouslons voir apparaitre cette zone:

< ?php if ( !function_exists( 'dynamic_sidebar' ) || !dynamic_sidebar('header_right') ) ?>

Ici aussi, nous allons rajouter des balises HTML pour pouvoir gérer plus facilement les propriétés CSS de cette zone de widget.

<div id="widget_header">
< ?php if ( !function_exists( 'dynamic_sidebar' ) || !dynamic_sidebar('header_right') ) ?>
</div>

3 – La mise en forme CSS

Maintenant que les zones de widget ont été mises en place (et que l’on peut gérer leur contenu via l’interface d’aministration de wordpress), il ne reste plus qu’a les mettre en forme et ainsi, les intégrer visuellement dans le design du site.

Grace aux balises HTML mises en place autour de la zone, des widgets et des titres, on pourra donc créer dans la feuille de style, les règles CSS à appliquer, comme l’exemple ci-dessous pour la zone header:

/*______Zone de widget dans le header ______*/

#widget_header {
.......
}

/*______Chacun des widgets de la zone et leurs titres ______*/

#widget_header .header_right {
...
}

#widget_header .header_right h3 {
...
}

Grâce à ce tuto, vous pouvez maintenant créer autant de zones que vous voulez et les placer librement sur votre site.