WordPress + JQuery – Lista de categorias com Menu Accordion
| Postado por Marcelo Torres No dia 16 de agosto de 2009 |
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>
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
Leia também:
- A melhor forma de incluir o script JQuery no WordPress Vocês já repararam que o dashboard do WordPress usa JQuery...
- SEO: Meta Description nas categorias do WordPress Vejo todos muito preocupados em aplicar as melhores técnicas de...
- Fazendo a busca do WordPress funcionar apenas para algumas categorias Me passou pela cabeça a seguinte questão: Como excluir algumas...
- Adicione o botão do Google Buzz em seu blog WordPress Vamos lá, dica rápida, basta seguir este passo-a-passo: No Editor...
- Migração do WordPress: Movendo o WordPress com o PhpMyAdmin O WordPress tem um sistema bastante funcional de exportação/importação, mas...
Verdade, vasculhei o post todo mesmo antes de ler o artigo a procura de uma demo!
Seria bem interessante ter o link com demonstração do funcionamento ou mesmo algumas telas :)