Cum să adăugați widgeturi de stilizare în funcție de poziția lor într-o zonă de widgeturi

Cauți o modalitate de a crea widgeturi dinamice în WordPress? Deși probabil există un plugin pentru asta, am creat o scurtă secțiune de cod pe care o poți folosi pentru a adăuga stiluri widgeturilor în funcție de poziția lor într-o zonă de widgeturi în WordPress.

Instrucțiuni:

Tot ce trebuie să faceți este să adăugați acest cod în fișierul functions.php al temei dvs. sau într-un plugin specific site-ului:

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

Acest cod va adăuga un div wrapper în jurul widgeturilor tale și le va aplica clasele „widget-1st”, „widget-2nd”. Acum, poți viza acel widget în CSS-ul tău: #mysidebar .widget-1st { background: red }.

Notă: Dacă aceasta este prima dată când adăugați fragmente de cod în WordPress, consultați ghidul nostru despre cum să adăugați corect fragmente de cod în WordPress, pentru a nu vă defecta accidental site-ul.

Dacă v-a plăcut această secvență de cod, vă rugăm să luați în considerare citirea altor articole de pe site, cum ar fi: cele mai bune 10 plugin-uri WordPress pentru dezvoltatori web și cum să salvați date parțiale din formulare în WordPress.