Angi aktive navigasjonselementer når WordPress ikke

WordPress gjør en utmerket jobb som fremhever nåværende standardinnlegg, sider eller taksonomier når du inkluderer dem i en navigasjonsmeny. Men når du oppretter et egendefinert innlegg eller egendefinert taksonomi, går alt galt, og navigasjonen slutter å markere gjeldende side. Heldigvis er det en løsning, du kan manuelt angi hvilket menyelement som fremhever når du viser tilpasset innhold.


Hvordan dette vil fungere

Løsningen er enkel. Vi har skrevet noen linjer med kode som lager en innstillingsside hvor du vil spesifisere menyelementene for å markere for hver tilpasset innholdstype. Det neste trinnet er å overstyre standard WordPress navigasjon Walker-klassen for å generere en høydepunktsklasse når det trengs. Enkel og effektiv.


Trinn 1 Opprette og bruke en egendefinert inkluderingsfil

Opprett en ny fil som heter navigation.php og inkludere den fra functions.php fil.

include_once (get_template_directory (). '/navigation.php');

Nå er vi klare til å starte med den virkelige koden.


Trinn 2 Opprette innstillingssiden

Først registrer du en ny innstillingsgruppe for å generere en ny wp-admin innstillinger side. I din tomme navigation.php fil legg inn følgende kode.

 add_action ('admin_init', 'ns_register_navigation_settings'); funksjon ns_register_navigation_settings () register_setting ('ns_navigation', 'ns_navigation_predefined_values'); 

Deretter genererer du et nytt menyelement for å få tilgang til vår nye innstillingsside i wp-admin.

 add_action ('admin_menu', 'ns_navigation_options'); funksjon ns_navigation_options () add_submenu_page ('themes.php', 'forhåndsdefinerte menyer', 'forhåndsdefinerte menyer', 'edit_theme_options', 'menyverdier', 'menu_defaults_page'); 

De menu_defaults_page () funksjonen skriver inn innstillingssiden i WordPress Admin. Før du skriver ut skjemainngangene get_option ( '') ms_navigation_predefined_values ber om verdiene som er lagret i databasen og lagrer dem inn $ ns_navigation_predefined_values som en matrise.

I dette tilfellet er det ingenting lagret ennå, men verdiene er tomme. Ved hjelp av settings_field () er nødvendig for utskrift relaterte og nødvendige skjulte felt og for sikkerhetshåndtering også. Resten av koden skriver ut elementene ved å bruke verdiene i $ ns_navigation_predefined_values.

Innstillingssiden er nå tilgjengelig, men tom. Vi må fylle den med alle tilgjengelige tilpassede innlegg og taksonomier som er generert, og de tilgjengelige menyelementene tilsvarer disse verdiene. Sett inn følgende kode.

 funksjon menu_defaults_page () ?> 

$ v) ?>
'ns_navigation_predefined_values ​​['. $ k. ']', 'echo' => 1, 'show_option_none' => __ ('- Velg -'), 'option_none_value' => '0', 'selected' => $ current_dropdown_value [$ k])); ?>


$ v) ?>
'ns_navigation_predefined_values ​​['. $ k. ']', 'echo' => 1, 'show_option_none' => __ ('- Velg -'), 'option_none_value' => '0', 'selected' => $ current_dropdown_value [$ k])); ?>

Innstillingssiden er nå opprettet, men vi må fortsatt definere funksjonene som er kalt i koden ovenfor. Sett inn følgende kode.

 funksjon ns_get_post_types () $ post_types = get_post_types (array ('public' => true, '_builtin' => false), 'objekter'); foreach ($ post_typer som $ k => $ v) $ ns_registered_post_types -> $ k = $ v-> etiketter-> navn;  returnere $ ns_registered_post_types;  funksjon ns_get_taxonomies () $ taxonomies_types = get_taxonomies (array ('public' => true, '_builtin' => false), 'objekter'); foreach ($ taxonomies_types as $ k => $ v) $ ns_registered_taxonomies_types -> $ k = $ v-> etiketter-> navn;  returnere $ ns_registered_taxonomies_types; 

Funksjonen ns_get_post_types henter alle tilgjengelige innleggstyper og utdataer bare de som er tilpasset. Funksjonen ns_get_taxonomies gjør det samme, men for taksonomier selvsagt.


Trinn 3 Gjør det til arbeid i WordPress Theme

Vi har angitt innstillingssiden og noen få egendefinerte innlegg og taksonomier erklært. Det neste trinnet er å få det til å fungere i temaet vi bruker. Til testformål jobber vi med WordPress 'Twenty Eleven-tema, men denne koden skal fungere med noe tema.

