Actieve navigatie-elementen instellen wanneer WordPress dat niet doet

WordPress doet uitstekend werk door huidige standaardberichten, pagina's of taxonomieën te markeren wanneer je ze opneemt in een navigatiemenu. Maar wanneer u een aangepaste post of aangepaste taxonomie maakt, gaat alles fout en wordt de huidige pagina niet langer gemarkeerd door de navigatie. Gelukkig is er een oplossing, je kunt handmatig aangeven welk menu-element wordt gemarkeerd wanneer je aangepaste inhoud weergeeft.

Hoe dit zal werken

De oplossing is eenvoudig. We hebben een paar regels code geschreven die een pagina met instellingen maken, waarin u de menu-elementen opgeeft die moeten worden gemarkeerd voor elk aangepast inhoudstype. De volgende stap is om de standaard WalkPress-klasse voor WordPress-navigatie te overschrijven om zo nodig een markeringsklasse te genereren. Eenvoudig en effectief.

Stap 1 Een aangepast bestand voor opnemen maken en gebruiken

Maak een nieuw bestand met de naam navigation.php en neem het op uit de functions.php het dossier.

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

Nu zijn we klaar om te beginnen met de echte code.

Stap 2 De instellingenpagina maken

Registreer eerst een nieuwe instellingengroep om een nieuwe wp-admin-instellingenpagina te genereren. In je lege ruimte navigation.php bestand de volgende code invoegen.

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

Genereer vervolgens een nieuw menu-element om toegang te krijgen tot onze nieuwe instellingenpagina in wp-admin.

 add_action ('admin_menu', 'ns_navigation_options'); function ns_navigation_options () add_submenu_page ('themes.php', 'Predefined Menus', 'Predefined Menus', 'edit_theme_options', 'menu-defaults', 'menu_defaults_page');

De menu_defaults_page () functie drukt de instellingenpagina in WordPress Admin af. Voordat u de formulierinvoer afdrukt get_option ( 'ms_navigation_predefined_values') vraagt de waarden op die zijn opgeslagen in de database en slaat ze op $ ns_navigation_predefined_values als een array.

In dit geval is er niets opgeslagen, dus de waarden zijn leeg. Gebruik makend van settings_field () is vereist voor afdrukgerelateerde en vereiste verborgen velden en ook voor beveiligingsafhandeling. De rest van de code drukt de invoerelementen af met behulp van de waarden in $ ns_navigation_predefined_values.

