Titel in WordPress-Menüs ohne Verlinkung hinzufügen

WordPress-Menüs sind ein wesentlicher Bestandteil jeder Website und ermöglichen es Besuchern, sich einfach zu navigieren. Oftmals benötigt man jedoch nur einen Titel oder eine Überschrift in einem Menü, ohne dass dieser mit einer Seite oder einem Beitrag verlinkt ist. Dies kann nützlich sein, um Menüpunkte zu gruppieren oder klare Abschnitte zu erstellen. In diesem Artikel werden wir verschiedene Methoden untersuchen, wie Sie Titel ohne Verlinkung zu Ihren WordPress-Menüs hinzufügen können.

Warum Titel ohne Verlinkung in Menüs sinnvoll sind

Es gibt verschiedene Gründe, warum Sie einen Titel ohne Link in Ihrem WordPress-Menü wünschen könnten:

• Menüstrukturierung: Um logische Abschnitte innerhalb des Menüs zu schaffen und die Benutzerfreundlichkeit zu verbessern.
• Klarheit für komplexe Menüs: Bei umfangreichen Menüs helfen Titel, die Navigation zu erleichtern und die Übersicht zu bewahren.
• Visuelle Trennung: Um Menüpunkte optisch voneinander abzugrenzen und eine klarere Navigation zu ermöglichen.

Methode 1: Benutzerdefinierte Links verwenden

Eine einfache Möglichkeit, einen Titel ohne Link hinzuzufügen, ist die Verwendung eines benutzerdefinierten Links mit einem ungültigen Linkziel. Dies ist eine gängige und effektive Methode.

Schritte zur Implementierung

