Configuración de elementos de navegación activa cuando WordPress no lo hace

WordPress hace un excelente trabajo resaltando las publicaciones, páginas o taxonomías estándar actuales cuando las incluye en un menú de navegación. Pero cuando creas una publicación personalizada o una taxonomía personalizada, todo va mal y la navegación deja de resaltar la página actual. Afortunadamente, hay una solución alternativa: puede especificar manualmente qué elementos del menú se destacan cuando se muestra contenido personalizado..

Cómo funcionará esto

La solución es simple. Hemos escrito algunas líneas de código que crean una página de configuración donde especificará los elementos del menú para resaltar para cada tipo de contenido personalizado. El siguiente paso es anular la clase predeterminada de navegación de WordPress Walker para generar una clase destacada cuando sea necesario. Simple y eficaz.

Paso 1 Creando y utilizando un archivo de inclusión personalizado

Crear un nuevo archivo llamado navegación.php e incluirlo desde el funciones.php expediente.

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

Ahora estamos listos para comenzar con el código real..

Paso 2 Creando la página de configuración

Primero, registre un nuevo grupo de configuraciones para generar una nueva página de configuración de wp-admin. En tu vacio navegación.php archivo inserte el siguiente código.

 add_action ('admin_init', 'ns_register_navigation_settings'); función ns_register_navigation_settings () register_setting ('ns_navigation', 'ns_navigation_predefined_values'); 

Luego genere un nuevo elemento de menú para acceder a nuestra nueva página de configuración en wp-admin.

 add_action ('admin_menu', 'ns_navigation_options'); function ns_navigation_options () add_submenu_page ('themes.php', 'Menús Predefinidos', 'Menús Predefinidos', 'edit_theme_options', 'menu-defaults', 'menu_defaults_page'); 

los menu_defaults_page () La función imprime la página de configuración dentro de WordPress Admin. Antes de imprimir las entradas del formulario. get_option ('ms_navigation_predefined_values') solicita los valores almacenados en la base de datos y los almacena en $ ns_navigation_predefined_values como una matriz.

En este caso, no hay nada almacenado todavía, por lo que los valores están vacíos. Utilizando settings_field () es necesario para la impresión de campos ocultos relacionados y requeridos y también para el manejo de la seguridad. El resto del código imprime los elementos de entrada usando los valores en $ ns_navigation_predefined_values.

La página de configuración ahora está disponible pero vacía. Tenemos que rellenarlo con todas las publicaciones y taxonomías personalizadas disponibles que se han generado y los elementos de menú disponibles para que coincidan con esos valores. Inserte el siguiente código.

 función 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]))); ?> 
 
  
  
  
 
 
   
Ahora se crea la página de configuración, pero aún tenemos que definir las funciones llamadas en el código anterior. Inserte el siguiente código.
 
 function ns_get_post_types () $ post_types = get_post_types (array ('public' => true, '_builtin' => false), 'objetos'); foreach ($ post_types como $ k => $ v) $ ns_registered_post_types -> $ k = $ v-> labels-> name;  devuelve $ ns_registered_post_types;  function ns_get_taxonomies () $ taxonomies_types = get_taxonomies (array ('public' => true, '_builtin' => false), 'objetos'); foreach ($ taxonomies_types como $ k => $ v) $ ns_registered_taxonomies_types -> $ k = $ v-> labels-> name;  devolver $ ns_registered_taxonomies_types; 
 
La función ns_get_post_types recupera todos los tipos de publicación disponibles y genera solo aquellos que son personalizados. La función ns_get_taxonomies hace lo mismo, pero para taxonomías por supuesto.
 
 
 Paso 3 para que funcione en el tema de WordPress
 
Tenemos la página de configuración declarada y algunas publicaciones y taxonomías personalizadas declaradas. El siguiente paso es hacer que funcione en el tema que estamos usando. Para propósitos de prueba, estamos trabajando con el tema Twenty Eleven de WordPress, pero este código debería funcionar con cualquier tema.
 
