Criando Temas Para Wordpress

8/12/2019 Criando Temas Para Wordpress

1/160


2/160

Aprenda a desenvolver

Temas WordPress

http://mazetto.blog.br
http://mazetto.blog.br/http://mazetto.blog.br/


3/160

Prefcio

A internet lugar de todos. Boa parte dos usurios de internet

utilizam-se dos blogs como meio de comunicao e referncia para buscarinformaes teis aos seus cotidianos. A vontade de se epressar e epor

pontos de vista no mundo digital to grande !ue o nmero de produtores

de contedo cresce a cada dia.

"eparado com tal situao poss#vel ver a necessidade desses

produtores em entender o funcionamento da publicao de material para

$eb. %om intuito de agilizar esse trabal&o surgem os sistemas

gerenciadores de contedo' interfaces altamente simplificadas e auto-eplicativas capazes de realizar funes anteriormente conseguidas

apenas com um bom con&ecimento tcnico.

(o cenrio eistente) o *ord+ress destaca-se como o mais popular

entre os sistemas gerenciadores por possuir uma forte comunidade

colaborativa) interface amigvel) elevado nmero de funcionalidades e

diversas razes mais.

,aman&a popularidade agrava o problema da personalizao dos

trabal&os) onde muitos possuem o sistema e compartil&am dos mesmos

recursos e elementos visuais a serem eibidos aos visitantes.

trabal&o proposto tratar fundamentalmente de torn-lo capaz de

desenvolver suas prprias solues para eposio de contedos

mostrando um modo inteligente de integrar o desenvolvimento $eb padro

ao sistema do *ord+ress de modo a aproveitar bem os seus recursos.


4/160

Sumrio 4

Sumrio

Prefcio......................................................................................................

Sumrio......................................................................................................4

!onte"do....................................................................................................#

$ntrodu%&o................................................................................................'(

)esenvolvimento Web.............................................................................'*

$n+cio dos trabalhos.................................................................................(,

!onstru%&o do tema................................................................................4#

-strutura do tema....................................................................................#

Aprimoramentos......................................................................................*#

!onsidera%es 0inais..............................................................................,4

Ap1ndice A: 2efer1ncia de fun%es.......................................................,#

Ap1ndice 3: 0un%es utilizadas...........................................................'#,

Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br


5/160

Contedo #

!onte"do

Prefcio......................................................................................................

Sumrio......................................................................................................4

!onte"do....................................................................................................#

$ntrodu%&o................................................................................................'(

+ara !uem feito o livro/.....................................................................01+ro2eto...................................................................................................03

"idtica.................................................................................................03

(otificaes......................................................................................04

Alerta...........................................................................................04

(otas adicionais...........................................................................04

Aneos......................................................................................... 04

A2uda................................................................................................05

)esenvolvimento Web.............................................................................'*

%onceitos bsicos.................................................................................06

*1% e +adres $eb.........................................................................06

7,89................................................................................................06

:7,89.............................................................................................06

%;;..................................................................................................Bro$ser ;cripting?.............................;erver ;cripting?....................................


6/160

Contedo

,ableless...........................................................................................


7/160

Contedo *

Ar!uivos 8.....................................................................................37,89 - 7per,et 8arNup9anguage? uma linguagem de marcao utilizada para produzir pginas

na *eb !ue so interpretadas pelos navegadores. s documentos em

7,89 so ar!uivos de teto simples !ue podem ser criados e editados em

!ual!uer editor de tetos comum) como o Bloco de (otas do *indo$s.

Gtensible 7pertet 8arNup 9anguage? atualmente a

base do "esenvolvimento *eb. Gla a estrutura de toda a informao !ue

apresentada na Fnternet) como imagens) tetos) formulrios) linNs e muito

mais.



20/160


21/160


22/160

Desenvolvimento e! ((

?@uer

@uer uma biblioteca @ava;cript !ue pode ser utilizada e

modificada sem !ual!uer custo. A2uda os desenvolvedores a se

concentrarem na lgica dos sistemas da $eb e no nos problemas de

incompatibilidade dos navegadores.

TablelessIma forma de desenvolvimento de sites) sugerida pela *1%) !ue

no utiliza tabelas para disposio de contedo na pgina) pois defende

!ue os cdigos 7,89 devem ser usados para o propsito !ue foram

criados) sendo !ue tabelas foram criadas para eibir dados tabulares.

S@;S um banco de dados relacional !ue est entre os mais utilizados no

mundo. Gle gratuito >open source? e permite a voc armazenar)

organizar e ler dados de uma maneira muito rpida e eficiente.

!S

;istema de Lerenciamento de %ontedo >em ingls %ontent

8anagement ;stems?. ;istema gestor de $ebsites) portais e intranets

!ue integra ferramentas necessrias para criar e gerenciar contedos em

tempo real) sem a necessidade de programao de cdigo.



23/160

Desenvolvimento e! (

Wordpress

Gm sua essncia ele um %8;) gerenciador de contedosP voltado

especialmente para blogs. Gntretanto eperincias diversas de seus

usurios tem mostrado ele com o potencial para gerir portais e sistemas de

diferentes tipos e taman&os.

*ord+ress surgiu em


24/160

Desenvolvimento e! (4

Gsse o site dos desenvolvedores do sistema) onde encontram-se

dispon#veis tambm plugins e temas !ue voc poder manuse-los como

bem entender.

WordPress.org o site dos desenvolvedores do WordPress, ondepodemos fazer o download do !" bem #omo de se$s pl$gins eman$se%&los #omo bem entender.

WordPress.#om o site '$e ofere#e grat$itamente o servi(o dehospedagem para o WordPress.



25/160

Desenvolvimento e! (#

Plugins

s plugins so funcionalidades !ue os programadores desenvolvem

com as rotinas eistentes do *ord+ress >ou no? e o fazem para obter

mel&or resposta para diferentes ob2etivos) se2a eibir not#cias reacionadas)

ou uma galeria de imagens personalizada.

s plugins so os maiores colaboradores da!ueles !ue entendem

pouco de programao) pois fazem tudo o !ue prope bastando ao usuriomov-los para o diretrio de plugins de seu blog. 8uitas vezes possuem

pginas administrativas !ue facilitam ainda mais o trabal&o do usurio.

%omo o *ord+ress pro2etado para ser leve) maimizar a

fleibilidade e minimizar o acmulo de cdigoP os +lugins eistem para

oferecer funes personalizadas para !ue cada usurio possa personalizar

seu site segundo suas necessidades espec#ficas.



26/160


Temas

*ord+ress possui uma distinta separao entre o contedo

gerencivel de um blog nele criado com a sua respectiva formatao e

eibio em tela. banco de dados 8;9 armazena todas as

informaes passadas ao sistema) este por sua vez possui uma srie de

funcionalidades !ue permitem a criao de diferentes modelos de eibio)

os temas) para o usurio final.

Motion, um dos muitos temas populares do WordPress

Im tema 2ustamente a parte visual do seu blog) como ele ser

apresentado para seu visitante. Gle carrega consigo os elementos visuais

!ue compe as formataes de pginas e uma srie de funcionalidades

&erdadas do *ord+ress alm de abrir espao ao desenvolvedor de

implantar as suas prprias.



27/160

Desenvolvimento e! (*

+ossui uma coleo de ar!uivos !ue trabal&a em con2unto para

produzir uma interface grfica nica de um blog. 8odifica a forma como o

site eibido) sem modificar no entanto) o *ord+ress onde est sendo

eecutado. s temas podem incluir ar!uivos de imagem) fol&as de estilos)

scripts) bem como !uais!uer ar!uivos de cdigo necessrio.

Porqu desenvolver um tema WordPress?

+ara criar um visual nico para o seu siteP

Aperfeioar temas) funes e recursos eistentes do *ord+ress

obtendo mel&ores resultadosP

%riar modelos alternativos de pginas com caracter#sticas

espec#ficas destinadas unicamente a cada tema desenvolvidoP

portunidade para aprender mais sobre desenvolvimento $eb e

aumentar sua eperincia no ramoP

Gstimula a criatividadeP

Keceba cr#ticas de seu trabal&o aps compartil&ar o tema criado.

As cr#ticas podero l&e a2udar a aperfeioar suas tcnicasP

%omercializao dos temas criados.



28/160


Tema Escritrio Digital



29/160

Parte II$n+cio dos trabalhos


30/160

In"cio dos tra!al#os 5

Ao desenvolver um tema de suma importJncia tomar alguns

cuidados para otimiz-lo e dei-lo mais fle#vel para futuras e eventuais

alteraes. S preciso ter em mente !ue o tema envolve somente a

estrutura do site e no as informaes nele contidas. Assim sendo todo o

material !ue for inclu#do diretamente atravs do tema deve ser relevante a

ele e tambm !ue servir em todas as suas aplicaes.

%omo 2 foi dito anteriormente) no desenvolvimento de sites para

$eb) muitos con&ecimentos so colocados em prtica. S preciso ter em

mente !ue para se ter um bom resutado final) deve ser con&ecido

eatamente o !u dese2amos ter como resultado final de nossa aplicaoP

at por razes comparativas. Fsso !uer dizer !ue no se pode

simplesmente comear logo de cara digitando lin&as de cdigo !ue no se

