• Tweet
• Email

• Tweet
• Email

Recentemente os colegas do blog Problogdesign publicaram uma matéria bem interessante sobre como carregar os próximos conteúdos do seu blog WordPress usando Ajax. Para quem não sabe, Ajax é uma linguagem de programação que lhe permite poupar imenso tempo no carregamento de páginas e pedidos junto do seu servidor. O artigo explica como criar um plugin de raíz para substituir o seu link “Postagens mais Antigas” ou mesmo um outro plugin que você esteja usando como por exemplo o WP-Pagenavi para criar uma navegação, por um simples botão que lhe permite visualizar em tempo real as próximas postagens do seu blog WordPress, tal como acontece com o Twitter ou Facebook.

Pode visualizar a demo do plugin e ver a versão final do projeto se desejar. Pode ainda descarregar todos os ficheiros compilados num plugin aqui! (Faça o upload e ative-o).

Vamos então iniciar o nosso tutorial. O plugin que pretendemos desenvolver irá fazer o seguinte:

• Múltiplos cliques – O primeiro clique abre a segunda página de posts, o segundo clique abre a terceira página de posts, etc.)
• Verificar por postagens primeiro – Se não existirem mais posts para carregar, o usuário é avisado.
• Não usar o plugin – Se um usuário não usar JavaScript, o site não será modificado de forma alguma.

ESTRUTURA DO PLUGIN

Irão existir 3 ficheiros no plugin (um PHP, um CSS, um JS). Para manter as boas práticas, iremos manter os ficheiros CSS e JavaScript nas suas próprias pastas. E vamos chamar o plugin de “pbd-ajax-load-posts”.

Agora vamos começar pelas partes necessárias no topo do nosso ficheiro pbd-ajax-load-posts.php:

<?php
/**
 * Plugin Name: PBD AJAX Load Posts
 * Plugin URI: http://www.escolawp.com/
 * Description: Load the next page of posts with AJAX.
 * Version: 0.1
 * Author: Pro Blog Design
 * Author URI: http://www.problogdesign.com/
 * License: GPLv2
 */

CARREGAR FICHEIROS E VALORES DE PASSAGEM

A primeira coisa que precisamos fazer é garantir que os nossos ficheiros JavaScript e CSS files são carregados nas páginas corretas. Mantenha-se em seu ficheiro pbd-ajax-load-posts.php e cole dentro dele o seguinte código:

/**
  * Initialization. Add our script if needed on this page.
  */
 function pbd_alp_init() {
 	global $wp_query;

 	// Add code to index pages.
 	if( !is_singular() ) {
 		// Queue JS and CSS
 		wp_enqueue_script(
 			'pbd-alp-load-posts',
 			plugin_dir_url( __FILE__ ) . 'js/load-posts.js',
 			array('jquery'),
 			'1.0',
 			true
 		);

 		wp_enqueue_style(
 			'pbd-alp-style',
 			plugin_dir_url( __FILE__ ) . 'css/style.css',
 			false,
 			'1.0',
 			'all'
 		);

O código apresentado inicia com a introdução de uma nova função, pbd_alp_init() (alp = AJAX Load Posts), que mais tarde será colocada no local correto. Provavelmente irá reparar também que usámos a variável global $wp_query, a qual iremos usar no próximo passo.

A parte mais importante inicia-se na linha 8. A primeira declaração é na verdade uma declaração condicional. Isso significa que em qualquer página que não seja um artigo ou página individual, iremos correr este código.

Isto é uma forma de assegurarmos que o nosso código corre corretamente na homepage, páginas de tags, páginas de pesquisa, etc. Poderá adaptá-lo para ser mais específico, e.x. se você não desejar inclui-lo na sua homepage.

Depois disso usamos as funções wp_enqueue_script() e wp_enqueue_style() para dizermos ao WordPress sobre os nossos dois ficheiros (como também que iremos usar jQuery).

Agora, precisamos passar alguns valores ao nosso script, nomeadamente:

• O número de página em que estamos no momento.
• O número total de páginas.
• O link para a próxima página.

Iremos usar a função wp_localize_script() para calcular todos ests valores no PHP, e depois mostrá-los na nossa página web de forma a que o nosso script possa acessá-los mais tarde.

// What page are we on? And what is the pages limit?
$max = $wp_query->max_num_pages;
$paged = ( get_query_var('paged') > 1 ) ? get_query_var('paged') : 1;

// Add some parameters for the JS.
wp_localize_script(
	'pbd-alp-load-posts',
	'pbd_alp',
	array(
		'startPage' => $paged,
		'maxPages' => $max,
		'nextLink' => next_posts($max, false)
	)
);

Iremos trabalhar primeiro dois valores. $max é o número máximo de páginas que a query pode retornar (ex. se cada página mostra 5 posts e existem 12 posts na categoria, o nosso máximo serão 3).

A variável $paged irá guardar a página em que nos encontramos (O objetivo do nosso plugin é garantir que o usuário nunca carrega uma segunda página).

Se saltarmos para a linha 12, você irá encontrar o nosso 3º valor (o link para a próxima página). next_posts() é uma função integrada no core do WordPress, a qual irá retornar o URL de que necessitamos.

A função wp_localize_script() é excelente porque torna bastante fácil passar valor do PHP para o JavaScript. O primeiro valor, ‘pbd-alp-load-posts’ deverá coincidir com o primeiro valor da chamada wp_enqueue_script().

O segundo valor, ‘pbd_alp’, é o nome que iremos usar no nosso JavaScript mais tarde.

Finalmente, iremos enviar uma ordem da informação. Se analisar o código-fonte do nosso HTML mais tarde, você visualizar algo parecido com isto logo antes do nosso ficheiro JavaScript ser carregado:

<script type='text/javascript'>
/* <![CDATA[ */
var pbd_alp = {
	startPage: "1",
	maxPages: "6",
	nextLink: "http://www.problogdesign.com/demo/ajax-load-posts/page/2/"
};
/* ]]> */
</script>

Agora, apenas necessitamos encerrar a nossa declaração “If”, a nossa função pbd_alp_init(), e depois colocar tudo no seu devido lugar.

 	}
 }
 add_action('template_redirect', 'pbd_alp_init');

