Editare HTML pentru bara de navigație WordPress

18 dec. 2014, 04:47:49
Vizualizări: 16.4K
Voturi: 3

Există vreo metodă prin care pot modifica HTML-ul barei de navigație de pe pagina mea WordPress? (Aș dori să adaug mai multe div-uri care vor fi controlate prin media queries.)

Mulțumesc pentru citire!

2
Comentarii

Ai încercat un walker personalizat?

fuxia fuxia
18 dec. 2014 05:04:28

@toscho Nu, nu auzisem de asta înainte să citesc răspunsurile utile de mai jos. Totuși, am decis să creez propriul fișier header.php în tema mea personalizată child, care îmi permite să editez html/css/php direct.

Rogare Rogare
19 dec. 2014 16:32:44
Toate răspunsurile la întrebare 2
2

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

18 dec. 2014 05:29:20
Comentarii

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.

Andrew Bartel Andrew Bartel
18 dec. 2014 20:07:35

Editat. Sper că explicația mea ajută la înțelegerea ușoară a clasei walker.

Karun Karun
18 dec. 2014 21:46:36
0

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.

18 dec. 2014 05:34:11