De instellingenpagina is nu beschikbaar, maar leeg. We moeten deze vullen met alle beschikbare aangepaste berichten en taxonomieën die zijn gegenereerd en de beschikbare menu-elementen die overeenkomen met die waarden. Voer de volgende code in.

 function menu_defaults_page () ?>  
 
   
  $ v) ?>      'ns_navigation_predefined_values ['. $ k. ']', 'echo' => 1, 'show_option_none' => __ ('- Selecteer -'), 'option_none_value' => '0', 'selected' => $ current_dropdown_value [$ k])); ?>  
  
  
 
  $ v) ?>      'ns_navigation_predefined_values ['. $ k. ']', 'echo' => 1, 'show_option_none' => __ ('- Selecteer -'), 'option_none_value' => '0', 'selected' => $ current_dropdown_value [$ k])); ?>  
  
    
 
 
   De instellingenpagina is nu gemaakt, maar we moeten nog steeds de functies definiëren die in de bovenstaande code worden genoemd. Voer de volgende code in.
  function 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-> naam;  return $ ns_registered_post_types;  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-> naam;  return $ ns_registered_taxonomies_types; 
 De functie ns_get_post_types haalt alle beschikbare berichttypen op en geeft alleen de aangepaste berichttypen weer. De functie ns_get_taxonomies doet hetzelfde, maar voor taxonomieën natuurlijk.
 
  Stap 3 Laat het werken in het WordPress-thema
 We hebben de instellingenpagina gedeclareerd en een paar aangepaste berichten en taxonomieën gedeclareerd. De volgende stap is om het te laten werken in het thema dat we gebruiken. Voor testdoeleinden werken we met het Twenty Eleven-thema van WordPress, maar deze code zou met elk thema moeten werken.
 Laten we de WordPress-menu Walker-klasse wijzigen om de standaarduitvoer te negeren. We lezen onze instellingen en gebruiken de waarden om een nieuwe toe te voegen current_page_item ns_current_page_item class op de betreffende pagina wanneer we de aangepaste berichtlus of gerelateerde enkele pagina weergeven.
  class NS_Walker_Nav_Menu breidt Walker_Nav_Menu uit function start_el (& $ output, $ item, $ depth, $ args) global $ wp_query; $ indent = ($ diepte)? str_repeat ("\ t", $ diepte): "; if (isset ($ args-> current_nav_element)) $ current_nav_element = $ args-> current_nav_element; $ class_names = $ value ="; $ klassen = leeg ($ item-> klassen)? array (): (array) $ item-> klassen; $ klassen [] = 'menu-item-'. $ 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)? '': "; $ uitvoer. = $ streepje. ''; $ attributen =! empty ($ item-> attr_title)? 'title = "'. esc_attr ($ item-> attr_title). '"': "; $ attributes. =! empty ($ item-> target)? 'target ="'. esc_attr ($ item-> target). '"':"; $ attributen. =! leeg ($ item-> xfn)? 'rel = "'. esc_attr ($ item-> xfn). '"': "; $ attributes. =! empty ($ item-> url)? 'href ="'. esc_attr ($ item-> url). '"':"; $ item_output = $ args-> before; $ item_output. = ''; $ item_output. = $ args-> link_before. apply_filters ('the_title', $ item-> title, $ item-> ID). $ Args-> link_after; $ item_output. = ''; $ item_output. = $ args-> after; $ output. = apply_filters ('walker_nav_menu_start_el', $ item_output, $ item, $ depth, $ args); 
 De nieuwe NS_Walker_Nav_Menu Klasse leest de navigatiewaarden die zijn opgeslagen in een array voordat deze worden afgedrukt. In dit geval met behulp van een als() besturingsstructuur om te evalueren of het huidige navigatie-element overeenkomt met de vorige opgeslagen waarde voor de pagina die WordPress momenteel afdrukt. Als de voorwaarde waar is, worden de klassen "current_page_item" en "ns_current_page_item" toegevoegd aan de bestaande klassen die zijn opgeslagen in de $ class_names veranderlijk.
 Dan moeten we nog een aangepaste functie gebruiken. Als we het noemen, drukt deze functie het menu in het thema af.
  functie 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-> taxonomy; $ 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); 
 De ns_wp_nav_menu () is gemaakt om het gebruik van het ingebouwde wp_nav_menu () te vereenvoudigen. De eerste stap is om de functie te dwingen de nieuwe Walker-klasse te laden met $ ns_walker = new NS_Walker_Nav_Menu () en toevoegen aan de parametersarray met $ args ['walker'] = $ ns_walker;.
 In plaats van altijd de vereiste parameters door te geven aan de functie, wordt deze standaard meegeleverd. In dit specifieke geval leest de functie de huidige post en leest zelfs de vertaalde pagina als de WPML-plug-in is ingeschakeld op uw WordPress-website.
 Beoordeel eerst of de pagina in de enkelvoudige weergave staat met is_singular () en haal uit de database de bijbehorende opgeslagen waarde. De tweede mogelijke keuze om te evalueren is of de huidige pagina een taxonomiequery is met is_tax (). Zo niet, dan is er niets om te selecteren en geeft de code het huidige navigatie-element vrij met unset ($ args ['current_nav_element'])
 
  Stap 4 Het navigatiemenu afdrukken in een WordPress-thema
 Open de header.php bestand in uw Twenty Eleven-thema, zoek het wp_nav_menu () functie, ongeveer op regel 118, en vervang met ns_wp_nav_menu behoud van dezelfde parameters en niets anders omdat de nieuwe functie standaard de rest van de vereiste parameters verwerkt. De nieuwe code zou er als volgt uit moeten zien:
  ", 'theme_location' => 'primary');?>
 Deze functie gebruikt dezelfde argumenten als de standaard wp_nav_menu functie dus voel je vrij om zo veel te knijpen als je wilt of nodig hebt.
 Open style.css en vervang de code on-line 617 met:
  #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; 
 
  Stap 5 Haal het beste uit uw verbeterde navigatiesysteem
 U hebt aangepaste berichten, aangepaste taxonomieën en u hebt nieuwe pagina's gemaakt met sjablonen om deze aangepaste lussen te tonen. U hebt waarschijnlijk een nieuw menu in uw wp-admin aangemaakt en die pagina's ook toegevoegd. Open de pagina met vooraf gedefinieerde menu-instellingen onder Uiterlijk en stel de geselecteerde pagina's in voor elke aangepaste post en taxonomie die u hebt gemaakt.
 Wanneer u de aangepaste post of de enkele pagina weergeeft die gerelateerd is aan deze aangepaste post, markeert de navigatie het overeenkomende menu-element.
 
 Conclusie
 Er zijn veel manieren om hetzelfde resultaat te bereiken, maar na een paar gepubliceerde projecten met deze aanpak vond ik dit de beste en meest gebruiksvriendelijke.
 Hoe dan ook, dit is slechts het begin van alle mogelijkheden die u kunt bereiken als u deze code begrijpt en begint met het aanbrengen van wijzigingen voor uw persoonlijke behoeften.
 Ik moedig je aan om te blijven zoeken naar de navigatie-Walker-klasse. Er liggen veel mogelijkheden verborgen, je kunt er op wedden.



		
			
	   
	




Code