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).

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?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.

1
2
3
4
5
6
7
<?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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?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:

1
<?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.

1
2
3
4
<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:

1
2
3
4
5
6
7
8
9
10
11
12
.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:

1
2
3
4
5
<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.
1
2
3
4
5
6
7
8
9
10
11
12
13
<?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:

1
2
3
4
5
<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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<?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:

Comentários