jQUERY – O CORAÇÃO DO PLUGIN

Agora que já carregámos os nossos scripts e passámos os valores que necessitávamos, é altura de avançarmos para a parte mais interessante do nosso tutorial.

Abra o ficheiro load-posts.js. A primeira coisa que precisamos fazer é acessar as 3 variáveis que passámos na nossa função PHP.

jQuery(document).ready(function($) {

	// The number of the next page to load (/page/x/).
	var pageNum = parseInt(pbd_alp.startPage) + 1;

	// The maximum number of pages the current query can return.
	var max = parseInt(pbd_alp.maxPages);

	// The link of the next page of posts.
	var nextLink = pbd_alp.nextLink;

A foma de acessarmos aos nossos valores é usando o formato: pbd_alp.valueName (pbd_alp foi o segundo valor que introduzimos no wp_localize_script(), lembra?).

O mais importante a lembrar é que os nossos números foram enviados como strings, portanto, usamos a função JavaScript’s parseInt() function para voltar a convertê-los em números.

Com o pageNum, adicionamos um ao número uma vez que ele vai guardar o número da próxima página a carregar (Não a página atual).

A grande maioria dos templates wordpress já tem navegação entre as páginas, na forma de links Artigos Antigos/Novos Artigos. Nós queremos substituir isso pelo nosso botão AJAX, pelo que o nosso primeiro passo é substituir esses links pelo nosso próprio botão.

/**
 * Replace the traditional navigation with our own,
 * but only if there is at least one page of new posts to load.
 */
if(pageNum <= max) {
	// Insert the "More Posts" link.
	$('#content')
		.append('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>')
		.append('<p id="pbd-alp-load-posts"><a href="#">Load More Posts</a></p>');

	// Remove the traditional navigation.
	$('.navigation').remove();
}

Começamos com uma verificação da condicional. Lembre-se que o pageNum é o número da página seguinte, e caso seja maior que o max, significa que não existem mais páginas para carregar. Nesse caso, nós não queremos que apareça o nosso botão.

No caso de existir mais conteúdos para carregar, procuramos pela div #content, e adicionamos-lhe duas coisas no final. A primeira é uma div vazia, que iremos usar mais à frente para adicionar as nossas postagens.

A segunda é o nosso botão (um link regular HTML), envolvido num parágrafo.

Finalmente, procuramos pela div .navigation e removê-mo-la. Se o nosso template usar uma class diferente para os botões de navegação, você terá de alterar isso manualmente (.navigation é o padrão nos templates de 2010). O mesmo se aplica à div #content!

O resultado do código acima é que o nosso botão já se encontra no seu lugar, embora ainda não faça nada.

E porque fizemos tudo com JavaScript, temos a certeza de que o nosso plugin não faz uso do botão quando não existem mais páginas para carregar, e também porque se o JavaScript não for carregado, o plugin não faz rigorosamente nada.

Agora, vamos avançar para a funcionalidade quando o usuário clica no botão.

/**
 * Load new posts when the link is clicked.
 */
$('#pbd-alp-load-posts a').click(function() {

	// Are there more posts to load?
	if(pageNum <= max) {

		// Show that we're working.
		$(this).text('Loading posts...');

A primeira linha deste código é a manipulação de um evento com jQuery, que corre quando o usuário clica no botão.

Na linha 7, voltamos a correr a mesma verificação como anteriormente. Isto é importante porque o nosso script iria carregar uma mensagem de erro 404 caso não existam mais artigos para carregar. Isso nós não queremos!

A linha 10 atualiza o texto do nosso botão para “Loading posts…” Isto é interessante porque o usuário recebe imediatamente uma mensagem assim que carrega no botão.

O próximo passo é fazer a chamada em AJAX. Uma série de coisas acontecem aqui, portanto copie e cole o seguinte código para o seu script e depois explicaremos tudo mais à frente.

$('.pbd-alp-placeholder-'+ pageNum).load(nextLink + ' .post',
	function() {
		// Update page number and nextLink.
		pageNum++;
		nextLink = nextLink.replace(/\/page\/[0-9]?/, '/page/'+ pageNum);

		// Add a new placeholder, for when user clicks again.
		$('#pbd-alp-load-posts')
			.before('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>')

		// Update the button message.
		if(pageNum <= max) {
			$('#pbd-alp-load-posts a').text('Load More Posts');
		} else {
			$('#pbd-alp-load-posts a').text('No more posts to load.');
		}
	}
);

A primeira linha é a mais importante. Iremos usar um seletor jQuery para seleccionar o espaço reservado à nossa div. A razão pela qual adicionámos o número pageNum ao final do nome da class é porque caso o usuário volte a clicar no botão, iremos adicionar os novos posts a um novo espaço reservado (não substituindo pelos anteriores).

Na linha 2, iniciamos uma nova função que irá correr assim que a chamada AJAX termine. A primeira coisa que faz é atualizar os nossos valores para a próxima vez que o botão for clicado.

O pageNum é incrementado em um (para apontar para a próxima página), e o nextLink é atualizado usando uma expressão regular. Ele procura pelo URL para a /page/2/ (ou outro número), e atualiza o número da página pelo número da página seguinte.

Na linha 8, adicionamos um novo espaço reservado à nossa div. Este será usado da próxima vez que o botão for clicado.

Finalmente, na linha 12, voltamos a atualizar o texto do nosso botão. Se existirem mais artigos para serem carregados, revertemos para o texto original. Se não existirem, atualizaremos o texto indicando isso mesmo.

Agora apenas necessitamos concluir o nosso código:

		} else {
			$('#pbd-alp-load-posts a').append('.');
		}	

		return false;
	});
});

Este código inicia fechando a nossa primeira declaração “if” (existem mais páginas para carregar?). Se não existirem, ele adiciona ‘.’ ao botão da mensagem. Isto é muito simples para dar uma resposta visual ao usuário quando o botão é clicado (veja o screenshot em baixo).

ESTILIZAR

O botão está finalmente funcionando! A única coisa que está faltando é estilizá-lo. Você poderá fazê-lo da forma que bem entender usando CSS. Neste tutorial usamos CSS3 para tornar os cantos do botão redondos, e adicionar um gradiente e uma sombra.

Adicione o seguinte código ao seu ficheiro css/style.css:

#pbd-alp-load-posts a:link, #pbd-alp-load-posts a:visited {
	display: block;
	text-align: center;
	padding: 4px 0;
	color: #444;
	text-decoration: none;

	/** Rounded Corners **/
	-moz-border-radius: 8px;
	border-radius: 8px;

	/** Drop shadow **/
	-moz-box-shadow: 1px 1px 1px #999;
	-webkit-box-shadow: 1px 1px 1px #999;
	box-shadow: 1px 1px 1px #999;

	/** Gradients : http://css-tricks.com/css3-gradients/ */
	/* fallback */
	background-color: #f1f1f1;

	/* Firefox 3.6+ */
	background: -moz-linear-gradient(100% 100% 90deg, #e4e3e3, #f1f1f1);

	/* Safari 4-5, Chrome 1-9 */
	/* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1f1f1), to(#e4e3e3));

	/* Safari 5.1+, Chrome 10+ */
	background: -webkit-linear-gradient(#f1f1f1, #e4e3e3);

	/* Opera 11.10+ */ background: -o-linear-gradient(#f1f1f1, #e4e3e3);
}

#pbd-alp-load-posts a:hover, #pbd-alp-load-posts a:active {
	/** Drop shadow **/
	-moz-box-shadow: 1px 1px 1px #bbb;
	-webkit-box-shadow: 1px 1px 1px #bbb;
	box-shadow: 1px 1px 1px #bbb;

	/** Gradients : http://css-tricks.com/css3-gradients/ */
	/* fallback */
	background-color: #f5f5f5;

	/* Firefox 3.6+ */
	background: -moz-linear-gradient(100% 100% 90deg, #eaeaea, #f5f5f5);

	/* Safari 4-5, Chrome 1-9 */
	/* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f5f5f5), to(#eaeaea));

	/* Safari 5.1+, Chrome 10+ */
	background: -webkit-linear-gradient(#f1f1f1, #eaeaea);

	/* Opera 11.10+ */ background: -o-linear-gradient(#f5f5f5, #eaeaea);

E está feito! Guarde o seu trabalho e ative o seu plugin.

Se desejar pode visualizar a demo do plugin e ver a versão final do projeto. Pode ainda descarregar todos os ficheiros compilados num plugin aqui! (Faça o upload e ative-o).

Este tutorial foi criado originalmente pelos colegas do Problogdesign. Visite-os!

Até Já!