WordPress leistet hervorragende Arbeit, um aktuelle Standard-Posts, Seiten oder Taxonomien hervorzuheben, wenn Sie sie in ein Navigationsmenü aufnehmen. Wenn Sie jedoch einen benutzerdefinierten Beitrag oder eine benutzerdefinierte Taxonomie erstellen, geht alles schief und die Navigation wird nicht mehr auf die aktuelle Seite gesetzt. Glücklicherweise gibt es eine Problemumgehung. Sie können manuell festlegen, welche Menüelemente hervorgehoben werden, wenn Sie benutzerdefinierten Inhalt anzeigen.
Die Lösung ist einfach. Wir haben ein paar Codezeilen geschrieben, die eine Einstellungsseite erstellen, in der Sie die Menüelemente angeben, die für jeden benutzerdefinierten Inhaltstyp hervorgehoben werden sollen. Der nächste Schritt ist das Überschreiben der Standard-Walker-Klasse für die WordPress-Navigation, um bei Bedarf eine Hervorhebungsklasse zu generieren. Einfach und effektiv.
Erstellen Sie eine neue Datei mit dem Namen navigation.php und füge es aus dem Functions.php Datei.
include_once (get_template_directory (). '/navigation.php');
Jetzt können wir mit dem echten Code beginnen.
Registrieren Sie zunächst eine neue Einstellungsgruppe, um eine neue Seite mit den WP-Admin-Einstellungen zu erstellen. In deinem leeren Raum navigation.php Datei füge folgenden Code ein.
add_action ('admin_init', 'ns_register_navigation_settings'); Funktion ns_register_navigation_settings () register_setting ('ns_navigation', 'ns_navigation_predefined_values');
Dann generieren Sie ein neues Menüelement, um auf unsere neue Einstellungsseite in wp-admin zuzugreifen.
add_action ('admin_menu', 'ns_navigation_options'); function ns_navigation_options () add_submenu_page ('themes.php', 'Vordefinierte Menüs', 'Vordefinierte Menüs', 'edit_theme_options', 'menu-defaults', 'menu_defaults_page');
Das menu_defaults_page () Diese Funktion druckt die Einstellungsseite in WordPress Admin. Vor dem Drucken der Formulareingaben get_option ('ms_navigation_predefined_values') fordert die in der Datenbank gespeicherten Werte an und speichert sie in $ ns_navigation_predefined_values als Array.
In diesem Fall ist noch nichts gespeichert, daher sind die Werte leer. Verwenden Einstellungsfeld () wird für das Drucken verwandter und erforderlicher ausgeblendeter Felder sowie für die Sicherheitsabwicklung benötigt. Der Rest des Codes druckt die Eingabeelemente mit den Werten in $ ns_navigation_predefined_values.
Die Einstellungsseite ist jetzt verfügbar, aber leer. Wir müssen alle verfügbaren benutzerdefinierten Beiträge und Taxonomien sowie die verfügbaren Menüelemente mit diesen Werten füllen. Fügen Sie den folgenden Code ein.
Funktion menu_defaults_page () ?>Die Einstellungsseite ist jetzt erstellt, aber wir müssen noch die im obigen Code aufgerufenen Funktionen definieren. Fügen Sie den folgenden Code ein.
Funktion ns_get_post_types () $ post_types = get_post_types (array ('public' => true, '_builtin' => false), 'objects'); foreach ($ post_types als $ k => $ v) $ ns_registered_post_types -> $ k = $ v-> labels-> name; $ ns_registered_post_types zurückgeben; function ns_get_taxonomies () $ taxonomies_types = get_taxonomies (array ('public' => true, '_builtin' => false), 'objects'); foreach ($ taxonomies_types als $ k => $ v) $ ns_registered_taxonomies_types -> $ k = $ v-> labels-> name; $ ns_registered_taxonomies_types zurückgeben;Die Funktion ns_get_post_types ruft alle verfügbaren Post-Typen ab und gibt nur die benutzerdefinierten aus. Die Funktion ns_get_taxonomies tut das gleiche, aber natürlich für Taxonomien.
Schritt 3 Damit es im WordPress-Theme funktioniert
Wir haben die Einstellungsseite deklariert und einige benutzerdefinierte Beiträge und Taxonomien deklariert. Der nächste Schritt besteht darin, dass es in dem von uns verwendeten Thema funktioniert. Zu Testzwecken arbeiten wir mit dem Twenty Eleven-Theme von WordPress, aber dieser Code sollte mit jedem Theme funktionieren.
Lassen Sie uns die WordPress Menu Walker-Klasse ändern, um die Standardausgabe zu überschreiben. Wir lesen unsere Einstellungen und verwenden die Werte, um eine neue hinzuzufügen current_page_item ns_current_page_item Klasse auf der jeweiligen Seite, wenn die benutzerdefinierte Post-Schleife oder eine verwandte Einzelseite angezeigt wird.
Klasse NS_Walker_Nav_Menu erweitert Walker_Nav_Menu Funktion start_el (& $ -Ausgabe, $ item, $ depth, $ args) global $ wp_query; $ indent = ($ depth)? str_repeat ("\ t", $ depth): "; if (isset ($ args-> current_nav_element)) $ current_nav_element = $ args-> current_nav_element; $ class_names = $ value ="; $ classes = leer ($ item-> classes)? array (): (array) $ item-> classes; $ classes [] = 'Menüpunkt-'. $ item-> ID; $ classes [] = 'page-gui-'. $ item-> object_id; $ class_names = join (", apply_filters ('nav_menu_css_class', array_filter ($ classes), $ item, $ args)); $ class_names = ''; $ id = apply_filters ('nav_menu_item_id', 'menu-item-' item-> ID, $ item, $ args); $ id = strlen ($ id)? '': "; $ output. = $ indent. '
Das neue NS_Walker_Nav_Menu Class liest die in einem Array gespeicherten Navigationswerte vor dem Drucken. In diesem Fall verwenden Sie eine ob()
Kontrollstruktur, um auszuwerten, ob das aktuelle Navigationselement mit dem zuvor gespeicherten Wert für die Seite übereinstimmt, die WordPress gerade druckt. Wenn die Bedingung erfüllt ist, werden die Klassen "current_page_item" und "ns_current_page_item" zu den vorhandenen Klassen hinzugefügt, die in gespeichert sind $ class_names Variable.
Dann müssen wir eine weitere benutzerdefinierte Funktion verwenden. Wenn wir es aufrufen, druckt diese Funktion das Menü im Design.
Funktion ns_wp_nav_menu ($ args) global $ post; $ ns_walker = new NS_Walker_Nav_Menu (); $ args ['walker'] = $ ns_walker; $ ns_navigation_predefined_values = get_option ('ns_navigation_predefined_values'); $ custom_post_type = get_post_type ($ post); $ available_post_types = (Array) ns_get_post_types (); $ taxonomy_type = get_queried_object (); $ taxonomy_type = $ taxonomy_type-> Taxonomie; $ available_taxonomy_types = (Array) ns_get_taxonomies (); if (is_singular ($ custom_post_type) && array_key_exists ($ custom_post_type, $ available_post_types)) $ args ['current_nav_element'] = (function_exists ('icl_object_id'))? icl_object_id ($ ns_navigation_predefined_values [$ custom_post_type], 'page'): $ ns_navigation_predefined_values [$ custom_post_type]; elseif (is_tax ($ taxonomy_type) && array_key_exists ($ taxonomy_type, $ available_taxonomy_types)) $ args ['current_nav_element'] = (function_exists ('icl_object_id'))? icl_object_id ($ ns_navigation_predefined_values [$ taxonomy_type], 'page'): $ ns_navigation_predefined_values [$ taxonomy_type]; else unset ($ args ['current_nav_element']); wp_nav_menu ($ args);
Das ns_wp_nav_menu () wurde erstellt, um die Verwendung des integrierten wp_nav_menu () zu vereinfachen. Der erste Schritt besteht darin, die Funktion zu zwingen, die neue Walker-Klasse mit zu laden $ ns_walker = new NS_Walker_Nav_Menu () und Hinzufügen zum Parameter-Array mit $ args ['walker'] = $ ns_walker;.
Anstatt die erforderlichen Parameter immer an die Funktion zu übergeben, ist dies standardmäßig enthalten. In diesem speziellen Fall liest die Funktion den aktuellen Beitrag und liest sogar die übersetzte Seite, wenn das WPML-Plugin auf Ihrer WordPress-Website aktiviert ist.
Prüfen Sie zuerst, ob die Seite in der Einzelansicht ist is_singular () und holen Sie den entsprechenden gespeicherten Wert aus der Datenbank. Die zweite mögliche Auswertungsmöglichkeit besteht darin, ob die aktuelle Seite eine Taxonomie-Abfrage mit ist is_tax (). Wenn nicht, gibt es nichts zu wählen und der Code gibt das aktuelle Navigationselement mit unset frei ($ args ['current_nav_element']).
Öffne das header.php Datei in Ihrem Twenty Eleven Theme, finden Sie die wp_nav_menu () Funktion ungefähr auf Zeile 118 und ersetzen Sie mit ns_wp_nav_menu Beibehalten der gleichen Parameter und nichts anderes, da die neue Funktion standardmäßig den Rest der erforderlichen Parameter übernimmt. Der neue Code sollte folgendermaßen aussehen:
", 'theme_location' => 'primary');?>
Diese Funktion verwendet die gleichen Argumente wie der Standard wp_nav_menu Funktion, so dass Sie so viel ändern können, wie Sie wollen oder müssen.
Öffnen style.css auch und ersetzen Sie den Code online 617 mit:
#access .current-menu-item> a, #access .current-menu-ancestor> a, #access .current_page_item> a, #access .current_page_ancestor> a, #access .ns_current_page_item> a font-weight: bold;
Sie haben benutzerdefinierte Posts und benutzerdefinierte Taxonomien und Sie haben neue Seiten mit Vorlagen erstellt, um diese benutzerdefinierten Schleifen anzuzeigen. Sie haben wahrscheinlich ein neues Menü in Ihrem WP-Admin erstellt und auch diese Seiten hinzugefügt. Öffnen Sie die Seite mit den vordefinierten Menüeinstellungen, die sich unter Darstellung befindet, und legen Sie die ausgewählten Seiten für jede benutzerdefinierte Post und Taxonomie fest, die Sie erstellt haben.
Wenn Sie den benutzerdefinierten Beitrag oder die einzelne Seite anzeigen, die sich auf diesen benutzerdefinierten Beitrag bezieht, wird in der Navigation das entsprechende Menüelement hervorgehoben.
Es gibt viele Möglichkeiten, dieses Ergebnis zu erreichen, aber nach einigen veröffentlichten Projekten, die diesen Ansatz verwenden, habe ich festgestellt, dass dies das beste und benutzerfreundlichste ist.
Dies ist jedoch nur der Anfang aller Möglichkeiten, die Sie erreichen können, wenn Sie diesen Code verstehen und Änderungen an Ihren persönlichen Bedürfnissen vornehmen.
Ich ermutige Sie, weiter über die Navigation Walker-Klasse zu recherchieren. Es gibt eine Menge Möglichkeiten, die sich dahinter verstecken, darauf können Sie wetten.