Editare HTML pentru bara de navigație WordPress
Da, va trebui să implementați clasa walker pentru asta.
Iată un exemplu simplu.
$defaults = array(
'theme_location' => 'primary',
'container' => 'ul',
'menu_class' => 'nav navbar-nav main-nav',
'walker' => new Primary_Walker_Nav_Menu()
);
wp_nav_menu( $defaults );
În blocul de cod de mai sus, funcția wp_nav_menu()
ia $defaults
ca argument. În array-ul $defaults
, ultima cheie este walker. Valoarea cheii walker este un obiect al clasei Primary_Walker_Nav_Menu
.
În fișierul functions.php
implementați următorul cod:
class Primary_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
if (array_search('menu-item-has-children', $item->classes)) {
$output .= sprintf("\n<li class='dropdown %s'><a href='%s' class=\"dropdown-toggle\" data-toggle=\"dropdown\" >%s</a>\n", ( array_search('current-menu-item', $item->classes) || array_search('current-page-parent', $item->classes) ) ? 'active' : '', $item->url, $item->title
);
} else {
$output .= sprintf("\n<li %s><a href='%s'>%s</a>\n", ( array_search('current-menu-item', $item->classes) ) ? ' class="active"' : '', $item->url, $item->title
);
}
}
function start_lvl(&$output, $depth) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class=\"dropdown-menu\" role=\"menu\">\n";
}
}
Metoda start_el()
este folosită pentru a adăuga tag-ul HTML de deschidere pentru un singur element din arbore (cum ar fi <li>
, <span>
, sau <a>
) la $output
.
Metoda start_lvl()
este executată când walker-ul ajunge la începutul unei noi "ramuri" în structura arborelui.
În general, această metodă este folosită pentru a adăuga tag-ul de deschidere al unui element HTML container (cum ar fi <ol>
, <ul>
, sau <div>
) la $output
.
Rezultatul implementării de mai sus va fi următorul HTML:
<ul id="menu-main-navigation" class="nav navbar-nav main-nav">
<li class="dropdown ">
<a href="http://karunshakya.com.np/services/" class="dropdown-toggle">Servicii</a>
<ul class="dropdown-menu" role="menu">
<li><a href="http://karunshakya.com.np/services/selection-et-recrutement/">Selecție și recrutare</a></li>
<li><a href="http://karunshakya.com.np/services/mise-disposition-de-personnel/">Punere la dispoziție a personalului</a></li>
<li><a href="http://karunshakya.com.np/services/gestion-de-salaire/">Gestionare salarii</a></li>
</ul>
</li>
<li><a href="http://karunshakya.com.np/news/">Știri</a></li>
<li><a href="http://karunshakya.com.np/medias/">Media</a></li>
<li class="last-child"><a href="http://karunshakya.com.np/contactez-nous/">Contactați-ne</a></li>
</ul>
Cum să folosiți clasa Walker:
http://code.tutsplus.com/tutorials/understanding-the-walker-class--wp-25401

Vă rugăm să editați răspunsul dumneavoastră pentru a include codul relevant și implementarea în răspunsul dumneavoastră. Dacă acel link nu mai funcționează vreodată, atunci răspunsul nu va ajuta pe nimeni.

Dacă dorești să modifici doar elementele externe (nu elementele li în sine), poți folosi argumentul 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>'
în funcția wp_nav_menu()
și să-l editezi după necesități. De exemplu, acest cod arată cum să înfășori lista într-un element nav
și un element div
:
'items_wrap' => '<div><nav><ul id="%1$s" class="%2$s">%3$s</ul></nav></div>',
.
De asemenea, poți adăuga alte elemente pentru a modifica conținutul <li>
și <a>
folosind 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => ''
.
Dacă acest lucru nu te ajută, te rog să arăți codul HTML final pe care încerci să-l obții.
