You are on page 1of 160

Aprenda a desenvolver

Temas WordPress
Guilherme Mazetto www.guiawp.com.br

Prefcio
A internet lugar de todos. Boa parte dos usurios de internet utilizam-se dos blogs como meio de comunicao e referncia para buscar informaes teis aos seus cotidianos. A vontade de se expressar e expor pontos de vista no mundo digital to grande que o nmero de produtores de contedo cresce a cada dia. Deparado com tal situao possvel ver a necessidade desses produtores em entender o funcionamento da publicao de material para web. Com intuito de agilizar esse trabalho surgem os sistemas gerenciadores de contedo: interfaces altamente simplificadas e autoexplicativas capazes de realizar funes anteriormente conseguidas apenas com um bom conhecimento tcnico. No cenrio existente, o WordPress 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. Tamanha popularidade agrava o problema da personalizao dos trabalhos, onde muitos possuem o sistema e compartilham dos mesmos recursos e elementos visuais a serem exibidos aos visitantes. O trabalho proposto tratar fundamentalmente de torn-lo capaz de desenvolver suas prprias solues para exposio de contedos mostrando um modo inteligente de integrar o desenvolvimento web padro ao sistema do WordPress de modo a aproveitar bem os seus recursos.

Sumrio

Sumrio
Prefcio......................................................................................................3 Sumrio......................................................................................................4 Contedo....................................................................................................5 Introduo................................................................................................12 Desenvolvimento Web.............................................................................17 Incio dos trabalhos.................................................................................29 Construo do tema................................................................................47 Estrutura do tema....................................................................................67 Aprimoramentos......................................................................................77 Consideraes Finais..............................................................................96 Apndice A: Referncia de funes.......................................................97 Apndice B: Funes utilizadas...........................................................161

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Contedo

Contedo
Prefcio......................................................................................................3 Sumrio......................................................................................................4 Contedo....................................................................................................5 Introduo................................................................................................12 Para quem feito o livro?.....................................................................13 Projeto...................................................................................................14 Didtica.................................................................................................14 Notificaes......................................................................................15 Alerta...........................................................................................15 Notas adicionais...........................................................................15 Anexos.........................................................................................15 Ajuda................................................................................................16 Desenvolvimento Web.............................................................................17 Conceitos bsicos.................................................................................19 W3C e Padres web.........................................................................19 HTML................................................................................................19 XHTML.............................................................................................19 CSS..................................................................................................20 Linguagens de Navegadores (Browser Scripting).............................20 Linguagem de Servidores (Server Scripting)....................................20 Banco de Dados...............................................................................21 PHP..................................................................................................21 JQuery..............................................................................................22
A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Contedo

Tableless...........................................................................................22 MySQL.............................................................................................22 CMS.................................................................................................22 Wordpress.............................................................................................23 Plugins..............................................................................................25 Temas...............................................................................................26 Porqu desenvolver um tema WordPress?...........................................27 Incio dos trabalhos.................................................................................29 Wireframe.............................................................................................32 Padro de codificao WordPress........................................................34 HTML................................................................................................34 Validao.....................................................................................34 Fechamento de Tags....................................................................34 Atributos e tags............................................................................35 Aspas...........................................................................................35 Indentao...................................................................................36 PHP..................................................................................................37 Aspas simples e duplas...............................................................37 Indentao...................................................................................37 Estilo das Chaves........................................................................38 Uso de espaos...........................................................................39 Variveis, funes, nomes de arquivos, e operadores ................39 Sinalizao de parmetros...........................................................40 Internacionalizao...............................................................................41 Arquivos POT...................................................................................41 Arquivos PO.....................................................................................41
A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Contedo

Arquivos MO.....................................................................................42 Criando entradas..............................................................................42 Criando um template web.....................................................................44 index.php..........................................................................................45 style.css............................................................................................45 Construo do tema................................................................................46 Estilo.....................................................................................................47 Template Tags.......................................................................................49 Cabealho.............................................................................................49 Dados no confiveis............................................................................53 Arquivo de Funes..............................................................................54 Menus...................................................................................................54 Sidebar..................................................................................................56 Navegao.......................................................................................56 Listas aninhadas...............................................................................56 Widgets............................................................................................57 Personalizando a Sidebar.................................................................58 Rodap.................................................................................................60 Trabalhando o contedo........................................................................61 Loop.................................................................................................61 The e Get_the...................................................................................62 Plugin API Hooks..................................................................................64 Actions..............................................................................................64 Filters................................................................................................64 Estrutura do tema....................................................................................66 Hierarquia.............................................................................................67
A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Contedo

Arquivos Modelos..................................................................................69 Includes Tags........................................................................................71 Incluindo arquivos.................................................................................72 Single.php.............................................................................................74 Aprimoramentos......................................................................................76 Resumo.................................................................................................78 Search...................................................................................................78 Conditional Tags....................................................................................79 Archive..................................................................................................80 Posts e pginas.....................................................................................82 Modelos de Pginas..............................................................................83 Criando um novo modelo de pgina.................................................83 Pginas adicionais................................................................................84 Sem comentrios..............................................................................84 Sem Sidebar.....................................................................................84 Pgina 404............................................................................................85 Classes do Tema...................................................................................86 Javascript..............................................................................................87 Registrando scripts...........................................................................88 Validao do formulrio....................................................................88 Folha de estilos.....................................................................................90 Classes do WordPress.....................................................................90 Registrando estilos...........................................................................91 Traduo...............................................................................................92 PoEdit...............................................................................................92 Traduzindo........................................................................................93
A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Contedo

Consideraes Finais..............................................................................95 Apndice A: Referncia de funes.......................................................96 __..........................................................................................................97 _e..........................................................................................................98 bloginfo.................................................................................................99 body_class..........................................................................................100 comments_popup_link........................................................................101 comments_template............................................................................102 dynamic_sidebar.................................................................................103 esc_attr...............................................................................................104 get_author_posts_url...........................................................................105 get_day_link........................................................................................106 get_footer............................................................................................107 get_header..........................................................................................108 get_month_link....................................................................................109 get_option............................................................................................110 get_search_form..................................................................................111 get_search_query................................................................................112 get_sidebar..........................................................................................113 get_template_part................................................................................114 get_the_author....................................................................................115 get_the_author_meta..........................................................................116 get_the_category.................................................................................117 get_the_category_list..........................................................................118 get_the_date.......................................................................................119 get_the_tag_list...................................................................................120
A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Contedo

10

get_the_tags.......................................................................................121 get_userdata.......................................................................................122 get_year_link.......................................................................................123 have_posts..........................................................................................124 is_author.............................................................................................125 is_category..........................................................................................126 is_day..................................................................................................127 is_home..............................................................................................128 is_month.............................................................................................129 is_page...............................................................................................130 is_single..............................................................................................131 is_tag..................................................................................................132 is_year................................................................................................133 language_attributes.............................................................................134 load_theme_textdomain......................................................................135 next_posts_link...................................................................................136 post_class...........................................................................................137 previous_posts_link.............................................................................138 register_nav_menu..............................................................................139 single_tag_title....................................................................................140 single_cat_title....................................................................................141 register_sidebar..................................................................................142 the_author...........................................................................................143 the_date..............................................................................................144 the_excerpt.........................................................................................145 the_permalink......................................................................................146
A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Contedo

11

the_post..............................................................................................147 the_search_query...............................................................................148 the_title...............................................................................................149 wp_enqueue_script.............................................................................150 wp_enqueue_style..............................................................................151 wp_footer............................................................................................152 wp_get_archives.................................................................................153 wp_head.............................................................................................155 wp_nav_menu.....................................................................................156 wp_title................................................................................................159 Apndice B: Funes utilizadas...........................................................160

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Introduo

12

Introduo
O livro aborda os conceitos essenciais para desenvolvimento de um layout e integrao do mesmo com o WordPress. Uma seqncia lgica foi criada com o intuito de facilitar o entendimento do mesmo; atribuindo, apresentando e explicando novos conceitos medida em que sero empregados no processo de desenvolvimento do tema. Tal processo ser tratado no decorrer de 5 principais partes, so elas: Desenvolvimento Web Uma breve apresentao de conceitos que devem ser de conhecimento do leitor antes de qualquer atividade relacionada ao desenvolvimento propriamente dito. O aprendizado do funcionamento das questes tratadas implica numa melhor assimilao do restante do material. Incio dos trabalhos Etapas iniciais de criao de um template web. So apresentados os padres estabelecidos pelo WordPress em sua programao e a capacidade de um Tema tornar-se internacional com suporte a mltiplos idiomas. Construo do Tema A integrao do template criado com WordPress tem seu incio. O modo como o modelo tratado no sistema e a criao de arquivos padro podem ser vistos em amplo funcionamento.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Introduo

13

Estrutura do Tema O tema em construo passa por modificaes estruturais. Novos arquivos so criados. Conhea as tcnicas de reutilizao de modelos em diferentes arquivos do Temas. Aprimoramentos So expostas muitas funcionalidades que permitem tornar um tema qualquer em outro mais sofisticado com mais recursos e interatividade com o visitante e as pginas que esse visita.

Para quem feito o livro?


Para desenvolver as atividades propostas recomendado que voc tenha um breve conhecimento de HTML, CSS e PHP. Essas noes bsicas facilitaro e muito o entendimento dos cdigos que sero exibidos. Alguns conceitos das linguagens citadas, como a correta marcao de tags, laos de repetio, declarao de variveis, seletores e outros; sero citados, porm superficialmente. A razo disso o nosso prposito: criao de Temas WordPress e no o de aprendizado de uma linguagem especfica. O aprendizado constante, relacionado a ele estar a qualidade de seu trabalho. Para obter melhores resultados, no deixe de pesquisar os itens mencionados e sempre pratique os conceitos explorados fazendo seus prprios Temas WordPress.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Introduo

14

Projeto
Durante os captulos desse livro iremos desenvolver um Tema WordPress na ntegra. Alm do Tema finalizado, ao trmino do livro voc estar apto a desenvolver suas prprias criaes uma vez que os conceitos estaro bem sedimentados. Voc entender como o funcionamento do WordPress como um todo e com relao a interpretao e exibio do tema criado. Saber o significado dos termos tcnicos e estar capacitado a entender e utilizar-se de outros e novos recursos da ferramenta.

Didtica
Desenvolveremos nosso tema passo a passo, entendendo e colocando em prtica algumas das principais funes do WordPress. A apresentao das funes ser feita gradativamente com as etapas a serem desenvolvidas. Elas surgiro avulsas em meio as explicaes, quando aplicadas ao tema. Para uma descrio mais detalhada consulte o apndice de funes. A melhor maneira de se aprender a fazer algo fazendo. Por isso muito importante que ao ler esse livro, voc v reproduzindo as etapas ao mesmo passo em que evolui as pginas. A cada funo apresentada, coloque-a em prtica em seu tema prprio. Caso voc tenha dificuldades para iniciar a criao de algo, utilize os arquivos da produo do livro. Comece do princpio e no pule etapas, isso ser fundamental para um melhor proveito do material que est lendo.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Introduo

15

Notificaes
Em determinados pontos do livro ser preciso incluir determinadas informaes para qu o estudo seja mais dinmico e acrescente contedo relevante ao que est em pauta. A maneira encontrada para atingir esse objetivo foi criar notificaes que enfatizam o qu est sendo visto. Veja quais so as notificaes e suas respectivas funes dentro do livro:

Alerta
Voc deve dar ateno para determinados pontos do texto. Reeitera informaes e deixa claro circunstncias onde no podem haver dvidas.

Notas adicionais
So explicaes adicionais ao assunto que no necessariamente se enquadram no texto, mas de importante conhecimento.

Anexos
Ao final de cada captulo haver a referncia para o download dos arquivos criados durante o mesmo.

Abaixo est um exemplo de como os cdigos sero exibidos dentro do livro. No topo estar o nome do arquivo onde o cdigo est inserido ou aquilo que ele representa.
Exemplo de cdigo Nome do arquivo
// Cdigo Fonte do arquivo

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Introduo

16

Ajuda
Caso voc tenha dvida com o uso do WordPress, instalao de temas, manuseio de arquivos, gerenciamento de informao dentro do CMS no formato de usurio da ferramenta e no do desenvolvedor, acesse www.guiawp.com.br. No blog voc encontrar tudo isso, informaes atualizadas e muito mais sobre WordPress. Caso tenha interesse fique vontade tambm para expressar sua opinio utilizando a ferramenta de comentrios ou ento o formulrio de contato.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Parte I
Desenvolvimento Web

Desenvolvimento Web

18

