Colocando o menu no header do tema

Algumas pessoas me procuraram por e-mail e MSN para saber como fiz para colocar o Menu no header do blog. Normalmente são amigos que estão utilizando o mesmo tema, ProSense, então resolvi tornar a informação acessível a todos com este post explicativo que serve como base não apenas para o ProSense mas para qualquer tema, bastando apenas adaptar.

Eu sei que o meu não esta, o que poderíamos chamar de, LINDO mas aos poucos vou concertando e a dica serve para você aprender a implementar e estilizar, os mais “sabidos” em design e CSS poderão fazer maravilhas.

Você vai precisar editar os arquivos header.php e style.css.

Header

Abra o arquivo e procure pelo código:

<div style=”clear:both;”></div>

Inclua, antes dele, o seguinte código:

<div id="paginas">
<ul>
3 - <li class="<?php if (((is_home()) && !(is_paged())) or (is_archive())
or (is_single()) or (is_paged()) or (is_search())) { ?>current_page_item<?php
} else { ?>page_item<?php } ?>"><a href="<?php echo
get_settings(’home’); ?>">Home</a></li>
<?php wp_list_pages(’sort_column=menu_order&depth=1&title_li=&exclude=180′);
?>
</ul>
</div>

Obs.: Pode ser que no seu tema não exista o código acima então você vai incluir o código a antes da última tag </div>

Explicação: Eu criei uma nova DIV com a ID paginas para poder identificar e estilizar mais a frente na folha de estilos e chamei as páginas com o comando nativo do WP o “wp_list_pages”.

Style

Abra o arquivo style.php e abaixo de tudo inclua o seguinte código:

#paginas {
width: 100%;
font-size: 12px;
margin-top: 10px;
clear:both;
margin-left:10px;
}

#paginas li {
list-style: none;
display: inline;
}
#paginas li a {
padding: 5px 10px;
background: #663200;
border:1px solid #000;
}

#paginas li a:link {
color: #ffffff;

O menu esta pronto agora é só modificar um pouco o CSS para ficar com a cara do seu tema e ao gosto do freguês.

This entry was posted on Terça-feira, setembro 25th, 2007 at 1:04 pm and is filed under Sem categoria. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.