Viche

Tema Accordion

outubro 14th, 2007

No desenvolvimento do tema foram utilizados:

• A biblioteca jQuery 1.1.2;
• E o plugin Accordion 1.3.

A versão atual do plugin é a 1.5 e a substituição da anterior por esta não apresentou o mesmo comportamento obtido no tema, devido, certamente, a novas características implementadas por seu autor.

O uso da versão 1.3 se justifica, no meu caso, por já tê-la aplicado na construção do menu do site da empresa na qual trabalho. Creio que não haja grandes dificuldades para a migração.

Por fim, um fato a ser observado é que se você utiliza outra biblioteca, como a prototype, por exemplo, é necessário substituir no arquivo accordion.js o “$” por “jQuery” para evitar possíveis conflitos. O arquivo com a alteração mencionada é disponibilizado no final do post para download juntamente com a biblioteca jQuery.

Criando o Tema

Primeiro foi incluído o código abaixo na tag head do arquivo header.php.

<script type="text/javascript" src="<?php bloginfo('url') ?>/pasta_do_arquivo/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('url') ?>/pasta_do_arquivo/accordion.js"></script>

Em seguida inserido, ainda na head, o código abaixo para criar as instâncias Accordion da sidebar a partir da lista não ordenada #theMenu e do conteúdo do blog a partir da div #conteudo, que são iniciadas quando a página é carregada. Para quem não sabe o jQuery().ready é equivalente ao window.load.

<script type="text/javascript">
   jQuery().ready(function(){
   // applying the settings
      jQuery('#theMenu').Accordion({
         header: 'h2.head',
         alwaysOpen: false,
         animated: true,
         showSpeed: 400,
         hideSpeed: 800
      })
   });

   jQuery().ready(function(){
   // applying the settings
      jQuery('#conteudo').Accordion({
         header: 'h2.head',
         active: false,
         alwaysOpen: false,
         animated: true,
         showSpeed: 400,
         hideSpeed: 800
	  });
   });
</script>

A opção header indica o seletor onde se iniciam os conteúdos de cada item a ser (ou não) exibido de acordo com o que é clicado pelo usuário, o evento default do plugin. O evento “click” pode ser alterado acrescentando-se a opção event: ‘mouseover’, por exemplo.

A opção alwaysOpen é setada como false de modo a evitar que sejam executados os permalinks existentes nos títulos dos posts, não retirados do tema, e fazer com que o conteúdo seja exibido na mesma página. Na sidebar não surte nenhum efeito pois o tema não possui links em seus itens.

As três últimas opções - animated, showSpeed e hideSpeed - são auto-explicativas.

Na parte de conteúdo do blog foi utilizada a opção active: false, para a instância Accordion correspondente, para que nenhum artigo fique aberto quando a página estiver totalmente carregada. Por default é aberto o primeiro filho (item 0) da instância. Caso necessite abrir o item 6 do menu como default, por exemplo, use:

<script>
    jQuery().ready(function(){
        jQuery('#theMenu').activate(5);
    });
</script>

Parte da estrutura da sidebar do tema pode ser vista aqui e fornece a idéia de como ela foi construída.

Note que não tem nenhum mistério. Ressalvo apenas o uso do h2 com o em de modo a permitir a colocação do ícone com o ponto de exclamação no ínicio dos títulos e o sinal de + ou - à direita.

<h2 class="head"><em><a href="javascript:;">Posts de Matemática</a></em></h2>

Suponho que a maioria dos temas tenham essa estrutura na sidebar, infelizmente não era o meu caso, o que implicou em alterações nas folhas de estilo, mas nada que não tenha sido resolvido tranquilamente :-).

Por fim nos programas do tema que envolvem conteúdo proceda como indicado abaixo, onde é exibido um trecho da index.php.

<?php get_header(); ?>

<div id=”content”>
…
   <div id=”conteudo”>
…
      <h2 class=”head”><a href=”<?php the_permalink() ?>” title=”Permalink”><?php the_title(); ?><a></h2>
…
   </div>
…
</div>

Se você ainda não observou foram adicionados alguns efeitos especiais. Por exemplo, ao clicar em uma das categorias do blog, ao exibir a página o menu correspodente permanece aberto. Tal efeito é obtido colocando-se o código abaixo no programa footer.php do tema.

<?php if (is_category()) { ?>
<script>
    jQuery().ready(function(){
        jQuery('#theMenu').activate(1);
    });
</script>

Isto posto, diga o que você achou levando-se em conta, também, questões de acessibilidade entre outras.

Download

Categorias: Javascript, PHP, Técnico, WordPress

3,618 Views