Comment ajouter des widgets de style en fonction de leur position dans une zone de widgets ?

Vous cherchez un moyen de créer des widgets dynamiques dans WordPress ? Bien qu’il existe probablement un plugin pour cela, nous avons créé un extrait de code rapide que vous pouvez utiliser pour ajouter des widgets de style en fonction de leur position dans une zone de widget dans WordPress.

Instructions:

Tout ce que vous avez à faire est d’ajouter ce code au fichier functions.php de votre thème ou dans un plugin spécifique à votre site:

function widget_position_style_dynamic_sidebar_params( $params ) {
	if( is_admin() )
		return $params;

	$widgets = wp_get_sidebars_widgets();
	$area = $params[0]['id'];
	$order = array_search( $params[0]['widget_id'], $widgets[$area] ) + 1;
	$params[0]['before_widget'] = '<div class="widget-'. ordinal( $order ) .'">' . $params[0]['before_widget'];
	$params[0]['after_widget'] .= '</div>';
	return $params;
}
add_filter( 'dynamic_sidebar_params', 'widget_position_style_dynamic_sidebar_params' );

function ordinal( $num ) {
	// Special case "teenth"
	if ( ($num / 10) % 10 != 1 ) {
		// Handle 1st, 2nd, 3rd
		switch( $num % 10 ) {
			case 1: return $num . 'st';
			case 2: return $num . 'nd';
			case 3: return $num . 'rd';
		}
	}
	// Everything else is "nth"
	return $num . 'th';
}

Ce code ajoutera une div enveloppante autour de vos widgets et leur appliquera les noms de classe “widget-1st”, “widget-2nd”. Vous pouvez maintenant cibler ce widget dans votre CSS : #mysidebar .widget-1st { background : red }.

Note : Si c’est la première fois que vous ajoutez des extraits de code dans WordPress, veuillez consulter notre guide sur la manière d’ajouter correctement des extraits de code dans WordPress, afin de ne pas endommager accidentellement votre site.

Si vous avez aimé cet extrait de code, n’hésitez pas à consulter nos autres articles sur le site comme : 10 meilleurs plugins WordPress pour les développeurs web et comment sauvegarder les données d’un formulaire partiel dans WordPress.