Desenvolver material de qualidade para web pode se tornar uma tarefa fcil desde que voc domine o espao que pretende adentrar. O web design existe como uma extenso do design, cuja finalidade justamente a criao de elementos que possam trazer melhores resultados ao material publicado na internet. Para o processo de criao ser bem realizado preciso ter em mente que muitos fatores convergem para a produo de um material de qualidade. Entre eles destacam-se a usabilidade, acessibilidade e a arquitetura da informao diretamente relacionadas ao web design transmitindo informaes teis sobre diagramao, layout e disposio dos diferentes componentes em tela. Tendo em mos um briefing bem elaborado, abordando as principais questes referentes ao contedo do projeto, necessrio definir seus objetivos, pblico alvo, servios e produtos explorados, diferenciais de mercado e todas as caractersticas que possam determinar o melhor modo de expor tudo em tela. Um conceito importante a ser explorado o de usabilidade. Ela define a experincia do visitante no site tornando sua experincia prazerosa ou um tormento como resultado de informaes confusas e de becos sem sadas. Uma boa usabilidade mostra ao usurio onde ele est, quais opes tem de proseguir, como encontrar as informaes que procura, alm de propiciar uma interface amigvel a ele onde todos elementos dispostos em tela devem existir mediante um objetivo. Sabendo seus objetivos, traando metas, aplicando bem o layout ao seu projeto; respeitando as funes dos elementos; j traz ao site uma boa aspirao profissional.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Desenvolvimento Web

19

Conceitos bsicos W3C e Padres web


A W3C (World Wide Web Consortium) o rgo responsvel por recomendar padres de desenvolvimento para a internet. Por meio destes padres se pode classificar: web sites de acordo com suas caractersticas tcnicas, indo alm do visual e; navegadores, de acordo com sua capacidade em atender aos padres definidos. O grande objetivo de seguir os padres do W3C de possibilitar que a informao veiculada pelo site permanea independente do dispositivo utilizado pelo visitante e que seja acessvel.

HTML
A Linguagem de Marcao de Hipertexto (HTML - HyperText Markup Language) uma linguagem de marcao utilizada para produzir pginas na Web que so interpretadas pelos navegadores. Os documentos em HTML so arquivos de texto simples que podem ser criados e editados em qualquer editor de textos comum, como o Bloco de Notas do Windows.

XHTML
A XHTML (Extensible Hypertext Markup Language) atualmente a base do Desenvolvimento Web. Ela a estrutura de toda a informao que apresentada na Internet, como imagens, textos, formulrios, links e muito mais.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Desenvolvimento Web

20

CSS
A XHTML depende, em essncia, da CSS (Cascading Style Sheets) para formatar a estrutura do seus cdigos nos Navegadores de Internet. uma linguagem de formatao simples e poderosa. Com ela voc pode, praticamente, formar qualquer tipo de layout, de maneira muito mais clara e eficiente, se comparada com a antiga formatao includa em cdigos HTML. A CSS anda lado a lado com a XHTML.

Linguagens de Navegadores (Browser Scripting)


As Linguagens de Navegadores so cdigos de programao inseridos no cdigo XHTML com a finalidade de incrementar as suas funcionalidades, como inserir data e hora atual, validar formulrios, retornar valores matemticos e muito mais. Esses cdigos so interpretados pelos Navegadores de Internet (Browsers) no momento em que as pginas so carregadas (por isso possuem esse nome). As principais Linguagens de Navegadores utilizadas so o JavaScript e o VbScript, mas o JavaScript de longe a mais utilizada e aceita pelos navegadores.

Linguagem de Servidores (Server Scripting)


As Linguagens de Servidores talvez sejam os artifcios mais poderosos da Internet. O acesso e a manipulao de dados armazenados em Bancos de Dados so uns dos seus principais recursos, e so amplamente utilizados na Internet.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Desenvolvimento Web

21

Ao contrrio do que acontece nas Linguagens de Navegadores, as Linguagens de Servidor so processadas nos servidores onde esto armazenadas as pginas, mesmo possuindo, algumas vezes, a codificao na prpria pgina. Existem vrias Linguagens de Servidores disponveis atualmente. Entre as mais populares esto: ASP, ASP.NET, JSP e PHP. Todas possuem suas vantagens e desvantagens, mas no geral elas realizam as mesmas tarefas.

Banco de Dados
Para os Desenvolvedores que utilizam Linguagens de Servidor de suma importncia conhecer os conceitos de Bancos de Dados Relacionais e algum Sistema de Gerenciamento de Banco de Dados (SGBD). Os Bancos de Dados so utilizados de diversas maneiras na Internet, como armazenar informaes sobre produtos de sites de Comrcio Eletrnico, manter cadastro de clientes e um infinidade de outras aplicaes.

PHP
PHP, que significa PHP: Hypertext Preprocessor, uma linguagem de programao de ampla utilizao, interpretada, que especialmente interessante para desenvolvimento para a Web e pode ser mesclada dentro do cdigo HTML. A sintaxe da linguagem lembra C, Java e Perl, e fcil de aprender. O objetivo principal da linguagem permitir a desenvolvedores escreverem pginas que sero geradas dinamicamente rapidamente, mas voc pode fazer muito mais do que isso com PHP.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Desenvolvimento Web

22

JQuery
JQuery uma biblioteca JavaScript que pode ser utilizada e modificada sem qualquer custo. Ajuda os desenvolvedores a se concentrarem na lgica dos sistemas da web e no nos problemas de incompatibilidade dos navegadores.

Tableless
Uma forma de desenvolvimento de sites, sugerida pela W3C, que no utiliza tabelas para disposio de contedo na pgina, pois defende que os cdigos HTML devem ser usados para o propsito que foram criados, sendo que tabelas foram criadas para exibir dados tabulares.

MySQL
um banco de dados relacional que est entre os mais utilizados no mundo. Ele gratuito (open source) e permite a voc armazenar, organizar e ler dados de uma maneira muito rpida e eficiente.

CMS
Sistema de Gerenciamento de Contedo (em ingls Content Management Systems). Sistema gestor de websites, portais e intranets que integra ferramentas necessrias para criar e gerenciar contedos em tempo real, sem a necessidade de programao de cdigo.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Desenvolvimento Web

23

Wordpress
Em sua essncia ele um CMS, gerenciador de contedos; voltado especialmente para blogs. Entretanto experincias diversas de seus usurios tem mostrado ele com o potencial para gerir portais e sistemas de diferentes tipos e tamanhos. O WordPress surgiu em 2003 com um simples cdigo para melhorar a tipografia de escrever todos os dias e com poucos usurios. Atualmente utilizado e visto em milhes de sites pelo mundo todo. Programado em PHP e base de dados em MySQL; o sistema agrada tambm os programadores que conseguem dar maior flexibilidade ele e criar extenses, plugins e temas.

Site do WordPress

O sistema tem como grande diferencial e talvez a resposta para seu rpido crescimento de atuao na internet, o fato do sistema ser cdigo aberto e tambm possuir interface altamente amigvel e personalizvel ao usurio.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Desenvolvimento Web

24

Para realizar o download do WordPress acesse www.wordpress.org. Esse o site dos desenvolvedores do sistema, onde encontram-se disponveis tambm plugins e temas que voc poder manuse-los como bem entender.
WordPress.org o site dos desenvolvedores do WordPress, onde podemos fazer o download do CMS bem como de seus plugins e manuse-los como bem entender. WordPress.com o site que oferece gratuitamente o servio de hospedagem para o WordPress.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Desenvolvimento Web

25

Plugins
Os plugins so funcionalidades que os programadores desenvolvem com as rotinas existentes do WordPress (ou no) e o fazem para obter melhor resposta para diferentes objetivos, seja exibir notcias reacionadas, ou uma galeria de imagens personalizada. Os plugins so os maiores colaboradores daqueles que entendem pouco de programao, pois fazem tudo o que prope bastando ao usurio mov-los para o diretrio de plugins de seu blog. Muitas vezes possuem pginas administrativas que facilitam ainda mais o trabalho do usurio. Como o WordPress projetado para ser leve, maximizar a flexibilidade e minimizar o acmulo de cdigo; os Plugins existem para oferecer funes personalizadas para que cada usurio possa personalizar seu site segundo suas necessidades especficas.
Entre os plugins mais conhecidos est o Akismet que verifica a presena de spams em meio aos comentrios do blog, muito utilizado e vem como padro do WordPress.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Desenvolvimento Web

26

Temas
O WordPress possui uma distinta separao entre o contedo gerencivel de um blog nele criado com a sua respectiva formatao e exibio em tela. O banco de dados MySQL armazena todas as informaes passadas ao sistema, este por sua vez possui uma srie de funcionalidades que permitem a criao de diferentes modelos de exibio, os temas, para o usurio final.

Motion, um dos muitos temas populares do WordPress

Um tema justamente a parte visual do seu blog, como ele ser apresentado para seu visitante. Ele carrega consigo os elementos visuais que compe as formataes de pginas e uma srie de funcionalidades herdadas do WordPress alm de abrir espao ao desenvolvedor de implantar as suas prprias.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Desenvolvimento Web

27

Possui uma coleo de arquivos que trabalha em conjunto para produzir uma interface grfica nica de um blog. Modifica a forma como o site exibido, sem modificar no entanto, o WordPress onde est sendo executado. Os temas podem incluir arquivos de imagem, folhas de estilos, scripts, bem como quaisquer arquivos de cdigo necessrio.

Porqu desenvolver um tema WordPress?


Para criar um visual nico para o seu site; Aperfeioar temas, funes e recursos existentes do WordPress obtendo melhores resultados; Criar modelos alternativos de pginas com caractersticas

especficas destinadas unicamente a cada tema desenvolvido; Oportunidade para aprender mais sobre desenvolvimento web e aumentar sua experincia no ramo; Estimula a criatividade; Receba crticas de seu trabalho aps compartilhar o tema criado. As crticas podero lhe ajudar a aperfeioar suas tcnicas; Comercializao dos temas criados.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Desenvolvimento Web

28

Tema Escritrio Digital

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Parte II
Incio dos trabalhos

Incio dos trabalhos

30

Ao desenvolver um tema de suma importncia tomar alguns cuidados para otimiz-lo e deix-lo mais flexvel para futuras e eventuais alteraes. preciso ter em mente que o tema envolve somente a estrutura do site e no as informaes nele contidas. Assim sendo todo o material que for includo diretamente atravs do tema deve ser relevante a ele e tambm que servir em todas as suas aplicaes. Como j foi dito anteriormente, no desenvolvimento de sites para web, muitos conhecimentos so colocados em prtica. preciso ter em mente que para se ter um bom resutado final, deve ser conhecido exatamente o qu desejamos ter como resultado final de nossa aplicao; at por razes comparativas. Isso quer dizer que no se pode simplesmente comear logo de cara digitando linhas de cdigo que no se sabe onde te levaro. Em primeiro lugar necessrio planejar o trabalho a ser executado. Trabalhe bem a idia do Brainstorm. Nela voc e todos aqueles envolvidos na tarefa de desenvolver o tema devero expressar todas as suas idias por mais surreias que sejam, sendo possveis ou no de se fazer; com intuito de se ter um grande volume de informaes com as quais trabalhar. Nessa etapa faa questionamentos como: Qual assunto ser trabalhado? Qual tipo de informao ser veiculada? Como a informao ser tratada (pginas, notcias, links)? Quais sees o site dever possuir?

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Incio dos trabalhos

31

Enfim, questes que possam te dar uma idia de como poder ser o seu resultado final. Faa algumas pesquisas na prrpria web com intuito de obter referncias para seu trabalho. Muito material de qualidade pode ser encontrado, at mesmo de forma gratuita.
Tome cuidado e no confunda tomar um trabalho de outra pessoa como referncia; com plgio, cpia no autorizada. Ter um tema como referncia acess-lo e estudar o posicionamento dos componentes, estilos empregados, harmonia do design; para posteriormente em sua criao, trabalhar com algum(s) desses elementos sem que necessariamente seu resultado final seja semelhante ao modelo fonte.

Para ilustrar esse conceito, defini como resultado de um Brainstorm, as seguintes condies para nosso tema: Um blog ser desenvolvido Uma paginao de notcias ser necessria Pginas de buscas Pginas personalizadas Dever exibir nome e descrio do blog Necessariamente existir um menu de pginas Espao para contedo interativo, especificado por quem mais for utilizar o tema Crditos

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Incio dos trabalhos

32

