É um CMS para blogs extremamente poderoso e de longe o mais utilizado, tanto que o próprio Boteco Digital o utiliza :). Instalá-lo é bastante fácil como podemos ver no vídeo do outro post.

Embora existam uma infinidade de temas disponíveis na internet, sempre achei frustrante encontrar um outro blog com o mesmo layout, achando mais válido criar um tema próprio mesmo que ele não seja tão bonito(o Boteco Digital é uma prova).

Um tema no WordPress, como um site qualquer é um conjunto de imagens, folhas de estilo, scripts PHP e Javascript, que devem ser colocados dentro da pasta /wp-content/themes/, a principio criando uma pasta neste diretório com um arquivo index.php e um style.css já é possivel ir em Aparência -> Themas e ativá-lo, e o blog irá mostrar o que tiver dentro do arquivo index.php.

Estrutura de Arquivos

O WordPress funciona com um Query String, dependendo da parte do blog que se está tentando acessar ele utilizará um arquivo com um nome pré-definido do tema, se este não estiver presente, ele utilizará o anterior na hierarquia que estiver presente, até chegar no index.php.

Estrutura de Arquivos
Estrutura de Arquivos

Uma Hierarquia mais completa de arquivos do template pode ser vista aqui.

Por exemplo, se você tentar acessar a listagem de posts de uma determinada categoria, ele primeiro irá procurar dentro da pasta do tema um arquivo com o nome category-<nome>.php, no caso se estivermos tentando ver os posts da categoria Notícias, ele irá procurar por category-noticias.php, se o WordPress não encontrar ele irá tentar utilizar para mostrar o arquivo category.php, se este também arquivo não estiver presente, ele irá utilizar o arquivo index.php mas somente irá buscar no banco de dados posts que estiverem na categoria Notícias.

Os arquivos mais comuns que um tema tem são os seguintes:

  • header.php: local onde fica o código do cabeçalho
  • sidebar.php: local onde fica o código da lateral
  • footer.php: local onde fica o código do rodapé
  • index.php: código que mostra os artigos na página inicial
  • single.php: código que mostra o artigo na sua própria página
  • page.php: código que mostra o conteúdo de uma página estática
  • archive.php: igual ao index.php, o código nesta parte vai mostrar os artigos que estão no arquivo, nas categorias, tags, etc
  • functions.php: local onde ficam algumas funções que adicionam mais capacidades aos temas
  • 404.php: igual ao index.php, em vez de mostrar um artigo deverá de mostrar um texto para avisar que o conteúdo não foi encontrado
  • style.css: arquivo onde fica o stylesheet do tema

Antes de começaremos com o index.php, vamos primeiro criar o style.css que é responsável também por identificar o tema para o WordPress, na lista de temas para identificar.

style.css 

/*
Theme Name: Exemplo de Tema / Boteco Digital
Theme URI: http://www.botecodigital.info/
Description: Exemplo de template para post
 
Author: Rodrigo Aramburu
Author URI: http://www.botecodigital.info/
Version: 1.0
 
License: Creative Commons 3.0
License URI: http://creativecommons.org/licenses/by/3.0
*/
 
body{
    background:#EEE;
}

Estrutura básica

Agora vamos para o index.php:

<DOCTYPE HTML>
<html lang="pt-br">
    <head>
        <title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
        <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
 
        <?php wp_head(); ?>
    </head>
 
    <body>
        <h1><?php bloginfo('name'); ?></h1>
    </body>
 
    <?php wp_footer(); ?>
</html>

Para ficar mais simples colocamos toda estrutura em um único arquivo, depois iremos separar esta estrutura em outros arquivos.

Começamos analizando a linha 4, nela vemos chamadas a duas funções bloginfo('name') e wp_title(). Os temas do WordPress utilizam funções para pegar os valores a serem exibidos, cada função é responsável por exibir alguma informação, estas funções normalmente tem duas formas, a normal ( wp_title() ) que imprime o conteúdo, e get_wp_title() retorna o valor para ser utilizado.

  • bloginfo(‘name’): mostra algum tipo de informação do blog passada por parâmetro, neste caso o nome do blog que pode ser configurado na área administrativa.
  • wp_title(): mostra o titulo do post, nome da categoria, etc, que esta sendo exibido
  • bloginfo(‘stylesheet_url’): mostra o caminha do arquivo style.css do tema.
  • wp_head(): insere vários tipos de tag, scripts e etc que o wordpress ou qualquer plugin instalado necessite inserir dentro da tag head, se você esquecer de colocar alguns plugins podem não funcionar
  • wp_footer(): semelhante ao anterior mas serve para ser inserido no fim da página

O Loop

Na página inicial de um blog devemos listar os posts do blog e para isso devemos utilizar O Loop 

if ( have_posts() ) :
    while (have_posts() ) :
        the_post();
 
        the_ID();
        the_permalink();
        the_title();
        the_time('d/m/Y');
        the_autor();
        the_content();
    endwhile;
endif;

