Ställa in aktiva navigeringselement när WordPress inte

WordPress gör ett utmärkt jobb som markerar aktuella standardinlägg, sidor eller taxonomier när du tar med dem i en navigeringsmeny. Men när du skapar en anpassad post eller anpassad taxonomi går allting fel och navigeringen slutar markera den aktuella sidan. Lyckligtvis finns det en lösning, du kan manuellt ange vilket menyelement som lyfter fram när du visar anpassat innehåll.

Hur detta kommer att fungera

Lösningen är enkel. Vi har skrivit några rader av kod som skapar en inställningssida där du kommer att ange menyelementen för att markera för varje anpassad innehållstyp. Nästa steg är att åsidosätta standard WordPress navigations Walker-klassen för att generera en höjdklass klass när det behövs. Enkelt och effektivt.

Steg 1 Skapa och använda en anpassad inkluderingsfil

Skapa en ny fil som heter navigation.php och inkludera den från functions.php fil.

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

Nu är vi redo att börja med den riktiga koden.

Steg 2 Skapa inställningssidan

Först registrerar du en ny inställningsgrupp för att skapa en ny wp-admin-inställningssida. I din tomma navigation.php fil infoga följande kod.

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

Skapa sedan ett nytt menyelement för att komma åt vår nya inställningssida i wp-admin.

 add_action ('admin_menu', 'ns_navigation_options'); funktion ns_navigation_options () add_submenu_page ('themes.php', 'Fördefinierade menyer', 'Fördefinierade menyer', 'edit_theme_options', 'meny-standard', 'menu_defaults_page'); 

De menu_defaults_page () funktionen skriver inställningssidan i WordPress Admin. Innan du skriver ut formuläringångarna get_option ( 'ms_navigation_predefined_values') begär de värden som lagras i databasen och lagrar dem i $ ns_navigation_predefined_values som en matris.

I det här fallet finns inget lagrat men värdena är tomma. Använder sig av settings_field () krävs för utskrift relaterade och obligatoriska dolda fält och för säkerhetshantering också. Resten av koden skriver ut ingångarna med värdena i $ ns_navigation_predefined_values.

Inställningssidan är nu tillgänglig men tom. Vi måste fylla i det med alla tillgängliga anpassade inlägg och taxonomier som har genererats och de tillgängliga menyelementen matchar dessa värden. Ange följande kod.

 funktion menu_defaults_page () ?> 
 

 
 
  
  $ v) ?> 
 
 
 
  'ns_navigation_predefined_values ​​['. $ k. ']', 'echo' => 1, 'show_option_none' => __ ('- Välj -'), 'option_none_value' => '0', 'selected' => $ current_dropdown_value [$ k])); ?> 
 
  
  
 
  $ v) ?> 
 
 
 
  'ns_navigation_predefined_values ​​['. $ k. ']', 'echo' => 1, 'show_option_none' => __ ('- Välj -'), 'option_none_value' => '0', 'selected' => $ current_dropdown_value [$ k])); ?> 
 
  
  
  
 
 
   
Inställningssidan är nu skapad men vi behöver fortfarande definiera de funktioner som kallas i koden ovan. Ange följande kod.
 
 funktion ns_get_post_types () $ post_types = get_post_types (array ('public' => true, '_builtin' => false), 'objects'); foreach ($ post_types as $ k => $ v) $ ns_registered_post_types -> $ k = $ v-> etiketter-> namn;  returnera $ ns_registered_post_types;  funktion ns_get_taxonomies () $ taxonomies_types = get_taxonomies (array ('public' => true, '_builtin' => false), 'objects'); foreach ($ taxonomies_types as $ k => $ v) $ ns_registered_taxonomies_types -> $ k = $ v-> etiketter-> namn;  returnera $ ns_registered_taxonomies_types; 
 
Funktionen ns_get_post_types hämtar alla tillgängliga posttyper och utmatar bara de som är anpassade. Funktionen ns_get_taxonomies gör detsamma, men för taxonomier förstås.
 
 
 Steg 3 gör det till arbete i WordPress Theme
 
Vi har deklarerade inställningssidan och några av de anpassade inläggen och taxonomierna deklarerade. Nästa steg är att få det att fungera i det tema vi använder. För teständamål arbetar vi med WordPress 'Twenty Eleven-tema men den här koden ska fungera med något tema.
 
