Cómo añadir widgets de estilo en función de su posición en un área de widgets

¿Estás buscando una forma de crear widgets dinámicos en WordPress? Si bien es probable que haya un plugin para esto, hemos creado un fragmento de código rápido que puede utilizar para añadir widgets de estilo en función de su posición en un área de widgets en WordPress.

Instrucciones:

Todo lo que tienes que hacer es añadir este código al archivo functions.php de tu tema o en un plugin específico del sitio:

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

Este código añadirá un div envolvente alrededor de tus widgets y les aplicará los nombres de clase ‘widget-1st’, ‘widget-2nd’. Ahora, puedes apuntar a ese widget en tu CSS: #mysidebar .widget-1st { fondo: rojo }.

Nota: Si es la primera vez que añades fragmentos de código en WordPress, consulta nuestra guía sobre cómo añadir correctamente fragmentos de código en WordPress, para no romper accidentalmente tu sitio.

Si le gustó este fragmento de código, por favor considere revisar nuestros otros artículos en el sitio como: 10 mejores plugins de WordPress para desarrolladores web y cómo guardar datos parciales de formularios en WordPress.