• Articles
• admin

Cada site WordPress é diferente. Isso ocorre porque todo mundo escolhe um tema diferente ou “olhar e sentir” para o seu site. Criar um cabeçalho e um menu de navegação superior no WordPress será um processo ligeiramente diferente para cada site.

aqui estou usando o Genesis theme framework para WordPress porque eu absolutamente amo isso. No entanto, haverá pontos importantes neste artigo que ajudarão qualquer pessoa com um site WordPress.

isso faz parte de uma série de artigos e vídeos em que crio um site do zero. Expliquei pela primeira vez como criar um tema filho para a estrutura do Genesis e, em seguida, escrevi sobre como começar a estilizar o tema adicionando o plano de fundo e o logotipo.

adicionando link do Facebook, Link do Twitter e outras informações ao cabeçalho

tendo já adicionado o logotipo ao canto superior esquerdo do cabeçalho do nosso site, agora adicionaremos algumas informações extras ao lado direito do nosso cabeçalho. Nesse caso, adicionaremos links do Twitter e do Facebook, etc., por meio de um widget.

eu tenho que admitir que eu fui um pouco louco widget ultimamente, tendo sido um pouco desdenhoso deles no passado. O que é um widget? Bem, eles são pedaços independentes de um site que você pode arrastar e controlar por meio de uma área de widget fácil de usar.

uma das muitas belezas do Genesis é a capacidade fácil de widgetize qualquer área do site. Então:

• se você quiser uma ordem diferente de caixas na barra lateral, você pode fazê-lo em segundos.
• se você quiser um post em destaque aqui, 5 títulos de categoria mais recentes com miniaturas lá na página inicial, você pode fazê-lo em segundos.
• se você quiser uma barra de pesquisa, compartilhamento social, feed do Twitter, calendário, nuvem de tags, etc., aqui, lá ou em qualquer lugar, você pode fazer isso em segundos.

esta funcionalidade back-end intuitiva e fácil de usar é particularmente útil ao criar sites para clientes que desejam controlar todas as áreas de um site, mas não têm as habilidades para fazer isso.

de qualquer forma, neste caso, precisamos criar nosso próprio widget personalizado e fazemos isso arrastando um Widget de texto para a área direita do cabeçalho na interface de Widgets aparência > no WordPress.

e neste Widget de texto você pode colocar HTML. Aqui está o HTML que coloquei para este site específico. Eu só tenho um link de página do Facebook, um link do Twitter e um número de telefone.

<div>
<ul>
<li><a href=""><img src="http://site.com/images/facebook.jpg" style="border:0;" /></a></li>
<li><a href=""><img src="http://site.com/images/twitter.jpg" style="border:0;" /></a></li>
</ul>
<p><strong>Tel:</strong> +44 20 xxxx xxxx</p>
</div>

E aqui está o CSS acima:

#connect {float: right;}
#connect ul {float: right;}
#connect ul li {list-style: none; display: inline;}
#connect p#tel {margin-top: 33px; font-size: 18px; color: #66504e;}

Aqui é o que aparece no lado direito da cabeça, como um resultado:

Vídeo de adicionar o título de informação e navegação de menu

neste vídeo eu mostro como adicionar o widget para o cabeçalho e como estilo o menu em Gênesis.

criando o menu de navegação superior

menus de navegação superior (ou” navbars”) costumava ser a ruína da minha existência, mas agora, com Genesis e WordPress menus, eu desenvolvi um sistema muito fácil de criá-los que leva segundos em oposição a horas.

Genesis já tem no lugar a capacidade de ter um menu de navegação primária e Secundária. Para este exemplo em particular, livrei-me do Menu de navegação secundário usando as configurações do tema Genesis, pois o cliente só queria um.

no vídeo acima, mostro como altero o CSS para fazer com que o menu se pareça com o do visual PSD que fiz.

usando ferramentas de desenvolvedor do Chrome ou o complemento Firebug para Firefox, você pode dizer quais seletores no HTML estão sendo usados no CSS para estilizar o menu.

#nav {-khtml-border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;
background: #745d5c url(images/nav.gif) repeat-x ;
border: 1px solid #745d5c;
width: 958px; }

Como você pode ver no vídeo acima, eu aumento o raio dos cantos arredondados, adicionado de um gradiente de fundo e mudou a cor da borda do menu. Portanto, agora o menu não se parece com o cinza chato que você obtém com uma instalação do vanilla Genesis.

também adicionei o seguinte CSS para alterar a cor do texto no menu para branco.

#nav li a {color: #fff; }

há também a capacidade de alterar o estilo dos links de página atuais, os links de foco, os links de subpágina e os links de subpágina.

com o Genesis, você pode facilmente ter menus suspensos para subpáginas (ou páginas filho) e, em seguida, links fly-out para subpáginas (ou páginas Neto). Você pode tê-los nos menus de navegação principal e Secundária.

criando páginas, páginas filho e páginas Neto

aqui está o meu vídeo onde eu adicionar novas páginas para o menu WordPress para que eles aparecem no menu de navegação como páginas, páginas filho (como drop-downs) e páginas Neto (Como flyouts).

você pode escolher uma página para ser uma página filho ou neto em Pai no editor de página. E quando você olha para as páginas (em páginas > todas as páginas), as páginas filho e neto são recuadas por baixo de seus pais. Fazer isso também lhes dará um URL lógico (por exemplo, www.site.com/music/jazz/charlie-parker onde a Página “Charlie Parker “é filho de” Jazz”, que é filho de”música”).

Criando um menu de navegação com drop-downs e fly-outs

para obter essas páginas para aparecer no menu de navegação corretamente, você só tem que arrastá-los e soltá-los em suas respectivas posições na aparência > Menus. Novamente, as páginas filho são recuadas sob seus pais. Não se esqueça de dar um nome ao menu (como “navbar”, Por exemplo) e defini-lo como o menu de navegação principal.

Então, organizar páginas no WordPress Aparência > área de Menus como este…

… vai criar um menu suspenso com fly-outs como este:

por Favor, veja o vídeo acima para uma demonstração deste.

o que você acha?

o que você acha desse método de edição do menu de cabeçalho e navegação de um site? Você faz isso de uma maneira diferente?