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:

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('&laquo; Artigos Anteriores') ?></div>
		<div class="anteriores"><?php previous_posts_link('Artigos Recentes &raquo;') ?></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('&laquo; Artigos Anteriores') ?></div>
					<div class="anteriores"><?php previous_posts_link('Artigos Recentes &raquo;') ?></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('&laquo; Artigos Anteriores') ?></div>
					<div class="anteriores"><?php previous_posts_link('Artigos Recentes &raquo;') ?></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! 🙂

Este post faz parte de uma série de artigos sobre a criação de wordpress themes: