Personalizar as classes e elementos do widget tipo menu em um tema
-
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-->
-
PS: A imagem do post que falei é essa
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?
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.
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.
- O tópico ‘Personalizar as classes e elementos do widget tipo menu em um tema’ está fechado para novas respostas.