menus – ¿Por qué los menús de navegación personalizados generan tantas clases en los elementos de la lista? ¿Puedo manejar esto de alguna manera?

Pregunta:

A continuación se muestra un ejemplo. 3 clases adjuntas a cada artículo, excepto el artículo actual, que tiene 6. ¿Puedo reducir esto de alguna manera?

<ul id="menu-global-nav" class="sf-menu">
<li id="menu-item-63" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-5 current_page_item menu-item-63"><a href="#">Home</a></li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-30"><a href="#">Services</a>
   <ul class="sub-menu">
   <li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-39"><a href="#">Case Studies</a></li>
   <li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-38"><a href="#">Story Discovery</a></li>
   </ul>
</li>
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-32"><a href="#">Company</a></li>
<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-29"><a href="#">Why Case Studies?</a></li>
<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-28"><a href="#">Case Study Showcase</a></li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-27"><a href="#">Resources</a></li>
<li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-26"><a href="#">Online Store</a></li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-25"><a href="#">Contact Us</a></li>
</ul>

Respuesta:

Voy en contra de la mayoría en este 🙂

Sí, puede ser una buena idea quitarlo. Personalmente, mantengo solo las clases de tipo current-xxx y las reemplazo con active y active-parent (para elementos de padres o ancestros activos).

¿Por qué?

  • en la web, active se ha convertido en la clase estándar para los elementos de menú activos (además de eso, WP tiene convenciones de nomenclatura de clases inconsistentes entre sus propios nombres de clase).
  • puedes escribir menos reglas CSS; Es posible que el ancho de banda que ahorre no sea mucho, pero ciertamente hace que el archivo CSS sea más legible

Código actualizado:

// for custom menus 
add_filter('nav_menu_css_class', 'normalize_wp_classes', 10, 2);

// for the page menu fallback (wp_list_pages)
add_filter('page_css_class', 'normalize_wp_classes', 10, 2);

/**
 * @param  $classes array
 * @param  $item object
 * @return array
 */
function normalize_wp_classes(array $classes, $item = null){

  // old classes to be replaced with 'active'
  $replacements = array(
    'current-menu-item',
    'current-menu-parent',
    'current-menu-ancestor',
    'current_page_item',
    'current_page_parent',
    'current_page_ancestor',
  );

  // if any of the classes above are present,
  // return an array with a single class ('active')
  return array_intersect($replacements, $classes) ? array('active') : array();
}

Actualización: para cualquiera que use este código, la clase active-parent ya no es necesaria (a menos que aún necesite compatibilidad con IE 6). Usando el selector de niños ( > ) puede diseñar de manera efectiva el padre activo y el niño activo de la forma que desee.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top

web tasarım