Impostazione degli elementi di navigazione attivi quando WordPress non lo fa

WordPress svolge un lavoro eccellente evidenziando i messaggi, le pagine o le tassonomie standard correnti quando li includi in un menu di navigazione. Ma quando si crea un post personalizzato o una tassonomia personalizzata, tutto va storto e la navigazione smette di evidenziare la pagina corrente. Fortunatamente c'è una soluzione alternativa, è possibile specificare manualmente quale elemento del menu evidenzia quando si mostra contenuto personalizzato.

Come funzionerà

La soluzione è semplice. Abbiamo scritto alcune righe di codice che creano una pagina delle impostazioni in cui specifichi gli elementi del menu da evidenziare per ogni tipo di contenuto personalizzato. Il passaggio successivo consiste nell'override della classe Walker di navigazione di WordPress predefinita per generare una classe di evidenziazione quando necessario. Semplice ed efficace.

Passaggio 1 Creazione e utilizzo di un file di inclusione personalizzato

Crea un nuovo file chiamato navigation.php e includerlo dal functions.php file.

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

Ora siamo pronti per iniziare con il codice reale.

Passaggio 2 Creazione della pagina delle impostazioni

Innanzitutto, registra un nuovo gruppo di impostazioni per generare una nuova pagina delle impostazioni di wp-admin. Nel tuo vuoto navigation.php file inserire il seguente codice.

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

Quindi genera un nuovo elemento di menu per accedere alla nostra nuova pagina delle impostazioni in wp-admin.

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

Il menu_defaults_page () funzione stampa la pagina delle impostazioni all'interno di WordPress Admin. Prima di stampare gli input del modulo get_option ( '') ms_navigation_predefined_values richiede i valori memorizzati nel database e li memorizza $ ns_navigation_predefined_values come una matrice.

In questo caso non è ancora memorizzato nulla, quindi i valori sono vuoti. utilizzando settings_field () è richiesto per la stampa di campi nascosti correlati e obbligatori e per la gestione della sicurezza. Il resto del codice stampa gli elementi di input usando i valori in $ ns_navigation_predefined_values.

La pagina delle impostazioni è ora disponibile ma vuota. Dobbiamo popolarlo con tutti i post personalizzati e le tassonomie disponibili che sono stati generati e gli elementi del menu disponibili per abbinarli. Inserisci il seguente codice.

 function menu_defaults_page () ?> 
 

 
 
  
  $ v) ?> 
 
 
 
  'ns_navigation_predefined_values ​​['. $ k. ']', 'echo' => 1, 'show_option_none' => __ ('- Select -'), 'option_none_value' => '0', 'selected' => $ current_dropdown_value [$ k])); ?> 
 
  
  
 
  $ v) ?> 
 
 
 
  'ns_navigation_predefined_values ​​['. $ k. ']', 'echo' => 1, 'show_option_none' => __ ('- Select -'), 'option_none_value' => '0', 'selected' => $ current_dropdown_value [$ k])); ?> 
 
  
  
  
 
 
   
La pagina delle impostazioni è ora creata ma dobbiamo ancora definire le funzioni chiamate nel codice sopra. Inserisci il seguente codice.
 
 function 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-> etichette-> nome;  return $ ns_registered_post_types;  function 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-> etichette-> nome;  return $ ns_registered_taxonomies_types; 
 
La funzione ns_get_post_types recupera tutti i tipi di post disponibili e restituisce solo quelli personalizzati. La funzione ns_get_taxonomies fa lo stesso, ma ovviamente per le tassonomie.
 
 
 Passaggio 3: farlo funzionare nel tema WordPress
 
Abbiamo dichiarato la pagina delle impostazioni e alcuni post personalizzati e tassonomie dichiarate. Il prossimo passo è farlo funzionare nel tema che stiamo usando. A scopo di test, stiamo lavorando con il tema Twenty Eleven di WordPress, ma questo codice dovrebbe funzionare con qualsiasi tema.
 
