Como criar templates wordpress Parte 04 | Escola Sites

1 de 5

http://www.escolasites.com/criar-templates-wordpress-04/

(http://www.escolasites.com)

Receba
GRTIS
Por Jair Rebello (http://www.escolasites.com/author/admin/) | Publicado em 21 de
outubro de 2013 | 3 Comentrios

RECEBER E-BOOKS GRTIS

(http://www.escolasites.com/curso-

Google Plus
criacao-templates-wordpress/)
Esse artigo parte do Curso de criao de templates wordpress
(http://www.escolasites.com/curso-criacao-templates-wordpress/), caso ainda no
esteja inscrito, por favor confirme sua assinatura agora mesmo, grtis
(http://www.escolasites.com/curso-criacao-templates-wordpress/). Hoje, depois de 3
aulas de introduo e mostrando alguns fundamentos para que ningum ficasse para
trs iniciaremos o desenvolvimento de nosso template de fato. importante todos
ficarem atentos aos detalhes para que nada passe desapercebido.

Curtir
(http://www.facebook.com
/EscolaOficial) Para comear crie uma pasta, esta ser a pasta de nosso template em: C:\wamp

\www\wordpress\wp-content\themes, chame ela de curso-templates para que

sempre possamos nos referi-la como a pasta de nosso template. Neste artigo vamos
iniciar com a criao de trs arquivos que so os mais importantes do template, sem
ele nada funcionar, so 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 fcil, criei uma imagem padro s baixar e colocar na pasta cursotemplates, essa vai ser a miniatura de seu template, e voc vai visualiz-la na pgina
de troca de templates.
Imagem para o sreenshot
/2013/10/screenshot.png)

Style.css:

(http://www.escolasites.com/wp-content/uploads

Arquivo

principal

de
22/10/2013 09:43

Como criar templates wordpress Parte 04 | Escola Sites

2 de 5

Escola PHP
Curtir

estilos

http://www.escolasites.com/criar-templates-wordpress-04/

Agora vamos iniciar com a criao de um arquivo chamado style.css, ele que
toda a aparncia de nosso template e tambm utilizado pelo WordPress
para conter algumas informaes importantes como o nome do template, quem criou e
outras informaes. Copie todo o contedo abaixo para o arquivo e salve na pasta do
template. Neste artigo ainda no vamos fazer nenhuma customizao de layout, a
inteno apenas mostrar os arquivos e colocar o template em funcionamento.

3.556 pessoas curtiram Escola PHP.carregar

1
2
3
4
5
6
7
8
9

Plug-in social do Facebook

/*
Theme Name: Curso Templates
Theme URI: http://www.escolasites.com/curso-criacao-templates-wordpre
Description: Um Tema WordPress criado no curso de templates wordpress
Author: Escola Sites
Author URI: http://www.escolasites.com/
Version: 1.0
Tags: clean, escolasites, curso, etc
*/

Instalar contedos de teste

No primeiro artigo da srie, pedi para baixassem um contedo de testes que seria
usado no decorrer do curso. Agora vamos import-lo. Baixe o arquivo e descompacte
o mesmo.

Parceiros

V at a opo Ferramentas no menu do WordPress e selecione a opo

Importar. Clique na opo WordPress. Um aviso aparece para perguntar se voc
gostaria de baixar a ferramenta de importao WordPress. Clique em Instalar agora.

Blogando com
Facilidade
Depois da instalao, voc precisar selecionar o arquivo em seu computador que foi
(http://www.blogandocomfacilidade.com/)
descompactado. Clique no arquivo de upload e boto Importar.
Dinheiro Mais
Selecione o usurio padro de sua instalao que deve ser o usurio admin, marque
(http://dinheiromais.com.br/)
a opo Download and import file attachments, para que as imagens e anexos
Design Effects
tambm sejam baixados.
(http://www.designereffects.com.br/)
Como Blogar
(http://www.comoblogar.com)
Mundo Blogger
(http://www.mundoblogger.com.br/)
Blog na Carteira
Com os dados que precisamos importados,vamos a criao do template index.php.
(http://www.blognacarteira.com)
Ajuda Blogueiros
1
<div id="primary">
(http://www.ajudablogueiros.com.br)
2
<section id="content" role="main">
3
<?php if ( have_posts() ) : ?>
4
<?php while ( have_posts() ) : the_post(); ?>
5
<h1> <?php the_title(); ?></h1>
6
<?php the_content(); ?>
7
<?php endwhile; ?>
8
9
<?php else : ?>
10
11
<?php endif; ?>
12
</section><!-- #content -->
13
</div><!-- #primary -->

Index.php: Template da pgina

principal

Vamos analisar o que temos no index.php. Definitivamente ainda iremos alterar e

muito este arquivo mas ele servir pra apresentar algumas funes importantes do
WordPress e que voc precisa saber para desenvolver templates wordpress.
Esse o template de nossa pgina principal, aquela que mostrar basicamente os
ltimos artigos de nosso blog.
22/10/2013 09:43

Como criar templates wordpress Parte 04 | Escola Sites

3 de 5

http://www.escolasites.com/criar-templates-wordpress-04/

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
distino se existe ou no 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, no existe artigo.
Depois de alterar os arquivos, v at o Menu administrativo do wordpress em
Aparncia > Temas. Localize a miniatura que criamos e clique em ativar o template.
Agora acesse o endereo do blog que deve ser http://localhost/wordpress e veja o
que aconteceu.

Resultado at o momento

Os arquivos que criamos at agora foram estes:

Comente, o curso seu

No deixe de deixar seu comentrio, seja com opinies sobre os artigos j
publicados, seja com dvidas e sugestes para a continuidade da srie, esperamos
que esta srie esteja da forma que voc espera.
No deixe de compartilhar estes artigos da srie e convidar seus amigos para o
curso. Artigos indicando o curso em seus blogs tambm so bem vindos.
At j.
Compartilhe
isso:

Curtir

Tweet

(http://www.escolasites.com/criar-templates-wordpress-04/?share=email&nb=1)
1

22/10/2013 09:43

Como criar templates wordpress Parte 04 | Escola Sites

4 de 5

http://www.escolasites.com/criar-templates-wordpress-04/

Jair Rebello
(http://www.escolasites.com
/author/admin/)
(https://plus.google.com
(http://jair.rebello)
(http://jairrebello)
/112855997073704390467?rel=author)
Editor-chefe do Escola Sites. Analista de Sistemas, empreendedor
e blogueiro que dedica parte de seu tempo para a partilha de
material de grande qualidade relacionados a Wordpress, SEO, Tableless, JQuery,
PHP e outras tecnologias Web.

Publicado em wordpress (http://www.escolasites.com/wordpress/)

3 Comentrios para "Como criar templates wordpress

Parte 04"
meirelles745 (http://gravatar.com/meirelles745) em 21 de outubro de 2013 as
(http://www.escolasites.com/criar-templates-wordpress-04/comment-page-1/#comment41190) 16:17

LEGAL!
Responder
Edvaldo (http://www.edsolique.com) em 21 de outubro de 2013 as
(http://www.escolasites.com/criar-templates-wordpress-04/comment-page-1/#comment41191) 20:30

No consegui abrir http://localhost/wordpress (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.
Responder
Joo em 21 de outubro de 2013 as (http://www.escolasites.com/criar-templateswordpress-04/comment-page-1/#comment-41192) 22:58

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

Responder

Deixe uma resposta

Nossos
Servios

Artigos
populares

Criao de templates
UOL Host Nunca
wordpress
contrate!
(http://www.escolasites.com (http://escolasites.com

E-books grtis Contato

Ebook: 10 solues para
Email:
criao de sites grtis
contato@escolasites.com
(http://www.escolasites.com
/e-books/10-solucoes22/10/2013 09:43

Como criar templates wordpress Parte 04 | Escola Sites

5 de 5

/services/criacaode-templates-wordpress/)

/uol-host-nunca-contrate/)

4 Geradores de paletas
HTML & CSS Encoding
de cores
(http://www.escolasites.com (http://escolasites.com
/services/html/4-geradores-de-paletacss-encoding/)
de-cor/)
Criao de Logotipos
(http://www.escolasites.com
/services/criacaologotipos/)

As 5 melhores
ferramentas para testar a
velocidade do site
(http://escolasites.com
/as-5-melhoresCriao de sites e
ferramentas-testarwebdesign
(http://www.escolasites.com velocidade-site/)
/services/criacao-sitesHostiger Hospedagem
webdesign/)
gratuita de qualidade
(http://escolasites.com
Hospedagem de Sites
(http://www.escolasites.com /hostinger-hospedagemgratuita-de-qualidade/)
/services/hospedagem-

http://www.escolasites.com/criar-templates-wordpress-04/

para-criacao-de-sitesgratis/)
Ebook: A importncia dos
feeds e feedburner para
um blog
(http://www.escolasites.com
/e-books/ebooka-importancia-dos-feedse-feedburner-para-umblog/)

(https://www.facebook.com
/escolaOficial)
(https://twitter.com
/escolasites)
(https://plus.google.com
/u/0/b
/108055865950288262549
/108055865950288262549
/posts)
(mailto:contato@escolasites.com

sites/)

Como comear a ganhar

dinheiro com o Hotmart
Criao de Sistemas sob
(http://escolasites.com
medida
(http://www.escolasites.com /como-comecar-a-ganhardinheiro-com-hotmart/)
/services/criacaosistemas-medida/)
(mailto:contato@escolasites.com)
2013 (mailto:contato@escolasites.com)Escola Sites (http://www.escolasites.com) - Todos os direitos reservados

22/10/2013 09:43