sabe onde te levaro.

Gm primeiro lugar necessrio plane2ar o trabal&o a ser eecutado.

,rabal&e bem a idia do Brainstorm. (ela voc e todos a!ueles envolvidos

na tarefa de desenvolver o tema devero epressar todas as suas idias

por mais surreias !ue se2am) sendo poss#veis ou no de se fazerP com

intuito de se ter um grande volume de informaes com as !uais trabal&ar.

(essa etapa faa !uestionamentos como'

ual assunto ser trabal&ado/

ual tipo de informao ser veiculada/

%omo a informao ser tratada >pginas) not#cias) linNs?/

uais sees o site dever possuir/



31/160

In"cio dos tra!al#os '

Gnfim) !uestes !ue possam te dar uma idia de como poder ser o

seu resultado final. Eaa algumas pes!uisas na prrpria $eb com intuito de

obter referncias para seu trabal&o. 8uito material de !ualidade pode ser

encontrado) at mesmo de forma gratuita.

Tome #$idado e n)o #onf$nda tomar $m trabalho de o$tra pessoa#omo refer*n#ia+ #om pl%gio, #pia n)o a$torizada. Ter $m tema#omo refer*n#ia a#ess%&lo e est$dar o posi#ionamento dos#omponentes, estilos empregados, harmonia do design+ para

posteriormente em s$a #ria()o, trabalhar #om alg$m-s desseselementos sem '$e ne#essariamente se$ res$ltado final seasemelhante ao modelo fonte.

+ara ilustrar esse conceito) defini como resultado de um Brainstorm)

as seguintes condies para nosso tema'

Im blog ser desenvolvido

Ima paginao de not#cias ser necessria +ginas de buscas

+ginas personalizadas

"ever eibir nome e descrio do blog

(ecessariamente eistir um menu de pginas

Gspao para contedo interativo) especificado por !uem mais for

utilizar o tema

%rditos



32/160

In"cio dos tra!al#os (

Wireframe

"efinimos nosso contedo e todo o material a ser eplorado dentro

do nosso site) precisamos agora criar um esboo do nosso trabal&o.

Earemos ento uma prvia) sem programar ainda) !ue nos possibilite

visualizar como ser o tema para os visitantes do blog. +ara isso criaremos

um *ireframe.

*ireframe um desen&o bsico) como um es!ueleto) !uedemonstra de forma direta a ar!uitetura de como o laout ser de acordo

com as especificaes determinadasP seu ob2etivo auiliar o

entendimento dos re!uisitos !ue foram escol&idos com relao as funes

e ob2etos !ue o sistema dever possuir.

A criao de um $ireframe pode ser feita manualmente com

materiais de escritrio como lpis) caneta) borrac&a e fol&as sulfite. "esse

modo voc consegue alm de plane2ar o futuro laout do blog) economizartempo no processo. u ento voc pode utilizar algum editor de imagens

>vetoriais preferencialmente? com o !ual ten&a intimidade com o manuseio

e obter ecelentes resultados) de mel&or !ualidade) com a mesma

economia de tempo investido.

Importante ressaltar '$e o res$ltado final do trabalho a serdesenvolvido independe da ferramente $tilizada.

Para edi()o dos ar'$ivos P0P, por e1emplo, $tilizar editoresrob$stos o$ o blo#o de notas n)o define o #digo a ser #riado #omobom o$ r$im, depender% $ni#amente do '$e vo#* ir% digitar. 2mesmo serve para softwares de #ria()o e edi()o de imagens.



33/160

In"cio dos tra!al#os

tema a ser desenvolvido foi denominado UAprendizU. (ele

trabal&aremos os principais conceitos e recursos !ue o *ord+ress oferece

para o processo de desenvolvimento e customizao de temas. +or isso)

nossos es!uemas devero respeitar os seguintes esboos'

Wireframes do projeto Aprendiz



34/160


Padro de codificao WordPress

Antes de desenvolver o tema) eistem algumas normas criadas para

*ord+ress com intuito de padronizar seu cdigo-fonte. ;eguir tais padres

no obrigatrio) porm muito interessante !uando se !uer compartil&ar

algo desenvolvido e !ue outras pessoas entendam facilmente o material.

9T;

alidao

,odas as pginas 7,89 devem ser verificadas pelo validador da

*1% certificando !ue a marcao est sendo bem feita. Gsse recurso no

necessariamente indica !ue um cdigo bom ou ruim) mas a2uda a

entend-lo e encontrar problemas !ue podero eistir !uando o cdigo for

aplicado ao servidor. Ainda assim sempre necessrio uma reviso

manual do cdigo fonte.

!ec"amento de #a$s

,odas as tags devem estar fec&adas.

+ara tags !ue no possuem fec&amento pelo padro da marcaoVtagWVRtagW como o caso das tags VbrW e VimgW a terminao com a barra

invertida XRX imprescind#vel.

(esses casos ainda o correto deiar um espao entre a tag e seu

fec&amento) passando de VbrRW na forma incorreta) para Vbr RW no modelo

correto dos padres.



35/160

In"cio dos tra!al#os #

Atributos e ta$s

,odas as tags e seus atributos devem estar em letras minsculas.

s atributos devero respeitar a norma de caia baia !uando

escritos com o propsito de serem lidos apenas por m!uinas. ;e a

informao do atributo dever ser interpretado por &umanos) dever

respeitar a maior legibilidade dos dados.

$ara mquinas

$ara #umanos

%xemplocom

Aspas

"e acordo com o *1%) todos os atributos devem possuir um valor) e

deve ser usado para este aspas simples ou duplas necessariamente.

A seguir ve2a os eemplos do modo correto e incorreto do uso de

aspas para delimitar os valores dos atributos das tags.

Correto

Incorreto



36/160


%ndentao

%omo no +7+) a indentao no 7,89 deve sempre refletir a

estrutura lgica e dever ser feita com tabulaes e no espaos. Ao

misturar os cdigos +7+ e 7,89) os blocos de indentao +7+ devero

respeitar o cdigo 7,89 de modo !ue os n#veis de abertura e fec&amento

de um se encaiem ao do outro.

Correto

ot Found

.pologie &ut no reult 0ere found

Incorreto

ot Found

.pologie &ut no reult 0ere found



37/160

In"cio dos tra!al#os *

P9P

Aspas simples e duplas

Ise aspas simples e duplas !uando apropriado. ;e voc no estiver

tratando nada na string) use use aspas simples. Doc nunca deve escapar

aspas 7,89 numa string) por!ue voc apenas precisa alternar entre os

tipos de aspas) assim'

Exemplo

echo 4ome do lin541

echo "8nomedolin5"1

A nica eceo no @ava;cript) !ue as vezes re!ues aspas simples

ou duplas. ,etos !ue ven&am dentro de atributos devem passar pelo

attributeMescape>? assim as aspas simples ou duplas no fec&am o atributo

e invalidam o :7,89 causando um problema de segurana.

%ndentao

;ua indentao deve sempre refletir uma estrutura lgica. Ise tabs

reais e no espaos) pois isso permite maior fleibilidade entre clientes.

Kegra de ouro' tabs devem ser usadas no in#cio das lin&as e espaos

devem ser usados no meio das lin&as. Gceo' se voc tem um bloco decdigo !ue se2a mais leg#vel se estiver alin&ado) use espaos'

Exemplo

8foo = 4algumvalor418foo9 = 4algumvalor9418foo = 4algumvalor418foo3 = 4algumvalor341



38/160


&stilo das C"aves

%&aves devem ser usadas em multiplos blocos. ;e voc tiver um

bloco muito grande) considere !uebr-lo em dois ou mais blocos ou

funes. %aso se2a realmente necessria a eistncia desse longo bloco)

por favor pon&a um pe!ueno comentrio no final para !ue as pessoas

percebam de relance o !ue a!uela c&ave de fec&amento est fec&ando.

Exemplo