1. Gehen Sie in Ihrem WordPress-Dashboard zu Design -> Menüs.
2. Wählen Sie das Menü aus, das Sie bearbeiten möchten.
3. Klicken Sie im linken Bereich auf Benutzerdefinierte Links.
4. Geben Sie im Feld URL ein Rautenzeichen (#) oder eine andere ungültige URL wie javascript:void(0); ein.
5. Geben Sie im Feld Link-Text den gewünschten Titel ein.
6. Klicken Sie auf Zum Menü hinzufügen.
7. Ordnen Sie den Titel im Menü an der gewünschten Position an.
8. Klicken Sie auf Menü speichern.

Vor- und Nachteile

• Vorteile: Einfach und schnell umzusetzen, benötigt keine zusätzlichen Plugins.
• Nachteile: Der Titel ist technisch gesehen ein Link, der jedoch keine Seite aufruft. Dies kann für Suchmaschinen verwirrend sein, ist aber in der Praxis meist unproblematisch.

Methode 2: Ein Plugin verwenden

Für komplexere Anforderungen oder um zusätzliche Funktionen zu erhalten, können Sie ein WordPress-Plugin verwenden. Es gibt verschiedene Plugins, die das Hinzufügen von Menü-Headings ohne Links vereinfachen.

Beispiel: “Page Menu Heading” Plugin

Das “Page Menu Heading” Plugin ist ein einfaches und effektives Plugin, um Menü-Headings zu erstellen.

Schritte zur Verwendung des Plugins

1. Installieren und aktivieren Sie das “Page Menu Heading” Plugin aus dem WordPress-Plugin-Verzeichnis.
2. Gehen Sie zu Design -> Menüs.
3. Sie sollten nun im linken Bereich einen neuen Menüpunkt namens “Menu Heading” sehen.
4. Klicken Sie auf “Menu Heading”, geben Sie den gewünschten Titel ein und klicken Sie auf “Zum Menü hinzufügen”.
5. Ordnen Sie den Titel im Menü an der gewünschten Position an.
6. Klicken Sie auf Menü speichern.

Vor- und Nachteile

• Vorteile: Spezifisch für die Erstellung von Menü-Headings, einfach zu bedienen.
• Nachteile: Benötigt ein zusätzliches Plugin, das möglicherweise regelmäßige Updates benötigt.

Weitere Plugin-Alternativen

Einige andere Plugins, die ähnliche Funktionalität bieten, sind:

• WP Mega Menu (bietet umfassende Mega-Menü-Funktionen, einschließlich der Möglichkeit, Menü-Headings zu erstellen)
• Max Mega Menu (ähnlich wie WP Mega Menu, mit zusätzlichen Anpassungsoptionen)

Methode 3: Eigene Funktion im Theme hinzufügen (für Entwickler)

Wenn Sie über Programmierkenntnisse verfügen, können Sie eine eigene Funktion in Ihrem Theme hinzufügen, um Menü-Headings zu erstellen. Dies bietet Ihnen die größte Flexibilität und Kontrolle.

Schritte zur Implementierung

1. Öffnen Sie die functions.php-Datei Ihres Themes (oder eines Child-Themes, um Updatesicher zu sein).
2. Fügen Sie den folgenden Code hinzu:

       
         function add_menu_heading( $items, $args ) {
           foreach ( $items as &$item ) {
             if ( $item->url == '#' && substr( $item->title, 0, 1 ) === '!' ) {
               $item->title = substr( $item->title, 1 );
               $item->classes[] = 'menu-heading';
               $item->url = ''; // Entfernt den Link
               $item->attr_title = ''; // Entfernt den title Attribut
             }
           }
           return $items;
         }
         add_filter( 'wp_nav_menu_objects', 'add_menu_heading', 10, 2 );
       
       

3. Erklären Sie den Code: Die Funktion add_menu_heading filtert die Menüobjekte. Wenn die URL ‘#’ ist UND der Titel mit einem Ausrufezeichen (!) beginnt, wird das Ausrufezeichen entfernt, die CSS-Klasse ‘menu-heading’ hinzugefügt und die URL entfernt, wodurch der Link deaktiviert wird.
4. Fügen Sie in Ihrem CSS-Datei (style.css oder eine separate CSS-Datei für Ihr Theme) Stile für die Klasse .menu-heading hinzu. Zum Beispiel:

       
         .menu-heading {
           font-weight: bold; /* Macht den Titel fett */
           cursor: default; /* Ändert den Cursor in einen Standard-Cursor */
           pointer-events: none; /* Verhindert jegliche Interaktion */
         }
       
       

5. Gehen Sie zu Design -> Menüs.
6. Fügen Sie einen benutzerdefinierten Link mit der URL ‘#’ hinzu.
7. Geben Sie als Link-Text !Ihr Titel ein (ersetzen Sie “Ihr Titel” durch den gewünschten Titel). Das Ausrufezeichen signalisiert der Funktion, dass dies ein Menü-Heading ist.
8. Fügen Sie den Titel zum Menü hinzu, ordnen Sie ihn an und speichern Sie das Menü.

Vor- und Nachteile

• Vorteile: Bietet maximale Kontrolle und Flexibilität, benötigt kein zusätzliches Plugin.
• Nachteile: Erfordert Programmierkenntnisse, erfordert die Bearbeitung von Theme-Dateien (Child-Theme empfohlen).

Methode 4: HTML-Code im Menü-Label verwenden (mit Vorsicht)

Eine weitere Methode, die jedoch mit Vorsicht angewendet werden sollte, ist das Einfügen von einfachem HTML-Code direkt in das Menü-Label. Dies kann verwendet werden, um ein <span>-Tag um den Titel zu legen und diesem Tag CSS-Klassen zuzuweisen.

Schritte zur Implementierung

1. Gehen Sie zu Design -> Menüs.
2. Aktivieren Sie in den “Ansicht-Optionen” (oben rechts auf der Seite) das Feld “Titel-Attribute”.
3. Fügen Sie einen benutzerdefinierten Link mit der URL ‘#’ hinzu.
4. Geben Sie als Link-Text Folgendes ein: <span class="menu-heading">Ihr Titel</span> (ersetzen Sie “Ihr Titel” durch den gewünschten Titel).
5. Fügen Sie den Titel zum Menü hinzu, ordnen Sie ihn an und speichern Sie das Menü.
6. Fügen Sie in Ihrer CSS-Datei Stile für die Klasse .menu-heading hinzu (wie in Methode 3 beschrieben).

Vor- und Nachteile

• Vorteile: Kann ohne Plugin oder Theme-Änderung funktionieren (aber das Aktivieren der “Titel-Attribute” ist erforderlich).
• Nachteile: Nicht immer zuverlässig, da WordPress den HTML-Code im Menü-Label filtern kann. Es kann zu unerwarteten Ergebnissen führen, insbesondere bei komplexeren HTML-Strukturen. Wird im Allgemeinen NICHT empfohlen.

Fazit

Es gibt verschiedene Möglichkeiten, Titel ohne Verlinkung zu Ihren WordPress-Menüs hinzuzufügen. Die Wahl der Methode hängt von Ihren technischen Fähigkeiten, den Anforderungen Ihres Projekts und Ihren persönlichen Präferenzen ab. Die Verwendung benutzerdefinierter Links mit einer ungültigen URL ist eine einfache und schnelle Lösung. Plugins bieten zusätzliche Funktionen und Benutzerfreundlichkeit. Für Entwickler bietet die Implementierung einer eigenen Funktion im Theme die größte Flexibilität. Die Verwendung von HTML-Code im Menü-Label sollte vermieden werden, da dies zu Problemen führen kann. Unabhängig von der gewählten Methode sollten Sie immer sicherstellen, dass Ihre Menüs benutzerfreundlich und leicht verständlich sind.