Wireframe
Definimos nosso contedo e todo o material a ser explorado dentro do nosso site, precisamos agora criar um esboo do nosso trabalho. Faremos ento uma prvia, sem programar ainda, que nos possibilite visualizar como ser o tema para os visitantes do blog. Para isso criaremos um Wireframe. O Wireframe um desenho bsico, como um esqueleto, que demonstra de forma direta a arquitetura de como o layout ser de acordo com as especificaes determinadas; seu objetivo auxiliar o entendimento dos requisitos que foram escolhidos com relao as funes e objetos que o sistema dever possuir. A criao de um wireframe pode ser feita manualmente com materiais de escritrio como lpis, caneta, borracha e folhas sulfite. Desse modo voc consegue alm de planejar o futuro layout do blog, economizar tempo no processo. Ou ento voc pode utilizar algum editor de imagens (vetoriais preferencialmente) com o qual tenha intimidade com o manuseio e obter excelentes resultados, de melhor qualidade, com a mesma economia de tempo investido.
Importante ressaltar que o resultado final do trabalho a ser desenvolvido independe da ferramente utilizada. Para edio dos arquivos PHP, por exemplo, utilizar editores robustos ou o bloco de notas no define o cdigo a ser criado como bom ou ruim, depender unicamente do que voc ir digitar. O mesmo serve para softwares de criao e edio de imagens.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Incio dos trabalhos

33

O tema a ser desenvolvido foi denominado 'Aprendiz'. Nele trabalharemos os principais conceitos e recursos que o WordPress oferece para o processo de desenvolvimento e customizao de temas. Por isso, nossos esquemas devero respeitar os seguintes esboos:

Wireframes do projeto Aprendiz

Os termos vistos como Pgina, Post, Cabealho, Sidebar, Rodap e muitos outros sero amplamente explorados por tratar-se de um blog e WordPress. Muitas explicaes sobre cada um deles sero realizadas ao decorrer do livro, no se preocupe em memoriz-los agora.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Incio dos trabalhos

34

Padro de codificao WordPress


Antes de desenvolver o tema, existem algumas normas criadas para WordPress com intuito de padronizar seu cdigo-fonte. Seguir tais padres no obrigatrio, porm muito interessante quando se quer compartilhar algo desenvolvido e que outras pessoas entendam facilmente o material.

HTML
Validao
Todas as pginas HTML devem ser verificadas pelo validador da W3C certificando que a marcao est sendo bem feita. Esse recurso no necessariamente indica que um cdigo bom ou ruim, mas ajuda a entend-lo e encontrar problemas que podero existir quando o cdigo for aplicado ao servidor. Ainda assim sempre necessrio uma reviso manual do cdigo fonte.

Fechamento de Tags
Todas as tags devem estar fechadas. Para tags que no possuem fechamento pelo padro da marcao <tag></tag> como o caso das tags <br> e <img> a terminao com a barra invertida "/" imprescindvel. Nesses casos ainda o correto deixar um espao entre a tag e seu fechamento, passando de <br/> na forma incorreta, para <br /> no modelo correto dos padres.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Incio dos trabalhos

35

Atributos e tags
Todas as tags e seus atributos devem estar em letras minsculas. Os atributos devero respeitar a norma de caixa baixa quando escritos com o propsito de serem lidos apenas por mquinas. Se a informao do atributo dever ser interpretado por humanos, dever respeitar a maior legibilidade dos dados.
Para mquinas
<meta http-equiv="content-type" content="text/html" />

Para humanos
<a href="http://exemplo.com/" title="Descrio">Exemplo.com</a>

Aspas
De acordo com o W3C, todos os atributos devem possuir um valor, e deve ser usado para este aspas simples ou duplas necessariamente. A seguir veja os exemplos do modo correto e incorreto do uso de aspas para delimitar os valores dos atributos das tags.
Correto
<input type="text" name="email" disabled="disabled" />

Incorreto
<input type=text name=email disabled>

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Incio dos trabalhos

36

Indentao
Como no PHP, a indentao no HTML deve sempre refletir a estrutura lgica e dever ser feita com tabulaes e no espaos. Ao misturar os cdigos PHP e HTML, os blocos de indentao PHP devero respeitar o cdigo HTML de modo que os nveis de abertura e fechamento de um se encaixem ao do outro.
Correto
<?php if ( ! have_posts() ) : ?> <div id="post-1" class="post"> <h1 class="entry-title">Not Found</h1> <div class="entry-content"> <p>Apologies, but no results were found.</p> <?php get_search_form(); ?> </div> </div> <?php endif; ?>

Incorreto
<?php if ( ! have_posts() ) : ?> <div id="post-0" class="post error404 not-found"> <h1 class="entry-title">Not Found</h1> <div class="entry-content"> <p>Apologies, but no results were found.</p> <?php get_search_form(); ?> </div> </div> <?php endif; ?> A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Incio dos trabalhos

37

PHP
Aspas simples e duplas
Use aspas simples e duplas quando apropriado. Se voc no estiver tratando nada na string, use use aspas simples. Voc nunca deve escapar aspas HTML numa string, porque voc apenas precisa alternar entre os tipos de aspas, assim:
Exemplo
echo '<a href="link" title="Ttulo">Nome do link</a>'; echo "<a href='$link' title='$titulodolink'>$nomedolink</a>";

A nica exceo no JavaScript, que as vezes reques aspas simples ou duplas. Textos que venham dentro de atributos devem passar pelo attribute_escape() assim as aspas simples ou duplas no fecham o atributo e invalidam o XHTML causando um problema de segurana.

Indentao
Sua indentao deve sempre refletir uma estrutura lgica. Use tabs reais e no espaos, pois isso permite maior flexibilidade entre clientes. Regra de ouro: tabs devem ser usadas no incio das linhas e espaos devem ser usados no meio das linhas. Exceo: se voc tem um bloco de cdigo que seja mais legvel se estiver alinhado, use espaos:
Exemplo
$foo $foo2 $foo3 $foo4 = = = = 'algumvalor'; 'algumvalor2'; 'algumvalor3'; 'algumvalor4';

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Incio dos trabalhos

38

Estilo das Chaves


Chaves devem ser usadas em multiplos blocos. Se voc tiver um bloco muito grande, considere quebr-lo em dois ou mais blocos ou funes. Caso seja realmente necessria a existncia desse longo bloco, por favor ponha um pequeno comentrio no final para que as pessoas percebam de relance o que aquela chave de fechamento est fechando.
Exemplo
if ( condicao ) { acao1(); acao2(); } elseif ( condicao2 && condicao3 ) { acao3(); acao4(); } else { acaopadrao(); }

Normalmente isso apropriado para blocos lgicos, maiores que cerca de 35 linhas, mas qualquer cdigo que no seja intuitivamente bvio pode ser comentado. Blocos de uma linha apenas pode omitir as chaves para ficarem mais concisos:
Exemplo
if ( condicao ) acao1(); else acao2();

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Incio dos trabalhos

39

Uso de espaos
Sempre coloque espaos:
Aps as vrgulas
array( 1, 2, 3 )

Em ambos os lados das atribuies de operadores lgicos


X == 23

Em ambos os lados dos parenteses