if ( condicao + ;

acao,(+1

acao9(+1

eleif ( condicao9 condicao + ;

acao(+1

acao3(+1

ele ; acaopadrao(+1

(ormalmente isso apropriado para blocos lgicos) maiores !ue

cerca de 14 lin&as) mas !ual!uer cdigo !ue no se2a intuitivamente bvio

pode ser comentado. Blocos de uma lin&a apenas pode omitir as c&aves

para ficarem mais concisos'

Exemplo

if ( condicao +

acao,(+1

ele

acao9(+1



39/160

In"cio dos tra!al#os ,

'so de espaos

;empre colo!ue espaos'

%ps as v"rgulas

array( , 9 +

Em am!os os lados das atri!ui&es de operadores lgicos

== 9

Em am!os os lados dos parenteses

foreach ( 8foo a 8&ar + ;

'uando de(inindo ou c#amando (un&es) entre os par*metros

function minhafuncao( 8param, = 4foo4 8param9 = 4&ar4 + ;

minhafuncao( 8param, outrafuncao( 8param9 + +1

ariveis( fun)es( nomes de arquivos( e operadores

Ise letras minsculas em nomes de variveis e funes. ;epare as

palavras por sublin&ados >underscores?.

Exemplo

function algum*nome( 8alguma*variavel + ; ?@

Ar!uivos devem ser nomeados descritivamente usando letras

minsculas. 7#fens devem separar as palavras.

Exemplo

nome-do-meu-pluginphp



40/160


*inali+ao de par,metros

+ara sinalizar parJmetros para funes prefira valores em string a

apenas true e false !uando c&amar funesP e sempre com nomes auto-

eplicativos.

Incorreto

function comer( 8oque 8devagar = true + ;

comer( 4cogumelo4 +1

comer( 4cogumelo4 true +1

// A que ignifica true'

comer( 4comida de cachorro4 fale +1

// A que ignifica fale' A opoto de true'

@ !ue o +7+ no suporta argumentos em forma de nomes) os

valores dos sinalizadores no tem significados e toda vez !ue aparece

uma funo como essa ns temos !ue pes!uisar pela definio da funo.

cdigo pode ficar mais leg#vel se usarmos tetos descritivos) ao invs de

boleanos'

Correto

function comer( 8oque 8velocidade = 4devagar4 + ;

comer( 4cogumelo4 +1

comer( 4cogumelo4 4devagar4 +1

comer( 4comida de cachorro4 4rapido4 +1



41/160

In"cio dos tra!al#os 4'

%nternacionali+ao

A Fnternacionalizao o processo !ue deia uma aplicao

preparada para receber tradues. (o *ord+ress significa marcar os

tetos padro dos temas !ue devero ser traduzidos de um modo especial.

A internacionalizao tambm con&ecida como i0Hn por possuir 0H letras

entre o i e o n.

A traduo dos termos feita com o uso do gettet) biblioteca !ue no

+7+ 2 permitida por padro em suas etensesP e o *ordpress faz usodesse artif#cio.

ArBuivos PCT

gettet percorre os ar!uivos do sistema indicados pelo editor Q

procura de itens previamente preparados para traduo) a!ueles onde

eistir uma c&amada para a biblioteca.

Ao encontrar as entradas de traduo ele etrai as informaes

gerando seu padro de traduo dos ar!uivos +, eemplificado abaio'

Exemplo

B: 0p-content/theme/vitrine/pagephp:,

mgid "%dit"

mgtr "%ditar"

ArBuivos PC

+ara traduzir temas) plugins e o prprio *ord+ressP cada tradutor

especifica nas lin&as msgstr a traduo para o idioma pretendido.

resultado dessa traduo um ar!uivo + no mesmo formato de



42/160

In"cio dos tra!al#os 4(

um ar!uivo +,) porm com cabeal&os espec#ficos e obviamente as

tradues editadas.

ArBuivos C

Ao gerar um ar!uivo + de traduo criado automaticamente um

ar!uivo 8) do tipo binrio) !ue carrega consigo todas as entradas e

tradues num formato ade!uado para rpida etrao das informaes

traduzidas.

!riando entradas

+ara tornar um teto traduz#vel) adicione ele dentro das funes de

traduo. As mais comumente utilizadas so'

Atribuindo o valor da tradu%&o a uma varivel

8texto = **(4Dy text4+1

-Dibindo o teDto diretamente em tela

*e(4Dy text4+1

// %e Eltimo recuro equivalente a:

echo **(4Dy text4+1

Informe os te1tos sem $so de #ara#teres espe#iais o$ a#ent$a()opara evitar erros posteriores. 3m nosso proeto $tilizarei termos emingl*s para desenvolver o tema. 4esse modo ao final teremos otema #ompleto em dois idiomas5



43/160


Criando um template -eb

%om base nos *ireframes criados podemos enfim comear a

programar nosso tema. +rimeiramente criaremos apenas um ,emplate

$eb. ,emplate o modelo a ser utilizado) seria o mesmo !ue ,ema) porm

este ltimo mais espec#fico tratando dos templates preparados para uso

com o *ord+ressP en!uanto !ue o primeiro possui apenas formataes

$eb sem interveno de funes de !ual!uer %8;.

%riaremos um ar!uivo inde.p&p apenas com marcaes em 7,89

!ue nos permita) logo em seguida com a2uda do %;;) obter a formatao

pretendida. Ao programar no se es!uea dos padres estudados.

Visualizao da inde!"p#p em um na$egador %e&



44/160


indeD.php

Demos a nitida separao do contedo em camadas) ao mel&or estilo

,ableless) cada uma com um identificador nico >id? e alguns elementos

acompan&ados de classes >class? para facilitar suas formataes.

stle.css

estilo esplorado traz de modo compacto um reset de in#cio. Gssa

simples instruo faz com !ue >de modo superficial? todos os navegadores

ten&am um ponto em comum na definio de sua fol&a de estilos.

Tomaremos esses ar'$ivos #omo base para a #ontin$a()o dodesenvolvimento.

Para fins did%ti#os e de fi1a()o do #onte6do altamente



45/160

In"cio dos tra!al#os 4#

re#omend%vel '$e vo#* peg$e os ar'$ivos e os altere en'$antoe1e#$ta a leit$ra do livro.



46/160

Parte III!onstru%&o do tema


47/160

Construo do tema 4*

s temas *ord+ress ficam alo2ados na pasta $p-contentRt&emesR)

partindo da pasta de instalao do %8;. %ada tema possui ainda uma

pasta dentro da pasta de temas e dentro dela todos os seus ar!uivos de

imagem) estilo) funes) etc.

s temas basicamente consistem de trs principais tipos de

ar!uivos) alm de imagens e ar!uivos @ava;cript) so eles'

stle.css

%ontrola a apresentao >design e laout? das pginas do site.

functions.php

Eunes opcionais

ArBuivos do tema =.php>

%ontrolam a forma como as pginas do site gerenciam as

informaes do banco de dados para ser eibido no site

&stilo

Alm de informaes de estilo %;; para o tema) stle.css fornece

detal&es sobre o tema na forma de comentrios. "ois temas no podem

ter os mesmos dados em seus cabeal&os. %aso isso ocorra &aver

problemas ao selecionar o tema ou ativ-lo.

%omo 2 temos o ar!uivo) agora incluiremos como nosso cabeal&o

algumas informaes sobre o tema a ser criado'



48/160

Construo do tema 4

st+le,css

/G

6heme ame: .prendiH

Ierion: ,2

!ecription: !eenvolvido por DaHetto

.uthor: DaHetto

.uthor JKL: http://maHetto&log&r/

G/

cabeal&o de lin&as de comentrio no stle.css so necessrios

para o *ord+ress para ser capaz de identificar um tema e apresent-lo no

+ainel Administrativo acessando Aparncia W ,emas. (essa pgina estaro

dispon#veis todos os temas instalados.

+ara ser mel&or visualizado na escol&a de temas) abra seu template

e capture uma tela dele. %rie um ar!uivo de screens&ot.png com as

dimenses 1==p de largura por


49/160


50/160

Construo do tema #5

index,p#p

>

A funo languageMattributes eibe os atributos de linguagem para a

tag V&tmlWP identificando o idioma em uso e tambm a direo do teto

para a pgina. Ainda dentro da tag V&eadW) adicionaremos a seguinte

lin&a'

index,p#p

Gla define o perfil de relacionamento !ue ser respeitado) de acordo

com as normas do endereo citado. atributo UrelU descreve a relao do

atual documento com uma Jncora especificada pelo atributo &ref. valor

desse atributo uma lista de tipos de linNs separados por um espao

simples.

*ord+ress adota o padro :E( >:7,89 Eriends (et$orN? Kede

de amigos :7,89) !ue visa representar nos linNs as relaes &umanas.

Leralmente o atributo preenc&ido automaticamente pelo sistema.

%ontinuando a incluir informaes relevantes dentro da tag V&eadW)

nosso cabeal&o para servidores) adicionaremos as meta tags'

index,p#p


51/160

Construo do tema #'

&loginfo(4html*type4+ '>1 charet=" />

Demos o uso da funo bloginfo. Gla mostra informaes sobre o

blog) em sua maioria as !ue so definidas em pes Lerais do +ainel

Administrativo do *ord+ress >%onfiguraes W Leral?.

s parJmetros usados foram'

htmlEtpeY tipo do &tml em uso

charsetY codificao do teto

languageY idioma em uso

Itilizamos tambm a funo $pMtitle !ue) no caso) eibir o t#tulo da

pgina com um separador de teto localizado a direita do t#tulo.

Itilizando ainda o bloginfo) substituiremos o endereo do ar!uivo de

estilo) nome) descrio e linNs para pgina inicial do blog fec&ando

temporariamente nosso cabeal&o'



52/160


53/160

Construo do tema #

Dados no confiveis

(ote !ue imprimimos no atributo title dos dois linNs o nome e

descrio do blog respectivamente. contedo dessas variveis ser

descriminado por cada autor de blog. ;upondo !ue um autor !ual!uer

defina como nome ou descrio um valor contendo aspas poderia deiar o

documento invlido para as normas do *1% ou at mesmo significar um

desastre para o tema.

4evemos fi#ar atento '$ando imprimimos vari%veis do WordPress#omo atrib$tos de elementos 0T!7, geralmente os erros o#orremnos atrib$tos alt, title e val$e das tags

(esses casos utilizaremos o escMattr. A funo codifica >apenas uma

vez? os s#mbolos V W Z X U >sinal de menor) sinal de maior) UeU comercial)

aspas duplas) aspas simples?.

index,p#p



54/160

Construo do tema #4

Arquivo de !un)es

