it-swarm-es.com

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

A continuación se muestra un ejemplo. 3 clases adjuntas a cada elemento, excepto el elemento 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>
6
Ray Gulick

Voy contra la mayoría en este caso :)

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

¿Por qué?

  • alrededor de la web, activo se ha convertido en la clase estándar para los elementos de menú activos (además de eso WP tiene convenciones de nomenclatura de clase inconsistentes entre sus propios nombres de clase).
  • tienes la oportunidad de escribir menos reglas CSS; El ancho de banda que guarda puede que no sea mucho, pero sin duda 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 IE 6 soporte). Con el selector de elementos secundarios (>) puede aplicar un estilo efectivo al padre activo y al hijo activo de la forma que desee.

7
onetrickpony

Modificado del código de One Trick Pony, ya que no me funcionó con una versión actual de WP (3.5.1).

Las clases discontinuas agregadas como WP ahora incluyen versiones subrayadas y discontinuas de las clases de jerarquía de páginas.

Se modificó array_diff -> array_intersect como diff devuelve todas las clases en lugar de la lista filtrada.

// 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($classes, $item){

  // old class => new class
  $replacements = array(
    'current-menu-item'     => 'active',
    'current-menu-parent'   => 'active-parent',
    'current-menu-ancestor' => 'active-parent',
    'current_page_item'     => 'active',
    'current_page_parent'   => 'active-parent',
    'current_page_ancestor' => 'active-parent',
    'current-page-item'     => 'active',
    'current-page-parent'   => 'active-parent',
    'current-page-ancestor' => 'active-parent'
  );

  // do the replacements above
  $classes = strtr(implode(',', $classes), $replacements);
  $classes = explode(',', $classes);

  // remove any classes that are not present in the replacements array,
  // and return the result

  return array_unique(array_intersect(array_values($replacements), $classes));
}
4
Nicholas Turbanov

Todas esas clases son útiles para enganchar en javascript para algo como superfish, no solo por IE6.

Además, sin una clase como current_page_item, no podría resaltar la página actual dentro de la navegación.

La flexibilidad es la clave. Agregue todas las clases, únicas para artículos únicos en la lista, y dé al diseñador final mucha flexibilidad en el estilo. Pero estoy de acuerdo, eso es un montón de clases. Un programador HTML decente, diseñador podría hacer el equivalente con mucho menos código.

EDITAR: Dejé más claro lo que quise decir, sin faltarle el respeto.

4
Dan Gayle

La función wp_nav_menu le permite modificar el ID y la Clase tanto para el contenedor como para el menú. Pero no los elementos LI.

Si echa un vistazo a source donde está construyendo los elementos LI (función start_el ()); Puedes ver que está usando el filtro nav_menu_css_class; El filtro tomará la matriz que le asigne (de cadenas) y la usará para construir las etiquetas de clase.

Nota: Por lo que veo en el código, si le pasas una matriz vacía. Wordpress todavía incluirá el atributo de clase para el elemento LI, simplemente estará vacío.

4
Ryan Gibbons

No recomendaría reducirlo. Sí, el marcado puede parecer abultado, pero esta es la forma solo de manera que realmente puede reducir el estilo si desea que su sitio se vea bien, por ejemplo, IE6. Tenga en cuenta que IE6 no admite de forma nativa múltiples selectores (es decir, li.menu-item.current se interrumpirá y se establecerá de forma predeterminada en li.current), por lo que si está realizando cualquier CSS de lujo y desea que funcione con IE6, es mejor tener un montón de selectores de clase disponibles que no es suficiente.

Entonces, en realidad, podría reducir la lista a class = "menu-item" ... pero si alguna vez va a tener un menú con más de un tipo de publicación, necesitará menu-item-type-post_type ... y si desea realizar un filtrado más sofisticado, también se beneficiará de la opción de menú-item - ##.

Recuerde, probablemente nadie verá el código real detrás de su sitio, y tener múltiples clases definidas no dañará nada.

2
EAMann

@Ray Gulick: Odio bucear, pero estoy de acuerdo con @Dan Gale, @EAMann y @ Insanity5902. La "hinchazón" no causa ningún problema tangible y le permite a un diseñador crear un tema para el menú de muchas maneras flexibles.

Tengo curiosidad por qué te molesta la "hinchazón"? Sé que no es bonito, pero casi nadie lo verá. Si se trata de un problema de rendimiento que son cientos de otras cosas que deben abordarse primero como reducir las solicitudes HTTP y reducir el tamaño de sus imágenes, la última de las cuales probablemente tendrá un mayor grado de beneficio.

2
MikeSchinkel