• Tweet
• Email

• Tweet
• Email

Depois de lhe termos explicado como actualizar a versão do wordpress manualmente, hoje voltamos à carga com um tutorial para lhe ensinar como criar uma página de arquivos dinâmicos em WordPress. A ideia deste artigo parte dos colegas do Digwp e tem como objetivo ajudá-lo a construir uma página de arquivos dinâmicos em seu blog 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.

Alguma vez viu uma página de arquivos WordPress onde você seleccionava um item (normalmente mês/ano) a partir de um menu dropdown e mostrava-lhe uma outra página com os artigos publicados nessa data? Pois bem, isso é bastante comum em templates wordpress na verdade. O WordPress quase construiu uma funcionalidade para isso, sendo que você pode dizer à função wp_get_archives() que você 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, e mostrar os resultados da filtragem em menu dropdown diretamente na página de arquivos através de Ajaxy JavaScript. Iremos ajudá-lo a construir inclusive vários tipos de filtros (incluindo as categorias também) e ao mesmo tempo garantir que tudo é flexível o suficiente para que você 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>

Denote 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 facto de o dropdown para o mês ter a opção “no-choice”.

2. CRIANDO UM FICHEIRO GETTER.PHP

Iremos puxar dinamicamente os nossos arquivos e mostrá-los diretamente na tela de ecrã. 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 actividade do lado dos servidor. Portanto, iremos necessitar 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 ficheiro getter.php.

A melhor forma de criar algo deste 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 ficheiro pode ser chamado de “archives-getter.php”, ou algo do género, e o seu código é o seguinte:

<?php

    /*
        Template Name: Archives Getter
    */

    $year = htmlspecialchars(trim($_POST['escolawp_y']));
    $month = htmlspecialchars(trim($_POST['escolawp_m']));
    $cat = htmlspecialchars(trim($_POST['escolawp_c']));

    $querystring = "year=$year&monthnum=$month&cat=$cat&posts_per_page=-1";

    query_posts($querystring); 

?>

<?php if (($year == '') && ($month == '') && ($cat == '-1')) { ?>

	<table id="archives-table"><tr><td style='text-align: center; font-size: 15px; padding: 5px;'>Por favor seleccione em baixo.</td></tr></table>

<?php } else { ?>

	<table id="archives-table">
	    <?php
	        if (have_posts()) : while (have_posts()) : the_post(); ?>
	            <tr>
	            	<td><img src="<?php echo get_post_meta($post->ID, 'PostThumb', true); ?>" alt="" style="width: 35px;" /></td>
	            	<td><a href='<?php the_permalink(); ?>'><?php the_title(); ?></a></td>
	            	<td><?php comments_popup_link(' ', '1 Comment', '% Comments'); ?></td>
	            	<td><?php the_date('m/j/Y'); ?></td>
	            </tr>
	    <?php
	        endwhile; else:

	        	echo "<tr><td style='text-align: center; font-size: 15px; padding: 5px;'>Nada Encontrado.</td></tr>";

	        endif;
	    ?>
	</table>

<?php } ?>

Vamos analisar o que este ficheiro contém:

• Um comentário especial que diz ao WordPress que este é um ficheiro 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 que o WordPress goste
• Correr a função query_posts a partir dessa string
• Se nenhuma das variáveis estiver definida, retornar uma mensagem ao usuário para ele seleccionar uma.
• Se pelo menos uma variável estiver definida…
• Correr “o ciclo”
• Apresentar uma tabela de resultados, contendo a 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, pelo que tenha a certeza de que o jQuery é carregado corretamente em seu template. Iremos necessitar também de um ficheiro JavaScript para trabalhar. Portanto, você poderá criar um ficheiro arquivos.js e colocá-lo numa pasta do seu template. Se desejar, poderá ainda criar um ficheiro CSS para estilizar tudo, e depois carregar ambos a partir do seu ficheiro 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 a funcionar corretamente, temos de aplicar o jQuery:

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

4. CARREGAR ARQUIVOS DINAMICAMENTE

Usando a base que já criámos, vamos criar o código necessário para carregar esses arquivos de forma dinâmica. Mas onde vamos carregar esses arquivos? Precisamos de um alvo. Podemos colocá-los junto do JavaScript, como também os 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
				});

			}

		});

	});

});

Feito! Se tiver dúvidas na implementação dos 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é Já!