Im tema pode opcionalmente usar um ar!uivo de funes) !ue

reside no subdiretrio do tema e c&amado functions.p&p. Gste ar!uivo

basicamente funciona como um plugin) e se ele est presente no tema !ue

voc est usando) ele carregado automaticamente durante a inicializao

do *ord+ress >tanto para pginas do blog e pginas de administrao?.

De2a algumas das principais utilizaes deste ar!uivo' "efinir funes !ue sero utilizadas em diversos ar!uivos

diferentes do seu temaP

7abilitar recursos como os menus de navegaoP

%riar um menu de opes para o tema) dando opes para alterar

cores) estilos e outros aspectosP

.enus

*ord+ress incluiu um mecanismo fcil para uso de menus de

navegao personalizados em um tema. recurso trata-se) como o

prprio nome 2 diz) de se responsabilizar pela criao e edio de menus

para as verses mais recentes do *ord+ress.

+ara incorporar o suporte a menus em um tema basta incluiralgumas poucas lin&as de cdigo no ar!uivo functions.p&p'

(unctions,p#p

regiter*nav*menu( 4main-menu4 **( 4Dain Denu4 + +1

G no ar!uivo inde.p&p substituiremos a lista de linNs por'



55/160

Construo do tema ##

index,p#p

valor passado para location dever ser o mesmo !ue o

especificado anteriormente ao registrar o menu. "esse modo voc est

dizendo !ue a!uele menu) dever aparecer a!ui. %ontainer null) pois porpadro) adicionaria outra div) como 2 temos uma no ser preciso outra.

(o tiramos a div e a incorporamos atravs da funo) pois) se os

menus nao estiverem ativosP a formatao dos linNs ficar pre2udicada.

Aps implantar esse recurso) acesse seu painel de administrao do

*ord+ress. %li!ue em Aparncia W 8enus e gerencie seu menu como bem

entender. %onstru#do o menu) ele aparecer no local indicado.



56/160

Construo do tema #

*idebar

A barra lateral >;idebar? uma coluna vertical pouco mais estreita

!ue o espao para o contedo) e geralmente rec&eado de muita

informao sobre o blog. Gncontrado na maioria dos blogs *ord+ress) a

barra lateral geralmente colocada ao lado direito ou es!uerdo do

contedo) embora em alguns casos) podemos ver duas ou mais barras

laterais em diferentes posies no laout.

6avega%&o

Atualmente o ob2etivo principal da barra lateral de prestar

assistncia de navegao para o visitante. +ara isso so pro2etadas listas

de itens para a2udar os visitantes do seu blog a encontrar determinadas

informaes) contedo.,ais listas de navegao inclui %ategorias) +ginas) Ar!uivos) etc.

utra ferramenta de navegao !ue voc ver na barra lateral um

formulrio de busca !ue tambm servir para a2udar as pessoas a

encontrarem o !ue esto procurando no seu site.

;istas aninhadas clssico de temas *ord+ress usar listas anin&adas para

apresentar informaes da barra lateral. 9istas anin&adas so uma srie

de listas no-ordenadas) situadas uma dentro de outro.

A utilizao das listas anin&adas em sua barra lateral no

obrigatrio) no entanto o seu entendimento de grande importJncia dado

!ue) a maioria dos plugins e informaes desenvolvidas para serem



57/160

Construo do tema #*

publicadas na ;idebar) fazem uso desse artif#cio.

Widgets

*idgets so como plugins) mas desenvolvidos para forncer um

simples modo de agrupar vrios elementos no contedo da ;idebar sem

ter !ue alterar nen&uma lin&a de cdigo para aplic-los.

Atravs da aba Aparncia W *idgets podemos arrast-los e troc-los

facilmente de posio no menu lateral) e como resultado customizar aindamais o nosso tema. +ara efetivar !ual!uer edio atravs da aba de um

$idget preciso clicar sobre o respectivo boto salvar) caso contrrio ela

no ser aplicada.



58/160

Construo do tema #

Personalizando a Sidebar

%omo base em todos esses con&ecimentos) vamos agora atualizar o

contedo de nossa ;idebar. "entro do formulrio de busca informe como

valor do atributo action o endereo inicial do blog e o valor do campo de

pes!uisa'

index,p#p

%om as alteraes) sempre !ue submetido o formulro redirecionar

para a pgina inicial do blog e en!uanto &ouver uma pes!uisa ativa o valorser eibido na caia de teto para pes!uisa. primo passo preparar

a barra lateral para receber os *idgets.

(unctions,p#p

regiter*ide&ar( array(

name4 => **( 4Dy Tide&ar4 +

4id4 => 4my-ide&ar4

4&efore*0idget4 => 44

4after*0idget4 => 44

4&efore*title4 => 44

4after*title4 => 44 +

+1



59/160

Construo do tema #,

%om ela registraremos uma rea para *idgets com os atributos

descritos. Doltando ao inde.p&p) logo abaio do formurio de busca

substitua a lista criada por'

index,p#p

A funo dnamicMsidebar ir imprimir no referido espao o contedo

!ue ser gerenciado pelos *idgets e retornar verdadeiro ou falso de

acordo com a presena ou no deles. Eazemos a verificao e eibimos

uma lista com o Ar!uivo do blog separado por ms de modo a no deiar o

espao vazio caso o usurio nao ten&a incluido nen&um $idget pelo painel.



60/160

Construo do tema 5

/odap

As opes para trabal&ar com o rodap so vrias. S poss#vel

verificarmos a presena de listas de linNs) not#cias) tetos e muita

informao nesse espao. Ima prtica bastante usada em *ord+ress

realizar a preparao do rodap como ;idebars auiliares e registr-las tal

como fora mostrado no item anterior permitindo a insero de *idgets.

8antendo o clssico padro de eibir apenas os crditos no rodap)anteriormente estipulamos o contedo !ue nosso rodap teria. Agora

vamos adapt-lo ao *ord+ress possibilitando a traduo do teto

informado.

index,p#p

A funo printf do +7+) seu uso altamente recomendado em

circunstJncias como a demonstrada por facilitar a formatao dos tetos a

serem eibidos. Gm nosso caso) o primeiro identificador [s eibir o linNpara o site do *ord+ress) e o segundo) o linN para o site do

desenvolvedor.



61/160

Construo do tema '

#rabal"ando o conte0do

A partir desse ponto comearemos a integrar o contedo do nosso

>antigo? template com as funes do *ord+ress. contedo do blog

basicamente ser composto pelos posts) caracterizados pelas suas

informaes como t#tulo) data) autor) contedo e classificao em tags e

categorias.

+ara conseguir o resultado esperado ser necessrio entender bemo funcionamento do 9oop do *ord+ress. 9oop nada mais !ue o lao

de repetio responsvel por eibir os posts do blog.

;oop

9oop usado pelo *ord+ress para eibir cada uma de suas

postagens. Isando o 9oop) o *ord+ress eecuta os processos de cadauma das mensagens a serem eibidas na pgina atual e os formata de

acordo com os critrios especificados. ual!uer cdigo 7,89 ou +7+

colocado no lao ser repetido em cada post.

Exemplo


62/160

Construo do tema (

Acabamos de dizer ao nosso tema para verificar a presena de

contedo. ;e eistem contedos a serem eibidos) en!uanto &ouverP

mostre-me os posts um a um at !ue no &a2a mais. ;e no eistir

contedo mostraremos uma mensagem de erro na tela informando a

ausncia do contedo.

The e FetEthe

Ima das grandes vantagens das funes do *ord+ress

2ustamente a capacidade de entendimento !ue ela nos proporciona.

ual!uer pessoa) com um n#vel bsico de ingls) consegue entender o

funcionamento !ue est impl#cito a cada funo. +or eemplo) a eibio

dos t#tulos dos posts com o respectivo linN para ele'

index,p#p

A funo t&eMpermalinN eibe o linN permanente >+ermalinN? para o

post) en!uanto a t&eMtitle eibe o t#tulo do postP respectivamente nos locais

onde esto especificadas.

(o entanto algumas vezes no !ueremos eibir diretamente as

informaes) mas sim transmit#-las ao +7+ para tratamento e somentedepois enviar para impresso em tela. (esses casos) a maioria das funo

t&eM possuem um e!uivalente getMt&eM) como a utilizada para eibir o

nome do autor do post) destacada abaio'



63/160

Construo do tema

index,p#p

As funes t&e e getMt&e possuem basicamente o mesmo

funcionamento. As funes t&eM devero estar dentro do loop. As funes

getMt&eM variam) algumas devem estar dentro do loop e outras recebem

identificadores de post como parJmetro.



64/160

Construo do tema 4

Plu$in AP% 1oo2s

Basicamente os &ooNs so aes onde poderemos c&amar outras

aes) os con&ecidos callbacNs. "essa maneira sempre !ue determinada

ao for eecutada no *ordpress) uma funo definida por voc poder

ser c&amada. Gsses Uganc&osU >7ooNs? nos permitem personalizar ainda

mais os temas com instalao de plugins e material de terceiros.