foreach ( $foo as $bar ) {

Quando definindo ou chamando funes, entre os parmetros


function minhafuncao( $param1 = 'foo', $param2 = 'bar' ) { minhafuncao( $param1, outrafuncao( $param2 ) );

Variveis, funes, nomes de arquivos, e operadores


Use letras minsculas em nomes de variveis e funes. Separe as palavras por sublinhados (underscores).
Exemplo
function algum_nome( $alguma_variavel ) { [...] }

Arquivos devem ser nomeados descritivamente usando letras minsculas. Hfens devem separar as palavras.
Exemplo
nome-do-meu-plugin.php

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Incio dos trabalhos

40

Sinalizao de parmetros
Para sinalizar parmetros para funes prefira valores em string a apenas true e false quando chamar funes; e sempre com nomes autoexplicativos.
Incorreto
function comer( $oque, $devagar = true ) { ... } comer( 'cogumelos' ); comer( 'cogumelos', true ); // O que significa true? comer( 'comida de cachorro', false ); // O que significa false? O oposto de true?

J que o PHP no suporta argumentos em forma de nomes, os valores dos sinalizadores no tem significados e toda vez que aparece uma funo como essa ns temos que pesquisar pela definio da funo. O cdigo pode ficar mais legvel se usarmos textos descritivos, ao invs de boleanos:
Correto
function comer( $oque, $velocidade = 'devagar' ) { ... } comer( 'cogumelos' ); comer( 'cogumelos', 'devagar' ); comer( 'comida de cachorro', 'rapido' );

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Incio dos trabalhos

41

Internacionalizao
A Internacionalizao o processo que deixa uma aplicao preparada para receber tradues. No WordPress significa marcar os textos padro dos temas que devero ser traduzidos de um modo especial. A internacionalizao tambm conhecida como i18n por possuir 18 letras entre o i e o n. A traduo dos termos feita com o uso do gettext, biblioteca que no PHP j permitida por padro em suas extenses; e o Wordpress faz uso desse artifcio.

Arquivos POT
O gettext percorre os arquivos do sistema indicados pelo editor procura de itens previamente preparados para traduo, aqueles onde existir uma chamada para a biblioteca. Ao encontrar as entradas de traduo ele extrai as informaes gerando seu padro de traduo dos arquivos POT exemplificado abaixo:
Exemplo
#: wp-content/themes/vitrine/page.php:15 msgid "Edit" msgstr "Editar"

Arquivos PO
Para traduzir temas, plugins e o prprio WordPress; cada tradutor especifica nas linhas msgstr a traduo para o idioma pretendido.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Incio dos trabalhos

42

O resultado dessa traduo um arquivo PO no mesmo formato de um arquivo POT, porm com cabealhos especficos e obviamente as tradues editadas.

Arquivos MO
Ao gerar um arquivo PO de traduo criado automaticamente um arquivo MO, do tipo binrio, que carrega consigo todas as entradas e tradues num formato adequado para rpida extrao das informaes traduzidas.

Criando entradas
Para tornar um texto traduzvel, adicione ele dentro das funes de traduo. As mais comumente utilizadas so:
Atribuindo o valor da traduo a uma varivel
$texto = __('My text...');

Exibindo o texto diretamente em tela


_e('My text...'); // Esse ltimo recurso equivalente a: echo __('My text...');

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Incio dos trabalhos

43

Informe os textos sem uso de caracteres especiais ou acentuao para evitar erros posteriores. Em nosso projeto utilizarei termos em ingls para desenvolver o tema. Desse modo ao final teremos o tema completo em dois idiomas!

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Incio dos trabalhos

44

Criando um template web


Com base nos Wireframes criados podemos enfim comear a programar nosso tema. Primeiramente criaremos apenas um Template web. Template o modelo a ser utilizado, seria o mesmo que Tema, porm este ltimo mais especfico tratando dos templates preparados para uso com o WordPress; enquanto que o primeiro possui apenas formataes web sem interveno de funes de qualquer CMS. Criaremos um arquivo index.php apenas com marcaes em HTML que nos permita, logo em seguida com ajuda do CSS, obter a formatao pretendida. Ao programar no se esquea dos padres estudados.

Visualizao da index.php em um navegador web

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Incio dos trabalhos

45

index.php
Vemos a nitida separao do contedo em camadas, ao melhor estilo Tableless, cada uma com um identificador nico (id) e alguns elementos acompanhados de classes (class) para facilitar suas formataes.

style.css
O estilo esplorado traz de modo compacto um reset de incio. Essa simples instruo faz com que (de modo superficial) todos os navegadores tenham um ponto em comum na definio de sua folha de estilos.
imprescindvel o bom entendimento de CSS para uma boa formatao dos elementos. Repare em nosso exemplo como poucas linhas, mesmo desprovidas de elementos grficos mais robustos, fizeram uma enorme diferena no resultado final obtido.

Os arquivos utilizados nesse captulo esto disponveis no arquivo inicio-dos-trabalhos.rar anexo ao livro.

Tomaremos esses arquivos como base para a continuao do desenvolvimento. Para fins didticos e de fixao do contedo altamente recomendvel que voc pegue os arquivos e os altere enquanto executa a leitura do livro.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Parte III
Construo do tema

Construo do tema

47

Os temas WordPress ficam alojados na pasta wp-content/themes/, partindo da pasta de instalao do CMS. Cada tema possui ainda uma pasta dentro da pasta de temas e dentro dela todos os seus arquivos de imagem, estilo, funes, etc.
O WordPress inclui um tema padro em sua instalao. Examine os arquivos do tema padro cuidadosamente para ter uma melhor idia de como criar seus prprios arquivos de tema.

Os temas basicamente consistem de trs principais tipos de arquivos, alm de imagens e arquivos JavaScript, so eles: style.css Controla a apresentao (design e layout) das pginas do site. functions.php Funes opcionais Arquivos do tema (.php) Controlam a forma como as pginas do site gerenciam as informaes do banco de dados para ser exibido no site

Estilo
Alm de informaes de estilo CSS para o tema, style.css fornece detalhes sobre o tema na forma de comentrios. Dois temas no podem ter os mesmos dados em seus cabealhos. Caso isso ocorra haver problemas ao selecionar o tema ou ativ-lo.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Construo do tema

48

Como j temos o arquivo, agora incluiremos como nosso cabealho algumas informaes sobre o tema a ser criado:
style.css
/* Theme Name: Aprendiz Version: 1.0 Description: Desenvolvido por <a href="http://www.guiawp.com.br">Guia WordPress</a>. Author: Guilherme Mazetto Author URI: http://www.guiawp.com.br/ */

O cabealho de linhas de comentrio no style.css so necessrios para o WordPress para ser capaz de identificar um tema e apresent-lo no Painel Administrativo acessando Aparncia > Temas. Nessa pgina estaro disponveis todos os temas instalados. Para ser melhor visualizado na escolha de temas, abra seu template e capture uma tela dele. Crie um arquivo de screenshot.png com as dimenses 300px de largura por 225px de altura e salve dentro da pasta do seu tema. Feito isso, essa imagem servir como miniatura do seu tema e facilitar a escolha dele quando necessrio.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Construo do tema

49

Template Tags
As Template tags so cdigos que instruem o WordPress para fazer determinadas aes ou pegar alguma informao. Para que a integrao de um simples template web seja feita com o WordPress necessrio a utilizao dessas tags. Elas vo ao banco de dados do blog e recuperam as informaes personalizadas de cada pgina, categoria, autor e o que mais for requisitado referente ao blog em uso. Muitas vezes nos permitido enviar parmetros para as tags com intuito de personalizar ainda mais a resposta que elas traro. De forma geral, so consideradas Template Tags, todas as funes que usaremos em nosso tema para exibir nele as informaes provenientes do WordPress; por exemplo: bloginfo, wp_nav_menu, the_search_query, wp_get_archives.

Cabealho
Trabalhando com os arquivo do tema, em nosso caso o index.php, comearemos a estudar suas partes. No topo da pgina, separamos o espao para nosso cabealho. Compreendemos por cabealho a parte superior do site que vai do incio at a exibio do menu. O cabealho traz informaes importantes para o servidor web e buscadores e tambm, em nosso caso, em sua parte visvel exibir o nome e a descrio do blog de acordo com os valores informados pelo WordPress. Para isso acontecer devemos comear a integrar nosso arquivo com as funes do WordPress. Antes mesmo da tag <head> incluiremos a funo que determina o
A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Construo do tema

50

idioma a ser utilizado:


index.php
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

A funo language_attributes exibe os atributos de linguagem para a tag <html>; identificando o idioma em uso e tambm a direo do texto para a pgina. Ainda dentro da tag <head>, adicionaremos a seguinte linha:
index.php
<link rel="profile" href="http://gmpg.org/xfn/11" />

Ela define o perfil de relacionamento que ser respeitado, de acordo com as normas do endereo citado. O atributo 'rel' descreve a relao do atual documento com uma ncora especificada pelo atributo href. O valor desse atributo uma lista de tipos de links separados por um espao simples. O WordPress adota o padro XFN (XHTML Friends Network) Rede de amigos XHTML, que visa representar nos links as relaes humanas. Geralmente o atributo preenchido automaticamente pelo sistema.
Para saber mais sobre o padro XFN acesse http://gmpg.org/xfn/

Continuando a incluir informaes relevantes dentro da tag <head>, nosso cabealho para servidores, adicionaremos as meta tags:

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Construo do tema

51

index.php
<meta http-equiv="content-type" content="<?php bloginfo('html_type') ?>; charset=<?php bloginfo('charset') ?>" /> <meta http-equiv="content-language" content="<?php bloginfo('language'); ?>" />

Vemos o uso da funo bloginfo. Ela mostra informaes sobre o blog, em sua maioria as que so definidas em Opes Gerais do Painel Administrativo do WordPress (Configuraes > Geral).
A funo boginfo sempre imprime um resultado para o navegador. Caso precise do valor para uso no PHP, use get_bloginfo.

Os parmetros usados foram: html_type tipo do html em uso charset codificao do texto language idioma em uso Utilizamos tambm a funo wp_title que, no caso, exibir o ttulo da pgina com um separador de texto localizado a direita do ttulo. Utilizando ainda o bloginfo, substituiremos o endereo do arquivo de estilo, nome, descrio e links para pgina inicial do blog fechando temporariamente nosso cabealho:

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Construo do tema

52

index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head> <link rel="profile" href="http://gmpg.org/xfn/11" /> <meta http-equiv="content-type" content="<?php bloginfo('html_type') ?>; charset=<?php bloginfo('charset') ?>" /> <meta http-equiv="content-language" content="<?php bloginfo('language'); ?>" /> <title><?php wp_title( ' | ', true, 'right' ); bloginfo( 'name' ); ?></title> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" /> </head> <body>

<div id="page-wrap"> <div id="header"> <p><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></p> <span><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('description'); ?>"><?php bloginfo('description'); ? ></a></span> </div>

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Construo do tema

53

Dados no confiveis
Note que imprimimos no atributo title dos dois links o nome e descrio do blog respectivamente. O contedo dessas variveis ser descriminado por cada autor de blog. Supondo que um autor qualquer defina como nome ou descrio um valor contendo aspas poderia deixar o documento invlido para as normas do W3C ou at mesmo significar um desastre para o tema.
Devemos ficar atento quando imprimimos variveis do WordPress como atributos de elementos HTML, geralmente os erros ocorrem nos atributos alt, title e value das tags

Nesses casos utilizaremos o esc_attr. A funo codifica (apenas uma vez) os smbolos < > & " ' (sinal de menor, sinal de maior, 'e' comercial, aspas duplas, aspas simples).
index.php
<div id="header"> <p><a href="<?php bloginfo( 'url' ); ?>" title="<?php esc_attr( bloginfo( 'name' ) ); ?>"><?php bloginfo( 'name' ); ? ></a></p> <span><a href="<?php bloginfo( 'url' ); ?>" title="<?php esc_attr( bloginfo( 'description' ) ); ?>"><?php bloginfo( 'description' ); ?></a></span> </div>

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Construo do tema

54

Arquivo de Funes
Um tema pode opcionalmente usar um arquivo de funes, que reside no subdiretrio do tema e chamado functions.php. Este arquivo basicamente funciona como um plugin, e se ele est presente no tema que voc est usando, ele carregado automaticamente durante a inicializao do WordPress (tanto para pginas do blog e pginas de administrao). Veja algumas das principais utilizaes deste arquivo: Definir funes que sero utilizadas em diversos arquivos diferentes do seu tema; Habilitar recursos como os menus de navegao; Criar um menu de opes para o tema, dando opes para alterar cores, estilos e outros aspectos;

Menus
O WordPress incluiu um mecanismo fcil para uso de menus de navegao personalizados em um tema. O recurso trata-se, como o prprio nome j diz, de se responsabilizar pela criao e edio de menus para as verses mais recentes do WordPress. Para incorporar o suporte a menus em um tema basta incluir algumas poucas linhas de cdigo no arquivo functions.php:
functions.php
register_nav_menu( 'main-menu', __( 'Main Menu' ) );

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Construo do tema

55

E no arquivo index.php substituiremos a lista de links por:


index.php
<div id="menu"> <?php wp_nav_menu( array( 'location'=>'main-menu', 'container'=>null ) ); ?> </div>

O valor passado para location dever ser o mesmo que o especificado anteriormente ao registrar o menu. Desse modo voc est dizendo que aquele menu, dever aparecer aqui. Container null, pois por padro, adicionaria outra div, como j temos uma no ser preciso outra. No tiramos a div e a incorporamos atravs da funo, pois, se os menus nao estiverem ativos; a formatao dos links ficar prejudicada. Aps implantar esse recurso, acesse seu painel de administrao do WordPress. Clique em Aparncia > Menus e gerencie seu menu como bem entender. Construdo o menu, ele aparecer no local indicado.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Construo do tema

56

Sidebar
A barra lateral (Sidebar) uma coluna vertical pouco mais estreita que o espao para o contedo, e geralmente recheado de muita informao sobre o blog. Encontrado na maioria dos blogs WordPress, a barra lateral geralmente colocada ao lado direito ou esquerdo do contedo, embora em alguns casos, podemos ver duas ou mais barras laterais em diferentes posies no layout.

Navegao
Atualmente o objetivo principal da barra lateral de prestar assistncia de navegao para o visitante. Para isso so projetadas listas de itens para ajudar os visitantes do seu blog a encontrar determinadas informaes, contedo. Tais listas de navegao inclui Categorias, Pginas, Arquivos, etc. Outra ferramenta de navegao que voc ver na barra lateral um formulrio de busca que tambm servir para ajudar as pessoas a encontrarem o que esto procurando no seu site.

Listas aninhadas
O clssico de temas WordPress usar listas aninhadas para apresentar informaes da barra lateral. Listas aninhadas so uma srie de listas no-ordenadas, situadas uma dentro de outro. A utilizao das listas aninhadas em sua barra lateral no obrigatrio, no entanto o seu entendimento de grande importncia dado
A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Construo do tema

57

que, a maioria dos plugins e informaes desenvolvidas para serem publicadas na Sidebar, fazem uso desse artifcio.

Widgets
Widgets so como plugins, mas desenvolvidos para forncer um simples modo de agrupar vrios elementos no contedo da Sidebar sem ter que alterar nenhuma linha de cdigo para aplic-los. Atravs da aba Aparncia > Widgets podemos arrast-los e troc-los facilmente de posio no menu lateral, e como resultado customizar ainda mais o nosso tema. Para efetivar qualquer edio atravs da aba de um widget preciso clicar sobre o respectivo boto salvar, caso contrrio ela no ser aplicada.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Construo do tema

58

Personalizando a Sidebar
Como base em todos esses conhecimentos, vamos agora atualizar o contedo de nossa Sidebar. Dentro do formulrio de busca informe como valor do atributo action o endereo inicial do blog e o valor do campo de pesquisa:
index.php
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>"> ... <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />

Com as alteraes, sempre que submetido o formulro redirecionar para a pgina inicial do blog e enquanto houver uma pesquisa ativa o valor ser exibido na caixa de texto para pesquisa. O prximo passo preparar a barra lateral para receber os Widgets.
functions.php
register_sidebar( array( name' 'id' 'before_widget' 'after_widget' 'before_title' 'after_title' ); => __( 'My Sidebar' ), => 'my-sidebar', => '<ul><li>', => '</li></ul>', => '<h3>', => '</h3>' )

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Construo do tema

59

Com ela registraremos uma rea para Widgets com os atributos descritos. Voltando ao index.php, logo abaixo do formurio de busca substitua a lista criada por:
index.php
<?php if ( !dynamic_sidebar( 'my-sidebar') ) : ?> <ul> <li><h3><?php _e( 'Archive' ); ?></h3></li> <li> <ul> <?php wp_get_archives(); ?> </ul> </li> </ul> <?php endif; ?>

A funo dynamic_sidebar ir imprimir no referido espao o contedo que ser gerenciado pelos Widgets e retornar verdadeiro ou falso de acordo com a presena ou no deles. Fazemos a verificao e exibimos uma lista com o Arquivo do blog separado por ms de modo a no deixar o espao vazio caso o usurio nao tenha incluido nenhum widget pelo painel.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Construo do tema

60

Rodap
As opes para trabalhar com o rodap so vrias. possvel verificarmos a presena de listas de links, notcias, textos e muita informao nesse espao. Uma prtica bastante usada em WordPress realizar a preparao do rodap como Sidebars auxiliares e registr-las tal como fora mostrado no item anterior permitindo a insero de Widgets. Mantendo o clssico padro de exibir apenas os crditos no rodap, anteriormente estipulamos o contedo que nosso rodap teria. Agora vamos adapt-lo ao WordPress possibilitando a traduo do texto informado.
index.php
<?php printf( __( '%s Theme by %s.' ), '<a href="http://www.wordpress.org">Wordpress</a>', '<a href="http://www.guiawp.com.br">Guia WordPress</a>' ); ?>

A funo printf do PHP, seu uso altamente recomendado em circunstncias como a demonstrada por facilitar a formatao dos textos a serem exibidos. Em nosso caso, o primeiro identificador %s exibir o link para o site do WordPress, e o segundo, o link para o site do desenvolvedor.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Construo do tema

61

Trabalhando o contedo
A partir desse ponto comearemos a integrar o contedo do nosso (antigo) template com as funes do WordPress. O contedo do blog basicamente ser composto pelos posts, caracterizados pelas suas informaes como ttulo, data, autor, contedo e classificao em tags e categorias. Para conseguir o resultado esperado ser necessrio entender bem o funcionamento do Loop do WordPress. O Loop nada mais que o lao de repetio responsvel por exibir os posts do blog.

Loop
O Loop usado pelo WordPress para exibir cada uma de suas postagens. Usando o Loop, o WordPress executa os processos de cada uma das mensagens a serem exibidas na pgina atual e os formata de acordo com os critrios especificados. Qualquer cdigo HTML ou PHP colocado no lao ser repetido em cada post.
Exemplo
<?php if (have_posts ()): while (have_posts ()):? the_post ();?> Contedo a ser executado a cada iterao...<br /> Seja ele em HTML ou <?php echo 'PHP'; ?> <?php endwhile; ?> <?php else: ?> <p><?php _e ('Sorry, not found!');?></p> <?php endif;?>

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Construo do tema

62

Acabamos de dizer ao nosso tema para verificar a presena de contedo. Se existem contedos a serem exibidos, enquanto houver; mostre-me os posts um a um at que no haja mais. Se no existir contedo mostraremos uma mensagem de erro na tela informando a ausncia do contedo.

The e Get_the
Uma das grandes vantagens das funes do WordPress justamente a capacidade de entendimento que ela nos proporciona. Qualquer pessoa, com um nvel bsico de ingls, consegue entender o funcionamento que est implcito a cada funo. Por exemplo, a exibio dos ttulos dos posts com o respectivo link para ele:
index.php
<h1><a href="<?php the_permalink(); ?>" title="<?php esc_attr( the_title() ); ?>"><?php the_title(); ?></a></h1>

A funo the_permalink exibe o link permanente (Permalink) para o post, enquanto a the_title exibe o ttulo do post; respectivamente nos locais onde esto especificadas. No entanto algumas vezes no queremos exibir diretamente as informaes, mas sim transmit-las ao PHP para tratamento e somente depois enviar para impresso em tela. Nesses casos, a maioria das funo the_ possuem um equivalente get_the_, como a utilizada para exibir o nome do autor do post, destacada abaixo:

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Construo do tema

63

index.php
<?php printf( esc_attr__( 'More posts from %s' ), get_the_author() ); ?>

As funes the e get_the possuem basicamente o mesmo funcionamento. As funes the_ devero estar dentro do loop. As funes get_the_ variam, algumas devem estar dentro do loop e outras recebem identificadores de post como parmetro.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Construo do tema

64

Plugin API Hooks


Basicamente os hooks so aes onde poderemos chamar outras aes, os conhecidos callbacks. Dessa maneira sempre que determinada ao for executada no Wordpress, uma funo definida por voc poder ser chamada. Esses 'ganchos' (Hooks) nos permitem personalizar ainda mais os temas com instalao de plugins e material de terceiros. O WordPress ao deparar-se com algum desses ganchos, interrompe seu processamento e verifica se existe alguma funo para ele para ele fazer alguma coisa. Caso afirmativo, a funo executada (podendo ser mais de uma) e o sistema continua seu processamento normal. Existem dois tipos de Hooks: Action e Filter (Ao e Fitro)

Actions
Chama a funo em determinado ponto. Usando o gancho 'admin_footer', sempre que o rodap do painel administrativo for executado, a funo para ele passada tambm ser.

Filters
Passa argumentos, contedo para a referida funo de gancho. Desse modo a funo pode usar a informao transmitida para realizar sua tarefa. Com isso podemos (por exemplo) passar uma funo ao fitro the_content que coloque tags de negrito para o termo WordPress, sem alterar de fato a funcionalidade de exibir o contedo. Introduziremos alguns Hooks especficos dentro do nosso tema: wp_head
A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Construo do tema

65

Acompanha o elemento <head> de um tema no arquivo header.php. wp_footer Aparece no footer.php, logo antes do fechamento da tag </body>. Visualmente no tero nenhum efeito sobre o tema, porm a ausncia desses poder implicar em no funcionamento e srios problemas com plugins e outras funes que podero ser implementadas futuramente.
Os arquivos utilizados nesse captulo esto disponveis no arquivo construcao-do-tema.rar anexo ao livro.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Parte IV
Estrutura do tema

Estrutura do tema

67

Vimos at aqui como o index.php flexvel e pode ser usado incluindo todas as referncias de cabealho, sidebar, rodap, contedo, categorias, arquivo, busca, erro e qualquer outra pgina criada no WordPress. Por outro lado ele pode ser dividido em mdulos, arquivos menores e mais especficos em sua funo. Cada um desses arquivos fazendo apenas parte do tema total. Caso algum desses arquivos no esteja presente entre os demais arquivos do tema, o WordPress utiliza um arquivo padro respeitando as normas de sua Hierarquia.

Hierarquia
Os arquivos .php do tema (separadamente conhecidos como templates ou modelos) se encaixam como peas de um quebra-cabea para gerar as pginas em seu blog. Alguns so usados em todas as pginas da web (cabealho, rodap e estilos), enquanto outros so usados somente em condies especficas (pginas personalizadas). O WordPress utiliza informaes contidas no interior de cada link em seu blog para decidir qual o modelo ou conjunto deles sero utilizados para exibir a pgina. Tendo como ponto de partida um verificador para todos os tipos de consulta que decide qual tipo de pgina est sendo solicitado, os modelos so ento escolhidos (dependendo da disponibilidade) na ordem sugerida pela Hierarquia do WordPress. Para ilustrar o funcionamento da hierarquia, supomos que o seu blog est instalado em http://meublog.com/ e um visitante clica em um link que o direcionar para uma pgina de categoria, sendo essa chamada 'Minha categoria'; algo como http://meublog.com/categoria/minha-categoria/.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Estrutura do tema

68

Hierarquia de modelos do WordPress

Aps a requisio o WordPress ir procurar por um modelo na pasta do tema atual que corresponde ao slug da categoria, category-minhacategoria.php. Caso no encontre, o prximo passo procurar pelo identificador (ID) da categoria. Se a categoria de identificao 1, o WordPress procura por um modelo category-1.php. Se esse no existir, o WordPress procura pelo modelo genrico, category.php, seguido do archive.php e finalmente no index.php. O index.php portanto exibido sempre que os demais modelos no forem encontrados por isso de suma importncia e obrigatrio em todos os temas WordPress.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Estrutura do tema

69

Arquivos Modelos
Com base no que acabamos de ver, trabalharemos amplamente com modelos. Para facilitar nosso trabalho, o arquivo index.php ser dividido em 4 partes (As reticncias servem apenas para resumir o contedo dos arquivos. Dessa forma ao executar a separao dos arquivos, todos os cdigos originais devem ser mantidos):
header.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>> ... <div id="menu"> <?php wp_nav_menu( array( 'location'=>'main-menu', 'container'=>null ) ); ?> </div>

sidebar.php
<div id="sidebar"> ... </div><!-- #sidebar -->

Ainda dentro do Sidebar extrairemos nosso formulrio de busca, deixando-o em um arquivo separado de nome searchform.php. Assim caso voc queira utilizar o formulrio em outro local tambm poder.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Estrutura do tema

70

searchform.php
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>"> <div> <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" /> <input type="submit" id="searchsubmit" value="Buscar" /> </div> </form>

footer.php
</div><!-- #container --> ... </html>

index.php
<div id="content"> ... </div><!-- #content -->

Repare como a marcao do contedo HTML com comentrios do tipo <!-- #nome-do-bloco-de-fechamento --> auxilia e muito na distribuio dos cdigos.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Estrutura do tema

71

Includes Tags
As include tags so usadas nos modelos para executar HTML e PHP que se encontram em outros arquivos modelo. O PHP possui as instrues include e require para esse fim, no entanto para arquivos especficos do tema aconselhvel o uso das Includes Tags em razo da facilidade e padronizao do cdigo. Em nosso arquivo index.php incuiremos as chamadas get_header, get_sidebar e get_footer:
index.php
<?php get_header(); ?> <div id="content"> ... </div><!-- #content --> <?php get_sidebar(); get_footer(); ?>

E no arquivo sidebar.php incluiremos get_search_form:


sidebar.php
<div id="sidebar"> <ul><li><?php get_search_form(); ?></li></ul> ...

Ao abrirmos novamente o nosso blog, constataremos que os demais arquivos foram chamados nos respectivos espaos. Caso algum modelo no seja encontrado, em seu lugar ser includo o arquivo homnimo da pasta wp-includes/theme-compat e quando esse no existir, no caso do formulrio de busca, ser automaticamente gerado.
A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Estrutura do tema

72

Incluindo arquivos
Agora que sabemos o quo fcil pode ser nosso trabalho reaproveitando 'pedaos' do nosso tema, vamos extender essa prtica para qualquer arquivo PHP. Para isso devemos ter um arquivo com as instres desejadas denominado slug.php junto com os demais arquivos do tema. Para incluir as referidas instrues em um outro arquivo basta informar:
Exemplo
<?php get_template_part( $slug ); ?>

Slug uma expresso do meio jornalstico para criar identificaes mais claras e intuitivas para contedo publicado na web. Aplicam-se no uso dos Permalinks com suas URL amigveis aos visitantes do blog. Uma identificao slug no possui acentos, caracteres especiais ou espaos em branco.

Criaremos para esse passo um arquivo dizendo que a informao procurada no existe, ou seja, o usurio fez uma consulta que no teve resultados e precisamos inform-lo disso. Assim sendo edite:
index.php
// substitua <p><?php _e('Sorry, the content not found!');?></p> // por <?php get_template_part( 'no-results' ); ?>

Criaremos um arquivo chamado no-results.php e nele colocaremos a informao que desejamos exibir, copie a linha substituda dentro desse arquivo.
A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Estrutura do tema

73

Da mesma forma faremos com o contedo dos posts. Criaremos um arquivo chamado loop.php e nele colocaremos todas as instrues do Loop que estavam no index.php. Por outro lado, nesse ltimo arquivo, substituiremos as instrues por sua chamada. Veja como ficou o index.php final:
index.php
<?php get_header(); ?> <div id="content"> <?php get_template_part('loop'); ?> </div><!-- #content --> <?php get_sidebar(); get_footer(); ?>

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Estrutura do tema

74

Single.php
Iremos agora preparar o arquivo que receber os posts quando visualizados separadamente e tambm poder trabalhar com os comentrios, item de muitssima importncia para qualquer blog. Copie o arquivo loop.php e renomeie para single.php e inclua os arquivos de cabealho, sidebar e rodap nos respectivos lugares. No se esquea da div de contedo que foi deixada no index.php. Dentro da div entry-meta, logo aps exibir o nome do autor, incluiremos um link que nos levar at os comentrios utilizando a funo comments_popup_link.
single.php
<?php comments_popup_link( __( 'Leave a comment' ), __( '1 Comment' ), __( '% Comments' ), 'comments', __( 'Comments are close.' ) ); ?>

Por fim ao final da div com classe post, incluiremos a funo comments_template.
single.php
</div><!-- .post --> <?php comments_template(); ?> <?php endwhile; ?>

Pronto, seu sistema de comentrios est ativo e pronto para ser usado, no entanto algumas alteraes no CSS sero necessrias para deixar a listagem e o formulrio mais bem apresentveis.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Estrutura do tema

75

style.css
.commentlist { margin: 10px 0 30px 0;} .commentlist li { list-style: Nenhum;} .commentlist li ul { margin-left: 20px;} .commentlist li .comment-body { background: #eee; padding: 10px; margin-bottom: 10px;} .commentlist img { float: left; margin: 5px;} .commentlist p { clear: both; margin: 15px 0; color: #555;} .reply { text-align: right;} #commentform { margin-top: 15px;} #commentform p { margin-bottom: 7px;}

Listagem dos comentrios do tema Aprendiz

Os arquivos utilizados nesse captulo esto disponveis no arquivo estrutura-do-tema.rar anexo ao livro.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Parte V
Aprimoramentos

Aprimoramentos

77

Sabemos que nosso tema suporta exibir mais de um post na index. O nmero de posts a serem exibidos por pgina configuravel pelo painel em Configuraes > Leitura. No entanto quando a quantidade de posts existentes no blog ultrapassar esse nmero em nosso tema atual, no teramos condies de ver os posts mais antigos. Para resolver a situao criaremos uma paginao para que nosso tema nao deixe de exibir nenhum post, por mais antigo que ele seja. No arquivo loop.php aps o final do Loop incluiremos:
loop.php
<div id="navigation"> <?php previous_posts_link( __( 'Newer posts' ) ); ?> <?php next_posts_link( __( 'Older posts' ) ); ?> </div>

Para melhor exibir em tela, no style.css tambem incluiremos:


style.css
/* Navegao */ #navigation a { background: #c22; color: #eee; padding: 4px;} #navigation a:hover { background: #fc7; color: #333;}

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Aprimoramentos

78

Resumo
No entanto muitas vezes ao exibir a listagem dos posts o visitante no clica para ver o post separadamente pois j o leu por completo. Uma excelente prtica muito utilizada a de exibir apenas os resumos nas paginaes e apenas no single.php exibir o restante do post. Para isso no loop.php ao inves de informar the_content, responsvel por exibir o contedo, informe the_excerpt.
loop.php
<div class="entry"> <?php the_excerpt(); ?> </div>

Nessas circunstncias, caso o campo resumo foi preenchido durante a edio do post ele ser exibido, seno um nmero limitado de palavras do texto original sero expostos seguido de um continuador de texto [...]

Search
Ainda tratando de paginao de posts, criaremos agora o arquivo search.php que ser exibido quando uma busca for executada. Copie o arquivo index.php e renomeie para search.php

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Aprimoramentos

79

search.php
<div id="content"> <h1 id="archive"><?php printf( __( 'Search results for: <span> %s</span>' ), get_search_query() ); ?></h1> <?php get_template_part('loop'); ?> </div><!-- #content -->

Inclua as seguintes formataes no style.css


Style.css
/* Arquivo */ #archive { margin-bottom: 25px; border: 0;} #archive span { color: #c22; text-decoration: underline;}

Conditional Tags
As tags condicionais podem ser usadas em seus modelos para mudar o contedo e como ele exibido em uma certa pgina dependendo em quais condies a pgina se encontra. Isto , 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: is_single, is_home e is_page que verificam se a pgina atual a de posts, inicial ou uma pgina respectivamente.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Aprimoramentos

80

Archive
Apurando os dados da mesma maneira, trataremos das buscas quando efetuadas por tag, categoria, autor ou data. Para isso, copie o arquivo recm modificado search.php e renomeie para archive.php. No local de exibio do ttulo, faa:
archive.php
<div id="content"> <h1 id="archive"> <?php if ( is_day() ) printf( __( 'Daily archives: <span>%s</span>' ) , get_the_date() ); else if ( is_month() ) printf( __( 'Monthly archives: <span>%s</span>' ) , get_the_date( 'F Y' ) ); else if ( is_year() ) printf( __( 'Yearly archives: <span>%s</span>' ) , get_the_date( 'Y' ) ); else if ( is_tag() ) printf( __( 'Tag: <span>%s</span>' ) , single_tag_title( '', false ) ); else if ( is_category() ) printf( __( 'Category: <span>%s</span>' ) , single_cat_title( '', false ) ); else if ( is_author() ){ $author = get_userdata( $_GET['author'] ); A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Aprimoramentos

81

printf( __( 'Author: <span>%s</span>' ) , $author->display_name ); } else _e( 'Blog archives' ); ?> </h1> <?php get_template_part('loop'); ?> </div><!-- #content -->

Sempre criaremos arquivos para o tema respeitando a hierarquia das pginas. De nada adiantaria ter o arquivo acima se existissem tambm os arquivos date.php, tag.php, category.php e author.php por exemplo.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Aprimoramentos

82

Posts e pginas
Posts so como notcias que voc escreve com um certa periodicidade e so mostrados no blog em ordem cronolgica reversa, ou seja, os mais novos antes dos mais antigos. As pginas por sua vez contm uma informao esttica sem relevncia com a data na qual foi criada, mas sim pelo seu contedo em si que geralmente trata questes sobre o site ou seus mantenedores. Devido a essa clara discrepncia de dinmica e relevncia baseada na data de sua publicao atribuda a pginas e posts, apenas esses ltimos so incorporados no feed. Em uma explanao simblica seria como se o blog se mantivesse dentro de uma linha do tempo determinada pelos posts e as pgina coexistiriam do lado de fora dessa linha. Para fins de organizao do contedo as pginas podem possuir uma hierarquia entre si quando marcado suas respectivas pginas pai (ou me) e ordem na caixa Atributos de pgina da tela de edio. Por outro lado os posts possuem um sistema mais complexo utilizando-se de tags e categorias.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Aprimoramentos

83

Modelos de Pginas
O WordPress pode ser configurado para usar diferentes modelos de pgina para pginas diferentes. Para alternar o modelo de pgina, enquanto edita uma pgina qualquer pelo painel de administrao, selecione o modelo na lista chamada Modelo. O arquivo padro que exibir o contedo das pginas a page.php.
Para acessar o seletor de modelo, dever existir pelo menos um modelo de pgina personalizado disponvel no tema ativo.

Criando um novo modelo de pgina


Os arquivos de modelo da pgina devero estar na pasta do seu tema. Voc poder criar um arquivo com qualquer nome, exceto os nomes reservados do WordPress como no caso do header, footer, sidebar e afins. Para criar um modelo basta inserir no cabealho da pgina a instruo:
Exemplo
/* Template Name: Nome do modelo */

As etapas a seguir sero feitas para criarmos um modelo de exibio das nossas pginas: Copie a single.php e renomeie para page.php Apague a div de classe post-utility, pois pginas no tem categoria nem tags.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Aprimoramentos

84

Pginas adicionais
Criaremos agora dois modelos de pgina; um sem os comentrios e outro sem a Sidebar.
Note que assim como no item anterior, os passos de execuo dos tpicos a seguir sero dados como itens de uma lista. Essa prtica foi tomada para evidenciar ainda mais a facilidade que encontramos nessa fase do desenvolvimento, tendo bem estrutrado e separado as partes do nosso tema.

Sem comentrios
Copie o arquivo page.php e renomeie para page-noreply.php; Para deixar a pgina sem comentrios apague a linha com a instruo <?php comments_template(); ?>.

Sem Sidebar
Copie o recm criado arquivo page-noreply.php e o renomeie para page-nosidebar.php; Para deixar a pgina sem Sidebar apague o get_sidebar(); Na div do contedo (id="content") troque o identificador para content-full; Edite o CSS.
style.css
#content-full { width: 900px; padding: 20px; background: #fff;} A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Aprimoramentos

85

Pgina 404
Por vezes comum acontecer de voc apagar alguns posts ou o visitante digita um endereo invlido para teu blog e uma pgina de erro aparece. Na atual situao do nosso tema, a mensagem que exibida a contida no arquivo no-results.php.

Pgina de erro do Twitter

No entanto, tal arquivo e mensagem referem-se a ausncia de contedo e no a inexistncia dele, isto , o endereo existe, porm no tem informaes a serem exibidas; enquanto que para erros do tipo 404 o endereo invlido, no existe. Copie o arquivo index.php Renomeie para 404.php Apague a instruo <?php get_template_part('loop'); ?> e no local informe sua mensagem de erro:
404.php
<h1 id="archive"><?php _e( 'Error 404! Invalid URL...' ); ?></h1>

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Aprimoramentos

86

Classes do Tema
Implementando as seguintes funes de classes para HTML, o WordPress gera automaticamente atributos de classe para body, post e elementos dos comentrios. Para classes de posts, funciona apenas dentro do Loop.
Utilizaremos apenas o body e post j que os comentrios estamos pegando pronto do WordPress e no necessitar de alteraes.

header.php
<body <?php body_class(); ?>>

loop.php, single.php, page.php, ...


<div <?php post_class(); ?>>

Dessa forma voc poder customizar o CSS como bem entender e melhor aproveitar, por exemplo, para determinar titulos de uma categoria na cor verde basta incluir na folha de estilo:
Exemplo
.category-slug-da-categoria h1 { color: #0c0;}

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Aprimoramentos

87

Javascript
Uma forma segura de acrescentar cdigos javascripts a um tema WordPress registrando-os inicialmente via pgina de funes do tema, e posteriormente incluindo as chamadas para os registros onde necessrio, em geral no header.php. Esse processo apenas inclue o script se ele j no tenha sido includo, e tambm capaz de carregar scripts embutidos do WordPress, como faremos com o jQuery no header.php:
header.php
wp_enqueue_script("jquery");

Repare que o script foi adicionado com sucesso por fazer parte da biblioteca de scripts do WordPress como mencionado. Alm desse, incluiremos tambm um script responsvel por permitir enviar uma resposta aos comentrios sem a necessidade de recarregar a pgina. Faremos isso da seguinte forma logo abaixo da insero da jQuery:
header.php
if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' );

Veja a lista completa de scripts que o WordPress possui acessando a pasta wp-includes/js

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Aprimoramentos

88

Registrando scripts
Muitas vezes precisamos incorporar cdigos javascript ao tema criado para termos uma maior interao com o visitante e os elementos HTML do layout. Vamos incluir um script utiizando o modo seguro do WordPress. Para isso faa o registro dentro do arquivo de funes do tema:
functions.php
wp_register_script( 'validator', get_bloginfo( 'template_directory') . '/js/validator.js', array( 'jquery' ), '1.0' );

Note que especificamos como terceiro parmetro, a obrigatoriedade do script jQuery ser carregado antes do nosso. Isso porqu iremos fazer uso da biblioteca e se ea no estiver presente, nosso cdigo no funcionar.

Validao do formulrio
O script proposto ir fazer a validao do formulrio de comentrios, antes dele ser enviado. Perceba que foi criado uma pasta dentro da pasta do tema com o nome js, e dentro dela incluimos o arquivo validator.js
O objetivo do tpico ilustrar o modo de inserir scripts em seu tema, por isso o cdigo do arquivo validator.js no ser publicado. Para obt-lo abra a pasta aprendiz/js do arquivo anexo a este captulo.

O script verificador muito interessante de ser utilizado pois reduz ainda mais o nmero de spams nos seus comentrios. Falta agora incluir o
A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Aprimoramentos

89

script ao tema. O melhor local para tal tarefa dentro do arquivo do cabealho. Como a verificao somente ser usada se o formulrio de comentrios estiver sendo exibido e houver a possibilidade de resposta; fizemos uma pequena verificao para saber se a pgina requisitada atende aos requisitos.
header.php
if ( is_singular() && get_option( 'thread_comments' ) ){ wp_enqueue_script( 'comment-reply' ); wp_enqueue_script( 'validator' ); }

Para tornar a exibio do erro mais chamativa iremos incluir algumas informaes em nossa folha de estilos.
style.css
.error { font-weight: bold; color: #c22;}

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Aprimoramentos

90

Folha de estilos
O resultado final da formatao de um tema WordPress depende muito das folhas de estilo CSS. Com o uso delas voc tem em suas mos muitas opes de configurar um layout da maneira mais conveniente. Mesmo criando tudo do zero preciso fazer uso, ou ento padronizar, algumas formataes que so inerentes ao WordPress e seu funcionamento.

Classes do WordPress
O WordPress incui automaticamente vrias classes para as imagens e os elementos de bloco visando padronizar funes bsicas, como por exemplo o alinhamento de imagens dentro dos posts atravs das classes alignleft, aligncenter, alignright e alignnone. No caso das imagens, alm da questo do alinhamento, elas ainda necessitam de formatao para suas respectivas legendas. Verifique as classes para tal formatao:
style.css
.aligncenter, div.aligncenter { display: block; margin: 0 auto;} .alignleft { float: left;} .alignright { float: right;} /* As instrues abaixo so para formatar as legendas */ .wp-caption {} .wp-caption img {} .wp-caption p.wp-caption-text {}

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Aprimoramentos

91

Registrando estilos
Da mesma forma que registramos e utilizamos nossos scripts, podemos tambm incluir novos arquivos CSS ao nosso tema, alm do style.css. Geralmente iremos adotar essa prtica quando o arquivo de estilo principal estiver muito extenso e precisemos divid-los em partes menores para melhorar o entendimento do mesmo. Ou ento quando desejamos criar estilos adicionais ao j existente.
functions.php
wp_register_style( 'custom', get_bloginfo( 'template_directory') . '/css/custom.css' );

custom.css
#menu { background: #777; color: #333;} #menu ul li a { color: #fff;} #menu ul li a:hover { color: #ff0;}

Dentro do nosso cabealho chamarei o arquivo apenas quando for exibida uma pgina de busca. Para surtir efeito preciso ainda que a declarao esteja sendo exibida aps a insero do estilo principal.
header.php
if ( is_search() ) wp_enqueue_style( 'custom' );

Apesar do nome dado ao identificador do estilo ser o mesmo que o do arquivo, essa no uma regra a ser seguida. O termo que ir ser recuperado ser o do identificador. A prtica foi adotada por evitar confuses desnecessrias de nomenclatura. O mesmo alerta vale tambm para os scripts.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Aprimoramentos

92

Traduo
Durante todo o desenvolvimento estivemos preparando nosso tema para traduo incluindo os termos a serem utilizados nas funes de internacionalizao do PHP e WordPress. Agora iremos traduzir os termos com a ajuda de um software livre chamado PoEdit.
Para fazer o download do software acesse o site oficial do software em http://www.poedit.net/download.php

PoEdit
Poedit um editor de arquivos .po de modo visual, com recursos que facilitam o manuseio e aplicao das tradues dos textos. Para iniciar um processo de traduo execute o software e siga as etapas: Clique em 'Arquivo' e logo aps 'Novo catlogo...'; Na tela a seguir informe os dados do projeto com o qual est trabalhando, para tabela de caracteres escolha utf-8; Na aba 'Caminhos', insira o caminho base para seu tema; ou seja; o fluxo de pastas que o sistema dever percorrer at encontrar os arquivos a serem traduzidos; Insira o caminho na listagem exibida abaixo do campo caminho base (Ex.: C:\wamp\www\wordpress\wp-content\themes\aprendiz); Na aba 'Palavras-chave' devero ser inseridas as funes de traduo que estamos incluindo aos arquivos desde o incio do
A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Aprimoramentos

93

desenvolvimento do tema (Ex.: __, _e, _n); Ao final clique em OK para confirmar suas aes; Feito isso clique agora em Catlogo > Atualizar a partir do cdigo fonte' (ou no terceiro cone, com o globo desenhado) para o PoEdit capturar todas as entradas dos arquivos existentes no endereo informado e mostr-las em tela.

Traduzindo
Clicando sobre determinado texto, embaixo aparecero dois campos de texto: o primeiro deles com o texto original e o segundo, editvel, aguarda o texto traduzido. Apertando Alt + C quando escolher determinado termo, este repetido para a traduo. Caso exista dvida quanto a traduo de uma certa palavra, aperte Alt + U para marc-la ou desmarcla como incerta dependendo de sua atual situao. Realizada a traduo de todos os termos, no arquivo de funes functions.php inclua:
functions.php
load_theme_textdomain( 'Default', TEMPLATEPATH.'/lang' );

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Aprimoramentos

94

PoEdit com todos os termos traduzidos

Os arquivos utilizados nesse captulo esto disponveis no arquivo aprimoramentos.rar anexo ao livro.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Consideraes Finais

95

Consideraes Finais
Parabns! Agora voc j est apto a entrar de vez no universo de desenvolvimento do WordPress. Com os conceitos aqui vistos voc conheceu a ferramenta, todo seu funcionamento de forma geral e j tornou-se capaz de produzir seu prprio material com base em um template web. Voc perceber que tambm acabou de aprender a lidar mais facilmente com eventuais atualizaes, temas, plugins e reparos ao seu sistema quando for necessrio. Ao continuar trabalhando com o WordPress voc ver ainda o quo fcil implementar recursos que possuem enormes atrativos visuais e funcionais ao teu trabalho sem complicaes, em poucas linhas de cdigo, baseado nas informaes contidas nesse livro. Para facilitar sua busca por informaes quando utilizar o livro como referncia, a seguir temos uma listagem com as funes utilizadas no tema. Todas elas bem explicadas e detalhadas com suas respectivas descries, modo de uso, parmetros e valores retornados.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

Apndice A: Referncia de funes

97

__
Descrio Um alias para translate. Retorna a string traduzida para o termo passado como parmetro. Uso
__( $text, $domain )

Parmetros
$text (string) (obrigatrio)

Texto a ser traduzido Padro: Nenhum


$domain (string) (opcional)

Domnio de onde o texto traduzido ser recuperado Padro: 'Default' Retorna (string) Texto traduzido

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

98

_e
Descrio Exibe a string traduzida para o termo passado como parmetro. Uso
_e( $text, $domain )

Parmetros
$text (string) (obrigatrio)

Texto a ser traduzido Padro: Nenhum


$domain (string) (opcional)

Domnio de onde o texto traduzido ser recuperado Padro: 'Default' Retorna Nada

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

99

bloginfo
Descrio Mostra informaes sobre o blog, em sua maioria as que so definidas nas Opes Gerais do Painel Administrativo do WordPress. Uso
bloginfo( $option )

Parmetros
$option (string) (Opcional)

Palavra-chave que referencia a informao que se deseja obter. Padro: name Lista de opes: name, description, admin_email, url, wpurl, stylesheet_directory, stylesheet_url, template_directory, template_url, atom_url, rss2_url, rss_url, pingback_url, rdf_url, comments_atom_url, comments_rss2_url, charset, html_type, language, text_direction, version

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

100

body_class
Descrio Rene e exibe classes para o elemento body Uso
body_class( $class )

Parmetros
$class (string) (opcional)

Uma ou mais classes para adicionar a lista de classes Padro: Nada Retorna (string) Lista de classes para o elemento body

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

101

comments_popup_link
Descrio Exibe um link para uma janela popup ou um link normal para comentrios. Uso
comments_popup_link( $zero, $one, $more, $css_class, $none );

Parmetros
$zero (string) (opcional)

Texto mostrado quando no h comentrios Padro: 'No Comments'.


$one (string) (opcional)

Texto mostrado quando h um nico comentrio Padro: '1 Comment'.


$more (string) (opcional)

Texto mostrado quando h mais de um comentrio. O smbolo '%' substituido pelo nmero de comentrios Padro: '% Comments'.
$css_class (string) (opcional)

Classe CSS para o link Padro: Nenhum


$none (string) (opcional)

Texto mostrado quando comentrios esto desabilitados. Padro: 'Comments Off'. Retorna Nada

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

102

comments_template
Descrio Carrega o modelo de comentrios padro do WordPress Uso
comments_template( $file, $separate_comments )

Parmetros
$file (string) (opcional)

O arquivo a ser carregado Padro: /comments.php


$separate_comments (boolean) (opcional)

Informa se os comentrios devero ser separados por tipo Padro: false Retorna Nada

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

103

dynamic_sidebar
Descrio Imprime o contedo de cada um dos Widget ativos Uso
dynamic_sidebar( $index )

Parmetros
$index (integer|string) (opcional)

Nome ou ID da Sidebar Padro: 1 Retorna (boolean) Verdadeiro se encontrou algum Widget e falso para o contrrio.

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

104

esc_attr
Descrio Codifica < > & " ' (sinal de menor, sinal de maior, 'e' comercial, aspas duplas, aspas simples) Uso
esc_attr( $texto )

Parmetros
$texto (string) (obrigatrio)

O texto a ser codificado Padro: Nenhum Retorna (string) O texto codificado com entidades HTML

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

105

get_author_posts_url
Descrio Retorna o permalink do autor com base no identificador passado Uso
get_author_posts_url( $id )

Parmetros
$id (integer) (obrigatrio)

ID do usurio que deseja se obter o link Padro: Nenhum Retorna (string) URL para a pgina de posts do referido usurio

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

106

get_day_link
Descrio Retorna a URL de arquivo de um dia especfico Uso
get_day_link( $year, $month, $day )

Parmetros
$year (boolean|integer) (opcional)

O ano. Informe '' para o ano atual. Padro: Nenhum


$month (boolean|integer) (opcional)

O ms. Informe '' para o ms atual. Padro: Nenhum


$day (boolean|integer) (opcional)

O dia. Informe '' para o dia atual. Padro: Nenhum Retorna (string) Endereo do link do dia

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

107

get_footer
Descrio Inclui o arquivo footer.php do tema atual Uso
get_footer( $name )

Parmetros
$name (string) (opcional)

Executa a chamada para footer-name.php. Padro: Nenhum Retorna Nada

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

108

get_header
Descrio Inclui o arquivo header.php do tema atual Uso
get_header( $name )

Parmetros
$name (string) (opcional)

Executa a chamada para header-name.php. Padro: Nenhum Retorna Nada

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

109

get_month_link
Descrio Retorna a URL de arquivo de um ms especfico Uso
get_month_link( $year, $month )

Parmetros
$year (boolean|integer) (opcional)

O ano. Informe '' para o ano atual. Padro: Nenhum


$month (boolean|integer) (opcional)

O ms. Informe '' para o ms atual. Padro: Nenhum Retorna (string) Endereo do link do ms

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

110

get_option
Descrio Uma maneira segura de se obter valores para uma opo recuperada do banco de dados. Uso
get_option( $show, $default )

Parmetros
$show (string) (obrigatrio)

Nome da opo a ser recuperada Padro: Nenhum


$default (mixed) (opcional)

O valor padro retornado se a funo no retorna nenhum valor Padro: false Retorna (mixed) O valor da opo requisitada

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

111

get_search_form
Descrio Mostra o formulrio de busca com base no arquivo searchform.php se esse existir. Uso get_search_form() Parmetros Nenhum Retorna Nada

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

112

get_search_query
Descrio Retorna o termo de pesquisa para a requisio atual, se uma busca foi executada Uso
get_search_form()

Parmetros Nenhum Retorna (string) Termo pesquisado

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

113

get_sidebar
Descrio Inclui o arquivo sidebar.php do tema atual Uso get_sidebar( $name ) Parmetros
$name (string) (opcional)

Executa a chamada para sidebar-name.php. Padro: Nenhum Retorna Nada

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

114

get_template_part
Descrio Carrega arquivos externos Uso
get_template_part( $slug, $name )

Parmetros
$slug (string) (obrigatrio)

O termo slug do arquivo a ser incudo Padro: Nenhum


$name (string) (opcional)

O nome de um arquivo especfico Padro: Nenhum Retorna Nada

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

115

get_the_author
Descrio Recupera o autor do post Uso
get_the_author()

Parmetros Nenhum Retorna (string) O nome de exibio do autor do post

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

116

get_the_author_meta
Descrio Recupera uma meta-informao do autor do post Uso
get_the_author_meta( $meta )

Parmetros
$meta (string) (obrigatrio)

Identifica qua informao do autor se deseja obter Padro: Nenhum Retorna (string) Meta-informao do autor do post

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

117

get_the_category
Descrio Retorna um array de objetos, sendo cada um deles, uma categoria a qual o post est incluso. Uso
get_the_category( $id )

Parmetros
$id (integer) (obrigatrio)

O identificador do post. Padro: $post->ID (o ID do post atual) Retorna (array) As categorias do post

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

118

get_the_category_list
Descrio Retorna uma string contendo todas as categorias do post em forma de links Uso
get_the_category_list( $sep )

Parmetros
$sep (string) (obrigatrio)

Separador que ser includo entre os links Padro: Lista no ordenada, <ul><li> Retorna (string) Links HTML prontos para exibio

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

119

get_the_date
Descrio Retorna a data em que o post foi escrito respeitando o formato passado como parmetro Uso
get_the_date( $d )

Parmetros
$d (string) (opcional)

Formato de data Padro: O formato de data escolhido via painel administrativo ('Formato das datas' em Configuraes > Geral) Retorna (string) Data formatada

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

120

get_the_tag_list
Descrio Gera um HTML contendo as tags associadas ao post atual, onde cada tag est linkada a respectiva pgina. Uso
get_the_tag_list( $before, $sep, $after )

Parmetros
$before (string) (opcional)

Texto a ser inserido antes da string de retorno Padro: 'Tags: '


$sep (string) (opcional)

Separador que ser includo entre os links Padro: ', '


$after (string) (opcional)

Texto a ser inserido ao final da string de retorno Padro: Nenhum Retorna (string) Links HTML prontos para exibio

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

121

get_the_tags
Descrio Retorna um array de objetos, sendo cada um deles, uma tag a qual pertence ao post Uso
get_the_tags()

Parmetros Nenhum Retorna (array) As tags do post

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

122

get_userdata
Descrio Retorna um objeto com as informaes referentes ao usurio cujo ID passado para ele Uso
get_userdata( $id )

Parmetros
$id (integer) (obrigatrio)

Identificador do usurio que se deseja obter informaes Padro: Nenhum Retorna (object) Informaes vinculadas ao usurio

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

123

get_year_link
Descrio Retorna a URL de arquivo de um ano especfico Uso
get_year_link( $year )

Parmetros
$year (boolean|integer) (opcional)

O ano. Informe '' para o ano atual. Padro: Nenhum Retorna (string) Endereo do link do ano

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

124

have_posts
Descrio Verifica a existncia de posts para a atual consulta Uso
have_posts()

Parmetros Nenhum Retorna (boolean) Caso a consulta tenha resultado retorna verdadeiro, do contrrio, falso

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

125

is_author
Descrio Verifica se uma pgina de arquivo de Autor est sendo exibida Uso
is_author( $author )

Parmetros
$author (integer|string) (opcional)

ID ou apelido do autor Padro: Nenhum Retorna (Boolean) Verdadeiro ou falso para a condio

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

126

is_category
Descrio Verifica se uma pgina de arquivo de Categoria est sendo exibida Uso
is_category( $category )

Parmetros
$category (integer|string) (opcional)

ID, ttulo ou slug da categoria Padro: Nenhum Retorna (Boolean) Verdadeiro ou falso para a condio

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

127

is_day
Descrio Verifica se uma pgina de arquivo de Dia est sendo exibida Uso
is_day()

Parmetros Nenhum Retorna (Boolean) Verdadeiro ou falso para a condio

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

128

is_home
Descrio Verifica se a pgina inicial est sendo exibida Uso
is_home()

Parmetros Nenhum Retorna (Boolean) Verdadeiro ou falso para a condio

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

129

is_month
Descrio Verifica se uma pgina de arquivo de Ms est sendo exibida Uso
is_month()

Parmetros Nenhum Retorna (Boolean) Verdadeiro ou falso para a condio

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

130

is_page
Descrio Verifica se uma pgina est sendo exibida Uso
is_page( $page )

Parmetros
$page (integer|string) (opcional)

ID, ttulo ou slug da pgina Padro: Nenhum Retorna (Boolean) Verdadeiro ou falso para a condio

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

131

is_single
Descrio Verifica se uma pgina de post est sendo exibida Uso
is_single( $post )

Parmetros
$post (integer|string) (opcional)

ID, ttulo ou slug do post Padro: Nenhum Retorna (Boolean) Verdadeiro ou falso para a condio

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

132

is_tag
Descrio Verifica se uma pgina de arquivo de Tag est sendo exibida Uso
is_tag( $tag )

Parmetros
$tag (integer|string) (opcional)

ID, ttulo ou slug da tag Padro: Nenhum Retorna (Boolean) Verdadeiro ou falso para a condio

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

133

is_year
Descrio Verifica se uma pgina de arquivo de Ano est sendo exibida Uso
is_year()

Parmetros Nenhum Retorna (Boolean) Verdadeiro ou falso para a condio

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

134

language_attributes
Descrio Exibe os atributos de linguagem para a tag <html>. Identifica o idioma em uso e tambm a direo do texto para a pgina. Uso
language_attributes( $doctype )

Parmetros
$doctype (string) (opcional)

O tipo html do documento 'xhtml' ou 'html'. Padro: 'html' Retorna Nada

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

135

load_theme_textdomain
Descrio Carrega as strings traduzidas do tema Uso
load_theme_textdomain( $domain, $path )

Parmetros
$domain (string) (obrigatrio)

Identificador nico para recuperar as strings traduzidas Padro: Nenhum


$path (string) (opcional)

Caminho dos arquivos de traduo Padro: Pasta do tema ativo Retorna Nada

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

136

next_posts_link
Descrio Imprime um link para o prximo conjunto de posts dentro da consulta atual Uso
next_posts_link( $label, $max_pages )

Parmetros
$label (string) (opcional)

Texto do link Padro: 'Next Page '


$max_pages (integer) (opcional)

Limita o nmero de pgina nas quais o link exibido Padro: 0 Sem limite Retorna Nada

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

137

post_class
Descrio Rene e exibe classes para o elemento div do post Uso
post_class( $class )

Parmetros
$class (string) (opcional)

Uma ou mais classes para adicionar a lista de classes Padro: Nenhum Retorna (string) Lista de classes

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

138

previous_posts_link
Descrio Imprime um link para o conjunto de posts anterior dentro da consulta atual Uso
previous_posts_link( $label, $max_pages )

Parmetros
$label (string) (opcional)

Texto do link Padro: '<< Previous Page'


$max_pages (integer) (opcional)

Limita o nmero de pgina nas quais o link exibido Padro: 0 Sem limite Retorna Nada

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

139

register_nav_menu
Descrio Registra um nico Menu de navegao personalizado Uso
register_nav_menu( $location, $description )

Parmetros
$location (string) (obrigatrio)

Identificador de localizao do menu, como um slug. Padro: Nenhum


$description (string) (obrigatrio)

No possui valor como padro. Dever ser especificado mesmo se vazio. Servir para rotular o menu criado. Padro: Nenhum Retorna Nada

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

140

single_tag_title
Descrio Mostra ou retorna o ttulo da tag da pgina atual Uso
single_tag_title( $prefix, $display )

Parmetros
$prefix (string) (opcional)

Texto a ser retornado antes do ttulo Padro: Nenhum


$display (boolean) (opcional)

Mostra ou retorna o ttulo da tag se verdadeiro ou falso Padro: true Retorna (null|string) Nada ou ttulo da tag

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

141

single_cat_title
Descrio Mostra ou retorna o ttulo da categoria da pgina atual Uso
single_cat_title( $prefix, $display )

Parmetros
$prefix (string) (opcional)

Texto a ser retornado antes do ttulo Padro: Nenhum


$display (boolean) (opcional)

Mostra ou retorna o ttulo da tag se verdadeiro ou falso Padro: true Retorna (null|string) Nada ou ttulo da tag

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

142

register_sidebar
Descrio Constri a definio para uma nica Sidebar Uso
register_sidebar( $args )

Parmetros
$args (string|array) (opcional)

Constri a Sidebar baseado nos valores de 'name' e 'id'. Padro: Nenhum Lista de parmetros: name, id, description, before_widget, after_widget, before_title, after_title Retorna (integer|string) Identificador da Sidebar

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

143

the_author
Descrio Mostra o nome de exibio do autor do post Uso
the_author()

Parmetros Nenhum Retorna Nada

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

144

the_date
Descrio Exibe a data de publicao do post Uso
the_date( $format, $before, $after, $echo )

Parmetros
$format (string) (opcional)

Formato da data Padro: F j, Y


$before (string) (opcional)

Texto a ser exibido antes da data Padro: Nenhum


$after (string) (opcional)

Texto a ser exibido depois da data Padro: Nenhum


$echo (boolean) (opcional)

Exibe a data quando verdadeiro ou retorna quando falso. Padro: true Retorna (null|string) Nada ou a data formatada

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

145

the_excerpt
Descrio Mostra o resumo do post Uso
the_excerpt()

Parmetros Nenhum Retorna Nada

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

146

the_permalink
Descrio Exibe o link do post de acordo com as configuraes de links permanente do painel administrativo Uso
the_permalink()

Parmetros Nenhum Retorna Nada

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

147

the_post
Descrio Faz um post obtido atravs da iterao do Loop tornar-se global Uso
the_post()

Parmetros Nenhum Retorna Nada

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

148

the_search_query
Descrio Exibe o termo de pesquisa para a requisio atual, se uma busca foi executada Uso
the_search_form()

Parmetros Nenhum Retorna Nada

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

149

the_title
Descrio Exibe o ttulo do post Uso
the_title( $before, $after, $echo )

Parmetros
$before (string) (opcional)

Texto a ser exibido antes do ttulo Padro: ''


$after (string) (opcional)

Texto a ser exibido depois do ttuo Padro: ''


$echo (boolean) (opcional)

Exibe o ttulo quando verdadeiro ou retorna quando falso. Padro: true Retorna (null|string) Nada ou o ttulo de acordo com o valor passado para $echo

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

150

wp_enqueue_script
Descrio Um modo seguro de se adicionar scripts nas pginas do tema Uso
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer )

Parmetros
$handle (string) (obrigatrio)

Nome do script, como um slug. Padro: Nenhum


$src (string) (opcional)

URL do script Padro: Nenhum


$deps (array) (opcional)

Lista de scripts que devem ser carregados antes do script principal, pelo fato desse ltimo depender do outro. Padro: array()
$ver (string) (opcional)

Especifica qual a verso do script Padro: false


$in_footer (boolean) (opcional)

Normalmente os scripts so colocados na seo <head>. Se este parmetro for verdadeiro, o script colocado na parte inferior do <body> Padro: false Retorna Nada
A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

151

wp_enqueue_style
Descrio Um modo seguro de se adicionar estilos nas pginas do tema Uso
wp_enqueue_style( $handle, $src, $deps, $ver, $media )

Parmetros
$handle (string) (obrigatrio)

Nome do estilo, como um slug. Padro: Nenhum


$src (string) (opcional)

Caminho para o arquivo do estilo Padro: Nenhum


$deps (array) (opcional)

Lista de estilos que devem ser carregados antes do estilo principal Padro: array()
$ver (string) (opcional)

Especifica qual a verso do estilo Padro: false


$media (string) (opcional)

Especifica os meios para o qual o estilo foi definido, como 'all', 'screen', 'handheld' e 'print Padro: false Retorna Nada

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

152

wp_footer
Descrio Hook de identificao do rodap Uso wp_footer() Parmetros Nenhum Retorna Nada

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

153

wp_get_archives
Descrio Exibe uma lista de arquivos baseada pela data. Uso wp_get_archives( $args ) Parmetros
type (string) (opcional)

O tipo de lista de arquivo a ser mostrada. Padro: monthly Valores vlidos: yearly, monthly, daily, weekly, postbypost (posts ordenados por data de postagem), alpha (posts ordenados pelo ttulo)
limit (integer) (opcional)

Nmero mximo de arquivos a se obter Padro: 0


format (string) (opcional)

Formato para a lista de arquivo. Valores vlidos: html Em listas HTML (<li>) - Padro option Em um menu de seleo ou de opes link Dentro das tags <link> custom Lista personalizada usando strings para antes e depois de cada link
before (string) (opcional)

Texto a ser exibido antes do link quando a opo format estiver definida como custom Padro: Nenhum
A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

154

after (string) (opcional)

Texto a ser exibido depois do link quando a opo format estiver definida como custom Padro: Nenhum
show_post_count (boolean) (opcional)

Exibe ou no a quantidade de posts que o arquivo possui Padro: False


echo (boolean) (opcional)

Exibe ou retorna a lista quando true e false respectivamente Padro: true Retorna Nada

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

155

wp_head
Descrio Hook de identificao do cabealho Uso
wp_head()

Parmetros Nenhum Retorna Nada

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

156

wp_nav_menu
Descrio Exibe um menu de navegao criado atravs do painel adminisrtativo Uso
wp_nav_menu( $args )

Parmetros
$menu (string) (opcional)

O menu desejado; aceita id, slug, name Padro: Nenhum


$container (string) (opcional)

Tag de blog onde o menu ser inserido Padro: div


$container_class (string) (opcional)

A classe a ser aplicada ao container Padro: menu-{menu slug}-container


$container_id (string) (opcional)

O identificador a ser aplicado ao container Padro: Nenhum


$menu_class (string) (opcional)

A classe CSS da tag ul que compe o menu Padro: menu

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

157

$menu_id (string) (opcional)

O identificador da tag ul que compe o menu Padro: menu slug, incrementado


$echo (boolean) (opcional)

Determina se o menu ser exibido ou retornado quando verdadeiro ou falso, respectivamente Padro: true
$fallback_cb (string) (opcional)

Se o menu no existir, executa a funo aqui explcita Padro: wp_page_menu


$before (string) (opcional)

Texto exibido antes da tag <a> do link Padro: Nenhum


$after (string) (opcional)

Texto exibido depois da tag <a> do link Padro: Nenhum


$link_before (string) (opcional)

Texto exibido antes do texto do link Padro: Nenhum


$link_after (string) (opcional)

Texto exibido depois do texto do link Padro: Nenhum


$depth (integer) (opcional)

Quantos nveis de hierarquia sero includos Padro: 0 - Todos

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

158

$walker (object) (opcional)

Objeto personalizado Padro: new Walker_Nav_Menu


$theme_location (string) (opcional)

A localizao do tema a ser utilizada. Deve ser registrado com register_nav_menu (), a fim de ser selecionvel pelo usurio Padro: Nenhum Retorna (boolean) Verdadeiro ou falso se encontrou ou no um menu personalizado

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice A: Referncia de funes

159

wp_title
Descrio Exibe o texto do ttulo de acordo com a consulta que est sendo executada: Uso
wp_title( $sep, $echo, $seplocation )

Post ou pgina - Ttulo do post ou pgina Arquivo de datas - A prpria data Categorias - O nome da categoria Pgina do autor - O nome do autor do post

Parmetros
$sep (string) (opcional)

Texto a ser exibido antes ou depois do ttulo Padro: &raquo; ()


$echo (boolean) (opcional)

Exibe o ttulo quando verdadeiro ou retorna quando falso. Padro: true


$seplocation (string) (opcional)

Define a localizao do texto separador do ttulo. Qualquer valor exibir o separador a esquerda do ttulo, exceto pelo termo 'right' que exibe o separadr a direita do ttulo. Padro: Nenhum Retorna Nada

A p r e n d a a d e s e nv o l v e r Te m a s Wo r d P r e s s w w w. g u i a w p . c o m . b r

Apndice B: Funes utilizadas


bloginfo......................................51 body_class.................................86 comments_popup_link...............74 dynamic_sidebar........................59 esc_attr......................................53 get_bloginfo...............................88 get_footer..................................71 get_header................................71 get_option..................................87 get_search_form........................71 get_search_query......................79 get_sidebar................................71 get_template_part......................72 get_the_author...........................63 get_the_date..............................80 get_userdata..............................80 have_posts................................61 is_category................................80 is_day........................................80 is_month....................................80 is_singular.................................87 is_tag.........................................80 is_year.......................................80 language_attributes...................50 load_theme_textdomain.............93 next_posts_link..........................77 post_class..................................86 previous_posts_link...................77 register_nav_menu....................54 register_sidebar.........................58 single_cat_title...........................80 single_tag_title...........................80 the_excerpt................................78 the_permalink............................62 the_post.....................................61 the_search_query......................58 the_title......................................62 wp_enqueue_script....................87 wp_enqueue_style.....................91 wp_footer...................................65 wp_get_archives........................59 wp_head....................................64 wp_nav_menu...........................55 wp_register_script......................88 wp_register_style.......................91 wp_title......................................52