Como criar templates wordpress – Parte 04

Esse artigo é parte do Curso de criação de templates wordpress, caso ainda não esteja inscrito, por favor confirme sua assinatura agora mesmo, é grátis. Hoje, depois de 3 aulas de introdução e mostrando alguns fundamentos para que ninguém ficasse para trás iniciaremos o desenvolvimento de nosso template de fato. É importante todos ficarem atentos aos detalhes para que nada passe desapercebido.

Para começar crie uma pasta, esta será a pasta de nosso template em: C:wampwwwwordpresswp-contentthemes, chame ela de “curso-templates” para que sempre possamos nos referi-la como a pasta de nosso template. Neste artigo vamos iniciar com a criação de três arquivos que são os mais importantes do template, sem ele nada funcionará, são eles:

  • style.css (arquivo de css principal)
  • index.php (arquivo de chamada para a index de nosso site)
  • screenshot.png (miniatura de nosso template no painel de controle do wordpress)

Para ficar mais fácil, criei uma imagem padrão é só baixar e colocar na pasta “curso-templates”, essa vai ser a miniatura de seu template, e você vai visualizá-la na página de troca de templates.

Style.css: Arquivo principal de estilos

Agora vamos iniciar com a criação de um arquivo chamado style.css, é ele que carregará toda a aparência de nosso template e também é utilizado pelo WordPress para conter algumas informações importantes como o nome do template, quem criou e outras informações. Copie todo o conteúdo abaixo para o arquivo e salve na pasta do template. Neste artigo ainda não vamos fazer nenhuma customização de layout, a intenção é apenas mostrar os arquivos e colocar o template em funcionamento.

/*
Theme Name: Curso Templates
Theme URI: http://www.7desenvolvimento.com/curso-criacao-templates-wordpress/
Description: Um Tema WordPress criado no curso de templates wordpress Grátis do blog Escolasites.com
Author: Escola Sites
Author URI: http://www.7desenvolvimento.com/
Version: 1.0
Tags: clean, escolasites, curso, etc
*/

Instalar conteúdos de teste

No primeiro artigo da série, pedi para baixassem um conteúdo de testes que seria usado no decorrer do curso. Agora vamos importá-lo. Baixe o arquivo e descompacte o mesmo.

Vá até a opção Ferramentas no menu do WordPress e selecione a opção Importar. Clique na opção WordPress. Um aviso aparece para perguntar se você gostaria de baixar a ferramenta de importação WordPress. Clique em Instalar agora.

Depois da instalação, você precisará selecionar o arquivo em seu computador que foi descompactado. Clique no arquivo de upload e botão Importar.

Selecione o usuário padrão de sua instalação que deve ser o usuário admin, marque a opção Download and import file attachments, para que as imagens e anexos também sejam baixados.

Index.php: Template da página principal

Com os dados que precisamos importados,vamos a criação do template index.php.

<div id="primary">
    <section id="content" role="main">
        <?php if ( have_posts() ) : ?>
            <?php while ( have_posts() ) : the_post(); ?>
               <h1> <?php the_title(); ?></h1>
                <?php the_content(); ?>
            <?php endwhile; ?>

        <?php else : ?>

        <?php endif; ?>
    </section><!-- #content -->
</div><!-- #primary -->

Vamos analisar o que temos no index.php. Definitivamente ainda iremos alterar e muito este arquivo mas ele servirá pra apresentar algumas funções importantes do WordPress e que você precisa saber para desenvolver templates wordpress.

Esse é o template de nossa página principal, aquela que mostrará basicamente os últimos artigos de nosso blog.

Entre as linhas 1 e 13, temos a div que conterá todos os artigos na listagem principal. Entre as linhas 2 e 11 temos a section que conterá os artigos.

Entre as linhas 3 e 11 temos uma condicional em php, que faz basicamente a distinção se existe ou não artigos para serem mostrados, caso positivo ele parte para as linhas 4 e 7 que apresenta um while, que irá mostrar todos os artigos, enquanto houver. E temos a condicional negativa, que podemos usar para mostrar uma imagem do tipo, não existe artigo.

Depois de alterar os arquivos, vá até o Menu administrativo do wordpress em Aparência > Temas. Localize a miniatura que criamos e clique em ativar o template. Agora acesse o endereço do blog que deve ser http://localhost/wordpress e veja o que aconteceu.

Resultado até o momento

template index

Os arquivos que criamos até agora foram estes:

arquivos-template

Comente, o curso é seu

Não deixe de deixar seu comentário, seja com opiniões sobre os artigos já publicados, seja com dúvidas e sugestões para a continuidade da série, esperamos que esta série esteja da forma que você espera.

Não deixe de compartilhar estes artigos da série e convidar seus amigos para o curso. Artigos indicando o curso em seus blogs também são bem vindos.

Até já.

Jair Rebello

Empreendedor e Nômade Digital. Dedica grande parte do seu tempo para criar soluções como o Plugin SqueezeWP e o Template ConversionWP Premium que ajudam dezenas de milhares de empreendedores a desenvolverem seus negócios.

Website: http://www.rebello.blog.br