Guanabara.info: Podcast, Tecnologia, iPhone, Notícias, Tutoriais, Vídeo Aulas, Programação

Olá Olá, estou aqui novamente com o curso de jQuery, e chegamos a nosso 6 artigo e dessa vez eu vou usar o WordPress para fazer algo mais interesante, e iremos analisar e ver exatamente o que acontece.

Bom eu sei que demorou mas chegou, eu estava com muitas coisas para fazer durante as minhas férias, ai acabei deixando de escrever para o Guanabara.info e para o meu blog, mas agora estou voltando com força toda, e dessa vez será um ótimo artigo, que integra o WordPress com um pequeno código jQuery.

Sugiro quem ainda não viu os artigos anteriores dar uma olhada antes de começar a ler este, pois conceitos e informações abordadas em outros não serão cobertas nesse.

1. Aprendendo a importar o Framework do Google
2. Início de Eventos e Efeitos [FadeTo e Toggle]
3. Manipuladores modificando uma Classe
4. Manipulação textual
5. Criando um sistema de Abas

Vamos ao código…

Como já é de praxe começamos com um código HTML, que dessa vez vai ser usado 2 vezes, a primeira em um arquivo do seu tema do WordPress e outro para criar uma página.

O primeiro é aquele que vai servir de base para a que sejam importados os links. Coloque em o código em qualquer arquivo .php do seu tema do WordPress:

<ul>
		<li id="randomPost">... Carregando ...</li>
		<a href="#" id="another">Carregar denovo</a>
</ul>

Agora crie um arquivo .php com o nome que quiser dentro da pasta do tema do seu WordPress e coloque o seguinte código:

<?php
/*
Template Name: Artigos Aleatórios
*/
?>

<?php query_posts('showposts=8&orderby=rand');
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
	<li><a href='<?php the_permalink(); ?>'><?php the_title(); ?></a></li>
<?php endwhile; else:?>
	Erro ao carregar a página!
<?php endif; wp_reset_query(); ?>

Após feito isso você tem que ir ao painel de administração do seu blog e criar uma página e escolhe o layout Artigos Aleatórios, e dê a ela o nome de Random.

Agora vamos a parte que realmente nos interessa, o código jQuery que vai ser usado, que deve ser colocado no cabeçalho[head] do tema:

<script type="text/javascript">
$(document).ready(function() {
	$("#randomPost").load("/random/");
	$("#another").click(function(){
	   $("#randomPost")
				.text("... Carregando ...")
				.load("/random/");
	   return false;
	});
});
</script>

O primeiro código usado[load();] vai ser executado assim que o documento for carregado, sem que exija alguma ação. Então ele vai buscar a página /random/ que acabamos de criar e vai carregar dentro do elemento[li] de identificação #randomPost.

Logo abaixo temos uma função[function();] que vai ser ativada quando o for clicado no elemento #another, e esta função faz com que seja re-colocado[.text();] um texto para que o usuário saiba que algo está acontecendo, e logo depois será carregado dentro deste mesmo elemento[#randomPost] a página que acabamos de fazer[/random/].

Como eu já havia dito o return false; é para que nenhum valor desta função seja retornado. Ou seja menos variáveis a se manter, ou seja mais otimização.

Então neste artigo foi explicado como montar um pequeno widget que busca 8 artigos aleatórios na sua base de dados e exibe o link para acessa-los. Isso é legal para um blog porque ajuda a manter os usuários por mais tempo lendo.

Após feito tudo isso vocês podem salvar os arquivos editados, enviar para o servidor e ver como ficou, ou ver um exemplo de como irá ficar após de tudo feito corretamente, basta olhar a barra lateral.

Vocês também podem acessar o site oficial do jQuery e ler um pouco da documentação, que é muito completa e ajuda muito.

Códigos usados:

• Evento[click]
• Ajax[load]
• Seletores[text]

Qualquer tipo de dúvida relacionada ao artigo, pode e deve ser colocada nos comentários para que eu possa te ajudar.