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

  • LEGAL!

    • Jair Rebello

      Obrigado Meirelles. Continue acompanhando o curso.

      Abraços.

  • Não consegui abrir http://localhost/wordpress no meu computador muito menos fazer login no wordpress instalado!
    Somente digitanto 127.0.0.1 é que abre o localhost.
    O que será.

    • Jair Rebello

      Edvaldo, alguma configuração deve ter sido feita em seu computador no arquivos hosts do windows, prossiga acessando através deste endereço, você não irá se prejudicar por isso.

      Abraços.

  • João

    Não recebi o link da 2 e 3 aula. se alguem tiver publiquem?

  • Marcelo Cardoso

    Olá Jair não entendi a parte de Instalação de conteúdos teste, não estou entendendo o seguinte: opção Ferramentas no menu do WordPress e selecione a opção Importar. o programa que vc falou para colocar é http://globocom.github.io/bootstrap/, se for eu já baixei mas como mencionei em cima, não entendi o Processo de Instalação, eu coloco direto na pasta do wordpress ou não. Obrigado

  • Marcelo Cardoso

    A Aulas estão ótimas, mas Jair ainda não entendi como coloco o programa, eu vou na pasta do WordPress que coloquei ou não entrei também no locallhost lá tem a opção importar mas tentei ele só vai abrindo, me desculpe mas ainda não entendi, já baixei o programa indicado mas essa parte ainda não entendi “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”. Obrigado

    • Jair Rebello

      Instale a ferramenta e importe.

      Abraços.

  • Falae Jair, as aulas estão me ajudando muito. Quero agradecer pela sua atitude. Deus te abençoe muito. Um abraço.

    • Jair Rebello

      Que bom que está gostando do curso até agora.

      Abraços.

  • Marcelo Cardoso

    Olá Jair eu descompactei o programa que vc me passou o link, eu instalo a onde na pasta que criei de WordPress e importo para onde Localhost essa etapa que não estou entendendo, onde eu instalo e importo essa pasta que gera quando eu extraio esse programa que vc esta pedindo Obrigado

    • Jair Rebello

      Marcelo, não entendi nada que você comentou. Se explique melhor por favor.

  • Carlos Eduardo

    Jair,

    Tem algo estranho no passo a passo mesmo, mais precisamente neste trecho:

    “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.”

    O que acontece? Quando clico em WordPress não aparece ‘Instalar agora’, abre um ‘pop-up’ com o título “Instale o importador”… Depois de um tempo processando a seguinte mensagem é exibida:

    “Ocorreu um erro inesperado. Algo pode estar errado com WordPress.org ou com a configuração deste servidor. Se continuar a ter problemas, tente o Fórum de Suporte.”

    E aí as duas únicas opções que temos é (1) clicar no ‘x’ pra fechar o pop-up ou (2) clicar em “Fórum de Suporte” da mensagem acima, que é um link.

    Pra complementar um pouco mais o meu relato, acredito que seja algo relativo a estarmos em um ambiente local (localhost), pois a URL do link wordpress no importar aponta para http://localhost/wordpress/wp-admin/plugin-install.php?tab=plugin-information&plugin=wordpress-importer&from=import&TB_iframe=true&width=640&height=838

    Enfim, é isso.

    Obrigado pela atenção.

    Abraço!

    • Jair Rebello

      Carlos, a opção é esta mesmo que você escolheu, quanto ao problema, não sei porque está ocorrendo. Você pode tentar baixar manualmente o importador no site do wordpress e instalar no seu localhost.

      Abraços.

      • Carlos

        Beleza, baixei este http://wordpress.org/plugins/wordpress-importer/ e agora foi.
        O resultado, após ativar o tema, é que não está exatamente o mesmo. Alguns ‘títulos’ em negrito estão repetidos, mas nada muito diferente não.

        Obrigado aê pela ajuda.

        Forte abraço!

  • Marcelo Cardoso

    Olá Jair tudo bem, o que eu fiz foi o seguinte entrei no localhost, ferramentas, phpmyadmin e cliquei na opção importar e coloquei o conteúdo de texto zipado mas dai em diante não consegui fazer mais nada, não sei se fiz da maneira correta.

  • Marcelo Cardoso

    Olá Jair estou lhe enviando essa resposta porque já consegui, na verdade eu estava olhando para o lado errado, ai me lembrei que eu tenho que entrar no WordPress era oque eu não estava fazendo, Obrigado pela sua atenção não precisa responder o que lhe enviei antes Obrigado as aulas tem sido ótimas.

    • Jair Rebello

      Marcelo, fico feliz que tenha conseguido resolver tudo. Nestas horas de dificuldades é que mais aprendemos. Parabéns.

      Abraços.

  • Denis Roger Soeltl

    Muito bom, após alguns tropeços para entender por onde começar atingi a meta estabelecida para esta etapa do curso. Talvez para iniciantes como eu, e totalmente analfabetos em assuntos relacionados com a criação dos arquivos acima, acredito ser necessário informar que os mesmos são criados através do editor (sublime Text 2), e que o editor do WordPress está acessível através da URL específica ???

    • Jair Rebello

      Denis, estou tentando fazer com que o curso fique mais simples possível para que todos entendam, mastigando o máximo, muito mais que a maioria dos poucos cursos que existem sobre o assunto. De qualquer forma peço desculpas.

      Abraços.

  • Carlos

    Grande Jair! Beleza?

    Alguma previsão para o lançamento da próxima aula (post)?
    Ansiedade nível HARD… rs.

    Forte abraço!

    • Jair Rebello

      Carlos, amanhã teremos novo artigo e ainda essa semana mais um para essa galera que está ansiosa.

      Abraços.

  • lilia

    oi Jair nã entendi um passo. pode explicar? na parte do style-css, voce diz “Copie todo o conteúdo abaixo para o arquivo e salve na pasta do template.” Colo o texto onde?????