Na terceira parte desta série de artigos que ensina a criar templates wordpress desde o zero, vamos desenvolver os nossos index.php e archive.php (homepage e página de arquivos, respectivamente).
Para acompanhar o nosso raciocínio desde o inicio, recomendamos que leia os dois artigos publicados antes deste:
- Como criar um Template WordPress - Parte 1- Introdução
- Como criar um Template WordPress - Parte 2 - Style.css e Header.php
Recomendamos também que subscreva a nossa newsletter para receber os restantes artigos no seu email e também ganhar prémios todos os meses:
[subscribeform]
index.php
O index.php é o ficheiro onde fica todo o conteúdo mostrado na homepage. Este ficheiro é usado também quando algum ficheiro responsável pela parte do conteúdo está em falta (single.php, archive.php, etc).
No nosso index.php (criado na primeira parte do tutorial - download dos ficheiros aqui) temos o seguinte código:
<?php get_header(); ?> <div id="conteudo"> <div id="artigos"> <div class="artigo"> <h2>Titulo do artigo 1</h2> <p>Postado por administrador em 16/01/2012</p> <p>Conteudo do artigo</p> </div> <div class="artigo"> <h2>Titulo do artigo 2</h2> <p>Postado por administrador em 16/01/2012</p> <p>Conteudo do artigo</p> </div> </div> <?php get_sidebar(); ?> </div> <?php get_footer(); ?>
Como este código ainda é html, o wordpress não sabe em que parte deve de mostrar o conteúdo, por isso temos que usar o chamado "loop". Para quem não sabe, o "loop" é responsável pela mostragem do conteúdo na página inicial e páginas de arquivo do blog e também mostrar mensagens ao usuário no caso de não existir artigos para ser mostrados ou mostrar os links de navegação pelo arquivo.
Vamos usar este código para criar o loop do nosso index.php, a explicação sobre cada linha de código está mais em baixo.
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <?php endwhile?> <?php else: ?> <?php endif; ?>
Para entenderem o que cada linha faz, "traduzimos" para português:
- linha 1: se houver posts, então mostrar posts (depois desta linha fica toda a "div" do post);
- linha 2: os posts já foram mostrados (até ao limite que está definido em Opções > Leitura) por isso não deve de mostrar mais posts (depois disto fica a navegação do blog);
- linha 3: no caso exista posts, então é mostrado o conteúdo que estiver depois desta linha (pode ser um simples parágrafo dizendo "não existem posts");
- linha 4: como os posts ou a mensagem a informar que não existem posts já foram mostrados, o wordpress termina o "loop" aqui.
Como aplicar este código no index.php
O loop fica dentro da div do conteúdo, neste caso a nossa div é <div id="artigos">. Dentro do loop fica a div do post (<div class="artigo"> ...) depois da primeira linha de código.
Resultado:
<?php get_header(); ?> <div id="conteudo"> <div id="artigos"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <div class="artigo"> <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2> <p>Postado por <?php the_author() ?> em <?php the_time('d/M/Y') ?> - <?php comments_popup_link('Sem Comentários', '1 Comentário', '% Comentários', 'comments-link', ''); ?> <?php edit_post_link('(Editar)'); ?></p> <p><?php the_content(); ?></p> </div> <?php endwhile?> <?php else: ?> <?php endif; ?> </div> <?php get_sidebar(); ?> </div> <?php get_footer(); ?>
Agora falta preencher o resto do loop. Depois da linha <?php endwhile?>, colocamos a navegação. Aqui podemos usar um plugin como o WP-PageNavi que mostra uma navegação numerada (como aqui no wptotal) ou usar um código que mostra os links "anterior" e "seguinte".
Se usar o plugin:
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
Se não usar o plugin (vamos optar por isto neste tutorial). Note que adicionamos código html ao nas tags para que elas fiquem lado a lado no tema.
<div class="navegacao"> <div class="recentes"><?php next_posts_link('« Artigos Anteriores') ?></div> <div class="anteriores"><?php previous_posts_link('Artigos Recentes »') ?></div> </div>
Este é o CSS para o segundo código, copie e cole em qualquer parte do style.css:
.navegacao{ width:630px; float:left; } .recentes{ float:left; } .anteriores{ float:right; }
E agora depois do <?php else: ?> fica a mensagem que aparece no caso de não existirem posts. Optamos por usar a mesma div do artigo mas com uma mensagem personalizada. Assim até quando existir um erro, a forma como a mensagem vai aparecer será a mesma que um post:
<div class="artigo"> <h2>Nada Encontrado</h2> <p>Erro 404</p> <p>Lamentamos mas não foram encontrados artigos.</p> </div>
Todo o loop está pronto mas ainda falta automatizar o conteúdo que vai aparecer como artigo. Vamos usar 7 tags:
- tag 1: mostra o título
- tag 2: insere o link da página onde o artigo está
- tag 3: mostra o nome do autor do artigo
- tag 4: mostra a data em que o artigo foi publicado
- tag 5: mostra o numero de comentários e adiciona o link para os comentários do artigo
- tag 6: mostra um texto "Editar" com o link para a página de edição do artigo. Só aparece a usuários com o login feito e com permissões para editar posts.
- tag 7: mostra o conteúdo do artigo.
<?php the_title(); ?> <?php the_permalink() ?> <?php the_author() ?> <?php the_time('d/M/Y') ?> <?php comments_popup_link('Sem Comentários', '1 Comentário', '% Comentários', 'comments-link', ''); ?> <?php edit_post_link('(Editar)'); ?> <?php the_content(); ?>
Vamos agora colocar estas tags na div do artigo. Fica assim:
<div class="artigo"> <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2> <p>Postado por <?php the_author() ?> em <?php the_time('d/M/Y') ?> - <?php comments_popup_link('Sem Comentários', '1 Comentário', '% Comentários', 'comments-link', ''); ?> <?php edit_post_link('(Editar)'); ?></p> <p><?php the_content(); ?></p> </div>
Neste momento o nosso index.php está pronto e a funcionar. Este é o código final:
<?php get_header(); ?> <div id="conteudo"> <div id="artigos"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <div class="artigo"> <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2> <p>Postado por <?php the_author() ?> em <?php the_time('d/M/Y') ?> - <?php comments_popup_link('Sem Comentários', '1 Comentário', '% Comentários', 'comments-link', ''); ?> <?php edit_post_link('(Editar)'); ?></p> <p><?php the_content(); ?></p> </div> <?php endwhile?> <div class="navegacao"> <div class="recentes"><?php next_posts_link('« Artigos Anteriores') ?></div> <div class="anteriores"><?php previous_posts_link('Artigos Recentes »') ?></div> </div> <?php else: ?> <div class="artigo"> <h2>Nada Encontrado</h2> <p>Erro 404</p> <p>Lamentamos mas não foram encontrados artigos.</p> </div> <?php endif; ?> </div> <?php get_sidebar(); ?> </div> <?php get_footer(); ?>
Esta imagem mostra a nossa homepage com 2 posts e a navegação a funcionar:
archive.php
Depois de termos o index.php pronto, vamos criar a página que é responsável por mostrar os arquivos do blog. Existem várias páginas que podem fazer isto, até o index.php faz esse trabalho caso não exista nenhum ficheiro de arquivo, mas vamos usar um ficheiro que é o default para todas as páginas de arquivo (categorias, tags, links, data, autores, etc): o archive.php
Para esta página, vamos usar o código do index.php e adicionar um hack que basicamente vai informar ao usuário qual é o conteúdo estão a ver. Comece por criar um archive.php ou se fez o download dos ficheiros da segunda parte do tutorial, abra o ficheiro. Copie todo o código do index.php e cole no archive.php (substitua todo o conteúdo - caso exista algum).
Este é o hack que devemos de adicionar antes do loop:
<?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?> <?php /* If this is a category archive */ if (is_category()) { ?> Arquivo da Categoria "<?php echo single_cat_title(); ?>" <?php /* If this is a daily archive */ } elseif (is_day()) { ?> Arquivo de <?php the_time('j de F de Y'); ?> <?php /* If this is a monthly archive */ } elseif (is_month()) { ?> Arquivo de <?php the_time('F de Y'); ?> <?php /* If this is a yearly archive */ } elseif (is_year()) { ?> Arquivo de <?php the_time('Y'); ?> <?php /* If this is an author archive */ } elseif (is_author()) { ?> Arquivo do Autor <?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?> Arquivo do Blog <?php } ?>
Este conjunto de "if's" mostra uma mensagem diferente em cada tipo de arquivo. Explicação de cada "if":
- 1º if: mostra uma mensagem na página das categorias
- 2º if: mostra uma mensagem na página de arquivo diario
- 3º if: mostra uma mensagem na página de arquivo mensal
- 4º if: mostra uma mensagem na página de arquivo anual
- 5º if: mostra uma mensagem na página de arquivo do autor
- 6º if: mostra uma mensagem generica caso não seja um arquivo dos anteriores
Como a ideia desta série de tutoriais é ensinar o mais importante e não complicar muito as coisas, não adicionamos nenhum estilo a esta mensagem, mas podem fazê-lo. Fica a vosso critério.
Este é o resultado final do nosso archive.php:
<?php get_header(); ?> <div id="conteudo"> <div id="artigos"> <?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?> <?php /* If this is a category archive */ if (is_category()) { ?> Arquivo da Categoria "<?php echo single_cat_title(); ?>" <?php /* If this is a daily archive */ } elseif (is_day()) { ?> Arquivo de <?php the_time('j de F de Y'); ?> <?php /* If this is a monthly archive */ } elseif (is_month()) { ?> Arquivo de <?php the_time('F de Y'); ?> <?php /* If this is a yearly archive */ } elseif (is_year()) { ?> Arquivo de <?php the_time('Y'); ?> <?php /* If this is an author archive */ } elseif (is_author()) { ?> Arquivo do Autor <?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?> Arquivo do Blog <?php } ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <div class="artigo"> <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2> <p>Postado por <?php the_author() ?> em <?php the_time('d/M/Y') ?> - <?php comments_popup_link('Sem Comentários', '1 Comentário', '% Comentários', 'comments-link', ''); ?> <?php edit_post_link('(Editar)'); ?></p> <p><?php the_content(); ?></p> </div> <?php endwhile?> <div class="navegacao"> <div class="recentes"><?php next_posts_link('« Artigos Anteriores') ?></div> <div class="anteriores"><?php previous_posts_link('Artigos Recentes »') ?></div> </div> <?php else: ?> <div class="artigo"> <h2>Nada Encontrado</h2> <p>Erro 404</p> <p>Lamentamos mas não foram encontrados artigos.</p> </div> <?php endif; ?> </div> <?php get_sidebar(); ?> </div> <?php get_footer(); ?>
Ao entrar numa página de arquivo a mensagem aparece e muda conforme o arquivo que está a ver:
Download dos ficheiros
Conclusão
Neste momento já temos 4 ficheiros prontos: style.css, header.php, index.php e archive.php. No próximo artigo vamos falar em três ficheiros que também são muito importantes: single.php, page.php, 404.php.
Se gostou partilhe nas redes sociais e se tiver alguma dúvida deixe um comentário! 🙂
- Como criar um Template WordPress - Introdução
- Como criar um Template WordPress - Style.css e Header.php
- Como criar um Template WordPress - Index.php e Archive.php
- Como criar um Template WordPress - Single.php, Page.php e 404.php
- Como criar um Template WordPress - Comments.php
- Como criar um Template WordPress - Sidebar.php, Functions.php e Footer.php
Olá, onde que eu consigo ver todas as funções do wordpress?
Exemplo, tenho um site que quero inserir imagens, onde que eu acho a função para ancorar no código das imagens?
EU FIZ UM MENU NAV NÃO GERENCIADO, MAIS NAO ESTOU CONSEGUINDO DIRECIONAR OS LINKS PARAS AS PAGINAS QUE CRIEI NO PAINEL
Cara, parabéns pelo tutorial! Muito bem explicado. Obrigado!!!
Só consigo mostrar as imagens fazendo o upload das mesmas e copiando toda a url da mesma na tag img. Alguma ideia?
Também tive esta mesma dúvida vc consegue fazer isso com https://wordpress.org/support/topic/adding-images-to-static-pages a solução deste site.
Como faço para que as minhas imagens do index.php e outras páginas apareçam. Pois aqui não estão aparecendo. Tentei tanto via upload quanto da pasta wp-includes/images.
Gostei Muito... Parabens
Muito bom!
Celso, vc conhece algum plugin ou poderia postar um código para colocar fotos em forma de slide no cabeçalho do blog/site do wordpress?
Nunca usei plugins de slideshows, mas existem vários aqui:
- https://wordpress.org/extend/plugins/tags/slideshow
🙂
muito bom o passo a passo de criação de temas, quando virá o próximo da série?
Olá, já foi publicado:
- https://www.wptotal.com/como-criar-um-wordpress-theme-parte-4/
Ops!!!
Eu fui apressado. Desculpe-me. :((
Depois eu vi que a série continuará.
Não faz mal, acontece a todos 🙂
A quarta parte já pode ser encontrada aqui: https://www.wptotal.com/como-criar-um-wordpress-theme-parte-4/
Caro Celso,
muito obrigado pelo tutorial. Considerei o passo-a-passo muito bem explicado.
Porém, no final do terceiro, pareceu-me que haveria um quarto, ... (No próximo artigo vamos falar em três ficheiros que também são muito importantes: single.php, page.php, 404.php.)...
Ou estarei enganado?
Descupe Celso, não me lembro bem de toda a mensagem, mas falava que poderia ser temporario, e pelo visto era, já esta funcionando tudo certo.
Celso, muito bom seu material, mas não concigo baixar nenhum dos ficheiro da 1ª a 3ª parte.
Olá Marcelo,
qual é o erro?
Estou acompanhando os artigos e montando o tema. Parabéns pelas explicações.
Um forte abraço,
Fábio
Parabéns Celso,
Já aguardando os próximos artigos.
Bom feriado amigo!
Obrigado pelo comentário Julio 🙂
Parabéns novamente, Celso. Estão muito bons os posts, muito bem editados, elaborados e com um ensinamento guia.
Ainda não comecei a testar e a fazer o meu próprio tema, vou esperar a série terminar. Tem ideia de quantas partes vão ser?
Abraços.
Olá Lucas,
obrigado pelo comentário. Em principio serão 7 artigos com a informação básica, depois quero também fazer uns artigos extra para tornar o tema mais completo (menus personalizados, thumbnails nos posts, etc). 🙂
Óptima continuação da série. Muito bom em nos ajudar em criar um tema.
Parabéns e que venham mais artigos da série 😀
Obrigado pelo comentário 🙂