Menü-Beschreibungen in WordPress-Themes hinzufügen

13 hours ago, WordPress Themes, Views

Einführung: Warum Menü-Beschreibungen in WordPress wichtig sind

Die Navigation ist ein entscheidender Faktor für die Benutzerfreundlichkeit einer Website. Klare und intuitive Menüs helfen Besuchern, sich schnell zurechtzufinden und die gesuchten Inhalte zu finden. Während WordPress-Menüs standardmäßig nur den Titel der Seite oder des Beitrags anzeigen, kann das Hinzufügen von Menü-Beschreibungen die Navigation erheblich verbessern, besonders auf Websites mit vielen Inhalten oder komplexen Strukturen. In Deutschland, wo viele Unternehmen Wert auf detaillierte Information und klare Kommunikation legen, können Menü-Beschreibungen einen echten Mehrwert bieten.

Menü-Beschreibungen sind kurze, erklärende Texte, die unter oder neben dem Menütitel angezeigt werden. Sie geben dem Benutzer einen Hinweis darauf, was ihn erwartet, wenn er auf den Menüpunkt klickt. Dies ist besonders nützlich für:

Unklare Menütitel: Manchmal sind Titel allein nicht ausreichend, um den Inhalt der Seite zu beschreiben.
Komplexe Themen: Bei Themen, die schwer zu erfassen sind, können Beschreibungen für Klarheit sorgen.
Marketing: Beschreibungen können verwendet werden, um bestimmte Produkte oder Dienstleistungen hervorzuheben.

In diesem Artikel werden wir verschiedene Methoden untersuchen, wie man Menü-Beschreibungen in WordPress-Themes in Deutschland hinzufügen kann, einschließlich der Verwendung von Plugins, der Bearbeitung des Themes und der Erstellung eines eigenen Menü-Walkers.

Methode 1: Die Verwendung von WordPress Plugins

Der einfachste Weg, Menü-Beschreibungen hinzuzufügen, ist die Verwendung eines WordPress-Plugins. Es gibt mehrere Plugins, die diese Funktionalität bieten, oft zusammen mit anderen Menüverbesserungen. Hier sind einige beliebte Optionen:

Menu Descriptions: Dieses einfache Plugin fügt ein Beschreibungsfeld zu jedem Menüpunkt hinzu, das dann im Frontend angezeigt wird.
Max Mega Menu: Ein umfangreiches Mega-Menü-Plugin, das auch die Möglichkeit bietet, Beschreibungen und andere Inhalte zu Menüpunkten hinzuzufügen.
WP Mega Menu: Eine weitere beliebte Mega-Menü-Lösung, die ähnliche Funktionen wie Max Mega Menu bietet.

Schritte zur Verwendung eines Plugins:

Plugin installieren und aktivieren: Suchen Sie im WordPress-Dashboard unter “Plugins” nach dem gewünschten Plugin und installieren und aktivieren Sie es.
Menü bearbeiten: Gehen Sie zu “Design” -> “Menüs”. Sie sollten jetzt ein zusätzliches Feld “Beschreibung” für jeden Menüpunkt sehen.
Beschreibungen hinzufügen: Geben Sie die gewünschte Beschreibung in das Feld ein. Achten Sie darauf, dass die Beschreibung kurz und prägnant ist.
Menü speichern: Speichern Sie die Änderungen am Menü.
Frontend überprüfen: Überprüfen Sie Ihre Website im Frontend, um sicherzustellen, dass die Beschreibungen korrekt angezeigt werden. Das genaue Aussehen hängt vom Theme und dem verwendeten Plugin ab.

Die Vorteile der Verwendung eines Plugins sind die einfache Installation und Konfiguration. Es sind keine Programmierkenntnisse erforderlich. Der Nachteil ist, dass Plugins die Leistung der Website beeinträchtigen können und möglicherweise nicht mit allen Themes kompatibel sind.

Methode 2: Das Theme bearbeiten (functions.php)

Eine weitere Möglichkeit, Menü-Beschreibungen hinzuzufügen, ist die Bearbeitung der Datei functions.php Ihres WordPress-Themes. Diese Methode erfordert Programmierkenntnisse in PHP und HTML. Es ist wichtig, ein Backup Ihres Themes zu erstellen, bevor Sie Änderungen vornehmen, da Fehler die Website beschädigen können. In Deutschland, wo Datenschutzrichtlinien streng sind, ist es auch ratsam sicherzustellen, dass alle Änderungen den geltenden Bestimmungen entsprechen.

