WordPress: De blogs pessoais a grandes portais - Parte 2

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;


• 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: ?>.


• 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:


• 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: ?>.


• 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(); ?>


• 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.


• 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.


• 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

Dúvidas?

MUITO OBRIGADO!

www.grupoweblovers.org

[email protected]

twitter.com/WebLoversRN

fb.me/grupoweblovers

Education

WordPress: De blogs pessoais a grandes portais - Parte 2