*ord+ress ao deparar-se com algum desses ganc&os) interrompeseu processamento e verifica se eiste alguma funo para ele para ele

fazer alguma coisa. %aso afirmativo) a funo eecutada >podendo ser

mais de uma? e o sistema continua seu processamento normal.

Gistem dois tipos de 7ooNs' Action e Eilter >Ao e Eitro?

Actions

%&ama a funo em determinado ponto. Isando o ganc&o

UadminMfooterU) sempre !ue o rodap do painel administrativo for

eecutado) a funo para ele passada tambm ser.

0ilters

+assa argumentos) contedo para a referida funo de ganc&o.

"esse modo a funo pode usar a informao transmitida para realizar suatarefa. %om isso podemos >por eemplo? passar uma funo ao fitro

t&eMcontent !ue colo!ue tags de negrito para o termo *ord+ress) sem

alterar de fato a funcionalidade de eibir o contedo.

Fntroduziremos alguns 7ooNs espec#ficos dentro do nosso tema'

8pEhead

Acompan&a o elemento V&eadW de um tema no ar!uivo &eader.p&p.



65/160

Construo do tema #

8pEfooter

Aparece no footer.p&p) logo antes do fec&amento da tag VRbodW.

Disualmente no tero nen&um efeito sobre o tema) porm a

ausncia desses poder implicar em no funcionamento e srios

problemas com plugins e outras funes !ue podero ser implementadas

futuramente.



66/160

Parte I8-strutura do tema


67/160

Estrutura do tema *

Dimos at a!ui como o inde.p&p fle#vel e pode ser usado

incluindo todas as referncias de cabeal&o) sidebar) rodap) contedo)

categorias) ar!uivo) busca) erro e !ual!uer outra pgina criada no

*ord+ress.

+or outro lado ele pode ser dividido em mdulos) ar!uivos menores e

mais espec#ficos em sua funo. %ada um desses ar!uivos fazendo

apenas parte do tema total. %aso algum desses ar!uivos no este2a

presente entre os demais ar!uivos do tema) o *ord+ress utiliza um

ar!uivo padro respeitando as normas de sua 7ierar!uia.

1ierarquia

s ar!uivos .p&p do tema >separadamente con&ecidos como

templates ou modelos? se encaiam como peas de um !uebra-cabea

para gerar as pginas em seu blog. Alguns so usados em todas as

pginas da $eb >cabeal&o) rodap e estilos?) en!uanto outros so usados

somente em condies espec#ficas >pginas personalizadas?.

*ord+ress utiliza informaes contidas no interior de cada linN em

seu blog para decidir !ual o modelo ou con2unto deles sero utilizados para

eibir a pgina. ,endo como ponto de partida um verificador para todos os

tipos de consulta !ue decide !ual tipo de pgina est sendo solicitado) os

modelos so ento escol&idos >dependendo da disponibilidade? na ordemsugerida pela 7ierar!uia do *ord+ress.

+ara ilustrar o funcionamento da &ierar!uia) supomos !ue o seu blog

est instalado em &ttp'RRmeublog.comR e um visitante clica em um linN !ue

o direcionar para uma pgina de categoria) sendo essa c&amada U8in&a

categoriaUP algo como &ttp'RRmeublog.comRcategoriaRmin&a-categoriaR.



68/160

Estrutura do tema

'ierar(uia de modelos do WordPress

Aps a re!uisio o *ord+ress ir procurar por um modelo na pasta

do tema atual !ue corresponde ao slug da categoria) categor-min&a-

categoria.p&p. %aso no encontre) o primo passo procurar pelo

identificador >F"? da categoria. ;e a categoria de identificao 0) o

*ord+ress procura por um modelo categor-0.p&p. ;e esse no eistir) o*ord+ress procura pelo modelo genrico) categor.p&p) seguido do

arc&ive.p&p e finalmente no inde.p&p.

inde.p&p portanto eibido sempre !ue os demais modelos no

forem encontrados por isso de suma importJncia e obrigatrio em todos

os temas *ord+ress.



69/160


70/160

Estrutura do tema *5

searc#(orm,p#p

(ooter,p#p

index,p#p



71/160


72/160

Estrutura do tema *(

%ncluindo arquivos

Agora !ue sabemos o !uo fcil pode ser nosso trabal&o

reaproveitando UpedaosU do nosso tema) vamos etender essa prtica

para !ual!uer ar!uivo +7+. +ara isso devemos ter um ar!uivo com as

instres dese2adas denominado slug.p&p 2unto com os demais ar!uivos

do tema. +ara incluir as referidas instrues em um outro ar!uivo basta

informar'

Exemplo

%riaremos para esse passo um ar!uivo dizendo !ue a informao

procurada no eiste) ou se2a) o usurio fez uma consulta !ue no teve

resultados e precisamos inform-lo disso. Assim sendo edite'

index,p#p

// u&titua

// por

%riaremos um ar!uivo c&amado no-results.p&p e nele colocaremos a

informao !ue dese2amos eibir) copie a lin&a substitu#da dentro desse

ar!uivo.



73/160

Estrutura do tema *

"a mesma forma faremos com o contedo dos posts. %riaremos um

ar!uivo c&amado loop.p&p e nele colocaremos todas as instrues do

9oop !ue estavam no inde.p&p. +or outro lado) nesse ltimo ar!uivo)

substituiremos as instrues por sua c&amada. De2a como ficou o

inde.p&p final'

index,p#p



74/160

Estrutura do tema *4

*in$le3p"p

Fremos agora preparar o ar!uivo !ue receber os posts !uando

visualizados separadamente e tambm poder trabal&ar com os

comentrios) item de muit#ssima importJncia para !ual!uer blog.

%opie o ar!uivo loop.p&p e renomeie para single.p&p e inclua os

ar!uivos de cabeal&o) sidebar e rodap nos respectivos lugares. (o se

es!uea da div de contedo !ue foi deiada no inde.p&p."entro da div entr-meta) logo aps eibir o nome do autor)

incluiremos um linN !ue nos levar at os comentrios utilizando a funo

commentsMpopupMlinN.

single,p#p

+or fim ao final da div com classe post) incluiremos a funo

commentsMtemplate.

single,p#p

+ronto) seu sistema de comentrios est ativo e pronto para ser

usado) no entanto algumas alteraes no %;; sero necessrias para

deiar a listagem e o formulrio mais bem apresentveis.



75/160

Estrutura do tema *#

st+le,css

commentlit ; margin: ,2px 2 2px 21

commentlit li ; lit-tyle: enhum1

commentlit li ul ; margin-left: 92px1

commentlit li comment-&ody ; &ac5ground: Beee1 padding: ,2px1

margin-&ottom: ,2px1

commentlit img ; float: left1 margin: px1

commentlit p ; clear: &oth1 margin: ,px 21 color: B1

reply ; text-align: right1

Bcommentform ; margin-top: ,px1

Bcommentform p ; margin-&ottom: Xpx1

)istagem dos coment*rios do tema Aprendiz



76/160

Parte 8Aprimoramentos


77/160

%primoramentos **

;abemos !ue nosso tema suporta eibir mais de um post na inde.

nmero de posts a serem eibidos por pgina configuravel pelo painel

em %onfiguraes W 9eitura. (o entanto !uando a !uantidade de posts

eistentes no blog ultrapassar esse nmero em nosso tema atual) no

ter#amos condies de ver os posts mais antigos.

+ara resolver a situao criaremos uma paginao para !ue nosso

tema nao deie de eibir nen&um post) por mais antigo !ue ele se2a. (o

ar!uivo loop.p&p aps o final do 9oop incluiremos'

loop,p#p

+ara mel&or eibir em tela) no stle.css tambem incluiremos'

st+le,css

/G avega#$o G/

Bnavigation a ; &ac5ground: Bc991 color: Beee1 padding: 3px1

Bnavigation a:hover ; &ac5ground: BfcX1 color: B1



78/160

%primoramentos *

/esumo

(o entanto muitas vezes ao eibir a listagem dos posts o visitante

no clica para ver o post separadamente pois 2 o leu por completo. Ima

ecelente prtica muito utilizada a de eibir apenas os resumos nas

paginaes e apenas no single.p&p eibir o restante do post.

+ara isso no loop.p&p ao inves de informar t&eMcontent) responsvel

por eibir o contedo) informe t&eMecerpt.

loop,p#p

(essas circunstJncias) caso o campo resumo foi preenc&ido durante

a edio do post ele ser eibido) seno um nmero limitado de palavrasdo teto original sero epostos seguido de um continuador de teto \...]

*earc"

Ainda tratando de paginao de posts) criaremos agora o ar!uivo

searc&.p&p !ue ser eibido !uando uma busca for eecutada. %opie o

ar!uivo inde.p&p e renomeie para searc&.p&p



79/160

%primoramentos *,

searc#,p#p

Fnclua as seguintes formataes no stle.cssSt+le,css

/G .rquivo G/Barchive ; margin-&ottom: 9px1 &order: 21Barchive pan ; color: Bc991 text-decoration: underline1

Conditional #a$s

As tags condicionais podem ser usadas em seus modelos paramudar o contedo e como ele eibido em uma certa pgina dependendo

em !uais condies a pgina se encontra. Fsto ) fazemos a verificao se

a pgina acessada determinada pgina) e de acordo com a resposta

obtida realizaremos ou no certas instrues.

As tags verificam se uma determinada condio satisfeita) e em

seguida) retorna verdadeiro ou falso. Algumas das tags condicionais

geralmente usadas so' isMsingle) isM&ome e isMpage !ue verificam se apgina atual a de posts) inicial ou uma pgina respectivamente.



80/160


81/160

%primoramentos '

printf( **( 4.uthor: V4 + 8author->diplay*name

+1

ele

*e( 4Plog archive4 +1

'>



82/160

%primoramentos (

Posts e p$inas

+osts so como not#cias !ue voc escreve com um certa

periodicidade e so mostrados no blog em ordem cronolgica reversa) ou

se2a) os mais novos antes dos mais antigos. As pginas por sua vez

contm uma informao esttica sem relevJncia com a data na !ual foi

criada) mas sim pelo seu contedo em si !ue geralmente trata !uestes

sobre o site ou seus mantenedores.

"evido a essa clara discrepJncia de dinJmica e relevJncia baseada

na data de sua publicao atribu#da a pginas e posts) apenas esses

ltimos so incorporados no feed. Gm uma eplanao simblica seria

como se o blog se mantivesse dentro de uma lin&a do tempo determinada

pelos posts e as pgina coeistiriam do lado de fora dessa lin&a.

+ara fins de organizao do contedo as pginas podem possuir

uma &ierar!uia entre si !uando marcado suas respectivas pginas pai >oume? e ordem na caia ^Atributos de pgina_ da tela de edio. +or outro

lado os posts possuem um sistema mais compleo utilizando-se de tags e

categorias.



83/160

%primoramentos

.odelos de P$inas

*ord+ress pode ser configurado para usar diferentes modelos de

pgina para pginas diferentes. +ara alternar o modelo de pgina)

en!uanto edita uma pgina !ual!uer pelo painel de administrao)

selecione o modelo na lista c&amada 8odelo. ar!uivo padro !ue eibir

o contedo das pginas a page.p&p.

!riando um novo modelo de pgina

s ar!uivos de modelo da pgina devero estar na pasta do seutema. Doc poder criar um ar!uivo com !ual!uer nome) eceto os nomes

reservados do *ord+ress como no caso do &eader) footer) sidebar e afins.

+ara criar um modelo basta inserir no cabeal&o da pgina a instruo'

Exemplo

/G 6emplate ame: ome do modelo G/

As etapas a seguir sero feitas para criarmos um modelo de eibio

das nossas pginas'

%opie a single.p&p e renomeie para page.p&p

Apague a div de classe post-utilit) pois pginas no tem categoria

nem tags.



84/160

%primoramentos 4

P$inas adicionais

%riaremos agora dois modelos de pginaP um sem os comentrios e

outro sem a ;idebar.

Sem comentrios

%opie o ar!uivo page.p&p e renomeie para page-norepl.p&pP

+ara deiar a pgina sem comentrios apague a lin&a com a

instruo V/p&p commentsMtemplate>?P /W.

Sem Sidebar

%opie o recm criado ar!uivo page-norepl.p&p e o renomeie para

page-nosidebar.p&pP

+ara deiar a pgina sem ;idebar apague o getMsidebar>?P

