Seções iMasters
CMS + WordPress

Como criar uma página de arquivos dinâmicos em WordPress

A ideia de fazer este artigo partiu dos colegas do Digwp e tem como objetivo ajudá-los a construir uma página de arquivos dinâmicos em seu site WordPress, de forma fácil e rápida. Arquivos dinâmicos são arquivos fáceis de usar e navegar, orientados por filtros relacionados com mês e categoria.

Conhece alguma página de arquivos WordPress onde você seleciona um item (normalmente mês/ano) a partir de um menu dropdown e aparece uma outra página com os artigos publicados nessa data?
Pois bem, isso é bastante comum em templates wordpress. O WordPress quase construiu uma funcionalidade para isso,
sendo que você pode dizer à função wp_get_archives() que pretende
os valores retornados como opções do tipo <option>.
No entanto, é perfeitamente possível criar uma página de arquivos bem
mais interessante e dinâmica, além de mostrar os resultados da filtragem em
menu dropdown diretamente na página de arquivos através de Ajaxy
JavaScript.

Tentarei ajudá-los a construir, inclusive, vários tipos de
filtros (incluindo as categorias também) e ao mesmo tempo garantir que
tudo seja flexível o suficiente para que possa fazer as alterações que
desejar no futuro.

1. Criar os menus dropdown

Os menus dropdown são extremamente simples de construir. Iremos
envolver cada um deles numa div e depois incluir um dropdown para
mês/ano, e para categoria:

<div id="archive-browser">
<div>
<h4>Mês</h4>
<select id="month-choice">
<option val="no-choice"> </option>
<?php wp_get_archives(array(

'type' => 'monthly',
'format' => 'option'

)); ?>
</select>
</div>
<div>
<h4>Categoria</h4>
<?php

wp_dropdown_categories('show_option_none= -- ');

?>
</div>
</div>

Observe que as funções do WordPress para os dois dropdowns são um
pouco diferentes. A função wp_get_archives obriga-o a criar o seu
próprio “id”, enquanto que a função wp_dropdown_categories não. Além
disso, esteja atento ao fato de o dropdown para o mês ter a opção
“no-choice”.

2. Criando um arquivo getter.php

Iremos puxar dinamicamente os nossos arquivos e mostrá-los diretamente na tela. Isso significa JavaScript, e provavelmente também jQuery.
Mas o jQuery não consegue correr uma query em WordPress sozinho. O
JavaScript é uma tecnologia para o lado do cliente e o banco de dados é
uma atividade do lado do servidor. Portanto, necessitamos de um
intermediário. Um endereço URL que o nosso JavaScript possa chamar e
retornar aquilo que procuramos. Essa é a razão pela qual iremos criar um arquivo getter.php.

A melhor forma de criar algo desse gênero é criando um template para
aquilo que precisamos, e depois publicar uma página usando esse mesmo
template. Isso dá-nos um endereço URL bem mais bonito. Esse arquivo
pode ser chamado de “archives-getter.php”, ou algo do tipo, e o seu
código é o seguinte:

<div id="archive-browser">
<div>
<h4>Mês</h4>
<select id="month-choice">
<option val="no-choice"> </option>
<?php wp_get_archives(array(

'type' => 'monthly',
'format' => 'option'

)); ?>
</select>
</div>
<div>
<h4>Categoria</h4>
<?php

wp_dropdown_categories('show_option_none= -- ');

?>
</div>
</div>

Vamos analisar o que esse arquivo contém:

  • Um comentário especial que diz ao WordPress que esse é um arquivo de template.
  • Definir as variáveis através de 3 parâmetros de um POST. Edite-as no processo.
  • Criar uma string $query num formato de que o WordPress goste.
  • Rodar a função query_posts a partir dessa string.
  • Se nenhuma das variáveis estiver definida, retornar uma mensagem ao usuário para ele selecionar uma.
  • Se pelo menos uma variável estiver definida.
  • Rodar “o ciclo”.
  • Apresentar uma tabela de resultados, contendo imagem do artigo, conteúdo, data, comentários, etc.
  • Se nada for encontrado, mostrar uma mensagem de aviso ao usuário.

3. Efetuar alterações no menu dropdown

Iremos usar jQuery, então tenha a certeza de que o jQuery é
carregado corretamente em seu template. Precisaremos também de um arquivo JavaScript para trabalhar. Portanto, crie um  arquivos.js e coloque-o numa pasta do seu template. Se desejar,
poderá ainda criar um arquivo CSS para estilizar tudo, e depois
carregar ambos a partir do seu arquivo header.php da seguinte forma:

<?php if (is_page_template("archives.php")) { ?>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/archives.css" type="text/css" />
<script src="<?php bloginfo('template_url'); ?>/js/archives.js" type="text/javascript"></script>
<?php } ?>

Agora que temos um ambiente JavaScript funcionando corretamente, temos que aplicar o jQuery:

jQuery(function() {
jQuery("#archive-browser select").change(function() {
// carregar arquivos dinamicamente
});
});

4. Carregar arquivos dinamicamente

Usando a base que já temos, vamos agora criar o código necessário para
carregar esses arquivos de forma dinâmica. Onde vamos carregar esses
arquivos? Precisamos de um alvo. Podemos colocá-los junto ao
JavaScript, como também podemos colocar diretamente no template. Eis o
código JavaScript completo:

jQuery(function() {

jQuery("#archive-wrapper").height(jQuery("#archive-pot").height());

jQuery("#archive-browser select").change(function() {

jQuery("#archive-pot")
.empty()
.html("<div style='text-align: center; padding: 30px;'><img src='/wp-content/themes/seutemplate/images/ajax-loader.gif' /></div>");

var dateArray = jQuery("#month-choice").val().split("/");
var y = dateArray[3];
var m = dateArray[4];
var c = jQuery("#cat").val();

jQuery.ajax({

url: "/archives-getter/",
dataType: "html",
type: "POST",
data: ({
"escolawp_y": y,
"escolawp_m" : m,
"escolawp_c" : c
}),
success: function(data) {
jQuery("#archive-pot").html(data);

jQuery("#archive-wrapper").animate({
height: jQuery("#archives-table tr").length * 50
});

}

});

});

});

Pronto!

Se tiver dúvidas com os códigos em seu template,
deixe um comentário e tentaremos ajudá-lo na implementação desses
arquivos. Se desejar ver uma demonstração desse arquivos, clique aqui.

Até a próxima!

Mensagem do anunciante:

Apiki WP One Day. Um dia de especialistas em WordPress por conta do seu site. Apiki WP One Day.

Comente também

2 Comentários

Henrique

E ai Paulão.

Os códigos do passo 1 e passo 2 estão iguais.

Abraços

Nicollas Veiga

Por acaso não tem os códigos pra liberar pra gente? a solução é incrivel!

Qual a sua opinião?