Avançar para conteúdo

Tudo para WordPress

Plugins, Temas, dicas de WordPress e muito mais para você que busca informação sobre este excelente CMS!

  • Twitter
  • Facebook
  • Google+
  • RSS
Entenda com funciona Assine nosso RSS

WordPress + JQuery – Lista de categorias com Menu Accordion

Publicado em 16/08/2009 às 01h59 por Marcelo Torres

Trago uma dica bacana, irei mostrar como fazer um Menu Accordion simples com Jquery incorporado com a Template Tag wp_list_categories, vamos lá então.

Passo 1: Baixe o Jquery, caso não o tenha ainda.

Passo 2: Renomeie o arquivo baixado para jquery.js e coloque o arquivo na pasta do seu tema. Apreoveite também e crie um arquivo chamado menuaccordion.js, que vamos utilizar mais pra frente.

Passo 3: Abra o arquivo header.php e insira as seguintes linha dentro do <head></head>:

<script type="text/javascript" src="<?php bloginfo('template_directory');?>/jquery.js"></script>

<script type="text/javascript" src="<?php bloginfo('template_directory');?>/menuaccordion.js"></script>

Onde <?php bloginfo(‘template_directory’);?> é o endereço dos diretórios do WordPress até chegar no seu tema([…]wp-content/themes[…]) e jquery.js e menuaccordion.js são os arquivos javascript que você baixou e criou respectivamente na pasta do seu tema.

Passo 4: Agora vamos colocar o código para fazer o efeito accordeon dentro do arquivo menuaccordion.js:

$(document).ready(function()
{
  $('#accordion-container > li > a').bind('click',function()
  {
    var $next = $(this).next();
    if ($next.is(':visible')) return false;
    $(this).parent().parent().find('li > ul:visible').slideUp('normal');
    $next.slideDown('normal'); return false;
  });
});

Não esqueça de salvá-lo.

Passo 5: Agora vamos fazer o CSS, abra o arquivo style.css e cole o seguinte código:

#menu-accordion ul
{margin:0;padding:0;list-style:none;}
#menu-accordion ul#accordion-container
{width:200px;padding:2px;}
#menu-accordion ul#accordion-container > li
{margin-top:1px;background:#000;}
#menu-accordion ul#accordion-container > li > a
{display:block;padding: 4px; color: #fff;text-decoration:none;outline:none;}
#menu-accordion ul#accordion-container > li > a:hover
{background: #666;}
ul.accordion-menu
{display:none;background:#000;}
#menu-accordion ul.accordion-menu a
{display:block;padding-left: 4px;background:#aaa;color:#555;text-decoration:none;outline:none;}
#menu-accordion ul.accordion-menu a:hover
{color:#fff;}

Não esqueça de salvá-lo.

Passo 6: Agora a parte mais divertida, vamos manipular a Template Tag wp_list_categories é bem simples, escolha um aquivo para inserir o código abaixo(pode ser o header.php, ou até o sidebar.php)

<div id="menu-accordion">/* div pai que engloba todo o menu*/
<ul id="accordion-container">/* essa parte é muito importante, essa "ul" engloba toda a formação do accordion*/
<li>
  <a href="#">Opção 1</a>/* Link que expandirá quando clicado para abrir as sub-opções, que serão as categorias que você definir*/
   <ul class="accordion-menu">/*class responsável por englobar cada Opção do Menu*/
    <?php wp_list_categories('title_li=&include=48,50'); ?>/* ID das categorias que serão apresentadas. Nessa opção, os números 48, 50 são os ID desse exemplo, o parâmetro "title_li=" está vazia para que não apareça a palavra Categoria acimas das opções*/
   </ul>
</li>
<li>
  <a href="#">Opção 2</a>
   <ul class="accordion-menu">
        <?php wp_list_categories('title_li=&include=49,42'); ?>
   </ul>
</li>
</ul>
</div>

E é isso ai pessoal está pronto nosso Menu Accordeon utilizando o WordPress, você também pode utilizar a Template Tag wp_list_pages no lugar wp_list_categories, para exibir as páginas do seu blog/site.

Você também pode exibir quantas opções quizer basta repitir o mesmo procedimento.

Inté++ fui

4 pessoas comentaram o artigo

  • Francisco André comentou em 1 de setembro de 2010.

    Verdade, vasculhei o post todo mesmo antes de ler o artigo a procura de uma demo!

    Responder esse usuário
  • Edgar comentou em 9 de setembro de 2010.

    Pois é cade a demo ou a screenshot?
    ficaria melhor se tivesse, assim parece que este post é CTRL +C CTRL +V

    Responder esse usuário
  • Regis comentou em 6 de setembro de 2011.

    Elogiem mais e critiquem menos!

     
    Estava procurando como inserir jquery em wp, li e tentei varios tuts, e apenas as explicações neste blog foi que conseguir.
     
    Muito obrigado por compartilhar.

    Responder esse usuário

Participe e deixe o seu comentário!

Procurando Temas?

Acesse o arquivo de Temas WordPress