5

Pela primeira vez estou trabalhando na conversão de um template HTML para WordPress. Estou com algumas dificuldades e a que está mais me incomodando é a seguinte: Tenho um menu em HTML e gostaria de convertê-lo para WordPress, mantendo o dropdown, etc.

O código está em HTML, ou seja, as páginas não são essas, as páginas devem ser puxadas do próprio WordPress definidas pela opção menu do painel:

<div class="row">

    <div class="col-lg-4 col-md-4 col-sm-12">
        <div class="pm-header-logo-container">
            <a href="index.html"><img src="img/energy-fitness.png" class="img-responsive pm-header-logo" alt="Energy Fitness Studio"></a> 
        </div>
        <div class="pm-header-mobile-btn-container"></div>
    </div>

    <nav class="navbar-collapse collapse" id="pm-main-navigation">
        <ul class="sf-menu pm-nav">
            <li><a href="about-us.html">About us</a></li>
            <li>
                <a href="programs.html">Programs</a>
                <ul>
                    <li><a href="programs.html">Sport Specific</a></li>
                    <li><a href="programs.html">Nutritional Guidance</a></li>
                    <li><a href="programs.html">Personal training</a></li>
                    <li><a href="programs.html">Cardio training</a></li>
                    <li><a href="programs.html">Endurance training</a></li>
                </ul>
            </li>
            <li>
                <a href="classes.html">Classes</a>
                <ul>
                    <li>
                        <a href="classes.html">Kick-boxing</a>
                    </li>
                    <li><a href="classes.html">Yoga</a></li>
                    <li><a href="classes.html">Pilates</a></li>
                    <li><a href="classes.html">Zumba</a></li>
                    <li><a href="classes.html">Spin Master</a></li>
                </ul>
            </li>
            <li><a href="schedules.html">Schedules</a></li>
            <li><a href="gallery.html">Gallery</a></li>
            <li><a href="store.html">Store</a></li>
            <li>
                <a href="news.html">News</a>
                <ul>
                    <li><a href="news.html">Blog Page</a></li>
                    <li><a href="news-post.html">Single Post</a></li>
                    <li>
                        <a href="news-post.html">Categories</a>
                        <ul>
                            <li><a href="news-post.html">Fitness</a></li>
                            <li><a href="news-post.html">Health</a></li>
                            <li><a href="news-post.html">Cardio</a></li>
                            <li><a href="news-post.html">Routines</a></li>
                        </ul>
                    </li>

                </ul>
            </li>
            <li><a href="events.html">Events</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </nav>

Já tentei bastante, mas não consigo de jeito nenhum! O menu já está registrado no functions.php e se chama menu-principal. Como este menu ficaria em WordPress?

3
  • Raphael, como você está registrando o menu no functions.php? 13/02/2015 às 23:23
  • Da seguinte maneira: 14/02/2015 às 13:48
  • Foi registrado da seguinte maneira: <?php /**** MENU WORDPRESS ***/ add_action( 'init', 'register_my_menus' ); function register_my_menus() { register_nav_menus( array( 'menu-topo' => __( 'Menu Topo' ), 'menu-principal' => __( 'Menu Principal' ), 'footer-menu' => __( 'Menu Rodapé' ) ) );} 14/02/2015 às 13:49

1 Resposta 1

5

Esse menu já deve estar aparecendo no Painel de Controle em Aparência -> Menus. Você precisa agora é criar os itens do menu e adicioná-lo onde quiser no tema usando a função wp_nav_menu($args)

No exemplo que você deu a função ficaria:

<?php 
$args = array(
           'menu' => 'Menu Topo',
           'container' => 'nav',
           'container_class' => 'navbar-collapse collapse',
           'container_id'    => 'pm-main-navigation',
           'menu_class'      => 'sf-menu pm-nav'
         );
// para lista completa de $args http://codex.wordpress.org/Function_Reference/wp_nav_menu
?>
<div class="row">

<div class="col-lg-4 col-md-4 col-sm-12">
    <div class="pm-header-logo-container">
        <a href="<?php get_home_url(); ?>">//supondo que index.html é a home
         <img src="img/energy-fitness.png" class="img-responsive pm-header-logo" alt="Energy Fitness Studio">
        </a> 
    </div>
    <div class="pm-header-mobile-btn-container"></div>
</div>
<?php wp_nav_menu($args); ?>
2
  • Devo lhe agradecer muito, pois além de resolver meu problema me fez aprender como criar um menu do jeito correto. Não tenho como classificar, mas se tivesse, seria com certeza positivamente! Agradeço muito. 17/02/2015 às 2:14
  • Oi @user21746! Que bom que ajudou. Você pode aceitar a resposta clicando no "V" que tem ao lado dela. Assim mais pessoas com a mesma dúvida saberão que esta é a solução. 17/02/2015 às 17:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .