Solucionado (ver solução)
Solucionado
(ver solução)
9
respostas

Como inserir tags html entre os itens do menu

Olá!

Estou fazendo um tema de wordpress utilizando um layout feito por um amigo. No layout do cara, ele utiliza tags para cada item do menu e, com o menu do wordpress sendo puxado pelo wp_nav_menu, eu não consigo colocar essas tags entre os itens.

Como posso proceder nesse caso?

Obrigado!

Seguem os códigos:

Original :

<div class="container-fluid top">
        <div class="row">
            <div class="col-lg-4">
                <div class="row align-items-center logo-align">
                    <div class="col-sm-12 col"><img class="logo" src="<?= $home;?>/assets/img/logo.png"/></div>
                </div>
            </div>
<div class="col-lg-8 menu-top">
            <ul class="list-inline menu">
                <li class="list-inline-item"><a href="##">Home</a></li>
                <li class="list-inline-item"><a href="##">Lançamentos</a></li>
                <li class="list-inline-item"><a href="##">Usados</a></li>
                <li class="list-inline-item"><a href="##">Oportunidades</a></li>
                <li class="list-inline-item"><a href="##">Contato</a></li>
                </ul>
            </div>
        </div>
    </div>

Wordpress:

<div class="container-fluid top">
        <div class="row">
            <div class="col-lg-4">
                <div class="row align-items-center logo-align">
                    <div class="col-sm-12 col"><img class="logo" src="<?= $home;?>/assets/img/logo.png"/></div>
                </div>
            </div>
            <div class="col-lg-8 menu-top">
                <ul class="list-inline menu">
                    <li class="list-inline-item">
                    <?php
                        $args = array(
                            'theme_location' => 'header-menu'
                        );
                        wp_nav_menu($args);
                    ?>
                    </li>
                </ul>
            </div>
        </div>
    </div>
9 respostas

Alceu, você pode simplesmente incluir depois que fecha o <li>, mas não vai conseguir manipular pelo admin do wordpress.

Ex:

<div class="container-fluid top">
        <div class="row">
            <div class="col-lg-4">
                <div class="row align-items-center logo-align">
                    <div class="col-sm-12 col"><img class="logo" src="<?= $home;?>/assets/img/logo.png"/></div>
                </div>
            </div>
            <div class="col-lg-8 menu-top">
                <ul class="list-inline menu">
                 <li class="list-inline-item">
                    <?php
                        $args = array(
                            'theme_location' => 'header-menu'
                        );
                        wp_nav_menu($args);
                    ?>
                 </li>
                <li class="list-inline-item"><a href="##">Home</a></li>
                <li class="list-inline-item"><a href="##">Lançamentos</a></li>
                <li class="list-inline-item"><a href="##">Usados</a></li>
                <li class="list-inline-item"><a href="##">Oportunidades</a></li>
                <li class="list-inline-item"><a href="##">Contato</a></li>
                </ul>
            </div>
        </div>
    </div>

É isso?

Entendi. Só que nesse caso não vou conseguir editar os menus no painel de administrador do wordpress...

Não teria alguma forma de eu usar o menu feito no admin com minhas tags do layout entre cada um dos links?

Mas comparando o seu código com o do wordpress, está usando as mesmas classes e acredito que ele vai incluir os itens com a mesma estrutura ul > li > a. Se você incluir pelo admin, deve ter exatamente o resultado do seu html.

Pois é, foi o que eu pensei também, mas ele acaba não pegando a class="list-inline-item" para cada um dos itens do menu e assim mostra tudo em lista e eu queria que ficasse inline.

será que incluir no css um .list-inline li {display:inline;} não resolve?

Hmmmm... É só botar isso no css? Eu sou uma negação pra css, brother... Hehehe, não consigo nem testar o negócio direito!! Mas eu tentei jogar esse código ali e a princípio não mudou nada...

Bom, em último caso eu posso usar os links gerados pelo wordpress no html sem problemas, mas seria interessante eu conseguir usar a funcionalidade de menu editável do WP...

solução!

Sim, só incluir no css... você pode até incluir pelo wordpress, sem editar o CSS original.

Aparência > Personalizar > CSS Adicional

Inclui lá o .list-inline li {display:inline;}e diga se deu certo :)

Deu certo!! Show de bola! Só que ele deu um pequeno bug no resto do layout. Vou ver se consigo resolver, mas funcionou sim. Também não sabia desse CSS Adicional aí do WP, foi legal saber!

Obrigado!