Das Hervorheben des aktiven Menüpunkts im Hauptmenü Ihrer Website ist wirklich gut für die Benutzerfreundlichkeit, sodass die Person, die Ihre Website anzeigt, genau weiß, welche Seite sie gerade anzeigt, und es erleichtert das Durchsuchen des Menüs von der aktuellen Seite aus. Vor WordPress 3.0 war das Hervorheben des aktuellen Menüpunkts basierend auf der Seite, auf der sich ein Besucher befand, arbeitsintensiver, da Sie if-Anweisungen für jeden Link ausführen mussten, um zu testen, ob es sich um die aktuelle Seite oder einen Vorfahren der aktuellen Seite handelte , mit der Einführung des neuen Drag-and-Drop-Menüsystems in WordPress Version 3, gibt es jetzt spezielle Klassen, die jedem Link zugewiesen sind, was es einfacher macht, sie zu stylen.
Grundlegende WordPress-Menüausgabe
Nehmen wir uns zunächst einen Moment Zeit, um uns die grundlegende WordPress-Menüausgabe anzusehen (basierend auf einem einfachen Menü mit der Zwanzig Zehn WordPress-Theme), damit Sie die Art der Klassen sehen können, die automatisch zu den Links hinzugefügt wurden:
<ul id="menu-my-menu" class="menu"><li id="menu-item-3" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3"><a href="http://mysite.com">Home</a></li>
<li id="menu-item-4" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4"><a href="http://mysite.com/sample-page">Page 1</a></li>
<li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5"><a href="http://mysite.com/sample-page-2">Page 2</a></li>
<li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-6"><a href="http://mysite.com/drop-down">Drop Down</a>
<ul class="sub-menu">
<li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7"><a href="http://mysite.com/drop-down-1">Drop Down 1</a></li>
<li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-8"><a href="http://mysite.com/drop-down-2">Drop Down 2</a></li>
</ul>
</li>
</ul>
Hervorhebung aktueller Seiten/Kategorien/anderer Menü-Links
Wenn Sie sich den obigen Code ansehen, können Sie alle verschiedenen Klassen sehen, die WordPress zu den Menülinks hinzufügt, aber die, auf die Sie sich zum Hervorheben konzentrieren möchten, sind die folgenden:
- .aktueller-menüpunkt
- .aktueller-Seite-Vorfahre
- .current-post-ancestor
.aktueller-Menüpunkt: Klasse, die dem Menüelement für die aktuelle Seite hinzugefügt wurde, die vom Benutzer angezeigt wird.
~ Beispiel: Wenn Sie sich auf der „about“-Seite befinden und es einen Link zur „about“-Seite gibt, wird diese Klasse geerbt
.aktueller-Seite-Vorfahre: Klasse zum Menüpunkt für die übergeordnete Seite hinzugefügt, wenn gerade eine untergeordnete Seite angezeigt wird.
~ Beispiel: Wenn Sie eine Seite mit dem Namen „Pages“ und eine untergeordnete Seite mit dem Namen „about“ haben, erbt der Menülink mit dem Namen „Pages“ diese Klasse, wenn Sie sich auf der „about“-Seite befinden.
.current-post-ancestor: Dem Menüpunkt hinzugefügte Klasse, solange die Kategorie ein Vorfahre des angezeigten Beitrags ist.
~ Beispiel: Die Klasse wird der Kategorie „Film“ im Menü hinzugefügt, wenn Sie gerade den Beitrag „Harry Potter“ ansehen, der sich in dieser Kategorie befindet.
Hervorhebung des einfachen Beispielmenüs
Dies ist eine sehr einfache und allgemeine Hervorhebungsmethode, aber sie kann Ihnen einen guten Start verschaffen. Kopieren und bearbeiten Sie einfach das folgende CSS in Ihrer style.css-Datei, um Ihre Menülinks hervorzuheben:
.current-menu-item a,
.current-page-ancestor a,
.current-post-ancestor a { background: #000; }
Natürlich zielt dieses CSS auf ALLE aktuellen Klassen ab, was bedeutet, wenn Sie mehrere Menüs auf der Website oder sogar Menüs in Ihren Widget-Bereichen haben, werden sie als Ziel verwendet. Stellen Sie also sicher, dass Sie das CSS so anpassen, dass es zu Ihrem Thema passt, sodass es nur auf das Menü abzielt, auf das Sie speziell abzielen möchten.