Come aggiungere widget di stile in base alla loro posizione in un'area widget

Stai cercando un modo per creare widget dinamici in WordPress? Sebbene esista probabilmente un plugin per questo, abbiamo creato un rapido snippet di codice che puoi utilizzare per aggiungere widget di stile in base alla loro posizione in un'area widget in WordPress.

Istruzioni:

Tutto quello che devi fare è aggiungere questo codice al file functions.php del tuo tema o in un plugin specifico per il sito:

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';
}

Questo codice aggiungerà un div wrapper attorno ai tuoi widget e applicherà loro i nomi di classe 'widget-1st', 'widget-2nd'. Ora, puoi indirizzare quel widget nel tuo CSS: #mysidebar .widget-1st { background: red }.

Nota: Se questa è la prima volta che aggiungi snippet di codice in WordPress, consulta la nostra guida su come aggiungere correttamente snippet di codice in WordPress, in modo da non compromettere accidentalmente il tuo sito.

Se ti è piaciuto questo snippet di codice, prendi in considerazione la lettura dei nostri altri articoli sul sito come: 10 migliori plugin WordPress per sviluppatori web e come salvare dati parziali dei moduli in WordPress.