WordPress – Créer un thème WordPress Widget Ready

Voilà bien une chose importante dont on ne souvient jamais en situation lorsque l’on en a le plus besoin, c’est à dire au moment d’intégrer un “template” pour WordPress. Pour ne rien vous cacher, l’intérêt consiste à utiliser WP comme on le ferait avec Joomla ou avec Drupal, pour positionner des éléments de contenu, c’est à dire à utiliser au maximum le moteur applicatif de widgets mais en plaçant chacun de ces widgets dans des “sidebars” supplémentaires.

On va respecter l’équation ci-dessous.

Tirer profit au maximum des sidebars / à la limite 1 widget = 1 sidebar

Pourquoi respecter une telle équation, deux raisons à cela principalement :

• En fragmentant votre code, vous pouvez déléguer le développement de certains widgets à d’autres développeurs.
• Pour le responsable éditorial du futur site, cela permet de s’appuyer sur les fonctions d’affichage de WP, sans pour autant changer de template ou d’aller triturer le code. Le maximum de fonctions éditoriales sont gérées via les widgets WordPress.

C’est vrai que lorsque vous atteigniez ce niveau de complexité, il vaut peut-être mieux passer à autre chose qu’à WordPress, Drupal par exemple.

Pour les besoins de notre cause, nous allons travailler sur le “template” livré par défaut lors de l’installation et on va le modifier afin d’ajouter des sidebars supplémentaires.

Modifier le code du fichier functions.php

Le plus simple est donc de prendre le « template » qui est livré par défaut et de le tordre jusqu’à ce qu’il satisfasse vos besoins.

Il faut changer le fichier functions.php, en lui administrant un peu de variabilité. c’est le sens de la commande if ( function_exists('register_sidebars') ) register_sidebars(4);. On déclare en fait qu’il va avoir dans notre thème 4 “sidebars” dont celle qui existe actuellement.

Extrait de functions.php

	/**
	 * @package WordPress
	 * @subpackage Default_Theme
	 */
	/*
 
	Le code d'origine est désactivé...
 
	if ( function_exists('register_sidebar') )
	    register_sidebar(array(
	        'before_widget' =&gt; '<li class="widget %2$s">',
	        'after_widget' =&gt; '</li>',
	        'before_title' =&gt; '<h2 class="widgettitle">',
	        'after_title' =&gt; '</h2>',
	    ));
	*/
 
 
	if ( function_exists('register_sidebars') )
	/* nous avons 4 sidebars à disposition désormais */
	register_sidebars(4);

Créer les fichiers supplémentaires en respectant une nomenclature

Dans le thème par défaut, il existe un fichier sidebar.php. Il vous faut conserver le nom sidebar.php car ce fichier est appelé par la fonction get_sidebar();. Les fichiers suivants, contenant vos autres “sidebars” sont ensuite numérotés à partir de 2 ex sidebar2.php, sidebar3.php, sidebar4.php…etc.

Insérer le code dans un fichier de “sidebar” par exemple sidebar2.php

Il vous suffit d’indiquer le fichier de “sidebar” la condition suivante if ( function_exists('dynamic_sidebar') && dynamic_sidebar(2) ) : else : et de clore cette condition avec un endif;. C’est la mention dynamic_sidebar(2) qui permet l’appelle à la sidebar2.php, si nous avions eu dynamic_sidebar(4), on aurait eu un appel à sidebar4.php

Ci-dessous le code complet du fichier sidebar2.php, pour pouvoir voir déterminer qu’il s’agit bien de la sidebar2.php, on a placé un <h2 class="pagetitle">sidebar2.php</h2> en début de code.

Extrait de sidebar2.php

	<?php
	/**
	 * @package WordPress
	 * @subpackage Default_Theme
	 */
	?>
	<div>
		<h2 class="pagetitle">sidebar2.php</h2>
	<ul>
	<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(2) ) : else : ?>
		<!-- les widgets viennent ici -->
	<?php endif; ?>
	</ul>
	</div>

Jouer placé ou pas…

Libre à vous de placer vos “sidebars” additionnelles où vous le souhaitez. Dans notre exemple, on place sidebar2.php dans le fichier footer.php et sidebar3.php en “include” dans le fichier sidebar.php lui-même et enfin sidebar4.php en “include” dans le fichier index.php

Une vue complète de la sidebar de notre thème

sidebar.php qui correpsond à notre “sidebar1”

sidebar3.php inclus dans sidebar.php

sidebar4.php inclus dans index.php

sidebar2.php inclus dans footer.php

Manipuler les widgets par sidebar depuis l’admin

Comme le positionnement de votre contenu est factorisé dans des fichiers indépendants et adossé au moteur de widgets de WP, vous pouvez ensuite sélectionner facilement contenu et l’endroit qui vous convient pur le placer.

4 “sidebars” sont à votre disposition

contenu sibebar4

contenu sibebar3

contenu sibebar2

édition du widget contenu dans la sibebar2 inclus dans footer.php

contenu sibebar1

Un peu plus de code…

Extrait de sidebar.php

	<?php
	/**
	 * @package WordPress
	 * @subpackage Default_Theme
	 */
	?>
		<div id="sidebar">
			<h2 class="pagetitle">sidebar1.php</h2>
			<ul>
				<?php 	/* Widgetized sidebar, if you have the plugin installed. */
						if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : ?>
	<!-- la suite se trouve dans le fichier d'origine -->

Extrait de sidebar3.php

	<?php
	/**
	 * @package WordPress
	 * @subpackage Default_Theme
	 */
	?>
	<div>
		<h2 class="pagetitle">sidebar3.php</h2>
	<ul>
	<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(3) ) : else : ?>
		<!-- les widgets viennent ici -->
	<?php endif; ?>
	</ul>
	</div>

Extrait de sidebar4.php

	<?php
	/**
	 * @package WordPress
	 * @subpackage Default_Theme
	 */
	?>
	<div>
		<h2 class="pagetitle">sidebar4.php</h2>
	<ul>
	<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(4) ) : else : ?>
		<!-- les widgets viennent ici -->
	<?php endif; ?>
	</ul>
	</div>

extrait du code index.php, il s’agit de l’insertion de “sidebar4”

 
<?php get_sidebar(); ?>
 
<div id="sidebar">
 
<!-- insertion sidebar4.php -->
<?php include (TEMPLATEPATH . "/sidebar4.php"); ?>
	</div>
 
<?php get_footer(); ?>

extrait du code sidebar.php, il s’agit de l’insertion de “sidebar3”

 
<?php endif; ?>
</ul>
 
<!-- insertion sidebar3.php -->
<?php include (TEMPLATEPATH . "/sidebar3.php"); ?>
 
</div>

extrait du code footer.php, il s’agit de l’insertion de “sidebar2”

 
			<?php wp_footer(); ?>
 
 
	<div><?php include (TEMPLATEPATH . "/sidebar2.php"); ?></div>
	</body>
	</html>

Pour aller plus loin

• Une page de récapitulation sur comment “Widgetizing Themes”
  http://automattic.com/code/widgets/themes/
• Adding Extra Sidebar to your WordPress Theme
  http://www.blogohblog.com/adding-extra-sidebar-to-your-wordpress-theme/