La oss endre WordPress Menu Walker-klassen for å overstyre standardutgangen. Vi leser innstillingene våre og bruker verdiene til å legge til en ny current_page_item ns_current_page_item klasse på den respektive siden når vi viser den egendefinerte innleggsløkken eller relatert enkelt side.

 klasse NS_Walker_Nav_Menu utvider Walker_Nav_Menu funksjon start_el (& $ output, $ item, $ depth, $ args) global $ wp_query; $ indent = ($ dybde)? str_repeat ("\ t", $ dybde): "; hvis (isset ($ args-> current_nav_element)) $ current_nav_element = $ args-> current_nav_element; $ class_names = $ value ="; $ classes = empty ($ item-> classes)? array (): (array) $ item-> klasser; $ klasser [] = 'meny-element-'. $ Element-> ID; $ klasser [] = 'side-gui-'. $ Element-> object_id; $ class_names = join (", apply_filters ('nav_menu_css_class', array_filter ($ klasser), $ item, $ args)); $ class_names = ''; $ id = apply_filters ('nav_menu_item_id', 'menu-item-'. $ element-> ID, $ item, $ args); $ id = strlen ($ id)? '': "; $ output. = $ innrykk. ''; $ attributter =! tomt ($ item-> attr_title)? 'title =' '. esc_attr ($ item-> attr_title).' '': "; $ attributter. =! tomt ($ item-> target)? 'target ="'. esc_attr ($ item-> target). '"':"; $ attributter. =! tomt ($ item-> xfn)? 'rel =' '. esc_attr ($ item-> xfn).' '': "; $ attributter. =! tomt ($ item-> url)? 'href ="'. esc_attr ($ item-> url). '"':"; $ item_output = $ args-> før; $ item_output. = ''; $ item_output. = $ args-> link_before. apply_filters ('the_title', $ item-> title, $ item-> ID). $ Args-> link_after; $ item_output. = ''; $ item_output. = $ args-> etter; $ output. = apply_filters ('walker_nav_menu_start_el', $ item_output, $ item, $ depth, $ args); 

Den nye NS_Walker_Nav_Menu Klassen leser navigasjonsverdiene som er lagret i en matrise før utskrift. I dette tilfellet bruker du en hvis() kontrollstruktur for å vurdere om det nåværende navigasjonselementet samsvarer med den forrige lagrede verdien for siden WordPress skriver ut. Hvis tilstanden er sant, legges klassene "current_page_item" og "ns_current_page_item" til eksisterende klasser lagret i $ class_names variabel.

Da må vi bruke en mer tilpasset funksjon. Når vi kaller det, vil denne funksjonen skrive ut menyen i temaet.

 funksjon ns_wp_nav_menu ($ args) global $ post; $ ns_walker = ny NS_Walker_Nav_Menu (); $ args ['walker'] = $ ns_walker; $ ns_navigation_predefined_values ​​= get_option ('ns_navigation_predefined_values'); $ custom_post_type = get_post_type ($ innlegg); $ available_post_types = (array) ns_get_post_types (); $ taxonomy_type = get_queried_object (); $ taxonomy_type = $ taxonomy_type-> taksonomi; $ available_taxonomy_types = (array) ns_get_taxonomies (); hvis (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], 'side'): $ 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], 'side'): $ ns_navigation_predefined_values ​​[$ taxonomy_type];  else unset ($ args ['current_nav_element']);  wp_nav_menu ($ args); 

De ns_wp_nav_menu () er opprettet for å forenkle bruk av den innebygde wp_nav_menu (). Det første trinnet er å tvinge funksjonen til å laste den nye Walker-klassen med $ ns_walker = ny NS_Walker_Nav_Menu () og legger til parametertabellen ved hjelp av $ args ['walker'] = $ ns_walker;.

I stedet for alltid å sende de nødvendige parametrene til funksjonen, er dette inkludert som standard. I dette spesielle tilfellet leser funksjonen nåværende innlegg og leser til og med den oversatte siden hvis WPML-plugin er aktivert på WordPress-nettsiden din.

Først vurderer om siden er i enkeltvisning ved hjelp av is_singular () og hent fra databasen den tilsvarende lagrede verdien. Det andre mulige valget å vurdere er om den nåværende siden er en taksonomi-spørring ved hjelp av is_tax (). Hvis ikke, er det ingenting å velge og koden slipper det nåværende navigasjonselementet ved hjelp av unset ($ args ['current_nav_element'])


Trinn 4 Skriver ut navigasjonsmenyen i et WordPress-tema

Åpne header.php fil i Twenty Eleven temaet, finn wp_nav_menu () funksjon, omtrent på linje 118, og erstatt med ns_wp_nav_menu holder de samme parametrene og ingenting annet fordi den nye funksjonen som standard håndterer resten av de nødvendige parametrene. Den nye koden skal se slik ut:

 ", 'theme_location' => 'primary');?>

Denne funksjonen bruker de samme argumentene som standarden wp_nav_menu funksjon, så vær så snill å justere så mye du vil eller trenger.

Åpen style.css også og erstatt koden på linjen 617 med:

 #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> en font-weight: bold; 

Trinn 5 Få mest mulig ut av ditt forbedrede navigasjonssystem

Du har tilpassede innlegg, egendefinerte taksonomier, og du har opprettet nye sider med maler for å vise disse tilpassede sløyfer. Du har sannsynligvis opprettet en ny meny i wp-admin og lagt til disse sidene også. Åpne forhåndsdefinerte menyinnstillingssiden som ligger under Utseende, og angi de valgte sidene for hvert tilpasset innlegg og taksonomi du har opprettet.

Når du viser det egendefinerte innlegget eller den enkle siden som er relatert til dette egendefinerte innlegget, vil navigasjonen markere det matchede menyelementet.


Konklusjon

Det er mange måter å oppnå dette samme resultatet, men etter at noen få publiserte prosjekter ved hjelp av denne tilnærmingen fant jeg at dette er det beste og mest brukervennlige.

Uansett er dette bare begynnelsen på alle mulighetene du kan oppnå når du forstår denne koden og begynner å gjøre endringer for dine personlige behov.

Jeg oppfordrer deg til å fortsette å forske på navigasjon Walker-klassen. Det er mange muligheter skjult der inne, du kan satse på det.