Modifiquemos la clase de WordPress Menu Walker para anular la salida predeterminada. Estamos leyendo nuestra configuración y usando los valores para agregar un nuevo current_page_item ns_current_page_item clase en la página respectiva cuando estamos mostrando el bucle de publicación personalizado o una sola página relacionada.
 
 la clase NS_Walker_Nav_Menu extiende Walker_Nav_Menu function start_el (& $ output, $ item, $ depth, $ args) global $ wp_query; $ sangría = ($ profundidad)? str_repeat ("\ t", $ depth): "; if (isset ($ args-> current_nav_element)) $ current_nav_element = $ args-> current_nav_element; $ class_names = $ value ="; $ clases = vacío ($ item-> clases)? 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_item_id', 'menu-item-'. $ item-> ID, $ item, $ args); $ id = strlen ($ id)? '': "; $ salida. = $ sangría. ''; $ atributos =! ¿vacío ($ item-> attr_title)? 'title = "'. esc_attr ($ item-> attr_title). '"': "; $ attributes. =! empty ($ item-> target)? 'target ="'. esc_attr ($ item-> target). '"':"; $ atributos. =! ¿vacío ($ 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); 
 
El nuevo NS_Walker_Nav_Menu La clase lee los valores de navegación almacenados en una matriz antes de imprimir. En este caso utilizando una Si() estructura de control para evaluar si el elemento de navegación actual coincide con el valor almacenado anterior para la página en la que se está imprimiendo WordPress. Si la condición es verdadera, las clases "current_page_item" y "ns_current_page_item" se agregan a las clases existentes almacenadas en el $ nombres de clase variable.
 
Entonces necesitamos usar una función más personalizada. Cuando lo llamemos, esta función imprimirá el menú en el 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); 
 
los ns_wp_nav_menu () se crea para simplificar el uso del wp_nav_menu () integrado. El primer paso es forzar la función para cargar la nueva clase Walker usando $ ns_walker = new NS_Walker_Nav_Menu () y añadiendo a la matriz de parámetros usando $ args ['walker'] = $ ns_walker;.
 
En lugar de pasar siempre los parámetros requeridos a la función, esto se incluye por defecto. En este caso específico, la función lee la publicación actual e incluso lee la página traducida si el complemento WPML está habilitado en su sitio web de WordPress.
 
Primero evalúe si la página está en vista única usando is_singular () y obtener de la base de datos el valor almacenado correspondiente. La segunda opción posible para evaluar es si la página actual es una consulta de taxonomía utilizando is_tax (). Si no, no hay nada que seleccionar y el código libera el elemento de navegación actual usando unset ($ args ['current_nav_element'])
 
 
 Paso 4 Imprimiendo el menú de navegación en un tema de WordPress
 
Abre el header.php archivo en su tema Twenty Eleven, encontrar el wp_nav_menu () función, aproximadamente en la línea 118, y reemplazar con ns_wp_nav_menu manteniendo los mismos parámetros y nada más porque la nueva función maneja el resto de los parámetros requeridos de forma predeterminada. El nuevo código debería verse así:
 
 ", 'theme_location' => 'primary');?>
 
Esta función utiliza los mismos argumentos que el estándar. wp_nav_menu funciona, así que siéntete libre de modificar todo lo que quieras o necesites.
 
Abierto style.css también y reemplazar el código en línea 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; 
 
 
 Paso 5 Aproveche al máximo su sistema de navegación mejorado
 
Tiene publicaciones personalizadas, taxonomías personalizadas y ha creado nuevas páginas con plantillas para mostrar estos bucles personalizados. Probablemente haya creado un nuevo menú en su wp-admin y también haya agregado esas páginas. Abra la página de configuración de menús predefinida ubicada en Apariencia y configure las páginas seleccionadas para cada publicación personalizada y taxonomía que haya creado..
 
Cuando visualice la publicación personalizada o la única página relacionada con esta publicación personalizada, la navegación resaltará el elemento del menú coincidente.
 
 
Conclusión
 
Hay muchas maneras de lograr este mismo resultado, pero después de algunos proyectos publicados que utilizan este enfoque, encontré que este es el mejor y el más fácil de usar..
 
De todos modos, esto es solo el comienzo de todas las posibilidades que puede lograr cuando entiende este código y comienza a realizar modificaciones para sus necesidades personales..
 
Te animo a que sigas investigando sobre la clase de navegación Walker. Hay muchas posibilidades escondidas ahí, puedes apostar en ello..



		
			
	   
	




Código