current-menu-item von Anker-Menüeinträgen entfernen

Veröffentlicht: 20. November 2025 von Matze – Kommentar hinterlassen

Wenn du Links mit Ankern in deinen Menüs verwendest, ist dir vielleicht schon aufgefallen, dass sie automatisch die Klasse current-menu-item bekommen, was du eventuell nicht möchtest. Das kann besonders dann der Fall sein, wenn du ein Untermenü mit Ankern hast, die alle zu einer entsprechenden ID auf einer Unterseite verweisen. Das würde dann dazu führen, dass all diese Anker-Links durch die Klasse current-menu-item als aktiv markiert werden würden, wenn diese Unterseite aufgerufen wird.

Auch wenn Anker manuell im Menü gesetzt werden müssen, mag WordPress wohl keinen individuellen Inhalt, denn ähnlich wie bei 404-Seiten, bei denen WordPress nach Möglichkeit versucht, deren Anzeige zu vermeiden und lieber auf eine existierende, ähnlich klingende Seite weiterzuleiten, versucht es, individuelle Menüeinträge mit existierendem Inhalt zu verknüpfen. Wenn ich demnach eine Unterseite unter /unterseite/ habe und einen individuellen Link in meinem Menü mit diesem Pfad erstelle, wird er automatisch mit dieser Seite verknüpft und erhält auch alle entsprechenden Klassen im Menüeintrag. Und da für diese Erkennung Anker ignoriert werden, wird auch ein /unterseite/#anker als mit dieser Seite verknüpft erkannt.

In meinem Fall war das jedoch nicht gewünscht, da alle Untermenüpunkte mit einem Anker auch die Klasse current-menu-item erhielten und somit aus Designperspektive als aktiv markiert wurden. Deshalb habe ich ein kleines Code-Snippet erstellt, das prüft, ob ein Menüeintrag individuell angelegt wurde und einen Anker beinhaltet. Wenn das der Fall ist, entferne ich die Klasse current-menu-item von diesem Menüeintrag, wenn vorhanden. Das Ergebnis ist, dass Links mit Ankern nie die Klasse current-menu-item erhalten.

Das Code-Snippet:

/**
 * Remove classes from menu items.
 * 
 * @param	\WP_Post[]	$menu_items Menu items
 * @return	\WP_Post[] Updated menu items
 */
function epiphyt_remove_item_classes( array $menu_items ): array {
	foreach ( $menu_items as $menu_item ) {
		// remove class 'current-menu-item' if menu item is custom and contains an anchor
		if (
			$menu_item->type === 'custom'
			&& isset( $menu_item->url )
			&& \str_contains( $menu_item->url, '#' )
			&& ! empty( $menu_item->classes )
		) {
			$key = \array_search( 'current-menu-item', $menu_item->classes, true );
			
			if ( $key !== false ) {
				unset( $menu_item->classes[ $key ] );
			}
		}
	}
	
	return $menu_items;
}

\add_filter( 'wp_nav_menu_objects', 'epiphyt_remove_item_classes' );
Code-Sprache: PHP (php)