Perché menu personalizzati Nav genera così tanti lezioni su voci di elenco? Posso gestire questo in qualche modo?

wordpress.stackexchange https://wordpress.stackexchange.com/questions/23

  •  16-10-2019
  •  | 
  •  

Domanda

Di seguito è riportato un esempio. 3 classi associate a ciascun elemento, ad eccezione della voce corrente, che ha 6. Posso Pare questo giù in qualche modo? 

<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>
È stato utile?

Soluzione

vado contro la maggioranza su questo:)

Sì, può essere una buona idea per mettere a nudo il basso. Personalmente mi sto tenendo solo le classi di tipo current-xxx e la loro sostituzione con active , e active-parent (per genitore attivo o antenato elementi).

Perché?

  • giro per il web, attiva è diventata la classe standard per le voci di menu attivi (in cima a quello WP ha classe incoerente convenzioni di denominazione tra i suoi nomi propria classe).
  • si arriva a scrivere le regole CSS meno; la larghezza di banda che si salva potrebbe non essere molto, ma rende sicuramente il file CSS più leggibile

Codice Aggiornato: 

// 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();
}

Aggiornamento: Per chiunque usi questo codice, la classe active-parent non è più necessario (a meno che non hai ancora bisogno di IE 6 supporto). Con il selettore bambino (>) si può efficacemente lo stile del genitore attivo e bambino attivo qualsiasi modo si desidera.

Altri suggerimenti

Tutte le classi sono per aggancio utili in javascript per qualcosa come Superfish, non solo per IE6.

Inoltre, senza una classe, come current_page_item, si potrebbe non essere in grado di evidenziare la pagina corrente all'interno della navigazione.

La flessibilità è la chiave. Aggiungere tutte le classi, quelli unici per oggetti unici nella lista, dare al progettista fine un sacco di flessibilità in styling. Ma io sono d'accordo, che è un buttload di classi. Un programmatore HTML decente, progettista potrebbe fare l'equivalente con molta codice meno.

EDIT: ha reso più chiaro quello che volevo dire, senza mancare di rispetto inteso

Modificato da One Trick Pony di codice in quanto non ha funzionato per me con una versione corrente di WP (3.5.1).

Aggiunte le classi tratteggiate come WP ora include entrambe le versioni sottolineato e tratteggiate delle classi gerarchia pagina.

array_diff cambiato -.> Array_intersect come ritorni diff tutte le classi invece della lista filtrato 

// 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));
}

non voglio raccomandare paring giù. Sì, il markup potrebbe apparire gonfio, ma questo è il solo modo si può veramente limitare lo stile, se volete che il vostro sito a guardare bene, per esempio, IE6. Tenete a mente che IE6 non supporta nativamente più selettori (cioè li.menu-item.current si romperà e predefinito li.current), quindi se si sta facendo ogni fantasia CSS e desidera lavorare con IE6, è meglio di avere un sacco di selettori di classe a disposizione che non abbastanza.

Quindi, in realtà, è potrebbe pare la lista a class = "menu-item" ... ma se avete intenzione di mai avere un menu con più di un tipo postale, avrete bisogno di menu-item-tipo-post_type ... e se si vuole fare il filtraggio più elaborato, potrai beneficiare dal menu-item -. ## classe così

Ricordate, nessuno sarà probabilmente mai vedere il codice vero e proprio dietro il vostro sito, e dopo aver definito più classi non sarà male a nessuno.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a wordpress.stackexchange
scroll top