converter menu html para wordpress

[raphaelcord 0]

E ae negada, belezinha? Então, 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? Valeu!!

[lucaswxp 22]

Você pode usar a função wp_nav_menu:

 

 

wp_nav_menu('menu=NomeDoMenu')

 

Isso vai imprimir o HTML do menu aonde você quiser.

 

Se você precisar alterar o HTML gerado pelo Wordpress, como class/id/tags você pode olhar as opções da função: http://codex.wordpress.org/Function_Reference/wp_nav_menu

 

Se você não tem muita experiência, eu sugiro você adaptar o seu CSS para se adequar à estrutura do WP.

[raphaelcord 0]

Eu tinha tentado da seguinte maneira

<?php wp_nav_menu( array( 'location'=>'menu-topo', 'container'=>'div', 'container-class'=>'sf-menu', 'menu_class'=>'navbar-collapse collapse' ) ); ?>

porém eu não compreendi que classe exatamente colocar dentro do menu pra acompanhar o css nativo do html

[lucaswxp 22]

No seu caso seria "sf-menu pm-nav", não?

 

Eu também acho que você não tem div container, então você pode setar a opção pra false.

 

Outra, você registrou o local 'menu-topo'?

[PetrusHenrique 5]

Faz o seguinte:

<?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'items_wrap' => '%3$s','container'       => '', ) ); ?>

Usa esse código aí e coloca entre dentro de sua ul

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

<?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'items_wrap' => '%3$s','container'       => '', ) ); ?>

</ul>

</nav>

No functions.php você adiciona isso:

function register_my_menus() {
  register_nav_menus(
    array('header-menu' => __( 'Header Menu' ) )
  );
}

E cria o menu dentro do seu wordpress.

 

Pronto, deve funcionar :)

No caso você ainda precisa colocar o <?php echo get_bloginfo('template_url'); ?> antes dos arquivos externos /img e o <?php echo get_option('home');?> no lugar do link para index.html