Im Navigationsblock des Block-Editors in WordPress kannst du auswählen, ob der Button für das mobile Menü als Text oder Icon angezeigt wird, aber nicht beides gleichzeitig. Um sowohl ein Icon als auch Text daneben anzuzeigen, musst du diesen Inhalt manuell zu dem Button hinzufügen.

Das gilt sowohl für den Menü-Button, um das mobile Menü zu öffnen, als auch für den Button, um es wieder zu schließen.

In meinem Fall möchte ich den Text „Menü“ vor das Menü-Icon und „Schließen“ vor das Schließen-Icon setzen. Um das zu tun, verwende ich den Filter render_block_core/navigation und füge die Text-Nodes über PHPs DOMDocument hinzu.

/**
 * Add a text to the mobile navigation buttons.
 * 
 * @param	string	$block_content Block content
 * @return	string Updated block content
 */
function my_add_button_text( string $block_content ): string {
	\libxml_use_internal_errors( true );
	
	$dom = new \DOMDocument();
	$dom->loadHTML(
		'<html><meta charset="utf-8">' . $block_content . '</html>',
		LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD
	);
	$has_changed = false;
	
	foreach ( $dom->getElementsByTagName( 'button' ) as $button_element ) {
		$text = '';
		
		if ( \str_contains( $button_element->getAttribute( 'class' ), 'wp-block-navigation__responsive-container-open' ) ) {
			$text = $dom->createTextNode( \esc_html__( 'Menu', 'my-textdomain' ) );
		}
		else if ( \str_contains( $button_element->getAttribute( 'class' ), 'wp-block-navigation__responsive-container-close' ) ) {
			$text = $dom->createTextNode( \esc_html__( 'Close', 'my-textdomain' ) );
		}
		
		if ( $text ) {
			$button_element->appendChild( $text );
			$has_changed = true;
		}
	}
	
	if ( $has_changed ) {
		$block_content = $dom->saveHTML( $dom->documentElement->firstChild->nextSibling ); // phpcs:ignore WordPress.NamingConventions.ValidVariableName.UsedPropertyNotSnakeCase
	}
	
	\libxml_use_internal_errors( false );
	
	return $block_content;
}

\add_filter( 'render_block_core/navigation', 'my_add_button_text' );
Code-Sprache: PHP (php)

Da das Design dafür nicht richtig vorbereitet ist, benötigst du noch etwas CSS, um es zu verbessern:

.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	align-items: center;
	flex-direction: row-reverse;
	gap: .3em;
}

.wp-block-navigation__responsive-container-close {
	display: flex;
}Code-Sprache: CSS (css)

Und das war’s, du hast nun den gewünschten Text neben den Menü-Icons.

Menü-Icon mit dem Text „Menu“ daneben
Kreuz-Icon mit dem Text „Close“ daneben

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert