Contenu principal
Widgets order

WordPress : changer l’ordre des widgets selon le contexte

Un outil très utilisé dans un CMS comme WordPress, c’est le widget. Nous disposons d’une ou plusieurs « zones widgetisables » (ou sidebar) selon le thème employé et ainsi nous pouvons faire varier l’ordre ou l’affichage de ces widgets. Aujourd’hui je vais vous montrer comment changer l’ordre de ces widgets selon la page affichée, en n’ayant qu’une seule sidebar.

Exemple&#160: faire remonter le formulaire de recherche

Comme nos besoins sont différents, je vais tenter de vous montrer ma méthode par un exemple assez simple.
Nous sommes sur un site où il n’y a qu’une seule sidebar (dans notre cas, une barre latérale verticale, comme c’est souvent le cas), contenant plusieurs widgets. L’un d’eux est le formulaire de recherche et je l’ai disposé vers le milieu car ce n’est pas l’information la plus importante quand on navigue dans le site. En revanche là où il sera le plus important c’est quand nous sommes sur la page des résultats de recherche ou sur la page 404. Ainsi, remonter ce formulaire tout en haut serait un gain au niveau ergonomie selon moi.

Pour changer cet ordre il nous faut d’abord savoir comment récupérer cet ordre : autrement dit, récupérer les widgets de cette sidebar. Pour cela WordPress dispose de la fonction wp_get_sidebars_widgets() qui retourne un tableau php des widgets affichés dans chaque sidebar, et même ceux inutilisés. Nous avons de la chance (à moins que ce soit fait exprès ? ^^) un hook est à notre disposition dans cette fonction. En fait WordPress utilise cette fonction pour afficher les widgets donc nous allons utiliser ce hook pour modifier l’ordre.

Avant de commencer

Il nous faut connaitre l’identifiant de la sidebar qui nous intéresse. Pour le savoir, il faut aller dans le fichier functions.php du thème et chercher la fonction register_sidebar(). Normalement vous devriez avoir quelque chose qui ressemble à ça :

01020304050607080910

if ( function_exists('register_sidebar') ) {
	register_sidebar(array(
		'name'		=> __('Right Sidebar', 'mon-theme' ),
		'id'		=> 'sidebar-1',
		'before_widget'	=> '<aside id="%1$s" class="widget clearfix %2$s" role="complementary">',
		'after_widget'	=> '</aside>',
		'before_title'	=> '<h3 class="widget-title">',
		'after_title'	=> '</h3>',
	));
}

La ligne qui nous intéresse c’est ‘id’. Ce ‘sidebar-1’ nous sera donc utile pour la suite.

Où placer le code que nous allons créer ?
Il y a deux possibilités&#160: dans le fichier functions.php du thème ou directement dans le fichier qui affiche la sidebar, juste avant dynamic_sidebar( 'sidebar-1' ); (selon le thème bien sûr, en général il s’agit de sidebar.php). Perso j’ai choisi sidebar.php.

Mise en place du hook

Le hook qui nous intéresse s’appelle ‘sidebars_widgets’ et il s’agit d’un filtre.

1234567

add_filter('sidebars_widgets', 'search_widget_on_top');
function search_widget_on_top($sidebars_widgets = array()) {

	// Nous allons bosser ici

	return $sidebars_widgets;
}

En premier lieu il nous faut :
– vérifier que nous sommes sur la page de recherche ou sur la 404,
– vérifier que la sidebar ‘sidebar-1’ existe bien dans le tableau php,
– vérifier que cette sidebar comporte plus d’un widget (bah oui, si elle a 0 ou 1 widget, on sert à rien).
Nous vérifions ça d’un seul coup avec un if.

123456789

add_filter('sidebars_widgets', 'search_widget_on_top');
function search_widget_on_top($sidebars_widgets = array()) {
	if ( (is_404() || is_search()) && isset($sidebars_widgets['sidebar-1']) && count($sidebars_widgets['sidebar-1']) > 1 ) {

		// Nous allons bosser ici

	}
	return $sidebars_widgets;
}

Le tableau php contenu dans $sidebars_widgets['sidebar-1'] est sous la forme suivante&#160:

123456

array (
	0 => 'widget-machin',
	1 => 'widget-truc',
	2 => 'widget-poney',
	3 => 'widget-nyan'
)

Le widget de recherche s’appelle ‘search-quelquechose’, le « quelquechose » étant un chiffre qui diffère d’une sidebar à l’autre.
Il faut donc chercher dans le tableau une case contenant le texte « search-« .

01020304050607080910111213

add_filter('sidebars_widgets', 'search_widget_on_top');
function search_widget_on_top($sidebars_widgets = array()) {
	if ( (is_404() || is_search()) && isset($sidebars_widgets['sidebar-1']) && count($sidebars_widgets['sidebar-1']) > 1 ) {
		for ($i=0;$i<count($sidebars_widgets['sidebar-1']);$i++) {
			if ( strpos($sidebars_widgets['sidebar-1'][$i], 'search-') === 0 ) {

				// Nous changeons l'ordre ici

			}
		}
	}
	return $sidebars_widgets;
}

Voilà, le for boucle dans le tableau et strpos cherche une chaine de texte commençant par « search-« .

L’étape suivante consiste à enregistrer dans une variable la valeur trouvée, détruire l’originale dans le tableau, et enfin replacer cette valeur au début.

0102030405060708091011121314

add_filter('sidebars_widgets', 'search_widget_on_top');
function search_widget_on_top($sidebars_widgets = array()) {
	if ( (is_404() || is_search()) && isset($sidebars_widgets['sidebar-1']) && count($sidebars_widgets['sidebar-1']) > 1 ) {
		for ($i=0;$i<count($sidebars_widgets['sidebar-1']);$i++) {
			if ( strpos($sidebars_widgets['sidebar-1'][$i], 'search-') === 0 ) {
				$search_widget = $sidebars_widgets['sidebar-1'][$i];
				unset($sidebars_widgets['sidebar-1'][$i]);
				array_unshift($sidebars_widgets['sidebar-1'], $search_widget);
				break;
			}
		}
	}
	return $sidebars_widgets;
}

Nota : le break à la fin évite de poursuivre la boucle for inutilement lorsque nous avons trouvé ce que nous cherchions.
Nota 2 : array_unshift() permet d’insérer une valeur en début de tableau et par la même occasion ré-indexe les clés de ce tableau. Ça tombe bien ça nous évite de faire un array_values() par la suite.

Conclusion

Vous savez maintenant où chercher pour modifier ponctuellement l’affichage de widgets dans une ou plusieurs sidebars selon la page affichée.
Pour d’autres applications ou idées, vous êtes seul maitre maintenant :D

L’autre méthode consisterait à créer plusieurs sidebars qui, elles, seraient affichées selon le contexte. Mais du coup, nous nous retrouvons face à une multiplication de sidebars et de widgets parfois inutiles, et il faut tout de même modifier le thème (à moins d’avoir un thème ***tousse***Premium***tousse*** qui prévoit ceci). Dans le cas présenté, il me parait plus simple d’utiliser la méthode d’aujourd’hui. A vous de voir ;)

See ya!