Como Adicionar Widgets de Estilo com Base em Sua Posição em uma Área de Widget

Você está procurando uma maneira de criar widgets dinâmicos no WordPress? Embora provavelmente exista um plugin para isso, criamos um pequeno trecho de código que você pode usar para adicionar estilos a widgets com base em sua posição em uma área de widget no WordPress.

Instruções:

Tudo o que você precisa fazer é adicionar este código ao arquivo functions.php do seu tema ou a 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';
}

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

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

Se você gostou deste trecho de código, considere conferir nossos outros artigos no site, como: 10 melhores plugins do WordPress para desenvolvedores web e como salvar dados parciais de formulário no WordPress.