(a div do contedo >id`XcontentX? tro!ue o identificador paracontent-fullP

Gdite o %;;.

st+le,css

Bcontent-full ; 0idth: M22px1 padding: 92px1 &ac5ground: Bfff1



85/160

%primoramentos #

P$ina 454

+or vezes comum acontecer de voc apagar alguns posts ou o

visitante digita um endereo invlido para teu blog e uma pgina de erro

aparece. (a atual situao do nosso tema) a mensagem !ue eibida a

contida no ar!uivo no-results.p&p.

P*gina de erro do T%itter

(o entanto) tal ar!uivo e mensagem referem-se a ausncia de

contedo e no a ineistncia dele) isto ) o endereo eiste) porm no

tem informaes a serem eibidasP en!uanto !ue para erros do tipo 3=3 o

endereo invlido) no eiste.

%opie o ar!uivo inde.p&p

Kenomeie para 3=3.p&p

Apague a instruo V/p&p getMtemplateMpart>UloopU?P /W e no local

informe sua mensagem de erro'

-.-,p#p



86/160

%primoramentos

Classes do #ema

Fmplementando as seguintes funes de classes para 7,89) o

*ord+ress gera automaticamente atributos de classe para bod) post e

elementos dos comentrios. +ara classes de posts) funciona apenas

dentro do 9oop.

#eader,p#p

loop,p#p) single,p#p) page,p#p) ,,,

"essa forma voc poder customizar o %;; como bem entender e

mel&or aproveitar) por eemplo) para determinar titulos de uma categoria

na cor verde basta incluir na fol&a de estilo'

Exemplo

category-lug-da-categoria h, ; color: B2c21



87/160

%primoramentos *

6avascript

Ima forma segura de acrescentar cdigos 2avascripts a um tema

*ord+ress registrando-os inicialmente via pgina de funes do tema) e

posteriormente incluindo as c&amadas para os registros onde necessrio)

em geral no &eader.p&p.

Gsse processo apenas inclue o script se ele 2 no ten&a sido

inclu#do) e tambm capaz de carregar scripts embutidos do *ord+ress)como faremos com o 2uer no &eader.p&p'

#eader,p#p

0p*enqueue*cript("Wquery"+1

Kepare !ue o script foi adicionado com sucesso por fazer parte da

biblioteca de scripts do *ord+ress como mencionado. Alm desse)

incluiremos tambm um script responsvel por permitir enviar umaresposta aos comentrios sem a necessidade de recarregar a pgina.

Earemos isso da seguinte forma logo abaio da insero da 2uer'

#eader,p#p

if ( i*ingular(+ get*option( 4thread*comment4 + +

0p*enqueue*cript( 4comment-reply4 +1



88/160

%primoramentos

2egistrando scripts

8uitas vezes precisamos incorporar cdigos 2avascript ao tema

criado para termos uma maior interao com o visitante e os elementos

7,89 do laout. Damos incluir um script utiizando o modo seguro do

*ord+ress. +ara isso faa o registro dentro do ar!uivo de funes do

tema'

(unctions,p#p

0p*regiter*cript( 4validator4

get*&loginfo( 4template*directory4+ 4/W/validatorW4

array( 4Wquery4 + 4,24 +1

(ote !ue especificamos como terceiro parJmetro) a obrigatoriedade

do script 2uer ser carregado antes do nosso. Fsso por!u iremos fazer

uso da biblioteca e se ea no estiver presente) nosso cdigo no

funcionar.

Galida%&o do formulrio

script proposto ir fazer a validao do formulrio de comentrios)

antes dele ser enviado. +erceba !ue foi criado uma pasta dentro da pasta

do tema com o nome 2s) e dentro dela incluimos o ar!uivo validator.2s



89/160

%primoramentos ,

2 obetivo do tpi#o il$strar o modo de inserir s#ripts em se$tema, por isso o #digo do ar'$ivo validator.s n)o ser% p$bli#ado.

Para obt*&lo abra a pasta aprendiz/s do ar'$ivo ane1o a este#ap9t$lo.

script verificador muito interessante de ser utilizado pois reduz

ainda mais o nmero de spams nos seus comentrios. Ealta agora incluir o

script ao tema. mel&or local para tal tarefa dentro do ar!uivo do

cabeal&o. %omo a verificao somente ser usada se o formulrio decomentrios estiver sendo eibido e &ouver a possibilidade de respostaP

fizemos uma pe!uena verificao para saber se a pgina re!uisitada

atende aos re!uisitos.

#eader,p#p

if ( i*ingular(+ get*option( 4thread*comment4 + +;

0p*enqueue*cript( 4comment-reply4 +1

0p*enqueue*cript( 4validator4 +1

+ara tornar a eibio do erro mais c&amativa iremos incluir algumas

informaes em nossa fol&a de estilos.

st+le,css

error ; font-0eight: &old1 color: Bc991



90/160

%primoramentos ,5

!ol"a de estilos

resultado final da formatao de um tema *ord+ress depende

muito das fol&as de estilo %;;. %om o uso delas voc tem em suas mos

muitas opes de configurar um laout da maneira mais conveniente.

8esmo criando tudo do zero preciso fazer uso) ou ento padronizar)

algumas formataes !ue so inerentes ao *ord+ress e seu

funcionamento.

!lasses do WordPress

*ord+ress incui automaticamente vrias classes para as imagens

e os elementos de bloco visando padronizar funes bsicas) como por

eemplo o alin&amento de imagens dentro dos posts atravs das classes

alignleft) aligncenter) alignrig&t e alignnone.(o caso das imagens) alm da !uesto do alin&amento) elas ainda

necessitam de formatao para suas respectivas legendas. Derifi!ue as

classes para tal formatao'

st+le,css

aligncenter divaligncenter ; diplay: &loc51 margin: 2 auto1

alignleft ; float: left1

alignright ; float: right1

/G . intru#Ze a&aixo $o para formatar a legenda G/

0p-caption ;

0p-caption img ;

0p-caption p0p-caption-text ;



91/160

%primoramentos ,'

2egistrando estilos

"a mesma forma !ue registramos e utilizamos nossos scripts)

podemos tambm incluir novos ar!uivos %;; ao nosso tema) alm do

stle.css. Leralmente iremos adotar essa prtica !uando o ar!uivo de

estilo principal estiver muito etenso e precisemos divid#-los em partes

menores para mel&orar o entendimento do mesmo. u ento !uando

dese2amos criar estilos adicionais ao 2 eistente.

(unctions,p#p

0p*regiter*tyle( 4cutom4 get*&loginfo( 4template*directory4+

4/c/cutomc4 +1

custom,css

Bmenu ; &ac5ground: BXXX1 color: B1

Bmenu ul li a ; color: Bfff1

Bmenu ul li a:hover ; color: Bff21

"entro do nosso cabeal&o c&amarei o ar!uivo apenas !uando for

eibida uma pgina de busca. +ara surtir efeito preciso ainda !ue a

declarao este2a sendo eibida aps a insero do estilo principal.

#eader,p#p

if ( i*earch(+ + 0p*enqueue*tyle( 4cutom4 +1

Apesar do nome dado ao identifi#ador do estilo ser o mesmo '$e odo ar'$ivo, essa n)o $ma regra a ser seg$ida. 2 termo '$e ir%ser re#$perado ser% o do identifi#ador.

A pr%ti#a foi adotada por evitar #onf$ses desne#ess%rias denomen#lat$ra. 2 mesmo alerta vale tambm para os s#ripts.



92/160


93/160

%primoramentos ,

Ao final cli!ue em para confirmar suas aesP

Eeito isso cli!ue agora em %atlogo W Atualizar a partir do cdigo

fonteU >ou no terceiro #cone) com o globo desen&ado? para o +oGdit

capturar todas as entradas dos ar!uivos eistentes no endereo

informado e mostr-las em tela.

Traduzindo

%licando sobre determinado teto) embaio aparecero dois campos

de teto' o primeiro deles com o teto original e o segundo) editvel)

aguarda o teto traduzido. Apertando Alt % !uando escol&er determinado

termo) este repetido para a traduo. %aso eista dvida !uanto a

traduo de uma certa palavra) aperte Alt I para marc-la ou desmarc-

la como incerta dependendo de sua atual situao.

Kealizada a traduo de todos os termos) no ar!uivo de funesfunctions.p&p inclua'

(unctions,p#p

load*theme*textdomain( 4!efault4 6%DOQ.6%O.6S4/lang4 +1



94/160

%primoramentos ,4

PoEdit com todos os termos traduzidos



95/160

Considera&es /inais ,#

!onsidera%es 0inais

+arabns Agora voc 2 est apto a entrar de vez no universo de

desenvolvimento do *ord+ress. %om os conceitos a!ui vistos voc

con&eceu a ferramenta) todo seu funcionamento de forma geral e 2

tornou-se capaz de produzir seu prprio material com base em um

template $eb.

Doc perceber !ue tambm acabou de aprender a lidar maisfacilmente com eventuais atualizaes) temas) plugins e reparos ao seu

sistema !uando for necessrio.

Ao continuar trabal&ando com o *ord+ress voc ver ainda o !uo

fcil implementar recursos !ue possuem enormes atrativos visuais e

funcionais ao teu trabal&o sem complicaes) em poucas lin&as de cdigo)

baseado nas informaes contidas nesse livro.

+ara facilitar sua busca por informaes !uando utilizar o livro como

referncia) a seguir temos uma listagem com as funes utilizadas no

tema. ,odas elas bem eplicadas e detal&adas com suas respectivas

descries) modo de uso) parJmetros e valores retornados.



96/160

Ap1ndice A: 2efer1ncia de fun%es


97/160

%p0ndice %1 2e(er0ncia de (un&es ,*

77

)escri%&o

Im alias para translate. Ketorna a string traduzida para o termopassado como parJmetro.

Hso

**( 8text 8domain +

ParImetros

8text (tring+ (o&rigatrio+

,eto a ser traduzido+adro' (en&um

8domain (tring+ (opcional+

"om#nio de onde o teto traduzido ser recuperado

+adro' U"efaultU

2etorna

>string? ,eto traduzido



98/160

%p0ndice %1 2e(er0ncia de (un&es ,

7e

)escri%&o

Gibe a string traduzida para o termo passado como parJmetro.

Hso

*e( 8text 8domain +

ParImetros

8text (tring+ (o&rigatrio+

,eto a ser traduzido+adro' (en&um

8domain (tring+ (opcional+

"om#nio de onde o teto traduzido ser recuperado+adro' U"efaultU

2etorna

(ada



99/160

%p0ndice %1 2e(er0ncia de (un&es ,,

blo$info

)escri%&o

8ostra informaes sobre o blog) em sua maioria as !ue so definidasnas pes Lerais do +ainel Administrativo do *ord+ress.

Hso

&loginfo( 8option +

ParImetros

8option (tring+ (Apcional+

+alavra-c&ave !ue referencia a informao !ue se dese2a obter.+adro' name

9ista de opes' name) description) adminMemail) url) $purl)stles&eetMdirector) stles&eetMurl) templateMdirector) templateMurl)

atomMurl) rss


100/160


101/160

%p0ndice %1 2e(er0ncia de (un&es '5'

comments7popup7lin2

)escri%&o

Gibe um linN para uma 2anela popup ou um linN normal paracomentrios.

Hso

comment*popup*lin5( 8Hero 8one 8more 8c*cla 8none +1

ParImetros

8Hero (tring+ (opcional+

,eto mostrado !uando no & comentrios+adro' U(o %ommentsU.

8one (tring+ (opcional+

,eto mostrado !uando & um nico comentrio+adro' U0 %ommentU.

8more (tring+ (opcional+

,eto mostrado !uando & mais de um comentrio. s#mbolo U[U substituido pelo nmero de comentrios+adro' U[ %ommentsU.

8c*cla (tring+ (opcional+

%lasse %;; para o linN+adro' (en&um

8none (tring+ (opcional+

,eto mostrado !uando comentrios esto desabilitados.+adro' U%omments ffU.

2etorna

(ada



102/160


103/160

%p0ndice %1 2e(er0ncia de (un&es '5

d8namic7sidebar

)escri%&o

Fmprime o contedo de cada um dos *idget ativos

Hso

dynamic*ide&ar( 8index +

ParImetros

8index (integerUtring+ (opcional+

(ome ou F" da ;idebar+adro' 0

2etorna

>boolean? Derdadeiro se encontrou algum *idget e falso para o

contrrio.



104/160


esc7attr

)escri%&o

%odifica V W Z X U >sinal de menor) sinal de maior) UeU comercial) aspasduplas) aspas simples?

Hso

ec*attr( 8texto +

ParImetros

8texto (tring+ (o&rigatrio+

teto a ser codificado+adro' (en&um

2etorna

>string? teto codificado com entidades 7,89



105/160

%p0ndice %1 2e(er0ncia de (un&es '5#

$et7aut"or7posts7url

)escri%&o

Ketorna o permalinN do autor com base no identificador passado

Hso

get*author*pot*url( 8id +

ParImetros

8id (integer+ (o&rigatrio+

F" do usurio !ue dese2a se obter o linN+adro' (en&um

2etorna

>string? IK9 para a pgina de posts do referido usurio



106/160


$et7da87lin2

)escri%&o

Ketorna a IK9 de ar!uivo de um dia espec#fico

Hso

get*day*lin5( 8year 8month 8day +

ParImetros

8year (&ooleanUinteger+ (opcional+

ano. Fnforme UU para o ano atual.+adro' (en&um

8month (&ooleanUinteger+ (opcional+

ms. Fnforme UU para o ms atual.+adro' (en&um

8day (&ooleanUinteger+ (opcional+

dia. Fnforme UU para o dia atual.+adro' (en&um

2etorna

>string? Gndereo do linN do dia



107/160

%p0ndice %1 2e(er0ncia de (un&es '5*

$et7footer

)escri%&o

Fnclui o ar!uivo footer.p&p do tema atual

Hso

get*footer( 8name +

ParImetros

8name (tring+ (opcional+

Gecuta a c&amada para footer-name.p&p.+adro' (en&um

2etorna

(ada



108/160


109/160

%p0ndice %1 2e(er0ncia de (un&es '5,

$et7mont"7lin2

)escri%&o

Ketorna a IK9 de ar!uivo de um ms espec#fico

Hso

get*month*lin5( 8year 8month +

ParImetros



8month (&ooleanUinteger+ (opcional+

ms. Fnforme UU para o ms atual.+adro' (en&um

2etorna

>string? Gndereo do linN do ms



110/160

%p0ndice %1 2e(er0ncia de (un&es ''5

$et7option

)escri%&o

Ima maneira segura de se obter valores para uma opo recuperadado banco de dados.

Hso

get*option( 8ho0 8default +

ParImetros

8ho0 (tring+ (o&rigatrio+

(ome da opo a ser recuperada+adro' (en&um

8default (mixed+ (opcional+

valor padro retornado se a funo no retorna nen&um valor

+adro' false

2etorna

>mied? valor da opo re!uisitada



111/160

%p0ndice %1 2e(er0ncia de (un&es '''

$et7searc"7form

)escri%&o

8ostra o formulrio de busca com base no ar!uivo searc&form.p&p seesse eistir.

Hso

getMsearc&Mform>?

ParImetros

(en&um

2etorna

(ada



112/160

%p0ndice %1 2e(er0ncia de (un&es ''(

$et7searc"7quer8

)escri%&o

Ketorna o termo de pes!uisa para a re!uisio atual) se uma busca foieecutada

Hso

get*earch*form(+

ParImetros

(en&um

2etorna

>string? ,ermo pes!uisado



113/160


114/160

%p0ndice %1 2e(er0ncia de (un&es ''4

$et7template7part

)escri%&o

%arrega ar!uivos eternos

Hso

get*template*part( 8lug 8name +

ParImetros

8lug (tring+ (o&rigatrio+

termo slug do ar!uivo a ser incu#do+adro' (en&um

8name (tring+ (opcional+

nome de um ar!uivo espec#fico+adro' (en&um

2etorna

(ada



115/160

%p0ndice %1 2e(er0ncia de (un&es ''#

$et7t"e7aut"or

)escri%&o

Kecupera o autor do post

Hso

get*the*author(+

ParImetros

(en&um

2etorna

>string? nome de eibio do autor do post



116/160

%p0ndice %1 2e(er0ncia de (un&es ''

$et7t"e7aut"or7meta

)escri%&o

Kecupera uma meta-informao do autor do post

Hso

get*the*author*meta( 8meta +

ParImetros

8meta (tring+ (o&rigatrio+

Fdentifica !ua informao do autor se dese2a obter+adro' (en&um

2etorna

>string? 8eta-informao do autor do post



117/160

%p0ndice %1 2e(er0ncia de (un&es ''*

$et7t"e7cate$or8

)escri%&o

Ketorna um arra de ob2etos) sendo cada um deles) uma categoria a!ual o post est incluso.

Hso

get*the*category( 8id +

ParImetros


identificador do post.+adro' post-WF" >o F" do post atual?

2etorna

>arra? As categorias do post



118/160


119/160

%p0ndice %1 2e(er0ncia de (un&es '',

$et7t"e7date

)escri%&o

Ketorna a data em !ue o post foi escrito respeitando o formato passadocomo parJmetro

Hso

get*the*date( 8d +

ParImetros

8d (tring+ (opcional+

Eormato de data+adro' formato de data escol&ido via painel administrativo >UEormatodas datasU em %onfiguraes W Leral?

2etorna

>string? "ata formatada



120/160

%p0ndice %1 2e(er0ncia de (un&es '(5

$et7t"e7ta$7list

)escri%&o

Lera um 7,89 contendo as tags associadas ao post atual) onde cadatag est linNada a respectiva pgina.

Hso

get*the*tag*lit( 8&efore 8ep 8after +

ParImetros

8&efore (tring+ (opcional+

,eto a ser inserido antes da string de retorno+adro' U,ags' U

8ep (tring+ (opcional+

;eparador !ue ser inclu#do entre os linNs

+adro' U) U

8after (tring+ (opcional+

,eto a ser inserido ao final da string de retorno+adro' (en&um

2etorna

>string? 9inNs 7,89 prontos para eibio



121/160

%p0ndice %1 2e(er0ncia de (un&es '('

$et7t"e7ta$s

)escri%&o

Ketorna um arra de ob2etos) sendo cada um deles) uma tag a !ualpertence ao post

Hso

get*the*tag(+

ParImetros

(en&um

2etorna

>arra? As tags do post



122/160

%p0ndice %1 2e(er0ncia de (un&es '((

$et7userdata

)escri%&o

Ketorna um ob2eto com as informaes referentes ao usurio cu2o F" passado para ele

Hso

get*uerdata( 8id +

ParImetros


Fdentificador do usurio !ue se dese2a obter informaes+adro' (en&um

2etorna

>ob2ect? Fnformaes vinculadas ao usurio



123/160

%p0ndice %1 2e(er0ncia de (un&es '(

$et78ear7lin2

)escri%&o

Ketorna a IK9 de ar!uivo de um ano espec#fico

Hso

get*year*lin5( 8year +

ParImetros



2etorna

>string? Gndereo do linN do ano



124/160


125/160


126/160


is7cate$or8

)escri%&o

Derifica se uma pgina de ar!uivo de %ategoria est sendo eibida

Hso

i*category( 8category +

ParImetros

8category (integerUtring+ (opcional+

F") t#tulo ou slug da categoria+adro' (en&um

2etorna

>Boolean? Derdadeiro ou falso para a condio



127/160

%p0ndice %1 2e(er0ncia de (un&es '(*

is7da8

)escri%&o

Derifica se uma pgina de ar!uivo de "ia est sendo eibida

Hso

i*day(+

ParImetros

(en&um

2etorna




128/160


is7"ome

)escri%&o

Derifica se a pgina inicial est sendo eibida

Hso

i*home(+

ParImetros

(en&um

2etorna




129/160

%p0ndice %1 2e(er0ncia de (un&es '(,

is7mont"

)escri%&o

Derifica se uma pgina de ar!uivo de 8s est sendo eibida

Hso

i*month(+

ParImetros

(en&um

2etorna




130/160


is7pa$e

)escri%&o

Derifica se uma pgina est sendo eibida

Hso

i*page( 8page +

ParImetros

8page (integerUtring+ (opcional+

F") t#tulo ou slug da pgina+adro' (en&um

2etorna




131/160

%p0ndice %1 2e(er0ncia de (un&es ''

is7sin$le

)escri%&o

Derifica se uma pgina de post est sendo eibida

Hso

i*ingle( 8pot +

ParImetros

8pot (integerUtring+ (opcional+

F") t#tulo ou slug do post+adro' (en&um

2etorna




132/160


133/160

%p0ndice %1 2e(er0ncia de (un&es '

is78ear

)escri%&o

Derifica se uma pgina de ar!uivo de Ano est sendo eibida

Hso

i*year(+

ParImetros

(en&um

2etorna




134/160


lan$ua$e7attributes

)escri%&o

Gibe os atributos de linguagem para a tag V&tmlW. Fdentifica o idiomaem uso e tambm a direo do teto para a pgina.

Hso

language*attri&ute( 8doctype +

ParImetros

8doctype (tring+ (opcional+

tipo &tml do documento U&tmlU ou U&tmlU.+adro' U&tmlU

2etorna

(ada



135/160

%p0ndice %1 2e(er0ncia de (un&es '#

load7t"eme7te9tdomain

)escri%&o

%arrega as strings traduzidas do tema

Hsoload*theme*textdomain( 8domain 8path +

ParImetros8domain (tring+ (o&rigatrio+

Fdentificador nico para recuperar as strings traduzidas+adro' (en&um

8path (tring+ (opcional+

%amin&o dos ar!uivos de traduo+adro' +asta do tema ativo

2etorna

(ada



136/160


ne9t7posts7lin2

)escri%&o

Fmprime um linN para o primo con2unto de posts dentro da consultaatual

Hso

next*pot*lin5( 8la&el 8max*page +

ParImetros

8la&el (tring+ (opcional+

,eto do linN+adro' U(et +age U

8max*page (integer+ (opcional+

9imita o nmero de pgina nas !uais o linN eibido

+adro' = Y ;em limite

2etorna

(ada



137/160

%p0ndice %1 2e(er0ncia de (un&es '*

post7class

)escri%&o

Kene e eibe classes para o elemento div do post

Hso

pot*cla( 8cla +

ParImetros

8cla (tring+ (opcional+

Ima ou mais classes para adicionar a lista de classes+adro' (en&um

2etorna

>string? 9ista de classes



138/160


previous7posts7lin2

)escri%&o

Fmprime um linN para o con2unto de posts anterior dentro da consultaatual

Hso

previou*pot*lin5( 8la&el 8max*page +

ParImetros

8la&el (tring+ (opcional+

,eto do linN+adro' UVV +revious +ageU

8max*page (integer+ (opcional+

9imita o nmero de pgina nas !uais o linN eibido

+adro' = Y ;em limite

2etorna

(ada



139/160


140/160


sin$le7ta$7title

)escri%&o

8ostra ou retorna o t#tulo da tag da pgina atual

Hso

ingle*tag*title( 8prefix 8diplay +

ParImetros

8prefix (tring+ (opcional+

,eto a ser retornado antes do t#tulo+adro' (en&um

8diplay (&oolean+ (opcional+

8ostra ou retorna o t#tulo da tag se verdadeiro ou falso+adro' true

2etorna

>nullstring? (ada ou t#tulo da tag



141/160

%p0ndice %1 2e(er0ncia de (un&es '4'

sin$le7cat7title

)escri%&o

8ostra ou retorna o t#tulo da categoria da pgina atual

Hso

ingle*cat*title( 8prefix 8diplay +

ParImetros

8prefix (tring+ (opcional+

,eto a ser retornado antes do t#tulo+adro' (en&um

8diplay (&oolean+ (opcional+

8ostra ou retorna o t#tulo da tag se verdadeiro ou falso+adro' true

2etorna

>nullstring? (ada ou t#tulo da tag



142/

Criando Temas Para Wordpress

Documents

Transcript of Criando Temas Para Wordpress