Como exibir posts do WordPress em site HTML e definir exibição do loop

Share

Se você é desenvolvedor web provavelmente já se deparou com o seguinte cenário: seu cliente tem um site desenvolvido em HTML e um blog em WordPress e solicita que em uma área da home do site HTML sejam exibidos os últimos posts do blog.

Apesar de parecer algo difícil de fazer, se usarmos as Template Tags do WordPress, o processo é bem simples. Abaixo vamos apresentar duas formas de fazer isso, porém antes uma dica bem simples. Como iremos inserir conteúdo em PHP em nosso código HTML, precisaremos alterar a extensão da página de .html para .php, sem isso esse tutorial não vai funcionar.

1 – Blog instalado no mesmo servidor do site

Quando o blog está instalado no mesmo servidor, em uma pasta acessivel ao usuário, é possível exibir os últimos posts utilizando as Template Tags do WordPress.

Para isso, inclua o WordPress na página que deseja exibir os posts e utilize as funções dele mesmo para exibir os posts. Segue o código de inclusão do WordPress:

<?php
//Include WordPress
define('WP_USE_THEMES', false);
require('./blog/wp-load.php');

//Define quantos posts serão exibidos
query_posts('showposts=3');
?>

Para exibir os posts, coloque o seguinte código no local onde desejar:

<?php while (have_posts()): the_post(); ?>
<li>
<h4><?php the_title(); ?></h4>
<span><?php the_time("d/m/Y"); ?></span>
<?php the_excerpt(); ?>
<div>
<a href="<?php the_permalink(); ?>">&laquo; Leia Mais...</a>
</div>
</li>
<?php endwhile;?>

Será exibida uma listagem com o título do post, seu resumo e algumas informações sobre ele.

Dica: Na documentação do WP estão listadas todas funções com exemplos práticos. Seção da documentação relativa às Template Tags: http://codex.wordpress.org/Template_Tags

2 – Blog instalado em outro servidor

Quando o blog está instalado em outro servidor ou em um diretório não acessível por sua conta, você pode listar os últimos posts através do Feed RSS do blog. Essa opção fornece menos opções de controle de conteúdo.

O seguinte código utiliza a função simplexml_load_file(), que está disponível no PHP desde a versão 5. Para modificar esse código para aceitar a versão 4, recomendo a classe SimpleXML for PHP 4 (http://www.phpclasses.org/package/4484-PHP-Load-XML-files-in-PHP-4-like-SimpleXML-extension.html).

No código de exemplo, coloquei no código o endereço do Feed gerado pelo WordPress. Geralmente fica algo como “http://www.endereco-do-blog.com.br/feed/”.

<?php
$url = 'http://www.endereco-do-blog.com.br/feed/';
$xml = simplexml_load_file($url);

if($xml !== false){
echo '<ol>';
foreach($xml->channel->item as $node){
printf('<li><a href="%s">%s</a></li>', $node->link, $node->title);
}
echo '</ol>';
}?>

Isso imprimirá uma listagem com todos os posts do Feed definidos em “Configurações” > “Leitura”, na opção “Os feeds RSS mostram os últimos”. Outras informações estão disponiveis no feed, basta acessar o endereço e visualizar o XML gerado pelo WordPress. Segue alguns campos que podem ser acessados, utilizando “$node->CAMPO” no código acima:

  • $node->description: um resumo do post.
  • $node->pubDate: data de publicação

3 – Definindo a exibição do loop de posts e mostrando as imagens em destaque

No exemplo acima nós estamos exibindo uma lista simples dos posts, porém imaginemos que nesta mesma área do seu site HTML você precise exibir as imagens em destaque do post e ainda dividir cada post em uma área diferente, como na imagem abaixo:

norte

Para isto iremos utilizar como exemplo o seguinte código:

<?php

//Include WordPress
define('WP_USE_THEMES', false);
require('./blog/wp-load.php');

//Define quantos posts serão exibidos
query_posts('showposts=1&offset=1');
?>
<?php while (have_posts()): the_post(); ?>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>

   <span><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span>
<p><?php the_excerpt(); ?></p>
<?php endwhile;?>

Na imagem de exemplo utilizamos este código duas vezes, uma em cada área de exibição.

Reparem que usamos a tag “offset” com valor “1“. Essa tag é responsável por puxar o X post, sendo o último post de valor “0“, o penúltimo post de valor “1” e assim por diante. Logo usando “offset=1” estaremos exibindo o penúltimo post do loop de posts do nosso blog.

Viram a tag “the_post_thumbnail()” ? Ela é responsável por exibir a imagem em destaque do nosso post.

Bom pessoal é isso. Qualquer dúvida ou sugestão utilize o campo de comentários abaixo.

Até a próxima!

 

Com referências daqui.

 

 

Quer continuar por dentro das novidades do Blog Seja Livre? Siga o nosso perfil no TWITTER, curta a nossa página no FACEBOOK ou adicione o Blog Seja Livre nos seus círculos do GOOGLE+.