WordPress

Loop para Post Type Específico – Custom Post Type

Hey galáxia, mais uma vez estou aqui com um pequeno tutorial WordPress pra vocês, vou mostrar como fazer um loop para post-type específico, ou seja, você vai criar um loop para exibir somente determinado tipo de post que você queira.

Veja esse post se você não sabe o que é, como criar custom-post-type no WordPress.

Veja o exemplo de loop para post-type específico.

Vamos continuar o exemplo do post de como criar custom-post-type no WordPress. No exemplo, criamos um post-type chamado portifolio e criamos 3 campos personalizados, que são: cliente, ano e serviço então vamos criar nosso loop exibindo essas 3 informações, caso você não tenha os campos, basta retirar as linhas correspondentes.

Como criar Loop para Post Type Específico

É hora de criar um arquivo PHP que chamaremos de page-portifolio.php insira as instruções do arquivo, algo mais ou menos assim (Você deve mudar as nomenclaturas de acordo com sua necessidade).

<?php
/**
 * Template da Página Posts com loop específico para post-type 'portifolio'
 *
 * @pacote Exemplos WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 * Template Name: Loop especifico custom post
 */
?>

Você já sabe que Template Name é o nome da página de post com loop específico que você esta criando, portanto nesse exemplo, o nome do modelo da página que vai aparecer no admin é ‘Loop especifico custom post‘.

Abaixo das instruções no arquivo, chame o header.php, incluindo o código abaixo.

<!-- CHAMA O HEADER.PHP -->
<?php get_header(); ?>

É hora de criar a marcação para as divs padrões das páginas que são:

<div class="site-content" id="primary">
<div id="content" role="main">
<!-- AQUI VAI O CONTEÚDO DO LOOP PARA POST TYPE ESPECÍFICO -->
</div><!-- #content -->
</div><!-- #primary -->

Após fazer a marcação das divs padrões da página, vamos criar o Loop para post type específico no WordPress para chamar as informações do post, no exemplo vamos chamar o título do post, os campos personalizados (cliente, ano e serviço), o conteúdo e a imagem em destaque.

Para criar o Loop para post type específico, inserimos o código dentro das divs que criamos no passo anterior.

<!-- VERIFICA SE TEM CUSTOM POST TYPE PORTIFOLIO -->
<?php $args=array('posts_per_page'=>12, 'post_type'=>'portifolio', 'order' => 'DESC'); ?>
<?php query_posts($args);
while (have_posts()) : the_post(); ?>
<!-- ADICIONA A IMAGEM DESTACADA DO POST -->
<div class="imgDestacada">
 <?php the_post_thumbnail( ); ?>
</div>
<!-- ADICIONA O TITULO DO POST -->
<h1><a title="<?php the_title(); ?>" href="<?php echo get_permalink(); ?>">
 <?php the_title(); ?>
 </a></h1>
  <?php endwhile; ?>
<div class="conteudoPost">
<!-- ADICIONA OS CAMPOS PERSONALIZADOS -->
<div><?php $cliente = get_post_meta($post->ID, 'cliente', true); echo '<strong>Cliente: </strong>' . $cliente; ?></div>
<div><?php $ano = get_post_meta($post->ID, 'ano', true); echo '<strong>Ano: </strong>' . $ano; ?></div>
<div><?php $servico = get_post_meta($post->ID, 'servico', true); echo '<strong>Serviço: </strong>' . $servico; ?></div>
<!-- ADICIONA O BLOCO CONTEUDO DO POST -->
<?php the_content(); ?>
</div>

Reparou que no código acima, da linha 18 até a 21 é onde chamamos os campos personalizados? Se você não esta usando, basta excluir essas linhas, ou altere o nome dos campos de acordo com sua necessidade.

É isso, com nosso Loop para post type específico pronto, vamos inserir o bloco footer a página, depois de todo o conteúdo do arquivo page-portifolio.php, adicione o código abaixo.

<!-- ADICIONA O BLOCO FOOTER -->
<?php get_footer(); ?>

Se você utilizar sidebar no seu tema, antes do passo anterior (que chama o bloco footer) adicione a seguinte linha.

<!-- ADICIONA A COLUNA LATERAL (SIDEBAR) -->
<?php get_sidebar(); ?>

Agora com o arquivo page.portifolio.php finalizado, basta enviar via FTP para o seguinte caminho /wp-content/themes/nome-do-tema/. Depois acesse o administrador do WordPress e crie uma nova página, na aba ‘Modelos‘ defina a opção Loop para Post Type Específico, salve e pronto, seu loop para post type específico no WordPress esta pronto, todos os seus tipos de post (custom-post-type) (portifolio) serão exibidos na página criada.

O CSS usado no exemplo, foi o seguinte:

/* EXEMPLO LOOP PARA POST TYPE ESPECÍFICO */
.imgDestacada {
	float:left;
	width:620px;
	height:200px;
	margin-bottom:20px;
}
.tituloPost {
	font-size:18px;
	color:#000;
	text-decoration:none;
}
.conteudoPost {
	width:580px;
	padding:0 20px;
	font-size:15px;
	text-align:justify;
	margin-top:10px;
}

Clique aqui e veja o exemplo
Clique aqui e veja o código completo no GitHub
Clique aqui e faça download do arquivo do exemplo.

Simples, agora você sabe como criar um loop para post type específico no WordPress, mais uma vez repito, isso abre um leque muito grande de possibilidades pra se trabalhar com o conteúdo do site.

Se o post te ajudou curte a página, não custa nada e me incentiva a continuar escrevendo.
Posts recomendados
Comentários

    2 respostas para Loop para Post Type Específico – Custom Post Type

    1. robert escreveu em 9 de abril de 2014

      gostaria de saber como faço para apresentar um script de programação como o seu, com os numeros das linhas, cores das palavras reservadas.

    2. Qcabeca escreveu em 10 de abril de 2014

      Bom Dia Robert, o plugin que eu uso é o SyntaxHighlighter Evolved. Lá você pode customizar o CSS com as cores dos códigos.

      Sucesso ae. Abs

    Envie seu comentário.

    Seu email não será publicado