Cet article est une traduction du tutoriel How To Create a WordPress Theme rédigé par Ian Stewart, l’auteur du framework WordPress Thematic disponible sur son site ThemeShaper. Avec son aimable autorisation et mes remerciements.

Je sais que vous avez attendu patiemment jusqu’à celui-ci. Car tout le monde adore le template Sidebar. Mais nous allons faire le nôtre un peu différemment de tout le monde.

Le nôtre va être meilleur. (ndT: très anglo-saxon cette affirmation, à vous de juger ! )

Fonctions Personnalisées de la Barre Latérale

La première chose à vérfier avec un template WordPress pour une barre latérale, c’est d’être sûr qu’elle va être widgetisable. La nôtre va même avoir deux zones de widgets. Cela nous permettra de réutiliser ce code pour faire un thème sur deux ou trois colonnes (dans un thème à deux colonnes, les deux zones sont empilées).

C’est assez facile à réaliser. Dans notre fichier functions.php nous allons enregistrer nos zones widgetisables de la manières suivante :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// Register widgetized areas
function theme_widgets_init() {
	// Area 1
	register_sidebar( array (
	'name' => 'Primary Widget Area',
	'id' => 'primary_widget_area',
	'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
	'after_widget' => "</li>",
	'before_title' => '<h3 class="widget-title">',
	'after_title' => '</h3>',
  ) );
 
	// Area 2
	register_sidebar( array (
	'name' => 'Secondary Widget Area',
	'id' => 'secondary_widget_area', 
	'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
	'after_widget' => "</li>",
	'before_title' => '<h3 class="widget-title">',
	'after_title' => '</h3>',
  ) );
} // end theme_widgets_init
 
add_action( 'init', 'theme_widgets_init' );

Nous avons donc deux zones widgetisables : Primary Widget Area et Secondary Widget Area. Il n’y avait aucune raison de les appeler Primary Sidebar ou Secondary Sidebar car en fonction de la mise en forme du site elles peuvent ne pas être des barres latérales. Par contre ce sera toujours des zones widgetisables.

A présent, toujours dans functions.php, nous allons ajouter deux petits bouts de code plutôt sympas.

Tout d’abord, nous allons commencer par pré-charger des widgets par défaut : La recherche, les pages, les catégories, les archives, les liens et les informations méta. Nous n’allons pas les coder manuellement dans sidebar.php. Nous allons demander à WordPress de les ajouter dans notre zone de widgets dynamique via le paramétrage (merci à Ptah Dunbar pour cette astuce).

1
2
3
4
5
6
7
8

$preset_widgets = array (
	'primary_widget_area'  => array( 'search', 'pages', 'categories', 'archives' ),
	'secondary_widget_area'  => array( 'links', 'meta' )
);
if ( isset( $_GET['activated'] ) ) {
	update_option( 'sidebars_widgets', $preset_widgets );
}
// update_option( 'sidebars_widgets', NULL );

Nous avons donc maintenant dans notre première zone widgetisable les widgets Search, Pages, Categories, Archives et la seconde zone (secondary_widget_area) contient les widgets Links et Meta. Ces widgets sont donc chargés par défaut dans nos options Apparence de WordPress.

Remarquez le code // update_option( 'sidebars_widgets', NULL ); à la dernière ligne. Otez les commentaires de cette ligne si vous avez à réinitialiser vos widgets pour une raison quelconque. Vous aviez de toute façon deviné que NULL veut dire pas de widgets.

Nous allons ensuite créer un nouveau test qui va vérifier s’il existe des widgets dans une zone de widgets donnée. Ce sera extrêmement utile (avec l’appui de Chaos Kaizer) quand nous allons coder notre template Sidebar.

1
2
3
4
5
6
7
8
9
10

// Check for static widgets in widget-ready areas
function is_sidebar_active( $index ){
  global $wp_registered_sidebars;
 
  $widgetcolums = wp_get_sidebars_widgets();
 
  if ($widgetcolums[$index]) return true;
 
	return false;
} // end is_sidebar_active

Allons mettre en oeuvre toutes ces petites fonctions.

Code du Template Sidebar

Avec nos zones dynamiques widgétisables enregistrées et prè-chargées, notre template Sidebar va être un des templates les plus simples que vous ayez jamais vus. Mais nous devons également placer nos barres widgetisables dans une instruction IF en utilisant notre nouvelle fonction conditionnelle is_sidebar_active().

Voici ce que l’on obtient :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?php if ( is_sidebar_active('primary_widget_area') ) : ?>
		<div id="primary" class="widget-area">
			<ul class="xoxo">
				<?php dynamic_sidebar('primary_widget_area'); ?>
			</ul>
		</div><!-- #primary .widget-area -->
<?php endif; ?>		
 
<?php if ( is_sidebar_active('secondary_widget_area') ) : ?>
		<div id="secondary" class="widget-area">
			<ul class="xoxo">
				<?php dynamic_sidebar('secondary_widget_area'); ?>
			</ul>
		</div><!-- #secondary .widget-area -->
<?php endif; ?>

Maintenant si vous allez dans votre page d’administration des widgets et que vous les retirez tous de n’importe quelle zone widgetisable, l’instruction IF répondra faux. Ce qui nous va très bien : pas de widget, pas de zone.

Juste simple, comme nous aimons le faire dans ce tutoriel.

Cet article fait partie du tutoriel Créer un Thème WordPress :

  1. Introduction
  2. Outils de Développement
  3. Structure HTML du Thème
  4. Structure des Dossiers et Templates
  5. Template Header
  6. Template Index
  7. Templates Single, Attachment et 404
  8. Template Comments
  9. Template Search et Page
  10. Template Archives, Auteur, Catégories et Mots clés
  11. Template Sidebar
  12. Design du Thème, Initialisation et Construction CSS

flattr this!