Coding - Best Practice Wordpress - Indikator Design

WordPress Menü-Einträge in Rekordzeit nur auf bestimmten Seiten

Wordpress Menü-Einträge nur auf bestimmten Seiten anzeigen – Der einfache Weg

Haben Sie sich schon einmal gewünscht, einige Links in Ihrem WordPress-Menü nur auf ganz bestimmten Seiten anzuzeigen? Haben Sie wie viele andere schon festgestellt, dass sich das ganz einfach anhört, aber gar nicht so einfach zu lösen ist? Dann lesen Sie weiter.

Es kann mitunter ziemlich aufwendig sein, wenn man vorhat einige Menüpunkte nur auf ausgewählten WordPress-Seiten anzuzeigen. Wie so oft, gibt es dafür natürlich verschiedene Möglichkeiten. Eine Variante besteht in einem Eintrag, in die für das WordPress-Theme relevante functions.php. Prinzipiell ist es immer ratsam diese in einem Child-Theme zu verwenden, da so bei Theme-Updates die Einträge nicht überschrieben werden und der manuelle Aufwand bei Aktualisierungen von WordPress geringer ausfällt. Hier wird gezeigt, wie man ein WordPress-Child-Theme richtig anlegt.

Das richtige Wordpress-Menü auswählen

Das hier ist der Vollständigkeit halber der Weg den ich nicht empfehle. Wenn Sie gleich zur Lösung möchten, dann klicken Sie einfach hier. Andernfalls geht es an der Stelle so weiter:

Man öffnet die functions.php mit seinem bevorzugten Code-Editor. Sehr empfehlenswert ist hier Sublime Text in Verbindung mit der Erweiterung Emmet (für HTML und CSS) und der Erweiterung Sublime Linter 3 zum überprüfen des PHP-Codes auf evtl. Fehler.

Hier kann nun beispielsweise folgendes eingetragen werden:

In der ersten Zeile wird sicher gestellt, dass der Funktionsname noch nicht anderweitig verwendet wird. Wenn doch, wird die Funktion schlichtweg nicht von WordPress aufgerufen. In dem Fall müsste man einfach den Funktionsnamen ändern. Dann wird mit add_filter der Hook wp_nav_menu_items aufgerufen in den man sich einhängen möchte, um den individuellen Menü-Eintrag zu übergeben. Der Funktion selbst werden 2 Parameter übergeben, $items welcher die bisher angelegten Menüeinträge beinhaltet und $args um festlegen zu können, in welchem Menü genau die Änderungen vorgenommen werden sollen. In diesem Fall nutzen wir das WordPress-Hauptmenü mit primary. Mit is_page( 114 ) wird die Seite mit ihrer ID angegeben auf welcher der zusätzliche Eintrag angelegt werden soll und mit der Abfrage && $args->theme_location == ‚primary‘ das WordPress-Hauptmenü angesteuert. Dann wird mit $items .= der gewünschte Link an die bisherigen Einträge angehängt.

Mehrere Links in das WordPress-Menü eintragen

Sollen auf mehreren Seiten mehrere Links hinzugefügt werden, kann man das wie folgt lösen:

Nachteil bei diesem Vorgehen

Nachteil bei dieser Variante ist allerdings, dass nicht sicher ist, ob im verwendeten WordPress-Theme das Menu primary überhaupt wie gewünscht Verwendung findet. Wenn nicht muss man sich zunächst durch die entsprechenden WordPress-Template-Dateien lesen, um die richtige Bezeichnung herauszufinden. Weiterhin wird so erst mal nur die oberste Ebene des Menüs angesteuert. Soll der Eintrag hingegen in einem der Submenüs angezeigt werden, so darf man noch ausfindig machen, unter welcher Bezeichnung das entsprechende Menü geführt wird, um sich dort einzuhängen.

Ausblenden mittels Klassenzuweisung über jQuery

Mit dem folgenden Vorgehen lässt es sich wesentlich einfacher gestalten. Hierbei wird den vorhandenen WordPress-Menü-Einträgen mittels jQuery einfach die Link-Beschriftung als zusätzliche Klasse zugewiesen.  Über CSS lässt sich dann steuern, wo die entsprechenden Links tatsächlich angezeigt werden sollen. Meines Erachtens nach ist das der weitaus bequemere Weg und dürfte sich bei guter Umsetzung und anschließendem Caching auch nicht negativ auf die Performance auswirken. Das Beste daran: die entsprechenden Einträge können einfach unter den normalen Menüs in den gewohnten Einstellungen hinterlegt werden, was prinzipiell Ihrer Nutzerfreundlichkeit zugute kommt.

Javascript-Datei im WordPress-Footer einbinden – Der richtige Weg

Zunächst ist es hierzu notwendig eine eigene JavaScript Datei einzubinden, in der Sie ein paar Änderungen vornehmen können. Dafür lässt sich beispielsweise folgendes in die function.php des Child-Themes einfügen:

Mit wp_enqueue_scripts und wp_enqueue_script wird das Skript sauber an WordPress übergeben. So kann es auch für das Minifying im Optimierungsprozess verwendet werden. Mit der Angabe 9999 legen wir fest, dass das entsprechende Skript möglichst am Ende aufgerufen wird. So lassen sich in dem Skript noch andere Änderungen vornehmen, die beispielsweise auf die Wirkungsweise verwendeter jQuery oder JavaScript Plugins Einfluss nehmen und deren Aufruf bereits vorher stattfindet. Mit der Funktion get_stylesheet_directory_uri() geben wir WordPress vor, nach der entsprechenden Datei im Rootverzeichnis des Child-Themes zu suchen, in dem sich die Datei bb_custom_js_footer.js im Ordner js befindet (jene müsste dort auch angelegt werden). Diese wird dem jQuery-Array zugewiesen, liegt in der Version 1 vor und wird mit true im Footer vor dem schließenden </body> – Tag verankert (false würde die Datei im Header platzieren).