Modifichiamo la classe Walker Menu WordPress per sovrascrivere l'output di default. Stiamo leggendo le nostre impostazioni e utilizzando i valori per aggiungere un nuovo current_page_item ns_current_page_item classe nella rispettiva pagina quando visualizziamo il loop personalizzato o una singola pagina correlata.
 
 la classe NS_Walker_Nav_Menu estende Walker_Nav_Menu function start_el (& $ output, $ 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 = empty ($ item-> classes)? array (): (array) $ item-> classes; $ classes [] = '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)? '': "; $ output. = $ indent. ''; $ attributi =! vuoto ($ item-> attr_title)? 'title = "'. esc_attr ($ item-> attr_title). '"': "; $ attributes. =! empty ($ item-> target)? 'target ="'. esc_attr ($ item-> target). '"':"; $ attributi. =! vuoto ($ item-> xfn)? 'rel = "'. esc_attr ($ item-> xfn). '"': "; $ attributes. =! empty ($ item-> url)? 'href ="'. esc_attr ($ item-> url). '"':"; $ item_output = $ args-> prima; $ 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); 
 
Il nuovo NS_Walker_Nav_Menu Classe legge i valori di navigazione memorizzati in una matrice prima della stampa. In questo caso usando un Se() struttura di controllo per valutare se l'elemento di navigazione corrente corrisponde al valore memorizzato precedente per la pagina che WordPress sta attualmente stampando. Se la condizione è vera, le classi "current_page_item" e "ns_current_page_item" vengono aggiunte alle classi esistenti memorizzate nel $ class_names variabile.
 
Quindi dobbiamo usare un'altra funzione personalizzata. Quando lo chiamiamo, questa funzione stamperà il menu nel tema.
 
 function 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); 
 
Il ns_wp_nav_menu () è stato creato per semplificare l'uso del built-in wp_nav_menu (). Il primo passo è forzare la funzione a caricare la nuova classe Walker usando $ ns_walker = new NS_Walker_Nav_Menu () e aggiungendo all'array dei parametri usando $ args ['walker'] = $ ns_walker;.
 
Invece di passare sempre i parametri richiesti alla funzione, questo è incluso per impostazione predefinita. In questo caso specifico la funzione legge il post corrente e legge anche la pagina tradotta se il plugin WPML è abilitato sul tuo sito Web WordPress.
 
Prima valuta se la pagina è in visualizzazione singola usando is_singular () e ottenere dal database il valore memorizzato corrispondente. La seconda scelta possibile da valutare è se la pagina corrente è una query di tassonomia che utilizza is_tax (). In caso contrario, non c'è nulla da selezionare e il codice rilascia l'elemento di navigazione corrente usando unset ($ args ['current_nav_element']])
 
 
 Passaggio 4 Stampa del menu di navigazione in un tema WordPress
 
Apri il header.php file nel tuo tema Twenty Eleven, trova il wp_nav_menu () funzione, approssimativamente sulla riga 118, e sostituire con ns_wp_nav_menu mantenendo gli stessi parametri e nient'altro perché la nuova funzione gestisce il resto dei parametri richiesti per impostazione predefinita. Il nuovo codice dovrebbe assomigliare a questo:
 
 ", 'theme_location' => 'primary');?>
 
Questa funzione utilizza gli stessi argomenti dello standard wp_nav_menu funzione quindi sentitevi liberi di modificare quanto volete o necessario.
 
Aperto style.css anche e sostituire il codice on line 617 con:
 
 #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; 
 
 
 Passaggio 5 Ottieni il massimo dal tuo sistema di navigazione avanzato
 
Hai post personalizzati, tassonomie personalizzate e hai creato nuove pagine con modelli per mostrare questi loop personalizzati. Probabilmente hai creato un nuovo menu nel tuo wp-admin e hai aggiunto anche quelle pagine. Apri la pagina delle impostazioni dei menu predefiniti in Aspetto e imposta le pagine selezionate per ogni post personalizzato e tassonomia che hai creato.
 
Quando visualizzi il post personalizzato o la singola pagina correlata a questo post personalizzato, la navigazione evidenzierà l'elemento del menu corrispondente.
 
 
Conclusione
 
Ci sono molti modi per ottenere lo stesso risultato, ma dopo alcuni progetti pubblicati che utilizzano questo approccio ho trovato che questo è il migliore e il più user-friendly.
 
Comunque questo è solo l'inizio di tutte le possibilità che puoi ottenere quando comprendi questo codice e inizi a fare modifiche per le tue esigenze personali.
 
Ti incoraggio a continuare le ricerche sulla classe Walker di navigazione. Ci sono molte possibilità nascoste lì, puoi scommetterci.



		
			
	   
	




Codice