Como criar um template WordPress? Parte 3

Finalmente! Estamos de volta com a terceira parte do nosso curso sobre como criar um template WordPress. E agora iremos aprender como mostrar uma lista com nossos posts na página index do nosso blog.

Certifique-se de ter colocado alguns posts no seu site antes de comerçarmos.

De onde paramos?

Na aula anterior criamos nossa página index, separamos as seções de cabeço e rodapé em dois arquivos diferentes (para melhorar a organização do nosso código), colocamos a exibição do nome e descrição do nosso site, fizemos a exibição de um menu e de “quebra” criamos uma folha de estilos bem legal para exibir tudo isso.

página index com cabeçalho e menu
não é muito mas é um trabalho honesto!

Prepare-se para ler o código mais complexo da sua vida!

Preste muita atenção no código que colocaremos no conteúdo da página Index.php. Ele será responsável por exibir a lista de posts do nosso blog.

<?php get_header() ?>

<div class="container">
<main>
<?php

if(have_posts()):
    while(have_posts()):
        the_post();
        ?>
        <div class="card">

            <h2><?php the_title()?></h2>
            <p><?php the_excerpt()?></p>
            <a href=<?php the_permalink()?>>Leia mais</a>
        </div>
        <?php
    endwhile;
endif;

?>
</main>
</div>
 
<?php get_footer() ?>

O que fizemos aqui foi:

  • Utilizar a função have_posts() para checar se há posts para serem exibidos
  • Se houverem posts para exibição, usamos a função have_posts() novamente como condição de um laço de repetição while.
  • A função the_post() é usada dentro do while e serve para fazer a iteração do índice do loop.
  • A função the_title() retorna o título do post
  • A função the_excerpt retorna o resumo do post, ou se você não tiver habilitado esta opção, retornará as primeiras linhas escritas do post.
  • E a função the_permalink() retorna o link do seu post.

Todo o resto além destas cinco funções são tags html para controle de exibição do conteúdo na tela do navegador.

Vamos ver o resultado?

página index com exibição de posts

Vamos rever o nosso css e melhorar um pouco a exibição da nossa lista:

/*
Theme Name: MeuTema
Version: 1.0
Author: Fernando Cassiano
Author URI: https://www.senhorosvaldo.com.br
Description: Meu Primeiro Tema WordPress
Text Domain: MeuTema
*/
 
* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}
 
/*
Header | Cabeçalho
*/
 
.meucabecalho::before {
    height: 4px;
    background-color: black;
    display: block;
    content: "";
}
 
.meucabecalho {
    display: flex;
    flex-direction: column;
}
 
.meucabecalho h1, h2 {
    padding: 20px;
    margin: 0 auto;
}
 
.meucabecalho h1 {
    font-family: cursive;
    font-size: 32px;
    text-align: center;
}
 
.meucabecalho h2 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 24px;
    text-align: center;
}
 
.meucabecalho a {
    text-decoration: none;
    color: #8b8b8b;
}
 
.meucabecalho a:hover {
    color: #000000;
}
 
nav {
    margin: 0 auto;
    border-top: 1px solid #d9d9d9;
}
 
.meucabecalho ul {
    list-style-type: none;
}
 
.meucabecalho li {
    padding: 10px;
    display: inline-block;
}
 
/*
Footer | Rodapé
*/
 
footer {
    background-color: black;
    position: relative;
    bottom: 0;
    width: 100%;
    height: 40px;
}
 
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.aligncenter{
    margin: 5px auto;
}

.card{
    max-width: 768px;
}
p{
    word-spacing: 5px;
    letter-spacing: 2px;
    line-height: 1.5;
}
p, a{
    padding-left: 20px;
    padding-right: 20px;
}

Errata: tive que corrigir a linha 78 do arquivo css, mudei de absolute para relative.

E vamos para o resultado com a aplicação de css:

página index estilizada com exibição de posts
ah, não está tão ruim assim!

Pronto, já temos um tema que exibe uma lista com nossos posts. Já temos quase que o básico para um tema.

Espero que tenha achado o conteúdo simples, porque é realmente muito simples trabalhar com WordPress, seja você um profissional experiente ou não.

Não se esqueça que todas as funções que usamos na construção do nosso template estão bem documentadas no site WordPress.org.

No próximo post iremos falar um pouco mais sobre a página index, adicionaremos imagens, paginação (para quando tivermos muitos posts em nossa página) e exibiremos o conteúdo completo de nossos posts.

Fico por aqui, não esqueça de deixar o seu comentário e sugestões para o nosso tema wordpress!

Sê o primeiro

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *