Vous êtes sur la page 1sur 38

Este material parte integrante do treinamento

Desenvolvimento de Temas para WordPress


Instrutor: Leandro Vieira http://www.imasterspro.com.br

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

INDICE
DESENVOLVIMENTO DE TEMAS WORDPRESS .................................................... 4 O QUE UM TEMA WORDPRESS? ......................................................................... 4 DEVO REALMENTE CRIAR UM TEMA WORDPRESS? .......................................... 4 O QUE VOC PRECISA PARA CRIAR UM TEMA WORDPRESS? ......................... 4 AMBIENTE DE DESENVOLVIMENTO EM PHP ........................................................ 5 PHP PARA DESIGNERS ............................................................................................ 6 TAGS PHP ................................................................................................................. 6 COMENTRIOS EM PHP .............................................................................................. 7 Tipos de comentrios em PHP ............................................................................. 8 VARIVEIS .................................................................................................................. 9 ESTRUTURAS DE CONTROLE ...................................................................................... 10 IF (SE) ................................................................................................................ 10 ELSE (Caso contrrio)........................................................................................ 11 While (enquanto) ................................................................................................ 11 FUNCTION (FUNES)............................................................................................... 12 ESTRUTURA DE UM TEMA WORDPRESS ............................................................ 13 DETALHES DO TEMA .................................................................................................. 13 ARQUIVOS QUE COMPE UM TEMA WORDPRESS ......................................................... 14 Arquivos bsicos de um tema WordPress.......................................................... 14 Arquivos avanados de um tema WordPress..................................................... 14 COMO INSTALAR, ATIVAR E EXCLUIR UM TEMA WORDPRESS ...................... 15 LAYOUT PSD/PNG > HTML E CSS > TEMA WORDPRESS; ................................. 15

HIERARQUIA DE ARQUIVOS .................................................................................. 16 A LGICA DA HIERARQUIA DE ARQUIVOS DE TEMAS WORDPRESS ................................. 16 Exibio da pgina inicial ................................................................................... 17 Exibio de post ................................................................................................. 17 Exibio de pgina ............................................................................................. 18 Exibio de categoria ......................................................................................... 18 Exibio de tag ................................................................................................... 18 Exibio de autor ................................................................................................ 18 Exibio de data ................................................................................................. 18 Exibio do resultado de busca.......................................................................... 19 Exibio da pgina de erro 404 .......................................................................... 19 Exibio dos arquivos em anexos ...................................................................... 19 TAGS DE TEMPLATE .............................................................................................. 19 ANATOMIA DE UMA TAG DE TEMPLATE ........................................................................ 20 COMO PASSAR PARMETROS AS FUNES DO WORDPRESS ........................................ 20 2

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

TIPOS DE PARMETROS ............................................................................................. 21 Strings................................................................................................................. 21 Inteiros ................................................................................................................ 22 Booleanos........................................................................................................... 22 TAGS DE TEMPLATE PARA INCLUSO DE ARQUIVOS ..................................... 22 TAGS DE TEMPLATE CONDICIONAIS ................................................................... 24 O LOOP DO WORDPRESS ...................................................................................... 25 COMO FUNCIONA O LOOP DO WORDPRESS ................................................................. 25 COMO USAR O LOOP DO WORDPRESS ........................................................................ 25 COMPREENDO O SISTEMA DE COMENTRIOS DO WORDPRESS ................... 26 MENU DE NAVEGAO .......................................................................................... 29 PGINA DE ERRO 404 CUSTOMIZADA ................................................................. 30 A FORMA CORRETA DE INTEGRAR UM PLUGIN AO SEU TEMA ...................... 30 WP_HEAD E WP_FOOTER...................................................................................... 31 INSERINDO JAVASCRIPT EM TEMAS WORDPRESS .......................................... 32 INSERINDO CSS EM TEMAS WORDPRESS .......................................................... 34 PGINA DE TEMPLATE CUSTOMIZADA ............................................................... 35 O ARQUIVO FUNCTIONS.PHP ................................................................................ 36 COMO DAR SUPORTE A WIDGETS AO SEU TEMA ............................................. 36

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

Desenvolvimento de temas WordPress O que um tema WordPress? Imagine um tema do WordPress como uma "pele" do seu blog/site. Tendo a sua disposio diversas cores e formatos e controles precisos sobre a apresentao grfica e de contedo. Um tema WordPress uma coleo de arquivos que juntos produzem a interface grfica com a identidade visual desejada. Esses arquivos so chamados de arquivos de templates. Os quais podem ser imagens, folhas de estilos (CSS), JavaScript, pginas personalizadas e arquivos PHP. O WordPress muito flexvel ao ponto de lhe permitir o uso de arquivos personalizados mas rgido em relao a alguns arquivos padro. Os quais precisam respeitar certa nomenclatura. Veremos isso adiante. Devo realmente criar um tema WordPress? Sim e no. So duas respostas condizentes a essa pergunta e lhe explico o motivo. A quantidade de temas disponveis no diretrio do WordPress.org no to expressiva quanto os plugins. So mais de1.000 temas gratuitos que totalizam aproximadamente 12 milhes de downloads. O que significa dizer que voc ter um tema parecido com diversos outros e seus usurios no assimilaro uma identidade prpria que o lembre. Se for um blog corporativo ou o site de uma empresa, o problema ainda maior. relevante desenvolver um tema especfico e garantir a preservao da identidade visual do projeto em que est envolvido e atender seus prprios anseios. E te garanto, muito simples e fcil. O que voc precisa para criar um tema WordPress? Imaginao e conhecimentos em design para criar um bom layout; dominar HTML e CSS que compe as camadas de marcao e apresentao, respectivamente. Conhecimentos bsicos de PHP e das tags de template do WordPress. 4

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

Os temas WordPress alm de HTML e CSS utilizam o PHP para chamar as tags de templates do WordPress, logo se faz necessrio um ambiente de desenvolvimento para essa linguagem. O XAMPP poder te auxiliar na instalao do referido ambiente. Ambiente de desenvolvimento em PHP Como dito anteriormente necessrio ter um ambiente PHP para desenvolver e executar os temas WordPress. Atravs do XAMPP a instalao desse ambiente simples e descomplicada. Ah, o XAMPP gratuito. Faa o download do XAMPP para Windows em zip.li/down-xampp-win

Uma vez instalado ele estar disponvel atravs do menu Iniciar, Programas, XAMPP. No painel possvel inicializar ou parar os servios, assim como instalar ou desinstala-los.

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

PHP para Designers Tags PHP O PHP, assim como outras linguagens de programao, possui suas tags, sintaxe e funes. Para que os cdigos PHP presentes numa pgina sejam executados, devemos informar que eles existem, isso feito englobando-os s tags PHP. Quando o servidor localiza as tags PHP, ele considera que ali h algo a ser executado; portanto, uma ateno especial ser dada as instrues reunidas pelas tags PHP. Abaixo, demonstro os quatro tipos de tags PHP; em seguida, comento e explico cada uma delas. <?php echo 'Esta tag a mais recomendada; est sempre disponvel; comumente utilizada'; ?> <script language="php"> echo 'Esta outra tag PHP; tambm est sempre disponvel.'; </script> <? echo 'Esta tag: uma simplificao da primeira'; ?> <% echo 'Esse tipo de tag baseada no estilo ASP'; %> Quando digo: "est sempre disponvel", me refiro configurao do servidor quanto aceitao das tags PHP. O que significa dizer, que o primeiro e segundo exemplo sempre estar disponvel. Nota: por padro, a tag curta e a tag no estilo ASP, terceiro e quarto exemplo respectivamente, esto desativadas. O primeiro exemplo de tag PHP, <?php, a mais utilizada, a mais recomendada pelo manual do PHP e por esse que vos escreve, alm de ser comumente utilizada. O segundo exemplo, particularmente, nunca utilizei; e sinceramente, bem provvel que voc no se depare com essa tag PHP. 6

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

O terceiro exemplo: <? a tag curta. uma simplificao da tag PHP que voc deve utilizar: <?php. Costumo dizer que a tag PHP dos preguiosos. Alm disso, necessrio que o servidor esteja configurado para aceit-la. Tal configurao feita no arquivo php.ini atravs da configurao short_open_tag. O quarto exemplo, <%, uma tag baseada na linguagem ASP. Tambm aconselho que voc a evite, alm do mais, ela pouca utilizada e depende da configurao do servidor para aceit-la - utilizando a configurao asp_tags no arquivo php.ini. Para que voc tenha certeza que seu cdigo ser executado, interpretado pelo servidor web, considere a utilizao do primeiro exemplo de tag PHP: <?php. Com ela, voc no ter problemas; ter certeza que funcionar em qualquer servidor, alm do mais poder compartilhar seus cdigos com os amigos e ter certeza que eles sero executados com xito. Se voc observou bem, notou a utilizao de duas tags PHP para cada exemplo. Explico melhor. Existe a tag de abertura e a tag de fechamento. Considerando o primeiro exemplo de tag PHP, temos como tag de abertura a seguinte: <?php. Como tag de fechamento, temos: ?>. Simples. Portanto, como citei anteriormente, as instrues PHP englobadas pelas tags de abertura e fechamento sero analisadas e executadas. Se ainda no ficou claro, eu esclareo com um exemplo do seu cotidiano. Em HTML, quando voc vai escrever o ttulo de uma notcia, por exemplo, voc utiliza a tag H1, correto? Pois bem, para definir o ttulo com a tag H1, fazemos assim: <h1>Desenvolvimento de Plugins e Temas para WordPress</h1> Ou seja, englobamos o ttulo da notcia com a tag de abertura e fechamento do H1. Com os cdigos PHP a mesma coisa. Comentrios em PHP Comentrios em PHP, assim como em outras linguagens, so utilizados para anotaes, observaes e esclarecimentos sobre uma parte do cdigo, instruo ou at o prprio arquivo. 7

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

Um programador poder lhe passar instrues e at mesmo exemplificar a utilizao de um cdigo atravs dos comentrios. Da mesma forma, voc, designer, poder registrar um comentrio endereado ao programador. Um trabalho em equipe exige comunicao. Fazer uso dos comentrios em PHP comunicar-se com os integrantes da equipe. Portanto, vamos conhec-los; aprender utiliz-los; e ter a disposio um novo meio de se comunicar. Tipos de comentrios em PHP Em PHP, existem trs tipos de comentrios. Dois deles so destinados a comentrios de uma nica linha. Um utilizado para comentrios de vrias linhas. Vejamos: <?php // A funo echo a baixo, ir exibir o texto entre aspas simples. echo 'Oi Designer, voc est conhecendo o PHP.'; # Abaixo, vamos exibir a data corrente no seguinte formato: dd/mm/AAAA. echo date('d/m/Y'); /* Designer, sua relao com programadores melhorar significativamente. Voc est conhecendo a linguagem PHP e poder se interagir melhor com seus companheiros de trabalho. Voc tem a misso, agora, de dizer ao programador que cor de fonte amarelo sobre um fundo verde-limo horrvel para leitura. */ ?> No primeiro e segundo exemplo, demonstrei os tipos de comentrios em PHP de uma nica linha. Voc percebeu como simples utiliz-los. Basta digitar "//" ou "#", sem aspas, e em seguida o comentrio desejado. J o comentrio de vrias linhas, inicia-se com "/*", sem aspas, e finaliza com "*/", sem aspas.

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

