So fügen Sie Widgets basierend auf ihrer Position in einem Widget-Bereich Styling hinzu

Suchen Sie nach einer Möglichkeit, dynamische Widgets in WordPress zu erstellen? Es gibt wahrscheinlich ein Plugin dafür, aber wir haben einen schnellen Code-Schnipsel erstellt, den Sie verwenden können, um Styling-Widgets basierend auf ihrer Position in einem Widget-Bereich in WordPress hinzuzufügen.

Anweisungen:

Sie müssen diesen Code nur zur functions.php-Datei Ihres Themes oder in ein websitespezifisches Plugin einfügen:

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

Dieser Code fügt eine Wrapper-Div um Ihre Widgets hinzu und wendet die Klassennamen ‚widget-1st‘ und ‚widget-2nd‘ auf sie an. Jetzt können Sie dieses Widget in Ihrem CSS ansprechen: #mysidebar .widget-1st { background: red }.

Hinweis: Wenn Sie zum ersten Mal Code-Schnipsel in WordPress hinzufügen, lesen Sie bitte unseren Leitfaden, wie Sie Code-Schnipsel richtig in WordPress hinzufügen, damit Sie Ihre Website nicht versehentlich beschädigen.

Wenn Ihnen dieser Code-Schnipsel gefallen hat, sollten Sie sich unsere anderen Artikel auf der Website ansehen, wie z. B.: Die 10 besten WordPress-Plugins für Webentwickler und So speichern Sie teilweise Formular Daten in WordPress.