Download - Criando Temas Para Wordpress
-
8/12/2019 Criando Temas Para Wordpress
1/160
-
8/12/2019 Criando Temas Para Wordpress
2/160
Aprenda a desenvolver
Temas WordPress
http://mazetto.blog.br
http://mazetto.blog.br/http://mazetto.blog.br/ -
8/12/2019 Criando Temas Para Wordpress
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.
-
8/12/2019 Criando Temas Para Wordpress
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
-
8/12/2019 Criando Temas Para Wordpress
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?....................................
-
8/12/2019 Criando Temas Para Wordpress
6/160
Contedo
,ableless...........................................................................................
-
8/12/2019 Criando Temas Para Wordpress
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.
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
20/160
-
8/12/2019 Criando Temas Para Wordpress
21/160
-
8/12/2019 Criando Temas Para Wordpress
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.
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
-
8/12/2019 Criando Temas Para Wordpress
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.
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para 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.
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
26/160
Desenvolvimento e! (
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.
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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.
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
28/160
Desenvolvimento e! (
Tema Escritrio Digital
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
29/160
Parte II$n+cio dos trabalhos
-
8/12/2019 Criando Temas Para Wordpress
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/
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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.
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
34/160
In"cio dos tra!al#os 4
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.
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
36/160
In"cio dos tra!al#os
%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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
38/160
In"cio dos tra!al#os
&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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
40/160
In"cio dos tra!al#os 45
*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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
43/160
In"cio dos tra!al#os 4
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&
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
44/160
In"cio dos tra!al#os 44
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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.
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
46/160
Parte III!onstru%&o do tema
-
8/12/2019 Criando Temas Para Wordpress
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'
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
-
8/12/2019 Criando Temas Para Wordpress
49/160
-
8/12/2019 Criando Temas Para Wordpress
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
-
8/12/2019 Criando Temas Para Wordpress
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'
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
52/160
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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'
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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.
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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.
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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.
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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.
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
-
8/12/2019 Criando Temas Para Wordpress
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'
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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.
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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.
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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.
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
66/160
Parte I8-strutura do tema
-
8/12/2019 Criando Temas Para Wordpress
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.
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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.
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
69/160
-
8/12/2019 Criando Temas Para Wordpress
70/160
Estrutura do tema *5
searc#(orm,p#p
(ooter,p#p
index,p#p
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
71/160
-
8/12/2019 Criando Temas Para Wordpress
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.
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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.
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
76/160
Parte 8Aprimoramentos
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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.
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
80/160
-
8/12/2019 Criando Temas Para Wordpress
81/160
%primoramentos '
printf( **( 4.uthor: V4 + 8author->diplay*name
+1
ele
*e( 4Plog archive4 +1
'>
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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.
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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.
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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 ;
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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.
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
92/160
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
94/160
%primoramentos ,4
PoEdit com todos os termos traduzidos
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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.
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
96/160
Ap1ndice A: 2efer1ncia de fun%es
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
-
8/12/2019 Criando Temas Para Wordpress
100/160
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
102/160
-
8/12/2019 Criando Temas Para Wordpress
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.
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
104/160
%p0ndice %1 2e(er0ncia de (un&es '54
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
106/160
%p0ndice %1 2e(er0ncia de (un&es '5
$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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
108/160
-
8/12/2019 Criando Temas Para Wordpress
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
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
2etorna
>string? Gndereo do linN do ms
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
113/160
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
8id (integer+ (o&rigatrio+
identificador do post.+adro' post-WF" >o F" do post atual?
2etorna
>arra? As categorias do post
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
118/160
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
8id (integer+ (o&rigatrio+
Fdentificador do usurio !ue se dese2a obter informaes+adro' (en&um
2etorna
>ob2ect? Fnformaes vinculadas ao usurio
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
8year (&ooleanUinteger+ (opcional+
ano. Fnforme UU para o ano atual.+adro' (en&um
2etorna
>string? Gndereo do linN do ano
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
124/160
-
8/12/2019 Criando Temas Para Wordpress
125/160
-
8/12/2019 Criando Temas Para Wordpress
126/160
%p0ndice %1 2e(er0ncia de (un&es '(
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
>Boolean? Derdadeiro ou falso para a condio
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
128/160
%p0ndice %1 2e(er0ncia de (un&es '(
is7"ome
)escri%&o
Derifica se a pgina inicial est sendo eibida
Hso
i*home(+
ParImetros
(en&um
2etorna
>Boolean? Derdadeiro ou falso para a condio
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
>Boolean? Derdadeiro ou falso para a condio
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
130/160
%p0ndice %1 2e(er0ncia de (un&es '5
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
>Boolean? Derdadeiro ou falso para a condio
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
>Boolean? Derdadeiro ou falso para a condio
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
132/160
-
8/12/2019 Criando Temas Para Wordpress
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
>Boolean? Derdadeiro ou falso para a condio
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
134/160
%p0ndice %1 2e(er0ncia de (un&es '4
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
136/160
%p0ndice %1 2e(er0ncia de (un&es '
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
138/160
%p0ndice %1 2e(er0ncia de (un&es '
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
139/160
-
8/12/2019 Criando Temas Para Wordpress
140/160
%p0ndice %1 2e(er0ncia de (un&es '45
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
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
Aprenda a desenvolver Temas Wo rdPress http://mazetto.blog.br
-
8/12/2019 Criando Temas Para Wordpress
142/