Dica Do Tuguinho

Evita repetir sempre a mesma palavra, pois essa palavra vai ficar uma palavra repetitiva. A repetição da palavra vai fazer com que a palavra repetida desqualifique o texto onde a palavra se encontra repetida.

- Tuguinho

categorias-wordpress

Fazer Menu Horizontal de Categorias no WordPress

(Web)Design, Tutoriais, WordPress - 21 Jan, 2010 -

categorias-wordpress

Estão sempre a pedir-me para trazer aqui ao blog mais hacks e dicas para o wordpress, pois bem, vou ver se começo a trazer umas dicas para o pessoal que uso este excelente CMS.

Como podem ver no header do LibertyTuga adicionei um menu horizontal com as categorias principais do blog. Então decidi fazer um post para mostrar como o fiz.

Primeiro precisão de adicionar o código para mostrar as categorias no header.php. o codigo que usei foi:

[enlighter lang=”php”]

[/enlighter]

Esse código ira mostrar todas as categorias menos as categorias com o id de 1, 5, 9, 15 e 25, assim podem remover as categorias que não vos interessa, deixa ficar as mais interessantes e que não passe de uma linha, senão já não fica tão “bonito”.

Agora vamos à parte mais complicada(ou não), o CSS. Como podem ver o código acima aquilo vai mostrar as categorias numa lista vertical, mas nos não queremos isso, queremos em horizontal. Para isso precisamos de adicionar css.

[enlighter lang=”css”]
#categorias ul {
font-size: 10px; /** metemos a font mais pequena */
line-height: 25px;
display:inline;
list-style-type: none;
}
#categorias ul li a, #categorias_top ul li a:visited {
margin: 0px 5px 0 0;
padding: 0px 9px 0 9px;
text-align: center;
font-weight: bold;
color: #ffffff; /** Cor dos links */
text-decoration: none;
float: left;
}
#categorias ul li a:hover, #categorias_top ul li a:visited:hover {
color: #ffffff; /** cor dos links com o cursor por cima */
font-weight: bold;
text-decoration: none;
background: #37BFDF; /** fundo dos links quando está o cursor por cima */
}
[/enlighter]

Agora podem aventurar-se e modificar o código para que fique ao vosso agrado. Se tiverem alguma duvida não hesitem em perguntar nos comentários.

  • Partilhar

Sou o criador do LibertyTuga e também um rapazinho de 24 anos, iniciante em web-development e web-design. Podes me seguir no Twitter ou entrar em contacto comigo no msn ou por email.

Com um total de 942 posts.

17 Comentários

  1. Tweets that mention Fazer Menu Horizontal de Categorias no Wordpress | LibertyTuga -- Topsy.com
    21 de Janeiro de 2010 ás 17:02

    […] This post was mentioned on Twitter by ORiOn (Pedro Lopes), ORiOn (Pedro Lopes). ORiOn (Pedro Lopes) said: [LibertyTuga]: Fazer Menu Horizontal de C… http://libertytuga.info/wordpress/2010/01/21/fazer-menu-horizontal-de-categorias-no-wordpress/ […]

  2. pbasst
    21 de Janeiro de 2010 ás 19:28

    Muito bom mesmo 😀
    Bgd pela dica

  3. NelsonPaiva
    22 de Janeiro de 2010 ás 0:27

    Pode ser útil vou guardar aqui nos favoritos.

  4. marcio
    21 de Fevereiro de 2010 ás 2:22

    oi pode me ajudar ??
    desculpe a minha ignorancia
    mas coloco o codigo css em que lugar obrigado

  5. marcio
    21 de Fevereiro de 2010 ás 2:23

    estou aguardando
    obrigado

  6. marcio
    21 de Fevereiro de 2010 ás 2:24

    onde coloco o css
    obrigado

  7. marcio
    21 de Fevereiro de 2010 ás 2:56

    oi ajuda ae

    onde coloco o css?

  8. ORiOn
    21 de Fevereiro de 2010 ás 4:09

    @marcio: Não precisa de comentar 4 vezes…

    O codigo css adiciona ao ficheiro style.css do seu theme.

  9. Thiago
    27 de Julho de 2010 ás 3:01

    muito obrigado. funcionou 100%.

  10. Ana
    28 de Janeiro de 2011 ás 19:38

    e se eu quiser colocar uma imagem nas categorias?

  11. Bruna
    5 de Maio de 2011 ás 15:21

    Gostaria de saber se existe algum plugin para o wordpress que permite você ter 2 ou mais páginas de posts. Pois pelo que eu entendi e consegui faezr, o wordpress apenas permite você ter uma página de posts e as outras páginas estáticas. Estou precisando muito resolver este problea, pesqueisei várias plugins, mas não consegui me achar ainda. Sou iniciante em WordPress e n entendo mtu de código/programação. Alguém poderia ajudar?

  12. Doi
    16 de Agosto de 2011 ás 4:11

    Valeu funcionou

  13. Ricardo
    6 de Setembro de 2011 ás 19:17

    Boa tarde
    Como posso colocar uma barra atraz la lista horizontal das categorias?

  14. ORiOn
    6 de Setembro de 2011 ás 20:06

    Tenta adicionar no css:

    #categorias {
    background: #000;
    height: 25px;
    }

  15. Ricardo
    6 de Setembro de 2011 ás 21:33

    Mt obrigado, resultou cm keria 😉

  16. Daniel
    1 de Julho de 2012 ás 9:19

    Ressussitando esse post aqui, rsrs..
    Gostaria de saber se é possível no top menu, incluir as categorias e páginas tb.. por exemplo: pageHome / categoria1 / categoria2 / categoria3 / pageQuemSomos / pageContato

    Obrigado!

  17. Benny José
    2 de Dezembro de 2014 ás 10:59

    preciso dos passos iniciais

Comenta com força que é de graça!