O Loop no WordPress é necessário pois quando entramos em uma página que irá exibir diversos posts é carregada uma lista de posts que serão exibidos, e para percorrer esta lista devemos realizar um loop que enquanto houver posts nesta lista(para isso utilizamos a função have_posts() que retornas true se tiver) carregamos um post e exibimos as suas informações, para carregar o post utilizamos a função the_post() que carrega os dados para exibição através das funções correspondentes, se for chamada novamente ela carregará os dados do próximo post da lista, por isso esta função fica dentro do loop while.

Após chamar a função the_post() podemos chamar diversas funções para obter as informações do post entre elas estão:

Agora que sabemos como pegar as informações podemos utilizar um pouco de HTML para dar forma a ela. 

<div id="conteudo">
    <?php
    if ( have_posts() ) :
        while (have_posts() ) :
            the_post();
    ?>      
            <div id="post-<?php the_ID(); ?>" class="post">
                <h2><?php the_title() ; ?></h2>
                <p>Publicado em <?php the_time('d/m/Y'); ?> por <?php the_author(); ?></p>
                 
                <?php the_excerpt(); ?>
                <a href="<?php the_permalink();?>">Leia mais </a>
            </div>
     
    <?php
        endwhile;
    endif;
    ?>
</div>

Este é o básico para listar listar os posts, poderíamos colocar mais informações sobre o post como a categoria, tags, comentários, etc.

Neste ponto já nosso arquivo index.php já está crescendo, o melhor seria dividi-lo no clássico esquema, topo, rodapé e menu, para reutilizar esta partes na página do post inteiro, por exemplo, no WordPress temos nomes padrão para esses arquivos, que serão incluídos através de funções.
Então vamos começar com o topo, que no WordPress fica header.php: 

<DOCTYPE HTML>
<html lang="pt-br">
    <head>
        <title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
        <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
 
        <?php wp_head(); ?>
    </head>
 
    <body>
        <h1><?php bloginfo('name'); ?></h1>

E também separamos o rodapé, que fica com o nome de footer.php: 

   </body>
 
    <?php wp_footer(); ?>
</html>

E por fim vamos ver como fica o nosso index.php 

<?php get_header(); ?>
    <div id="conteudo">
        <?php
        if ( have_posts() ) :
            while (have_posts() ) :
                the_post();
        ?>      
                <div id="post-<?php the_ID(); ?>" class="post">
                    <h2><?php the_title() ; ?></h2>
                    <p>Publicado em <?php the_time('d/m/Y'); ?> por <?php the_author(); ?></p>
                     
                    <?php the_excerpt(); ?>
                    <a href="<?php the_permalink();?>">Leia mais </a>
                </div>
         
        <?php
            endwhile;
        endif;
        ?>
    </div>
    <?php get_sidebar(); ?>
 
<?php get_footer(); ?>

Como podemos ver acima no index.php ficou apenas o loop de posts, e a chamada aos outros arquivos. Na linha 1 chamamos a função get_header() que insere o conteúdo do arquivo header.php, na linha 23 chamamos a função footer.php que insere o conteúdo do arquivo footer.php, e na linha 21 chamamos a função get_sidebar(); que irá inserir o arquivo sidebar.php, mas se você for atento vai notar que ainda não criamos um arquivo sidebar.php então o WordPress como um bom menino nos irá fornecer um padrão, que irá conter um campo de busca, a lista de páginas estáticas, lista de categorias, histórico de posts por data.

Como provavelmente vamos querer customizar a barra lateral, iremos criar o nosso próprio sidebar.php: 

<aside id="sidebar">
    <form role="search" method="get" id="searchform">
        <div>
            <input type="text" value="" name="s" id="s" />
            <input type="submit" id="searchsubmit" value="Pesquisar" />
        </div>
    </form>
 
    <h3>Categorias</h3>
    <ul>
        <?php wp_list_categories('title_li='); ?>
    </ul>
 
 
    <h3>Tags</h3>
    <div id="tags">
        <?php wp_tag_cloud(); ?>
    </div>
 
 
    <h3>Links</h3>
    <ul>
        <?php wp_list_bookmarks('title_li='); ?>
    </ul>
 
</aside>

Na linha 2 criamos um formulário que será utilizado para pesquisa no blog, a pesquisa será listada no arquivo search.php, mas você não tiver este arquivo presente no seu tema ele irá utilizar o index.php mesmo. Lembrando que o input que irá conter o texto de pesquisa deve ter o name “s”.

Na linha 11 chamamos a função wp_list_categories('title_li=') passando como parâmetro 'title_li=' para ele não inserir o texto padrão de titulo da categoria e podermos colocar o titulo com a tag que quisermos.

Na linha 17 chamamos a função wp_tag_cloud() que cria aquela velha conhecida nuvem de tags, onde as tags que mais aparecem em posts ficam maiores que as outras.

Na linha 23 chamamos a função wp_list_bookmarks('title_li=') para listar os links favoritos do blog.

Com isso já temos a página inicial do nosso blog, no próximo passo vamos criar o single.php que exibirá o post completo. No próximo post já coloco o tema meio pronto para download.

Para referências de funções acesse Theme Development