Personalizar as classes e elementos do widget tipo menu em um tema

Resolvido

(@nerooficial)

Olá pessoal, tudo bem?

Eu tô desenvolvendo um Theme pra melhorar minhas skills com WP e que pretendo publicar na comunidade futuramente, daí agora passando o código estático para o Código dinâmico e gerenciável do WordPress (do HTML puro pro PHP + HTML) me deparei com a seguinte situação, eu tenho um menu lateral com accordion no meu tema, que é gerado por divs com classes específicas e quando adiciono à minha sidebar um widget do tipo “Menu”, ele exibe uma UL (padrão) e com classes específicas do WP, vejam na imagem:

http://i.imgur.com/93Ydotn.png

1 – O primeiro exemplo é o que é gerado pelo WP (Menu WP)
2 – O segundo item abaixo em inglês é o menu estático, em puro formato HTML.

Se ajudar, segue abaixo o código do menu Estático

<h2>Menu Estático</h2>
  <div class="panel-group category-products" id="accordian"><!--category-productsr-->
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordian" href="#sportswear">
            <span class="badge pull-right"><i class="fa fa-plus"></i></span>
            Sportswear
          </a>
        </h4>
      </div>
      <div id="sportswear" class="panel-collapse collapse">
        <div class="panel-body">
          <ul>
            <li><a href="#">Nike </a></li>
            <li><a href="#">Under Armour </a></li>
            <li><a href="#">Adidas </a></li>
            <li><a href="#">Puma</a></li>
            <li><a href="#">ASICS </a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordian" href="#mens">
            <span class="badge pull-right"><i class="fa fa-plus"></i></span>
            Mens
          </a>
        </h4>
      </div>
      <div id="mens" class="panel-collapse collapse">
        <div class="panel-body">
          <ul>
            <li><a href="#">Fendi</a></li>
            <li><a href="#">Guess</a></li>
            <li><a href="#">Valentino</a></li>
            <li><a href="#">Dior</a></li>
            <li><a href="#">Versace</a></li>
            <li><a href="#">Armani</a></li>
            <li><a href="#">Prada</a></li>
            <li><a href="#">Dolce and Gabbana</a></li>
            <li><a href="#">Chanel</a></li>
            <li><a href="#">Gucci</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordian" href="#womens">
            <span class="badge pull-right"><i class="fa fa-plus"></i></span>
            Womens
          </a>
        </h4>
      </div>
      <div id="womens" class="panel-collapse collapse">
        <div class="panel-body">
          <ul>
            <li><a href="#">Fendi</a></li>
            <li><a href="#">Guess</a></li>
            <li><a href="#">Valentino</a></li>
            <li><a href="#">Dior</a></li>
            <li><a href="#">Versace</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title"><a href="#">Kids</a></h4>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title"><a href="#">Fashion</a></h4>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title"><a href="#">Households</a></h4>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title"><a href="#">Interiors</a></h4>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title"><a href="#">Clothing</a></h4>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title"><a href="#">Bags</a></h4>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title"><a href="#">Shoes</a></h4>
      </div>
    </div>
  </div><!--/category-products-->

Visualizando 4 respostas - 1 até 4 (de um total de 4)

Criador do tópico nerooficial
(@nerooficial)

5 anos, 11 meses atrás

PS: A imagem do post que falei é essa
Moderador Felipe Elia
(@felipeelia)

5 anos, 11 meses atrás
Oi @nerooficial,

Você vai precisar implementar um Walker diferente. Funciona assim: no seu functions.php (ou em um arquivo separado que você pode incluir com a linha aqui embaixo)
require get_template_directory() . '/includes/custom-walker.php'; // o caminho é só um exemplo.
você vai criar uma classe que estende Walker_Nav_Menu e depois vai passar uma instância dessa classe na sua chamada para a função wp_nav_menu(). Aqui tem um bom exemplo pra facilitar o entendimento:
```
// A chamada
wp_nav_menu( array(
    'menu'   => 'Something custom walker',
    'walker' => new Custom_Walker_Nav_Menu(), // O nome da sua classe aqui
) );
```
```
class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
// Sua classe com os métodos que você quer alterar
}
```
Na sua classe você vai sobrescrever as funções de Walker_Nav_Menu. Por exemplo, no método start_lvl ele cria as <ul>, vocẽ então vai sobrescrever para que sejam criadas as divs certas. Deu pra entender?

Qualquer dúvida é só voltar aqui. Se conseguir resolver não esqueça de voltar para marcar seu tópico como “resolvido”, ok?
Moderador Felipe Elia
(@felipeelia)

5 anos, 11 meses atrás

Aqui tem um exemplo onde ele fala inclusive sobre a “profundidade” (depth) do elemento. Se é primeiro nível faz uma coisa, senão faz outra. Isso pode ser importante pra vocẽ também.

Criador do tópico nerooficial
(@nerooficial)

5 anos, 11 meses atrás

Obrigado pela ajuda Felipe. Eu não havia conseguido implementar a sua solução, mas só agora percebi, eu tinha errado a lógica.

Obrigado pela ajuda.

Visualizando 4 respostas - 1 até 4 (de um total de 4)

O tópico ‘Personalizar as classes e elementos do widget tipo menu em um tema’ está fechado para novas respostas.

Personalizar as classes e elementos do widget tipo menu em um tema

Tags de tópico

Visualizações