WordPress

Página de Post WordPress – Como criar

Nesse tutorial vou explicar como criar uma página de Post WordPress, mas para que serve uma página de post WordPress? Aqui no blog, cada página das categorias são páginas de post WordPress, mas você também pode criar página de posts em destaque, página de post mais lidos e muitas outras opções.

Página de Post WordPress – Criando a página de post

Vamos acessar nosso servidor de hospedagem com seu FTP Client e então nos arquivos do WordPress vamos ao seguinte caminho /wp-content/themes/nome-do-seu-tema/ para fazer o download do arquivo page.php

Feito o download, abra o arquivo em seu editor de HTML preferido e apague todo o conteúdo e salve o arquivo com o nome desejado (no exemplo, vai ser page-destaque.php). Pronto, agora você tem um arquivo de página em branco, vamos criar a página com um loop WordPress e chamar apenas os posts da Categoria Destaque.

No início do seu arquivo page-destaque.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 em Destaque que só exibe os posts da categoria "Destaque"
 *
 * @pacote Exemplos WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 * Template Name: Página de Destaque
 */
?>

Repare que o Template Name é o nome do padrão da página de post que você esta criando, portanto nesse exemplo, o nome é “Página de Destaque“.

Após inserir as instruções, chame o header.php do seu site, incluindo o código abaixo depois das instruções iniciais do seu arquivo.

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

Agora vamos inserir as divs padrões das páginas que são elas:

<div class="site-content" id="primary">
<div id="content" role="main">
<!-- AQUI VAI O CONTEÚDO DO LOOP -->
</div><!-- #content -->
</div><!-- #primary -->

Depois de inserir as divs padrões da página de post WordPress, vamos criar o Loop WordPress para chamar as informações do post, no exemplo vamos chamar o título do post, o resumo do post e a imagem destacada do post.

Para criar o Loop WordPress, inserimos o código abaixo entre as divs criadas anteriormente.

<!-- VERIFICA SE TEM POST DA CATEGORIA DESTAQUE PARA EXIBIR -->
<?php if (have_posts('cat=1&order=DESC')) : ?>
  <?php while (have_posts()) : the_post(); ?>

  <?php endwhile; ?>
 <?php endif; ?>

Pronto, depois de criado o Loop WordPress, vamos chamar as informações dos posts que queremos para então exibir na página de post WordPress. Basta adicionarmos os códigos que desejar depois da linha abaixo:

<?php while (have_posts()) : the_post(); ?>  

Para exibir a imagem destacada do post, adicionamos o seguinte código

<div class="imgDestacada">
<!-- ADICIONA A IMAGEM DESTACADA DO POST -->
 <?php the_post_thumbnail( ); ?>
</div>

Para exibir o nome do post com link, adicionamos o seguinte código

<!-- ADICIONA O TITULO DO POST --></pre>
<h1><a title="<?php the_title(); ?>" href="<?php echo get_permalink(); ?>">
 <?php the_title(); ?>
 </a></h1>

E para adicionarmos o resumo a página de post WordPress, basta adicionar o código abaixo.

<div class="resumoPost">
<!-- ADICIONA O BLOCO RESUMO DO POST -->
<?php the_excerpt(); ?>
</div>

Pronto, com nosso Loop WordPress criado, vamos chamar o bloco footer a página, depois de todo o conteúdo do arquivo page-destaque.php, adicione o seguinte código.

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

Caso seu tema utilize coluna lateral, antes do código acima (que chama o bloco footer) adicione a seguinte linha.

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

Agora com o código pronto, acesse o administrador do WordPress e cria uma nova página, na aba ‘Modelos‘ escolha a opção Página de Destaque e Pronto, sua página de post WordPress esta pronta. Todos os seus posts marcados na categoria Destaque (ID 1) serão exibidos na página criada.

O CSS usado no exemplo, foi o seguinte:

/* EXEMPLO PÁGINA DE POST */

.imgDestacada {

	float:left;
	width:620px;
	height:200px;
	margin-bottom:20px;
}

.tituloPost {
	font-size:18px;
	color:#000;
	text-decoration:none;
}

.resumoPost {
	width:580px;
	padding:0 20px;
	font-size:15px;
	text-align:justify;
	margin-top:10px;
}

É isso, espero que eu tenha ajudado você a criar uma página de Post WordPress, se quiser ver como ficou o exemplo veja em página de Post WordPress.

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

    4 respostas para Página de Post WordPress – Como criar

    1. sharon escreveu em 28 de outubro de 2013

      como faço para saber onde fica ”servidor de hospedagem com seu FTP Client”?

    2. admin escreveu em 30 de outubro de 2013

      Desculpa Sharon, não entendi sua pergunta. Me dê mais detalhes.

    3. Felipe escreveu em 11 de dezembro de 2013

      Amigo, como eu chamo essa página da index? como eu coloco um link da home para ir para essa pagina com todos os posts?

    4. admin escreveu em 11 de dezembro de 2013

      Fala Felipe,

      Rapaz, você pode usar o Menu Principal e adicionar automaticamente ao criar a página (se estiver usando um tema que tenha essa função), ou então você pode adicionar o link, manualmente no Menu (ADMIN -> APARÊNCIA -> MENU)
      Se quiser também pode adicionar, via link, no header.php ou até mesmo no footer.php vai depender de onde você quer que ele apareça.
      Espero ter ajudado. Abraços

    Envie seu comentário.

    Seu email não será publicado