Como adicionar widgets de estilo com base em sua posição em uma área de widgets

Você está procurando uma maneira de criar widgets dinâmicos no WordPress? Embora provavelmente exista um plug-in para isso, criamos um trecho de código rápido que você pode usar para adicionar widgets de estilo com base na posição deles em uma área de widget no WordPress.

Instruções:

Tudo o que você precisa fazer é adicionar esse código ao arquivo functions.php do seu tema ou em um plugin específico do 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';
}

Esse código adicionará um wrapper div em torno de seus widgets e aplicará nomes de classe “widget-1st” e “widget-2nd” a eles. Agora, você pode direcionar esse widget em seu CSS: #mysidebar .widget-1st { background: red }.

Observação: Se esta é a primeira vez que você adiciona trechos de código no WordPress, consulte nosso guia sobre como adicionar corretamente trechos de código no WordPress para não danificar seu site acidentalmente.

Se você gostou desse snippet de código, considere dar uma olhada em nossos outros artigos no site, como: 10 melhores plug-ins do WordPress para desenvolvedores da Web e como salvar dados de formulários parciais no WordPress.