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
Info: Quer adicionar código nos comentários? Por favor use as tags <pre><code> ... </code></pre>
Comentários
Sem comentários até ao momento. Seja o primeiro a comentar!