Schritte zur Bearbeitung der functions.php:

Theme-Datei finden: Finden Sie die Datei functions.php in Ihrem Theme-Ordner. Sie können dies über den WordPress-Theme-Editor (unter “Design” -> “Theme-Editor”) oder über einen FTP-Client tun.
Code hinzufügen: Fügen Sie den folgenden Code in die Datei functions.php ein. Dieser Code fügt ein Beschreibungsfeld zu den Menüpunkten im WordPress-Backend hinzu:


add_filter( 'wp_setup_nav_menu_item', 'add_description_to_menu_item' );
function add_description_to_menu_item( $menu_item ) {
    $menu_item->description = get_post_meta( $menu_item->ID, '_menu_item_description', true );
    return $menu_item;
}

add_action( 'wp_update_nav_menu_item', 'update_description_field', 10, 3 );
function update_description_field( $menu_id, $menu_item_db_id, $args ) {
    if ( isset( $_POST['menu-item-description'][$menu_item_db_id] ) ) {
        $sanitized_description = wp_kses_post( $_POST['menu-item-description'][$menu_item_db_id] );
        update_post_meta( $menu_item_db_id, '_menu_item_description', $sanitized_description );
    } else {
        delete_post_meta( $menu_item_db_id, '_menu_item_description' );
    }
}

add_action( 'admin_init', 'add_description_field' );
function add_description_field() {
    add_meta_box(
        'nav_menu_item_description',
        'Menü Beschreibung',
        'description_field',
        'nav-menus',
        'side',
        'default'
    );
}

function description_field( $item_id ) {
    $description = get_post_meta( $item_id, '_menu_item_description', true );
    ?>
    
        <label for="edit-menu-item-description-">
            Beschreibung

            <textarea id="edit-menu-item-description-" class="widefat edit-menu-item-description" rows="3" cols="20" name="menu-item-description[]">
            

            Beschreibung des Menüpunkts.
        
    
    <?php
}

Menü bearbeiten: Gehen Sie zu “Design” -> “Menüs”. Sie sollten jetzt ein Beschreibungsfeld für jeden Menüpunkt sehen.
Beschreibungen hinzufügen: Geben Sie die gewünschte Beschreibung in das Feld ein.
Menü speichern: Speichern Sie die Änderungen am Menü.
Frontend überprüfen: Dieser Code fügt das Beschreibungsfeld hinzu, aber er zeigt die Beschreibung noch nicht im Frontend an. Dafür muss das Theme bearbeitet werden (siehe nächster Schritt).
Theme-Template bearbeiten: Um die Beschreibung im Frontend anzuzeigen, müssen Sie das Theme-Template bearbeiten, das für die Menüausgabe verantwortlich ist. Dies ist in der Regel die Datei wp_nav_menu() in der header.php oder einer ähnlichen Datei. Die genaue Vorgehensweise hängt von Ihrem Theme ab. Sie müssen den Code anpassen, um die Beschreibung aus dem $item-Objekt abzurufen und anzuzeigen. Beispiel:


<a href="<?php echo esc_url( $item->url ); ?>">
    <?php echo esc_html( $item->title ); ?>
    <?php if ( ! empty( $item->description ) ) : ?>
        <span class="menu-description"><?php echo esc_html( $item->description ); ?></span>
    <?php endif; ?>
</a>

Dieser Code überprüft, ob eine Beschreibung vorhanden ist, und zeigt sie dann innerhalb eines span-Elements mit der Klasse menu-description an. Sie können diese Klasse dann in Ihrem CSS-Stil definieren, um das Aussehen der Beschreibung anzupassen.

Die Vorteile dieser Methode sind, dass sie ohne Plugins auskommt und mehr Kontrolle über das Aussehen und die Funktionalität bietet. Die Nachteile sind, dass Programmierkenntnisse erforderlich sind und dass Änderungen beim Theme-Update verloren gehen können. Um dies zu vermeiden, sollte ein Child-Theme verwendet werden.

Methode 3: Einen eigenen Menü-Walker erstellen

Eine fortgeschrittenere Methode ist die Erstellung eines eigenen Menü-Walkers. Ein Menü-Walker ist eine Klasse, die die Menüstruktur durchläuft und die einzelnen Menüpunkte rendert. Dies bietet maximale Flexibilität und Kontrolle über die Menüausgabe.