Beschriftung des Links als Klasse zuweisen – Wie cool ist das denn?

Nehmen wir hier einfach wieder an es handelt sich bei Ihnen um das WordPress-Hauptmenu welches im Quellcode die ID #header hat. Ferner nehmen wir an, Sie möchten beispielsweise die Datenschutzbestimmungen und Ihr Impressum nur auf speziellen Seiten im Menu verlinken. Dann können Sie nun unter den normalen WordPress-Menü-Einstellungen (WordPress Administrations-Menü > Design > Menüs) die entsprechenden Einträge einfach an letzter Position in Ihrem Hauptmenü anlegen. Danach öffnen Sie Ihre zuvor verankerte JavaScript Datei und fügen dort folgendes ein:

Zunächst sorgen Sie mit einer Self invoking anonymous function dafür, das Sie den globalen Scope (das globale Window-Object) nicht unnötig mit Variablen verstopfen. Dann suchen Sie mittels jQuery nach Ihrem WordPress-Header #header. Hier müssten Sie im Quellcode nachschauen (Developer-Console), ob evtl. bei Ihrer eigenen WordPress-Webseite eine andere ID vergeben wurde und diese gegebenenfalls austauschen, oder auf eine Klassenzuweisung ausweichen. Weiterhin kann bei Ihnen die verwendete Klasse für jenes Element abweichen, das den angezeigten Menütext beinhaltet (span.menu-text). Passen Sie das einfach an Ihre Formatierung an und staunen darüber, wie einfach das war.

Insofern Sie weitere Änderungen in Ihrem WordPress-Header-Bereich vornehmen möchten, bietet es sich an die ID in der Variablen header zu cachen. So wird diese nur einmalig durch jQuery im DOM aufgesucht (und nicht bei jedem einzelnen Aufruf). Damit lässt sich die einmal definierte Variable dann einfach bequem als Startpunkt für weitere Änderungen verwenden. Danach suchen Sie im WordPress-Header nach sämtlichen Menü-Einträgen mit .find(‚li.menu-item‘) und fügen jenen, über den nachfolgenden Funktionsaufruf, den im Menü angezeigten Menü-Namen .text() mit kleinen Buchstaben .toLowerCase() als Klasse zu .addClass(function…). Dem Menü-Eintrag (<li>) Impressum wird so beispielsweise die Klasse impressum angehängt.

Letzte Anpassungen im Stylesheet – Das war es schon

Nun öffnen Sie das Stylesheet Ihres Child-Themes und blenden dort zunächst Ihre speziell angelegten Menüeinträge einfach per CSS  generell aus und in der nächsten Zeile für die Seite mit der ID 12 wieder ein:

So lässt sich das Ganze ziemlich bequem steuern und gemäß Ihren eigenen Bedürfnissen anpassen, ohne dass Sie ein spezielles WordPress-Plugin verwendet werden müssen. Es wird zwar ein zusätzliches Skript eingebunden, dass fällt aber mit Minifying nur sehr gering ins Gewicht. Außerdem bietet Ihnen das so eingebundene Skript die Möglichkeit noch beliebige weitere Anpassungen vorzunehmen.

Möchten Sie hingegen die Anzeige für angemeldete Nutzer über deren verschiedenen Rollen ansteuern, dann macht es definitiv Sinn sich das hier einmal ganz genau anzusehen. Habe damit persönlich sehr gute Erfahrungen gesammelt.

Sie haben Fragen zur Umsetzung, diesem Artikel oder sind froh über ein wenig Unterstützung und möchten uns gerne buchen? Zögern Sie nicht. Nutzen Sie jetzt gleich das Kontaktformular. Gemeinsam ist das Leben leichter. Lassen Sie das Web für sich arbeiten!

Viel Erfolg!

Indikator Design: Infos zu Webdesign Mainz, Webdesign Wiesbaden, Webdesign Frankfurt, Fotografie Mainz, Fotografie Wiesbaden, Fotografie Frankfurt, Suchmaschinen-Optimierung SEO Mainz, Suchmaschinen-Optimierung SEO Wiesbaden, Suchmaschinen-Optimierung SEO Frankfurt, WordPress Mainz, WordPress Wiesbaden, WordPress Frankfurt

Weiterverwendung dieses Artikels

Sie haben Interesse daran diesen Artikel zu teilen oder bei sich zu verwenden?

Das dürfen Sie gerne machen, insofern Sie den nachfolgenden Text dazufügen:

Veröffentlicht auf Indikator-Design.de – Aktuelle Informationen zu Webentwicklung, WordPress, Webdesign, Bildbearbeitung, Visualisierung und Video-Compositing.

Herausgeber Bruno Bouyajdad

Bruno Bouyajdad

Webentwicklung und Webdesign, Fotografie, Bildentwicklung, WordPress, Video-Compositing, Panorama-Fotografie und Virtuelle Touren.
Das sind die Bereiche in denen Bruno Bouyajdad sich hauptsächlich bewegt.
Er ist Computerbegeisterter, WordPress-Enthusiast, Erfolgscoach, Blogger, Lebemensch.
Webagentur Mainz, Wiesbaden, Frankfurt.

Weitere Beiträge - Webseite

Folgen Sie mir:
TwitterFacebookGoogle PlusFlickrYouTube

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

Benachrichtige mich zu:
wpDiscuz