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

  • Resolvido nerooficial

    (@nerooficial)


    7 anos, 11 meses atrás

    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:

    View post on imgur.com

    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)

    7 anos, 11 meses atrás

    PS: A imagem do post que falei é essa

    Moderador Felipe Elia

    (@felipeelia)

    7 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)

    7 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)

    7 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.