Variveis Uma varivel algo sujeito a variaes, podendo assim, assumir diferente valores. Vamos utilizar uma simples metfora para voc compreender melhor as variveis. Imagine voc em um supermercado, com uma sacola para colocar as suas compras; o que voc ter dentro dela varivel, uma vez que voc pode pegar um produto na prateleira e depois desistir de lev-lo, trocar por outro produto ou adicionar algum outro. Qual a moral da histria? O contedo da sua sacola de compras varivel, ou seja, no sabemos ao certo o que teremos dentro dela, o que definir ser o tempo em que estivermos realizando a compra. Em programao as variveis tem o mesmo comportamento. Isto , voc tem o nome da varivel definido (imagine a sacola), mas o contedo (imagine os produtos) pode iniciar-se com x, depois alterar-se para y ou at mesmo ficar em branco (vazio). O que definir o valor da varivel em si ser a execuo do script por completo. Resumindo: variveis so como um depsito que voc utiliza para guardar informaes, e o seu valor (contedo) pode alterar durante a execuo do script. Em PHP as variveis so representadas por um cifro ($) seguido pelo seu nome. Os nomes das variveis fazem distino entre maisculas e minsculas; portanto, $algumnome diferente de $algumNome. Alm dessa pequena regra, devemos nos atentar que um nome de varivel ser considerado como vlido se iniciar como uma letra ou sublinhado, seguido de qualquer letra, algarismos ou sublinhados. Observe o exemplo da criao de uma varivel. <?php $texto echo ?>

"Sou

Designer

sim!

Mas

estou

conhecendo

PHP."; $texto;

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

Estruturas de controle Controlar as aes de um cdigo PHP constante. Certas partes de cdigo so executadas de acordo com opes dos usurios ou aes a serem desenvolvidas. IF (SE) A estrutura de controle IF (SE) comumente utilizada atravs da qual executamos o fragmento de um cdigo se determinada condio for verdadeira. Veja um exemplo: if ( expresso ) // executa o cdigo if ( 1 < 9 ) // cdigo no ser executado Se o cdigo a ser executado conter mais de uma linha ele dever ser englobado por chaves como a seguir: if ( $fome > $comida ) { /* cdigos a serem executados */ } Particularmente no gosto de usar as chaves dou preferncia aos equivalentes : (dois pontos) e endif. Assim: if ( $fome > $comida ) : /* cdigos a serem executados */ endif; O exemplo acima comumente utilizado pelo WordPress.

10

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

ELSE (Caso contrrio) Como observamos podemos executar certos cdigos baseado numa condio verdadeira. E podemos, tambm, executar outra parte de cdigo quando ela (condio) for falsa. Um exemplo: if ( $fome > $comida ) // coma else // no coma Ou if ( $fome > $comida ) : /* coma muuuito */ else : /* espera um pouco mais endif; While (enquanto) Loops do tipo while utilizado para um determinado cdigo ser executado enquanto uma condio for verdadeira. Exemplo: while (condio) // cdigo a ser executado. Se o cdigo a ser executado conter vrias linhas, devemos engloba-lo com aspas, assim como fazemos com a condio IF. Podemos tambm, no lugar das aspas utilizar os equivalentes : (dois pontos) e endwhile. Observe: while (condio) : /* cdigos a serem executados */ endwhile;

11

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

