WordPress tema criação guia

WordPress:
De blogs pessoais a grandes portais
Parte 2

Giancarlo Lima da Silva
Tecnologia em Análise e Desenvolvimento de Sistemas –
IFRN
EXPOTEC 2012

Agenda do minicurso
• O que é necessário para criar um tema WordPress;
• Anatomia de um tema WordPress;
• Parte 2.01: Divisão do HTML;
• Parte 2.02: CSS e Cabeçalho;
• Parte 2.03: Página inicial e página de arquivo;
• Parte 2.04: O post, os comentários e a página 404;
• Parte 2.05: A barra lateral, o rodapé e as funções;
• Parte 2.06: A busca;
• Dicas e truques;
• Para saber mais.

O que é necessário para criar um
tema WordPress
• Servidor Web instalado localmente e uma
cópia do WordPress instalada no
servidor;
– XAMPP: Mac (http://migre.me/caIlx) e
Windows (http://migre.me/caIjk)
– Linux: LAMP (http://migre.me/caImV)
• Editor de texto;
• Navegador com ferramentas para
desenvolvimento web.

Anatomia de um tema WordPress
• HTML e CSS;
– Cria-se um layout normalmente, que deve
ser composto por cabeçalho, coluna de
conteúdo, coluna lateral e rodapé
• Arquivos que formam um tema;
• PHP e os Template Tags.


HTML e CSS
Cabeçalho:
• Nome e slogan do blog ou uma
logomarca;
• Formulário de busca;
• Menus de páginas/categorias;
Conteúdo:
• Postagens;
• Galeria de imagens...
Lateral:
• Widgets...
Rodapé:
• Nome do site e links úteis;
• Widgets...


Arquivos que formam o tema
• header.php: Cabeçalho, onde ficarão a logomarca/título e slogan, busca,
menus, etc.;
• sidebar.php: Arquivo que fará a chamada dos widgets na lateral do blog;
• search.php e searchform.php: Página e formulário de busca,
respectivamente;
• footer.php: Rodapé;
• index.php: Mostra as postagens na página inicial;
• single.php: Mostra uma postagem em sua própria página individualmente;
• page.php: Página estática;
• archive.php: Mostra as postagens de um determinado arquivo (categorias,
tags, autores, etc.);
• comments.php: Formulário de comentários do blog;
• functions.php: Armazena as funções PHP do blog;
• 404.php: Página de erro 404;
• style.css: Arquivo de estilo do tema;
• screenshot.png: Foto do tema.


PHP e os Template Tags
• Template Tags são comandos especiais
que exibem informações do banco de
dados dinamicamente ou personalizam o
blog WordPress de formas variadas;

• As Template Tags devem ser inseridas no
código HTML, em determinados locais do
tema.


PHP e os Template Tags
• Exemplos:
– <?php bloginfo(‘name’) ?> Exibe o nome do
blog;
– <?php the_time('m-d-y') ?> Exibe a data de
publicação de uma postagem;
– <?php include(TEMPLATEPATH .
‘/caminho/do/arquivo’); ?> Exibe qualquer
arquivo definido entre as aspas simples.

Parte 01: Divisão do HTML
• Divide-se o arquivo HTML em outros
arquivos menores, respeitando a
estrutura do layout;
• Troca-se a extensão dos arquivos
resultantes de .html para .php e insere-se
as template tags no código;
• Arquivos resultantes: index.php,
single.php, page.php, archive.php,
search.php e footer.php.

Parte 01: Divisão do HTML
• No código de cada
arquivo deve-se inserir
as seguintes Template
Tags:
– <?php get_header(); ?>
– <?php get_sidebar(); ?>
– <?php get_footer(); ?>
• Estas Tags servem para
chamar o cabeçalho
(header.php), a barra
lateral (sidebar.php) e o
rodapé (footer.php) do
blog.

Parte 02: O CSS e o Cabeçalho
• O arquivo CSS deve obrigatoriamente se chamar
style.css e ser salvo na raiz da pasta do tema;
• Nas primeiras linhas desse arquivo devem ser escritos
os dados de identificação do blog:

• Para criar o header.php copia-se o código
HTML somente até o fechamento da tag
</header>;

• Edita-se o arquivo header.php
substituindo trechos do HTML pelos
seguintes códigos:

• Entre as tags <head> e </head>:
– <?php bloginfo( 'stylesheet_url' ); ?>
– <?php bloginfo('template_directory'); ?>/css/comments.css" />
– <?php bloginfo( 'pingback_url' ); ?>
– <?php if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' ); wp_head(); ?>

• Entre as tags <header> e </header>:
– <?php bloginfo('name'); ?>
– <?php bloginfo('description'); ?>
– <?php get_search_form(); ?>
– <?php wp_nav_menu(array('theme_location' => 'cat-menu')); ?>

Parte 03: Página inicial e página
de arquivo
• No index.php deve ser inserido um laço
que tornará possível a exibição dos posts
do blog;

de arquivo
• Também é necessário adicionar códigos para
criar a navegação do blog (não confundir com
os menus), para permitir que o leitor procure
posts anteriores aos exibidos na home:

• Insira esse código entre o <?php endwhile ?> e
o <?php else: ?>.

de arquivo
• O archive.php é exatamente igual ao index.php, mas deve-se
adicionar algumas linhas de código responsáveis por exibir
os posts arquivados do blog:

• Em nosso exemplo, insira o código acima logo após a tag
HTML <div id="post">.

Parte 04: O post, os comentários
e a página 404
• O arquivo single.php também é igual ao
index.php, mas deve-se excluir a navegação,
modificar algumas linhas no código do loop e
acrescentar a Template Tag responsável por
chamar o formulário de comentários em
comment.php.

Código a ser excluído:

e a página 404
• Substituir as linhas <?php endwhile ?> e
<?php else: ?> pela linha <?php endwhile;
else: ?>

• <?php comments_template(); ?> - Chama o
arquivo comments.php. Inserir na linha
acima da <?php endwhile; else: ?>.

e a página 404
• Para criar o arquivo page.php, basta novamente
copiarmos o código da single.php e apagar os
seguintes trechos de código:
– <div id="linkcomentarios"><?php
comments_popup_link('Sem Comentários', '1
Comentário', '% Comentários'); ?></div>
– <?php comments_template(); ?>

e a página 404
• O arquivo 404.php nada mais é do que um arquivo
simples que leva apenas a mensagem de erro de página
não encontrada, que pode ser escrita a seu gosto;
• Basta apagar todo o código entre as tags <div
id=“post”> e escrever sua mensagem no lugar.

e a página 404
• O arquivo comments.php é o responsável
por renderizar os comentários existentes e
o formulário de comentários do blog e é
invocado pelo WordPress através do
comando <?php comments_template(); ?>, já
inserido em single.php.
• Basicamente é um formulário que recebe o
nome, o endereço de e-mail, uma URL e o
comentário em si, com um botão para
enviar.

e a página 404
• Entretanto, é necessário inserir uma boa
quantidade de código PHP, que é necessário
para mostrar o número de comentários, a
navegação, a exibição do avatar do leitor, entre
outros;
• Confira o código de exemplo fornecido neste
curso e use-o para criar o arquivo comments.php;
• Também é necessário criar a estilização CSS
correspondente ao formulário de comentários.
Há outro arquivo CSS para isso já preparado em
nosso exemplo.

Parte 05: A barra lateral, o
rodapé e as funções
• Novamente visitamos o nosso arquivo HTML e
copiamos para dentro de um arquivo
sidebar.php o código da coluna lateral do blog;

• Dentro da div <div id=“widget”> apaga-se todo
o código, substituindo-o pelo seguinte laço if:
– <?php if ( !function_exists('dynamic_sidebar') ||
!dynamic_sidebar('Barra Lateral') ) : ?><?php endif; ?>

• O rodapé é super simples de fazer. Basta copiar
a partir da tag <footer> e acrescentar a
Template Tag <?php wp_footer(); ?> onde quiser
(recomenda-se que seja dentro da mesma div
do texto).

• O arquivo functions.php é o responsável por
armazenar todas as funções utilizadas pelo
tema e que são chamadas por algumas
Template Tags;

• Em nosso exemplo, serão definidas duas
funções: uma para a barra lateral e outra para o
sistema de menus personalizados.

Parte 06: A busca
• O sistema de busca de um tema
WordPress é formado por dois
arquivos:
– searchform.php: Formulário de busca;
– search.php: Página que exibirá os resultados
de uma busca feita pelo leitor.

Parte 06: A busca
• O searchform.php é apenas um formulário simples com
um campo de texto e um botão. Acrescenta-se as
Template Tags <?php bloginfo('home'); ?> e <?php
the_search_query(); ?> ao código.

Parte 06: A busca
• Para criar o search.php, copia-se o código de
index.php, apaga-se o conteúdo do início do
loop e insere o código que exibirá um título e
um trecho de cada resultado;
• Também inclui-se mais acima um código que
exibirá na página o tempo em que a pesquisa
foi concluída (isso não é padrão do WordPress.
Considere um pequeno bônus. ^^).
• Confira o arquivo de exemplo e use-o para criar
o arquivo search.php.

Tema concluído. Vamos testar?
• Após todos esses procedimentos, você deverá
ter todos os 12 arquivos PHP e um ou mais
arquivos CSS;
• Reuna todos esses arquivos em uma pasta com
o nome do seu tema e salve esta pasta dentro
do diretório /wp-content/themes, na sua
instalação do WordPress;
• Não se esqueça de tirar uma foto do seu tema
e salvá-lo na raiz da pasta do mesmo, com o
nome screenshot.png.

Dicas e truques!
• Além dos arquivos PHP padrão, é possível incluir mais arquivos
PHP no layout do seu tema, com o auxílio da Template Tag <?php
bloginfo('template_directory'); ?>, usada dentro da tag HTML
<link>. Ideal para acrescentar banners de monetização (AdSense e
similares);
• Alguns plugins para WordPress podem complementar a aparência
do seu tema, adicionar funcionalidades ou melhorar a
navegabilidade. Alguns exemplos:
– WP-Pagenavi: http://migre.me/cdP8d (Substitui a navegação padrão por uma
navegação melhorada);
– Post Highlights: http://migre.me/cdPb3 (Adiciona uma galeria de imagens para
artigos de destaque);
– TF Social Share: http://migre.me/cdPg4 (Adiciona botões de compartilhamento
em redes sociais).

Para saber mais
• WordPress Codex (codex.wordpress.org –
em inglês)
– Design e Layout de blog:
http://migre.me/cdO5A
– Desenvolvendo temas:
http://migre.me/cdNQo
• Referência deste minicurso:
– Como criar um WordPress Theme (site
WPTotal): http://migre.me/cdOa4

MUITO OBRIGADO!
www.grupoweblovers.org
grupoweblovers@googlegroups.com
twitter.com/WebLoversRN
fb.me/grupoweblovers

WordPress tema criação guia

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie WordPress tema criação guia

Ähnlich wie WordPress tema criação guia (20)

Mehr von Giancarlo Silva

Mehr von Giancarlo Silva (7)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

WordPress tema criação guia