• Home
• Bastidores
• Design
• Destaques
• Dicas e tutorias
• Entre o sistema
• Mr. WP Themes
• Notícias
• Plugins
• Temas

Assinantes

Colocando "tabs" no seu blog

Um dos recursos que eu sempre admirei se tratando de javascript, dthtml, css, etc, são as "tabs de navegação".

Com as tabs pode-se criar uma espécie de caixa com "menus superiores", onde, nesta mesma caixa é possível inserir várias coisas sem ocupar muito espaço no layout.

Tá, eu não sei explicar muito bem, mas acho que clicando aqui você já vai ter uma noção do que estou falando.

Vou ensinar como criar estas tabs adaptadas no seu WordPress. A príncípio irei mostrar como inserir conteúdo na primeira tab, depois é com você

Antes tudo

Como eu não sou nenhum expert em javascript, tive que usar um desses scripts prontos disponibilizados na internet. No caso usei o Javascript tabifier.

Começando

Primeiramente baixe os seguintes arquivos:

• example.css
• example-print.css
• tabber.js

Agora, no diretório do seu tema, crie uma pasta com o nome "js" e mande todos os arquivos acima para esta pasta.

Abra o header.php do seu tema e insira as seguintes linhas dentro das tags < head > e < / head >:
<link rel="stylesheet" href="<?php bloginfo('template_url');?>/js/example.css" TYPE="text/css" MEDIA="screen">
<link rel="stylesheet" href="<?php bloginfo('template_url');?>/js/example-print.css" TYPE="text/css" MEDIA="print">
<script type="text/javascript" src="<?php bloginfo('template_url');?>/js/tabber.js"></script>

O que isso fará?

Os código acima irão chamar, respectivamente, os arquivos example.css, example-print.css e tabber.js para o seu seu tema. A tag bloginfo('template_url') é responsável por "gerar" o caminho exato do seu tema, para que assim não ocorra erros.

Feito isso, abra qualquer arquivo, como por exemplo a index.php e coloque os seguintes códigos

<div class="tabber">

<div class="tabbertab">
<h2>Tab 1</h2>
<p>Conteúdo da tab 1</p>
</div>

<div class="tabbertab">
<h2>Tab 2</h2>
<p>Conteúdo da tab 2</p>
</div>

<div class="tabbertab">

<h2>Tab 3</h2>
<p>Conteúdo da tab 3</p>
</div>

</div>

Observe que:

<div class="tabbertab"> -> Gera uma tab
<h2>Tab 1</h2> -> Coloca o título da tab
<p>Conteúdo da tab 1</p> -> Coloca o conteúdo da tab
</div> -> fecha a tab

Pronto. Feito isso já pra sacar como funciona né?

Como estamos usando o WordPress podemos, inclusive, colocar tamplates tags dentro das tabs, por exemplo:

<div class="tabbertab">
<h2>Últimos artigos</h2>
<ul>
<?php
global $post;
$myposts = get_posts('numberposts=15');
foreach($myposts as $post) :
setup_postdata($post);
?>

<li><a href="<?php the_permalink();?>" title="<?php the_title();?>"><?php the_title();?></a></li>

<?php endforeach; ?>

</ul>
</div>

Gerando assim uma lista com os útlimos posts publicados…

Agora, edite o o CSS como quiser para que fique de acordo com seu tema. Espero que tenham gostado, até mais!

Posts relacionados

• Dica para usuários experientes: Paginação com query_posts
• Inserindo e personalizando o Gravatar no WP 2.5
• Colocando Gravatar nos comentários sem plugins
• Use vários temas no mesmo WordPress!
• Selo Medalha de Ouro para o site!

Populares

• Criando um Slide Show de imagens com o WordPress [SEM PLUGINS]
• FAQ para iniciantes
• 3 maneiras diferentes de customizar a função the_excerpt
• Criando uma imagem (thumbnail) para cada post [sem plugins]
• Explorando as Template Tags

MrWP » Free Themes

BB Clean Theme

Simple Blue Magazine