Function (Funes) O PHP possui suas funes utilizadas para inmeros objetivos: trabalhar com strings, XML, JSON, banco de dados, entre vrias outras. O WordPress tambm possui suas funes, e ns, usurios podemos criar as nossas. Um nome de funo vlido comea com uma letra ou um sublinhado seguido por qualquer nmero de letras, nmeros ou sublinhado. Observe: function nomeDaFuncao() { // cdigos da funo } A expresso function deve ser utilizada; aps o nome da funo necessrio os parnteses e o contedo da funo englobado por chaves. Funes tambm podem receber contedo atravs de seus parmetros como demonstrado a seguir: function nomeDaFuncao( $parametroUm, $parametroDois ) { // cdigos da funo } Chamamos uma funo atravs do seu nome seguido de parnteses, veja: // Exemplo de como chamar uma funo. Atente-se ao ; (ponto e vrgula) nomeDaFuncao(); Ao chamar uma funo que tem parmetros, fazemos da seguinte forma: // Exemplo de como chamar uma funo com parmetros. Atente-se ao ; (ponto e vrgula) nomeDaFuncao( 'valor para o parmetro 1', 'valor para o parmetro 2' );

12

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

Estrutura de um tema WordPress Todos os temas WordPress so armazenados sob o diretrio /wp-content/themes/. Veja:

Cada tema possui seu diretrio onde reside seus arquivos. Ele composto no mnimo de dois arquivos: style.css e index.php. O primeiro alm de ser a folha de estilo responsvel pela apresentao do tema define todos seus detalhes atravs de tags reconhecidas pelo mecanismo do WordPress. J o segundo exibe o contedo. Detalhes do tema Como dito, todos os detalhes de um tema esto descritos no arquivo style.css atravs de tags especficas, vejamos: /* Theme Name: Desenvolvimento de Plugins e Temas para WordPress Theme URI: http://pro.imasters.uol.com.br/treinamentos/45/... Description: O treinamento vai mostrar a utilidade e o desenvolvimento de plugins e temas... Version: 1.0 Author: iMasters PRO Author URI: http://pro.imasters.uol.com.br Tags: WordPress, temas, imasters, treinamentos */

13

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

O mecanismo de temas do WordPress percorre cada diretrio de tema a procura por esse arquivo e o analisa. Se encontrado essas tags, o WordPress ir lista-lo no Gerenciador de temas na administrao. Arquivos que compe um tema WordPress Como dito anteriormente, um tema WordPress composto de no mnimo dois arquivos: style.css e index.php. No entanto, h vrios outros arquivos bsicos de uma tema. Vamos conhece-los: Arquivos bsicos de um tema WordPress

style.css index.php header.php footer.php sidebar.php single.php page.php category.php tag.php links.php search.php

Arquivos avanados de um tema WordPress


comments.php comments-popup.php archive.php archives.php attachment.php image.php video.php audio.php ...

14

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

Como instalar, ativar e excluir um tema WordPress H uma diferena significativa entre instalar e ativar um tema WordPress. Instalar um tema WordPress significa basicamente armazena-lo sob o diretrio /wpcontent/themes. Uma vez armazenado o WordPress ir reconhece-lo e lista-lo no Gerenciador de temas. O WordPress permite a instalao de temas de diversas maneiras: via FTP onde voc enviar o diretrio referente ao tema para o diretrio /wp-content/themes; subir (upload) o tema em formato ZIP (somente a partir da verso 2.7); baixar do diretrio de temas do WordPress.org. Uma vez instalado preciso ativar o tema. Somente aps a ativao que ele ser executado de fato. Ou seja, mesmo que um tema esteja instalado ele est em desuso. Fique atento. O Gerenciador de temas do WordPress alm de permitir a instalao e ativao, lhe permite excluir e pr-visualizar o tema desejado. Recurso muito til para se decidir entre um tema e outro, testar o tema em produo e ativa-lo na certeza de estar tudo como desejado. Layout PSD/PNG > HTML e CSS > Tema WordPress; Desenvolver um site baseado em WordPress no elimina etapas bsicas do desenvolvimento de um blog/site. Como criar o wireframe, criar o layout num software grfico como Fireworks e Photoshop, criar a camada de marcao (HTML) e a de apresentao (CSS). Uma vez tendo desenvolvido a camada de marcao (HTML) e a de apresentao (CSS) do layout desejado, podemos converte-lo para um tema WordPress facilmente. Iniciando pela estrutura bsica de tema WordPress, como vimos anteriormente e seguir com o acrscimo de arquivos e funcionalidades necessrias para o projeto em questo.

15

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

Hierarquia de arquivos Compreender a hierarquia de arquivos do WordPress nos permite criar sites avanados e explorar importantes facilidades oferecidas alm de grandes possibilidades de customizao. Alm de ser necessrio saber qual arquivo utilizado para exibir contedos em certos tipos de pginas. Alguns arquivos de temas como o header.php e footer.php responsveis pelo cabealho e rodap, respectivamente, so utilizados em todas as pginas enquanto outros so usados em condies especficas. A lgica da hierarquia de arquivos de temas WordPress Atravs dos parmetros de URL (Query String) o WordPress decide qual arquivo de template ser utilizado para exibir o contedo da pgina a ser exibida. Ou seja, atravs da URL ele detecta se a pgina de busca, de categoria ou a pgina principal dever ser exibida, por exemplo. O WordPress procurar por arquivos de templates com nomes especficos no diretrio do tema atual. Na falta desses arquivos ele usar sua lgica de hierarquia at chegar ao arquivo principal (index.php) que ser usado na falta dos especficos. Para ficar mais claro, considere o seguinte exemplo. Usurio acessa o site leandrovieria.com; clica no link para a categoria cursos leandrovieira.com/cursos. O WordPress procurar pelo arquivo category-x.php, onde x o ID da categoria cursos. Se no encontrado, ele procurar pelo arquivo genrico category.php. Se esse arquivo, tambm no existir, o prximo alvo ser o archive.php. E na falta desse ltimo o arquivo principal ser considerado, index.php

16

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

A imagem abaixo representa visualmente a hierarquia de arquivos do WordPress.

Agora, vejamos quais arquivos requisitado pelo WordPress baseado no tipo de parmetro de URL. Exibio da pgina inicial

home.php index.php

Exibio de post

single.php index.php

17

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

Exibio de pgina

page-template.php
o

Onde page-template.php o nome do arquivo (Template page) atribudo pgina em questo. Por exemplo, localizacao-empresacom-google-maps.php. Falaremos sobre esse assunto adiante.

page.php index.php

Exibio de categoria

category-id.php
o

Se a categoria em questo tiver o ID 3, o WordPress procurar pelo arquivo category-6.php.

category.php archive.php index.php

Exibio de tag

tag-slug.php
o

Se o slug da tag em questo for cursos, o WordPress procurar pelo arquivo tag-cursos.php

tag.php archive.php index.php

Exibio de autor

author.php archive.php index.php

Exibio de data

date.php archive.php 18

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

index.php

Exibio do resultado de busca


search.php index.php

Exibio da pgina de erro 404


404.php index.php

Exibio dos arquivos em anexos

image.php, video.php, audio.php, application.php, ...


o

Ou qualquer outra primeira parte de um MIME type.

attachment.php single.php index.php

Tags de template Tag de template so cdigos que do instrues ao WordPress para fazer ou obter alguma coisa. Um exemplo clssico utilizar uma tag de template para exibir o nome/ttulo do site. Nesse caso, a tag de template seria a bloginfo();. Observe: <h1><?php bloginfo( 'name' ); ?></h1> No exemplo acima, englobamos o ttulo do site entre as tags h1 e utilizamos o parmetro name para dizer a tag de template bloginfo obter o ttulo do site. Essa informao, o ttulo do site, gravada nas configuraes gerais na administrao do WordPress. Cada tag de template tem sua especificidade. A experincia do dia-a-dia e a consulta ao Codex ser seu grande aliado para familiarizar-se com elas.

19

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

Anatomia de uma Tag de template Uma tag de template composta por trs componentes. 1. As tags PHP; 2. Uma funo do WordPress; 3. Parmetros (opcionais) das funes do WordPress. Como o WordPress desenvolvido em PHP, suas funes tambm o so. Logo, para chama-las fazemos uso das tags de abertura (<?php) e fechamento (?>) do PHP, assunto abordado em PHP para Designers. Uma funo WordPress ou uma funo de template (Tag de template) uma funo PHP que executa ou exibe alguma informao referente ao seu site. A lista das Tags de template do WordPress pode ser conferida em zip.li/wp-templatetags. Os parmetros de funes so opcionais ou requeridos dependendo da funo a ser chamada. Atravs deles personalizamos a ao a ser executada ou o contedo a ser exibido. Na lista das Tags de template h a relao de cada parmetro possvel de ser utilizado. Como passar parmetros as funes do WordPress Algumas funes no possuem parmetros, logo no precisamos passa-los. As que possuem, so dividas em dois grupos, as que aceitam parmetros no estilo padro do PHP e as que aceitam parmetros no estilo de parmetros de URL (Query String). Em relao s funes que aceitam parmetros no estilo padro do PHP necessrio considerar:

Algumas funes podem aceitar mltiplos parmetros; Mltiplos parmetros so separados por vrgulas; A ordem os parmetros importante e necessria.

Se uma funo aceita mltiplos parmetros, considere o envio de todos desejados caso contrrio a funo poder no funcionar como o esperado. 20

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

No caso de uma funo aceitar cinco parmetros, por exemplo, e voc quiser apenas modificar o ltimo, envie os demais passando uma string vazia ou consulte a documentao da funo para saber o procedimento em relao ao valor padro de um parmetro. Um exemplo: <?php nomeDaFuncao( '', '', '', 'valor padro qualquer', 'valor do quinto parmetro' ); ?> Em relao s funes que aceitam parmetros no estilo de parmetros de URL (Query String)

Algumas funes podem aceitar mltiplos parmetros; Mltiplos parmetros so separados com &; No importa a ordem em que os parmetros so enviados.

A grande vantagem das funes que aceitam parmetros no estilo de parmetros de URL a possibilidade de defini-los em qualquer ordem. As funes do WordPress que geralmente aceitam esse tipo de parmetro comeam com "wp_". Tipos de parmetros Para utilizar as funes que aceitam parmetros precisamos conhecer a especificidade em se trabalhar com trs tipos: strings, inteiros e booleanos. Strings Strings so linhas de textos, de um caractere a diversas palavras. Elas so englobadas por aspas simples (') ou duplas ("). Se sua string contiver aspas simples ou duplas, considere o uso das duplas ou simples, respectivamente. Ou se preferir, utilize a barra ao contrrio (\) para escapa-las. Veja exemplos: <?php nome_da_funcao( 'O WordPress um "CMS"' ); ?> <?php nome_da_funcao( "O WordPress um 'CMS'" ); ?> <?php nome_da_funcao( "O WordPress um \"CMS\"" ); ?>

21

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

Inteiros Inteiros so nmeros positivos ou negativos. Que passados englobados ou no por aspas sero manipulados corretamente. Observe: <?php nome_da_funcao( 12345 ); ?> <?php nome_da_funcao( '12345' ); ?> Booleanos Parmetros em boleanos informam valores como verdadeiro (true) ou falso (false). Para funes que aceitam parmetros no padro PHP possvel utilizar o equivalente numrico 1 para true (verdadeiro) e 0 para false (falso). Observe:

1 = TRUE = true 0 = FALSE = false

J para as funes que aceitam parmetros no estilo de parmetros de URL considere o uso somente dos equivalentes numricos 1 e 0 (zero). Tags de template para incluso de arquivos As tags de template para incluso de arquivos utilizada num arquivo de template (por exemplo, index.php) para executar o HTML e PHP encontrado em outro arquivo (por exemplo, header.php). <?php get_header(); ?> Incluir o arquivo header.php do tema em uso. Se tal arquivo no for encontrado, o header.php do tema padro ser considerado. Tal arquivo est localizado em /wpcontent/themes/default/header.php. <?php get_footer(); ?> Incluir o arquivo footer.php do tema em uso. Se tal arquivo no for encontrado, o footer.php do tema padro ser considerado. Tal arquivo est localizado em /wpcontent/themes/default/footer.php. 22

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

<?php get_sidebar(); ?> Incluir o arquivo sidebar.php do tema em uso. Se tal arquivo no for encontrado, o sidebar.php do tema padro ser considerado. Tal arquivo est localizado em /wpcontent/themes/default/sidebar.php. Ambas tags de template: get_header(), get_footer(), get_sidebar() aceitam um parmetro que quando utilizado permite a incluso de um cabealho, rodap ou uma lateral particular, respectivamente. Observe: <?php get_sidebar( 'widgets' ); ?> Incluir o arquivo sidebar-widgets.php do tema em uso. <?php get_search_form(); ?> Incluir o arquivo searchform.php do tema em uso. Se tal arquivo no for encontrado, o formulrio de busca ser gerado. <?php comments_template(); ?> Incluir o arquivo comments.php do tema em uso. Se tal arquivo no for encontrado, o comments.php do tema padro ser considerado. Tal arquivo est localizado em /wp-content/themes/default/comments.php. Para exibir comentrios na pgina principal (index.php) ou pginas de arquivos (por exemplo, archive.php) preciso definir a varivel $withcomments com o valor 1 (um), assim: <?php $withcomments = 1; ?> <?php include TEMPLATEPATH . '/nome-de-qualquer-arquivo.php'; ?> Atravs do uso da funo include do PHP e da constante TEMPLATEPATH podemos incluir na pgina desejada qualquer arquivo localizado no diretrio do tema em uso.

23

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

Tags de template condicionais Tags de template condicionais lhe permite exibir contedos especficos em momentos exclusivos baseado em condies. Por exemplo, exibir um alerta na pgina de visualizao de posts quando o usurio estiver no modo de prvisualizao. Para esse propsito, exibir contedo especfico em momento exclusivo, o WordPress lhe coloca a disposio diversas tags de template condicionais. Conhea-as e faa bom uso. Nota: todas as tags de templates condicionais retornaro true ou false com base na condio requisitada. Nota 2: todas as tags de template condicionais esto relacionadas nesta pgina zip.li/wp-cond-tags. Abaixo listo e comento as comumente utilizadas. is_home() Quando a pgina inicial est sendo exibida. is_page() e is_page( 5 ) Quando uma pgina exibida e quando a pgina de ID 5 exibida. is_single e is_single( 6 ) Quando um post exibido e quando um post de ID 6 exibido. is_search() Quando a pgina de resultado de busca exibido. is_category(), is_category(3) e in_category(4) Quando a pgina de categoria exibida, quando a pgina de categoria de ID 3 exibida e quando o post atual contiver a categoria de ID 4. is_tag(), is_tag( 'curso' ) e has_tag( 'WordPress' ) Quando a pgina de tag exibida, quando a pgina de tag com o slug curso exibido e quando o post atual contiver a tag WordPress.

24

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

O loop do WordPress O loop do WordPress seu principal processo. Ele utilizado para exibir cada um dos seus posts aos seus visitantes nos arquivos de template. Voc pode criar seus arquivos sem O loop, mas ser possvel exibir somente os dados de um post. Toda tag HTML ou cdigo PHP colocado junto ao loop ser repetido em cada post exibido. Algumas tags de templates padro do WordPress ou fornecidas por plugins so indicadas para serem usadas junto ao loop, logo elas sero repetidas em cada post. Como funciona o loop do WordPress Primeiramente verificado se todos os arquivos necessrios esto presente no tema. Em seguida, selecionado todas as configuraes padro - definidas pelo administrador do site - do banco de dados; isso inclui informaes como o nmero de posts a serem exibidos por pginas, se os comentrios esto ativos ou no, entre outros detalhes. O prximo passo verificar os posts requeridos pelo usurio, informao que determinante para saber quais posts recuperar no banco de dados. Feito todo esse processo, o WordPress conecta-se ao banco de dados, recupera os posts necessrios e os armazenam numa varivel. O loop do WordPress acessa essa varivel e a utiliza para exibir o contedo dos posts nos arquivos de template. Como usar o loop do WordPress O incio do loop: <?php if (have_posts()) : ?> <?php while (have_posts()) : ?> <?php the_post(); ?> A primeira coisa a ser feita verificar atravs da funo have_posts() se h posts a serem exibidos. Se tiver algum, o loop iniciado; ele ser executado enquanto houver posts a serem exibidos. Isso feito atravs do loop while do PHP com base na funo have_posts() que retorna true enquanto houver posts. 25

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

A funo the_post() chamada dentro do loop while usada para selecionar o post atual e torna-lo disponvel. Sem o uso da funo the_post() muitas tags de templates podero no funcionar corretamente. O prximo passo exibir o contedo dos posts e suas informaes. Vejamos um exemplo: <h1> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </h1> <small><?php the_time(); ?> por <?php the_author(); ?></small> <?php the_content( 'Continue lendo...' ); ?> No exemplo acima, exibimos o ttulo do post englobado por seu link permanente; a data em que ele foi publicado e o autor responsvel; em seguida exibido o contedo. Para finalizar o loop utilizamos: <?php endwhile; ?> <?php endif; ?> Se desejar exibir uma mensagem para quando no houver posts, utiliza a condio else da seguinte maneira: <?php endwhile; ?> <?php else : ?> <p>Nenhum post a ser exibido.</p> <?php endif; ?> Compreendo o sistema de comentrios do WordPress Possibilitar comentrios nos posts e pginas abrir as portas para a interao com os usurios e interagir com eles. O WordPress facilita a incluso e gerenciamento de comentrios.

26

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

Atravs da funo comments_template() carregado o arquivo comments.php responsvel por exibir os comentrios, o formulrio para incluso de novos e toda lgica necessria. Se seu tema no contiver o arquivo comments.php o WordPress ir considerar o comments.php do tema padro localizado em /wp-contents/themes/default/comments.php. Esse arquivo uma grande fonte de referncia para compreender o sistema de comentrio do WordPress. Minha sugesto que voc o adapte para suas necessidades em vez de criar um do zero. Deixe para fazer isso quando estiver mais seguro e experiente. Vamos considerar o arquivo comments.php do tema padro e compreender cada parte desse sistema. No incio do arquivo verificado duas coisas, observe: if ( !empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) A primeira evita que o arquivo seja carregado diretamente no navegador, assim: /wpcontents/themes/meu-tema-ou-qualquer-outro/comments.php. Isso feito por que o sistema de comentrios foi desenvolvido para trabalhar em conjunto com um post ou pgina. if ( post_password_required() ) { ?> A segunda verificao evita exibir os comentrios se o post for protegido por senha, somente aps informa-la que eles sero exibidos. Passado essas verificaes, o prximo passo checar se existem comentrios para o post em questo. Isso feito atravs da seguinte funo: <?php if ( have_comments() ) : ?> J os comentrios so exibidos utilizando: <ol> <?php wp_list_comments(); ?> </ol> 27

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

Quando no houver comentrios a serem exibidos, verificado se os comentrios esto abertos para o post em exibio, se no tiver exibido uma mensagem ao usurio informando sobre a situao. Estando aberto os comentrios, podemos exibir o formulrio para o usurio registrar sua opinio. Veja como feito: <?php if ('open' == $post->comment_status) : ?> <!-- Aqui vai o formulrio --> <?php endif; ?> Ao exibir o formulrio importante verificar se os comentrios possvel de serem feitos somente aps o usurio ser registrado e estar autenticado. A opo comment_registration armazena esse dizer e para fazer essa verificao fazemos uso dela junto varivel $user_ID. Veja: <?php if ( get_option('comment_registration') && !$user_ID ) : ?> No cdigo acima, confirmamos se a opo comment_registration retorna true (verdadeiro) e que a varivel $user_ID retorna false (falso). O que significa dizer que os comentrios devem ser feitos por usurios registrados e autenticados. Os campos do formulrio utilizados para os comentrios devem conter os seguintes nomes em seus atributos name: author, email, url e comment. O primeiro para o nome do responsvel pelo comentrio, seguido por seu e-mail, url e o texto do comentrio. Voc pode exibir um alerta ao usurio quando for necessrio que se informe o nome e e-mail do responsvel pelo comentrio verificando se a varivel $req, de requerido, retorna true (verdadeiro). Observe: <?php if ($req) echo "(requerido)"; ?> Antes de finalizar o formulrio necessrio incluir duas funes. Uma para inserir campos ocultos que identificam o post e o comentrio. <?php comment_id_fields(); ?>

28

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

A outra como demonstrado abaixo possibilita a integrao de plugins ao seu formulrio de comentrios. Atravs dessa funo criado um gancho chamado comment_form que passa como atributo funo que se vincular a ele o ID do post em exibio. <?php do_action('comment_form', $post->ID); ?> Menu de navegao O WordPress oferece funes que facilitam a criao de menu de navegao. Considerando que ele ser constitudo das pginas do seu site, podemos fazer uso das funes wp_list_pages() e wp_page_menu(). Atravs da funo wp_list_pages() o WordPress exibe as pginas como uma lista de links que pode ser personalizada de vrias formas e adaptar-se a sua necessidade. Seu uso simples <ul> <?php wp_list_pages( 'include=2,3,4,5&sort_column=menu_order' ); ?> </ul> No exemplo acima utilizamos a funo wp_list_pages() para criarmos uma lista de links paras as pginas de ID 2, 3, 4 e 5 e a ordenao ser de acordo com a definida atravs da administrao do WordPress. J funo wp_page_menu() se diferencia pela possibilidade de incluir a pgina inicial junto s demais atravs de seu parmetro show_home. Observe: <ul> <?php wp_page_menu( 'show_home="Pgina inicial"&include=2,3,4,5&sort_column=menu_order' ); ?> </ul> Ambas funes permitem a criao de menu de navegao dos mais variados tipos. Para conhecer suas possibilidades consulte a documentao de cada uma delas zip.li/wp_list_pages e http://zip.li/wp_page_menu.

29

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

Pgina de erro 404 customizada Links quebrados acontecem com os melhores sites. No entanto, so poucos os que se preocupam com esse fato e tiram proveito do mesmo. Nada mais frustrante para o usurio do que no localizar o contedo desejado. Criando uma pgina de erro 404 customizada voc oferecer ao seus usurios uma ajuda no momento em que eles mais precisam. Logo, inclua atalhos relevantes para as principais pginas, oferea o formulrio de busca, um link para a pgina de contato e muito mais. Voc precisa apenas criar um arquivo chamada 404.php e armazena-lo no diretrio do seu tema. Criado o arquivo, o WordPress ir utiliza-lo quando o erro 404, que diz a respeito a uma pgina no encontrada, ocorrer. A forma correta de integrar um plugin ao seu tema Todo plugin tem, ou deveria ter, uma documentao atravs da qual seria explicado como integra-lo ao seu tema. No entanto, h algo bsico que se aplica a toda integrao de plugin a um tema alm de ser uma boa prtica. Os plugins que se integram a temas, fornecem tags de template para executar uma determinada tarefa. Logo, preciso considerar uma boa prtica ao chama-la. Essa boa prtica consiste em verificar se tal tag de template realmente est disponvel antes de usa-la. Observe a forma correta de chamar uma tag de template: <?php if ( function_exists( 'nome_da_tag_de_template' ) ) : ?> <?php nome_da_tag_de_template(); ?> <?php endif; ?> Observe que antes de chamar a tag de template, verificamos se ela existe (est disponvel) para somente depois chama-la. Isso evita erros ao chamar funes inexistentes, como por exemplo, quando o plugin est desativado ou quando removido.

30

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

Se a tag de template fornecida pelo plugin for o mtodo de uma classe, a verificao diferente, veja: <?php if ( class_exists( 'nome_da_classe' ) ) : ?> <?php nome_cla_classe::nome_do_metodo; ?> <?php endif; ?> Atente-se a essa boa prtica ao chamar tags de templates em seus temas. wp_head e wp_footer wp_head e wp_footer so ganchos destinados ao cabealho e ao rodap de um tema, respectivamente. Muitos plugins fazem uso desse gancho assim como o prprio WordPress, logo inclui-los em seu tema relevante e garante uma melhor integrao. O wp_head inserido entre as tags <head></head>. A sugesto que seja antes da tag de fechamento, ou seja, </head>. Observe: ... <head> ... <?php wp_head(); ?> </head> J o wp_footer inserido antes do fechamento da tag </body>, logo veja como usala: ... <?php wp_footer(); ?> </body> Considere o uso de ambos os ganchos em seus temas e facilite a integrao dos plugins e outros recursos do WordPress que s funcionam junto a eles.

31

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

Inserindo JavaScript em temas WordPress Seus temas pode requerer o uso de JavaScript para torna-lo mais dinmico e interativo ou at mesmo incrementa-lo com funcionalidades em Ajax. O WordPress disponibiliza funes para voc carregar e evitar conflitos com arquivos JavaScript. 1. wp_enqueue_script() 2. wp_deregister_script() 3. wp_register_script() As funes acima so as mais usadas para utilizar JavaScript de forma segura e sem conflitos. Vamos conhecer o funcionamento de cada uma delas. Atravs da funo wp_enqueue_script() definimos um arquivo a ser analisado pelo mecanismo do WordPress responsvel em carregar os arquivos JavaScript. Primeiramente, vamos conhecer seus parmetros: <?php wp_enqueue_script( $controlador, $localizacao, $dependencia, $versao ); ?> No primeiro parmetro, $controlador ($handle), definimos um nome nico para o script, ser o pseudnimo dele (um alias). Esse parmetro requerido e deve ser informado com letras minsculas. Os demais parmetros so opcionais, mas de muita relevncia. O parmetro $localizacao ($src) define onde o script est armazenado. Ele pode estar hospedado em outro site, se necessrio. J com o parmetro $dependencia ($deps) determinamos se h alguma dependncia de arquivo relacionado ao que est sendo inserido. Por exemplo, posso escrever um script em JavaScript baseado em jQuery. Logo, meu arquivo dependente dessa biblioteca. No ltimo parmetro definido a verso do arquivo. Se nada for informado verso do WordPress ser considerada.

32

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

Observe a forma de uso: <?php wp_enqueue_script( 'nome-unico', get_bloginfo( 'template_url' ) . '/script.js', array( 'jquery' ) ); wp_head(); ?> A funo s funcionar se a funo wp_head() for chamada. Atente-se. A funo wp_register_script() tem uso semelhante wp_enqueue_script() em questes de parmetros. Mas h uma diferena fundamental entre elas. A segunda, a qual vimos um exemplo anteriormente, prepara o carregamento do arquivo. J a primeira, s o registra para uso futuro. A funo wp_register_script() combinada com a funo wp_deregister_script() pode resultar em usos avanados e modificar o padro do WordPress. Considere que seu arquivo requer uma verso diferente da jQuery disponibilizada pela instalao do WordPress. Podemos remover o registro da jQuery e em seguida registra-la novamente e informar um arquivo diferente. Por exemplo: <?php //... wp_deregister_script( 'jquery' ); wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', wp_enqueue_script( 'nome-unico', get_bloginfo( 'template_url' ) . '/script.js', array( 'jquery' ) ); } wp_head(); ?> O que fizemos no exemplo acima, foi remover o registro da jQuery do WordPress e registra-la novamente para incluir uma verso anterior. Em seguida informamos o arquivo a ser carregado e dizemos que ele dependente da jQuery.

33

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

Inserindo CSS em temas WordPress Assim como o WordPress disponibiliza funes para carregarmos arquivos JavaScript, o mesmo feito para incluirmos nossas folhas de estilo. As funes so praticamente as mesmas, seja na nomenclatura ou na forma de uso. 1. wp_enqueue_style() 2. wp_deregister_style() 3. wp_register_style() Focaremos nossos estudos na funo wp_enqueue_style() responsvel por incluir o arquivo CSS pgina. <?php wp_enqueue_style( $controlador, $localizacao, $dependencia, $versao, $media ) ?> A funo wp_enqueue_style() tem uma parmetro a mais do que a funo wp_enqueue_script() atravs do qual informamos a media para qual as declaraes CSS foram criadas. O primeiro parmetro $controlador ($handle) define o nome da folha de estilo. O segundo, $localizacao ($src) informa a localizao do arquivo, j o terceiro $dependencia utilizado para informamos se a folha de estilo a ser inclusa dependente ou no de outra. Atravs do parmetro $versao, o quarto, informamos a verso do arquivo. Veja como usa-la no tema: <?php wp_enqueue_style( 'nome-unico', get_bloginfo( 'template_url' ) . '/pasta/arquivo.css'); wp_head(); ?>

34

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

Pgina de template customizada Sabemos que o arquivo page.php utilizado para exibir o contedo de uma pgina WordPress. No entanto, podemos criar pgina de template customizada para atender as mais variadas necessidades de cada projeto em que nos envolvemos. Criar uma pgina de template customizada simples. Crie um arquivo PHP, nomeie como desejado e adicione o seguinte cdigo no incio da pgina: <?php /* Template Name: Nome da minha pgina de template customizada */ ?> Ao criar uma nova pgina ou editar uma existente, o WordPress percorrer o diretrio do tema em uso e procurar por pginas de template customizada, se encontrado ele listar as disponveis e voc poder vincula-la pgina em questo. Um exemplo:

35

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

O uso de pginas de template customizada constante e nos auxilia na criao de layouts e estruturas mais arrojadas. Voc pode mesclar o contedo editado atravs do editor, resgatando-o atravs da tag de template the_content(), com contedo externos, estticos, scripts, enfim use a imaginao e tenha conhecimento de um poderoso recurso. O arquivo functions.php Todo tema pode conter um arquivo opcional chamado functions.php. Tal arquivo atua basicamente como um plugin. O WordPress verifica no diretrio do tema em uso a existncia desse arquivo, se encontrado ele carregado automaticamente durante a inicializao do WordPress - tanto da administrao quanto do tema. O arquivo functions.php pode ser usado, por exemplo, para armazenar funes usadas em diversos arquivos do seu tema. Definir uma tela na administrao para oferecer opes de customizao, entre outras funcionalidades. Se voc utiliza funes de terceiros para incrementar seu tema, considere armazena-la no arquivo functions.php e usa a imaginao sobre as possibilidades de uso desse arquivo. Como dar suporte a Widgets ao seu tema Os widgets nos temas WordPress permitem aos usurios personalizar seus temas, incluir novos recursos sem conhecer ou precisar editar a marcao HTML. Logo, se voc for desenvolver um tema para compartilha-lo considere o suporte a Widgets. Se o tema em uso oferecer suporte aos widgets o WordPress permitir aos usurios organizar sua sidebar com os widgest desejados, veja:

36

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

Antes de registrar sua sidebar para suportar os widgets preciso pensar em como desenvolve-la. A sugesto do WordPress que ela seja feita com lista noordenada, a tag <ul>. Um exemplo: <ul id="sidebar"> <li id="about"> <h2>Sobre</h2> <p>Este meu blog com suporte a widgets.</p> </li> <li id="links"> <h2>Links</h2> <ul> <li><a href="http://pro.imasters.uol.com.br">iMasters PRO</a></li> </ul> </li> </ul> No exemplo acima, a tag <li> com o atributo id "links" seria o equivalente a um simples Widget. Mesmo que sua sidebar no seja feita com lista no-ordenada, possvel utilizar os widgets, no entanto esse um padro recomendado. A primeira coisa a ser feita dizer ao WordPress que sua sidebar dinmica, veja como simples: <ul id="sidebar"> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?> <li id="about"> <h2>Sobre</h2> <p>Este meu blog com suporte a widgets.</p> </li> <li id="links"> <h2>Links</h2> <ul> <li><a href="http://pro.imasters.uol.com.br">iMasters PRO</a></li> </ul> </li> <?php endif; ?> </ul>

37

Desenvolvimento de Temas para WordPress http://www.imasterspro.com.br

Feito isso, o WordPress ir considerar sua sidebar como dinmica e com suporte aos widgets. O prximo passo registrar sua sidebar atravs do cdigo abaixo: <?php if ( function_exists('register_sidebar') ) register_sidebar(); ?> O cdigo acima deve ser colocado no arquivo functions.php, o qual deve residir no diretrio do seu tema. Definido sua sidebar como dinmica e fazendo seu registro, voc poder fazer uso dos Widgets do WordPress e de terceiros atravs da administrao, arrastando os desejados para sua sidebar e removendo-os quando necessrio. Uma vez removido todos os widgets, o WordPress exibir sua sidebar normal.

38

Vous aimerez peut-être aussi