Låt oss ändra WordPress Menu Walker-klassen för att åsidosätta standardutmatningen. Vi läser våra inställningar och använder värdena för att lägga till ett nytt current_page_item ns_current_page_item klass på respektive sida när vi visar den anpassade postslingan eller relaterade enstaka sida.
 
 klassen NS_Walker_Nav_Menu utökar Walker_Nav_Menu funktion start_el (& $ output, $ item, $ depth, $ args) global $ wp_query; $ indent = ($ djup)? str_repeat ("\ t", $ djup): "; om (isset ($ args-> current_nav_element)) $ current_nav_element = $ args-> current_nav_element; $ class_names = $ value ="; $ classes = empty ($ item-> classes)? array (): (array) $ item-> classes; $ klasser [] = 'meny-item-'. $ Item-> ID; $ klasser [] = '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', 'meny-item-' item-> ID, $ item, $ args); $ id = strlen ($ id)? '': "; $ output. = $ indent. ''; $ attribut =! tomt ($ item-> attr_title)? 'title =' '. esc_attr ($ item-> attr_title).' '': "; $ attributes. =! tomt ($ item-> target)? 'target ="'. esc_attr ($ item-> target). '"':"; $ attribut. =! tomt ($ item-> xfn)? 'rel =' '. esc_attr ($ item-> xfn).' '': "; $ attributes. =! tomt ($ item-> url)? 'href ="'. esc_attr ($ item-> url). '"':"; $ item_output = $ args-> före; $ item_output. = ''; $ item_output. = $ args-> link_before. apply_filters ('the_title', $ item-> title, $ item-> ID). $ Args-> link_after; $ item_output. = ''; $ item_output. = $ args-> efter; $ output. = apply_filters ('walker_nav_menu_start_el', $ item_output, $ item, $ depth, $ args); 
 
Den nya NS_Walker_Nav_Menu Klassen läser navigeringsvärdena som lagras i en array före utskrift. I det här fallet använder du en om() kontrollstruktur för att utvärdera om det aktuella navigeringselementet matchar det tidigare lagrade värdet för sidan WordPress skrivs ut för närvarande. Om villkoret är sant läggs klasserna "current_page_item" och "ns_current_page_item" till de befintliga klasserna som lagras i $ class_names variabel.
 
Då behöver vi använda en mer anpassad funktion. När vi kallar det, kommer denna funktion att skriva ut menyn i temat.
 
 funktion 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 ($ post); $ available_post_types = (array) ns_get_post_types (); $ taxonomy_type = get_queried_object (); $ taxonomy_type = $ taxonomy_type-> taxonomy; $ available_taxonomy_types = (array) ns_get_taxonomies (); om (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); 
 
De ns_wp_nav_menu () är skapad för att förenkla användningen av den inbyggda wp_nav_menu (). Det första steget är att tvinga funktionen att ladda den nya Walker-klassen med $ ns_walker = ny NS_Walker_Nav_Menu () och lägger till parametrarna med hjälp av $ args ['walker'] = $ ns_walker;.
 
Istället för att alltid passera de nödvändiga parametrarna till funktionen ingår detta som standard. I det här specifika fallet läser funktionen det aktuella inlägget och läser till och med den översatta sidan om WPML-plugin är aktiverat på din WordPress-webbplats.
 
Först utvärdera om sidan är i enkel visning med is_singular () och få från motsvarande databas motsvarande lagrat värde. Det andra möjliga valet att utvärdera är om den aktuella sidan är en taxonomy-fråga med is_tax (). Om inte, så är det inget att välja och koden släpper det aktuella navigeringselementet med hjälp av unset ($ args ['current_nav_element'])
 
 
 Steg 4 Skriv ut navigationsmenyn i ett WordPress-tema
 
Öppna header.php filen i ditt tjugo elva tema, hitta wp_nav_menu () funktion, ungefär på linje 118, och ersätt med ns_wp_nav_menu hålla samma parametrar och inget annat eftersom den nya funktionen som standard hanterar resten av de önskade parametrarna. Den nya koden ska se ut så här:
 
 "," theme_location '=>' primary ');?>
 
Den här funktionen använder samma argument som standarden wp_nav_menu funktionen så gärna tweak så mycket som du vill eller behöver.
 
Öppna style.css och ersätta koden på rad 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; 
 
 
 Steg 5 Få ut det mesta av ditt förbättrade navigationssystem
 
Du har anpassade inlägg, anpassade taxonomier och du har skapat nya sidor med mallar för att visa dessa anpassade loopar. Du har förmodligen skapat en ny meny i din wp-admin och lagt till dessa sidor också. Öppna den fördefinierade menyns inställningssida som finns under Utseende och ange de valda sidorna för varje anpassat inlägg och taxonomi du har skapat.
 
När du visar det anpassade inlägget eller den enda sidan som är relaterad till det här anpassade inlägget markerar navigering det matchade menyelementet.
 
 
Slutsats
 
Det finns många sätt att uppnå samma resultat men efter några publicerade projekt med hjälp av detta tillvägagångssätt fann jag att det här är det bästa och mest användarvänliga.
 
Hur som helst är det bara början på alla möjligheter du kan uppnå när du förstår denna kod och börjar göra ändringar för dina personliga behov.
 
Jag uppmuntrar dig att fortsätta att forska om navigeringsklubben. Det finns många möjligheter dolda där, du kan satsa på det.



		
			
	   
	




Koda