Schritte zur Erstellung eines eigenen Menü-Walkers:

Walker-Klasse erstellen: Erstellen Sie eine neue PHP-Klasse, die von der Walker_Nav_Menu-Klasse erbt. Diese Klasse muss die Methode start_el() überschreiben, um die Ausgabe der einzelnen Menüpunkte anzupassen.


class Description_Walker extends Walker_Nav_Menu {
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        $indent = ( $depth ) ? str_repeat( "t", $depth ) : '';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = 'menu-item-' . $item->ID;

        $args = apply_filters( 'nav_menu_item_args', $args, $item, $depth );

        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );
        $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

        $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args, $depth );
        $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

        $output .= $indent . '<li' . $id . $class_names .'>';

        $atts = array();
        $atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
        $atts['target'] = ! empty( $item->target )     ? $item->target     : '';
        $atts['rel']    = ! empty( $item->xfn )        ? $item->xfn        : '';
        $atts['href']   = ! empty( $item->url )        ? $item->url        : '';

        $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );

        $attributes = '';
        foreach ( $atts as $attr => $value ) {
            if ( ! empty( $value ) ) {
                $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
                $attributes .= ' ' . $attr . '="' . $value . '"';
            }
        }

        $title = apply_filters( 'the_title', $item->title, $item->ID );

        $title = apply_filters( 'nav_menu_item_title', $title, $item, $args, $depth );

        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before . $title . $args->link_after;
        $item_output .= '</a>';
        if ( ! empty( $item->description ) ) {
            $item_output .= '<span class="menu-description">' . esc_html( $item->description ) . '</span>';
        }
        $item_output .= $args->after;

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
}

Walker-Klasse registrieren: Fügen Sie den Code der Klasse in Ihre functions.php-Datei (oder eine separate Datei, die in functions.php included wird) ein.
Menü aufrufen: Verwenden Sie die Funktion wp_nav_menu(), um das Menü anzuzeigen, und übergeben Sie die Klasse Ihres Walkers als Argument:


<?php
wp_nav_menu( array(
    'theme_location' => 'primary', // oder eine andere Theme-Location
    'walker' => new Description_Walker(),
) );
?>

Diese Methode bietet die größte Flexibilität, ist aber auch die komplexeste. Sie erfordert fundierte Programmierkenntnisse in PHP und HTML. Der Vorteil ist, dass Sie die Menüausgabe vollständig kontrollieren können und sicherstellen, dass sie perfekt zu Ihrem Design passt.

Best Practices für Menü-Beschreibungen in Deutschland

Bei der Verwendung von Menü-Beschreibungen in Deutschland sollten Sie folgende Best Practices beachten:

Klare und prägnante Sprache: Verwenden Sie eine einfache und leicht verständliche Sprache. Vermeiden Sie Fachjargon und lange Sätze.
Relevanz: Stellen Sie sicher, dass die Beschreibung relevant für den Inhalt der Seite ist. Sie sollte dem Benutzer eine klare Vorstellung davon geben, was ihn erwartet.
SEO: Verwenden Sie relevante Keywords in Ihren Beschreibungen, um die Suchmaschinenoptimierung zu verbessern.

Achten Sie außerdem auf die Einhaltung der geltenden Datenschutzbestimmungen (DSGVO) bei der Speicherung und Verarbeitung von Daten im Zusammenhang mit Menüpunkten und deren Beschreibungen.

Fazit

Das Hinzufügen von Menü-Beschreibungen zu WordPress-Themes kann die Benutzerfreundlichkeit einer Website erheblich verbessern. In Deutschland, wo Wert auf Detailgenauigkeit und Transparenz gelegt wird, kann dies einen entscheidenden Wettbewerbsvorteil darstellen. Es gibt verschiedene Methoden, um Menü-Beschreibungen hinzuzufügen, von einfachen Plugins bis hin zu komplexen eigenen Menü-Walkern. Die Wahl der Methode hängt von Ihren Programmierkenntnissen und den spezifischen Anforderungen Ihres Projekts ab. Unabhängig von der gewählten Methode ist es wichtig, die Best Practices zu beachten, um sicherzustellen, dass die Beschreibungen effektiv und relevant sind.

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa