Portfolio Herick Correa Desenhando templates com WordPress

Descrição do Vídeo

A palestra que vamos ter agora, com o Herick, vai tocar em alguns pontos muito parecidos com essa questão de personalização do painel, do design voltado para o usuário. O painel está até ali do lado por isso — a gente imaginou que existia uma ligação muito legal.

Então, para voltar ao ritmo das palestras do evento, vamos chamar a nossa tropa de elite. Solta o som, Felipe! Agora o bicho vai pegar!

Infelizmente, o Wi-Fi não permite que todo mundo use. E eu também preciso pedir que, quando forem fazer perguntas, esperem pelo microfone, porque como está sendo gravado, senão vai ficar com buracos no áudio — com resposta sem pergunta.

Bom, gente, meu nome é Herick. Herick Correa, ok? Eu vou falar sobre design de template, mas eu não vou falar só de design. Porque eu não tô aqui para ensinar nada, não tô aqui para dizer o que você tem que fazer ou o que você não pode fazer. Eu tô aqui para tentar trazer uma forma de pensar.

O que eu vou falar aqui é para te guiar a pensar sobre como você vai montar um template. E muita coisa do que eu vou falar, as pessoas já falaram aqui nesse painel. Na verdade, já disseram setenta por cento da minha palestra — só que de uma forma muito formal. Eu vou falar de forma mais ilustrativa, e acho que vai ser um bom complemento ao que eles disseram, porque eu trouxe algumas imagens.

Também queria dizer que o Maujó já fez muito dinheiro comigo com o livro dele. Então, uma coisa importante: por mais que você saiba CSS, por mais que você saiba HTML, às vezes é bom comprar um livro de alguém em quem você confia. Eu não o conhecia pessoalmente, mas confiava em toda a comunidade que falava muito bem do produto dele.

Às vezes você quer ler sobre semântica, saber o que aquele HTML significa, o que aquela tag, aquele código faz, por que usar ou por que não usar. Então, às vezes, é bom você ler isso de alguém confiável, porque na internet tem muita gente falando coisas diferentes. Então é bom. E foi um prazer conhecê-lo, de fato.

Vamos lá.

O ponto é o seguinte. Deixa eu me apresentar direito. Bom, já falei meu nome. Eu trabalho com Web. Fiz um curso de Web em 2002 e, desde então, me apaixonei por Web. Fiz uma faculdade de Design porque eu desenhava e achava que meu futuro seria com ilustração e desenho. Mas não foi. Tudo que aprendi na faculdade de Design eu trouxe para a criação de sites.

Comecei com o FrontPage também. Naquela época o frameset era moda. E aí fui evoluindo. Mas minha carreira profissional foi meio confusa, porque comecei como designer, me formei como designer, e fui contratado nas empresas como o “web designer”, o cara que fazia desde o anúncio de revista até o site da empresa. Não existia essa divisão entre front-end e back-end como existe hoje. Hoje em dia é tranquilo — o cara faz o layout e outro monta. Naquela época, não. Você fazia tudo.

Até que fui parar em uma agência. Quando comecei a trabalhar em uma agência web, comecei a ver essa diferenciação. Comecei a trabalhar com front-end, porque entrei como designer, mas ninguém fazia HTML. Naquela época, isso era meio obscuro. Tanto é que você era contratado como “programador HTML”. Está na carteira. Tenho prova.

Então você era o “programador HTML”, chegava lá e montava o HTML, porque não tinha ninguém que fizesse isso. Você fazia design. Eu trabalhei em uma agência onde não tinha nem HTML, nem back-end, nem front. Nem back, nem front. Então, como eu estava sozinho, tive que escolher uma opção, uma ferramenta. E como eu já conhecia o WordPress, acho que desde…

Com o tempo, fui forçado a pensar mais no cliente — que é a grande ideia dessa palestra aqui. Que é o seguinte: você vai até o cliente e ele diz: “Eu quero mudar aquela frase de alerta ‘Seu e-mail foi enviado com sucesso’. Quero que coloque assim: ‘Em breve responderemos’.”

Aí você diz: “Ah, dá pra mudar. Tá dentro de Aparência, no widget. Tem um widget lá chamado Alerta que eu criei.”

Não. Você não vai fazer isso. Você vai criar uma área no menu do admin. E nessa área vai ter algo como “Configurações”, “Opções”, ou “Textos do site” — você escolhe. E lá vai ter “Alertas”, “Título de alguma coisa”, ou “Título de alguma área”.

A intenção aqui é te fazer pensar tanto na parte de desenvolvimento quanto na experiência do cliente. Porque você não vai chegar para o cliente e dizer que ele tem que mexer em widget. Ele não vai saber. O ideal talvez seja esconder essa parte, para que o cliente nem veja.

Como o Richard disse: você usa o Admin Menu Editor e esconde essa parte, porque acho que o cliente não pode mexer. Porque da mesma forma que você deixou o widget aparecendo, você deixou a parte do menu aparecendo. Deixou outras partes aparecendo, como o editor de template — essas coisas.

Isso não é o que o cliente tem que mexer. Ele tem que mexer só no que ele precisa mexer. Se ele precisar mexer em alguma atualização, ou ele te liga, ou ele te pergunta, ou você envia. Você até pode dizer: “Olha, você tem esse login de admin aqui, que você vai usar para trabalhar no site todo. Mas por favor, quando entrar com esse login aqui, mexa só nessa parte.”

Assim, ele consegue atualizar o WordPress. Então, é importante criar uma hierarquia. Mas para criar essa hierarquia, também é importante criar uma área — um ambiente amigável para o cliente.

Essa é a ideia.

E como disseram aqui — e essa palestra estava pronta antes de eles falarem —, parece que é um conceito universal: todo mundo acha que WordPress é uma ferramenta limitada.

Mas isso é falta de conhecimento.

Como foi dito aqui: não é limitado. Às vezes, a limitação está no conhecimento. Às vezes você não sabe fazer algo. Mas aí você vai no Google: “plugin para fazer tal coisa.” Cara, vai ter um plugin. Alguém já se lascou antes de você.

Pode ter certeza que, principalmente no WordPress, alguém já se ferrou antes de você, criou uma solução e transformou aquilo num plugin. E é muito simples: você pega a função que você fez — que geralmente você colocaria no functions.php —, joga num plugin, e pronto. Salvou a vida de outra pessoa.

Então, não é limitado. Talvez seja você que ainda não procurou direito no Google o que precisava.

Bom, agora, começando a parte da criação…

Eu, como designer de interface, sempre que vou criar um template, tenho que pensar. Porque, geralmente, quem trabalha com front-end ou back-end e pega o template de alguém, pensa assim: “Como vou montar esse site? Vou montar no Bootstrap, montar essas áreas aqui…”

Não. Não é disso que estou falando.

Não estou aqui para dizer como você tem que fazer seu HTML. Estou aqui para tentar mostrar como você tem que pensar sobre isso — tanto no front quanto no back — de uma forma extremamente amigável para o cliente poder mexer também.

Por exemplo, esse foi um site que eu fiz. (E eu não sei usar esse laser aqui…)

Esse foi um site que eu fiz. A cliente ainda não atualizou o site, então, se você tentar pegar essa apresentação e for lá, vai ver muito lorem ipsum ainda. Mas tudo bem. Serve para o que a gente quer.

Foi o seguinte: eu desenhei esse site para a cliente. E, na hora de montar, eu criei as seguintes áreas, ok? Criei a parte de destaque, isso aqui está dentro do “sobre” e isso aqui é a categoria de post.

Ou seja, na época eu pensei: “Bom, posso puxar isso aqui como post?” Posso. Mas se eu quiser que ela coloque outra coisa em destaque? Eu vou criar uma categoria onde eu digo que é post? Ou vou criar uma categoria só de destaque, e todos os posts que também estiverem nessa categoria de destaque vão aparecer lá?

Não. Está errado.

Por quê?

Porque, dentro do post, se ela quiser falar — tipo: “Aqui na Inglaterra, é a Semana Nacional da Rainha” — e quiser fazer um post sobre isso, como destaque, ela vai ter que criar um post que não é produto, e dizer que é destaque. Isso é uma confusão.

Então, o que você faz?

Você pega um plugin como o Advanced Custom Fields e cria uma área. Ele tem um add-on chamado Options, onde você pode criar sessões dentro do seu menu, e dentro dessas sessões você pode criar subitens.

Por exemplo, eu costumo criar uma área chamada “Conteúdo Adicional”, ou “Conteúdo Complementar”, ou até “Opções”. E aí eu crio uma área chamada “Destaques”, e dentro de “Destaques” a pessoa adiciona isso aqui, entendeu?

Ela não precisa criar um post para isso. Ela pode criar esse conteúdo aqui. O ACF permite que você vincule essa imagem, ou esse conteúdo, a um post, se quiser. Mas é muito mais fácil para o cliente criar dessa forma do que ele ter que lembrar que, para ser um destaque, precisa colocar numa categoria, que não pode ser “produto”, tem que ser “destaque” etc. É confusão.

Aqui, eu coloquei isso dentro da página “sobre”.

E isso é outra coisa que eu vou falar: como pegar conteúdo de uma página específica, mesmo que ela não seja a página principal.

Então, mesmo que isso não apareça dentro da página “sobre”, quando você clica no link dessa página no front-end, esse conteúdo não aparece.

Isso é um conteúdo que eu criei só para a home. Mas está dentro de “sobre”.

Por quê?

Porque é na página “sobre” (ou “sobre nós”) que deveria estar esse conteúdo. Esse conteúdo é “sobre”.

Então, o cliente entende que ele terá um campo para escrever, para colocar um vídeo, terá um campo para colocar um depoimento, e para escrever sobre cada um desses três tópicos aqui. Ele vai entender com mais facilidade o que fazer.

E aqui é a categoria de post normal.

O que eu quero mostrar é que, quando você pega um layout para montar — um template —, não basta só pensar em como vai montar o HTML. Porque HTML é o de menos para o cliente. E ele está pagando.

Então, para ele não ficar te ligando… Eu sei porque eu trabalho com isso há quase dez anos… E, cara, eles ligam. Agora, com o Facebook super DFF, sabe? O cara te chama. São dez da noite: “Você tá acordado?” E você: “Tô.”

Acredite: você tem que responder. Porque você é freelancer. Seu grande diferencial é não ter horário. O cliente não precisa te ligar das nove às seis. Tudo bem, se ele te ligar e você estiver dormindo, você não vai atender, vai ligar depois.

Mas o grande diferencial de ser freelancer é esse atendimento direto com o cliente. O cliente sabe que pode te chamar a qualquer momento. Isso passa segurança.

Se ele te chamar às dez da noite no Facebook, você tem que responder. E tem o WhatsApp também, viu? O WhatsApp bomba. Tira o som, tira o volume do WhatsApp porque é complicado.

Mas, enfim, isso é legal, porque você pode conversar, e isso também traz uma certa informalidade no relacionamento com o cliente.

Então, às vezes, você pode até soltar uma palavra ou outra — e o cara não vai se assustar — porque sabe que você está ali, num papo informal.

Mas, enfim, ele vai te perguntar. Se você não fizer algo intuitivo, ele vai te perguntar. Vai te ligar. Vai te acordar.

Por isso, é importante que a gente…

Esse site foi uma experiência, porque ele usava… ele usava muito conteúdo próprio, usava muito WP Query, usava muito Custom Field, e a gente também trabalhou com muitas categorias diferentes.

Então, por exemplo, outro dia me perguntaram como eu faria para uma categoria ser diferente da outra, porque se a categoria é só uma página, como eu vou mudar? Como vou ter um design para a categoria X e outro para a categoria Y?

Isso foi legal também, porque consegui trabalhar isso nesse template.

Como eu disse, criei uma área de Destaques. Você tem a parte de Notícias, que é a parte normal de posts. Como eles não teriam um blog no futuro, trabalhei as partes de notícias como se fossem posts — mas usei um plugin no admin para renomear “posts” para “notícias”, porque mudava a cor da grama, o bicho morria de fome.

Embora esse cliente fosse muito esperto — o cara que mexia nesse site era muito esperto — ele entendeu sem precisar explicar muito. Mas nem todo cliente gosta de entender. Eles não leem. Eles não querem ler.

Mesmo o Advanced Custom Fields te permitindo escrever o que cada um dos campos significa — você pode descrever: “isso aqui você coloca isso, isso e isso, que vai aparecer lá, lá e lá” — ele não vai ler. Ele vai dizer:
— “Herick, o que é isso aqui?”

Aí você vai repetir as mesmas palavras. Tudo que está escrito lá, você vai repetir. Vai dizer:
— “Ah, é verdade. Tá aqui, ó.”
— “Puts, cara, não vi.”
— “Pois é… essa letra é cinza bem clarinha, às vezes não dá pra ver.”

Cara, você tá lá pra isso, né?

Então, nesse caso, eu coloquei como post, criei um custom post, outro custom post, e há vários custom posts nesse site também. Acho que logo mais eu mostro o menu dele.

Bom, o front-end…

Antigamente você tinha aquele blog, que era a cara do WordPress — aquele blog com um monte de post (desculpa a palavra), e com aquele botão “ver mais”. Então, você tinha aquela listagem, como se fosse a identidade inicial do WordPress.

Isso foi mudando.

Hoje em dia você tem chamadas, destaques, slideshows em JavaScript, às vezes grids de imagem — como se fosse um painel de imagens.

Isso mudou, mas também gerou dúvidas para quem vai montar. Tipo:
“Como eu chamo duas categorias numa página que não é a da categoria?”

O cara clicou em “Home”, que é uma página inicial, mas como eu chamo duas categorias ali?
Como eu faço para aparecer um post de outra coisa que eu quero?
Como eu faço para um conteúdo, editado pelo cliente, aparecer em todas as páginas sem precisar ficar usando WP Query o tempo todo?

Então, surgem dúvidas que eu vou tentar resolver com o que vou falar agora.

Antes de mais nada, você tem que conhecer WP_Query.

Eu sei que me pediram — o Google comentou comigo para eu não fazer algo tão técnico — mas essa é uma forma muito bem resumida de como você faz isso. Não tem como ser mais maleável nesse ponto, entendeu?

E como aqui já falaram de layout de forma muito genérica, acho que posso até falar um pouco mais técnico nesta palestra.

Então, vamos lá:

Você tem que saber trabalhar com o pre_get_posts, porque com ele você consegue fazer as coisas mais básicas — tipo mudar a ordem dos posts, que o WordPress, por padrão, não permite.

Você não consegue dizer que quer que apareça por data ou por ordem alfabética. Então, o que você faz? Você precisa entender isso aqui. Porque às vezes, com uma linha — uma única linha de código — você muda a ordem do post.

Com esse código aqui, que eu peguei do Codex do WordPress — um código simples, ok? Aqui ele está um pouco mais refinado, porque já traz um exemplo em HTML, já dá um echo ali… Mas com isso, você pode chamar um post que não deveria estar ali, pode chamar uma categoria que não era para aparecer naquela página, pode integrar coisas que não eram para estar ali… e elas passam a estar.

Só não esquece o seguinte: uma vez que você abre o WP_Query, você precisa dar o reset. Isso é importante, porque senão você não consegue fechar essa consulta e pode acabar dando problema no resto do conteúdo que deveria aparecer abaixo — que às vezes é a página original.

Então, aqui você só abre um bloco para mostrar o que queria mostrar, e fecha. Porque, se não fechar, vai dar problema. Não é que pode dar problema — vai dar problema.

Aqui eu dou alguns exemplos de um site antigo que eu fiz. Nele, eu pegava o primeiro post de uma categoria e dava um destaque maior para ele.

E nas outras três posições?

Uma das dúvidas era:
— “Se eu já peguei o primeiro post, como vou pegar os três próximos sem repetir o primeiro?”

Aí você começa a estudar os argumentos que pode passar no WP_Query.

Por exemplo, aqui eu peguei os posts mais recentes das categorias 2, 5, 4, 6 e 8, mas limitei para 1 — então o post mais atual de todas essas categorias vai aparecer aqui.

Depois, usei o offset, que significa: quero que ele pule o primeiro. Nesse caso, usei offset 1, ou seja, ele vai pular um — o primeiro — e vai exibir os outros três.

Aqui não são as mesmas categorias, porque eu só queria dar um exemplo de uso. Porque você também pode fazer isso: pode pegar as categorias, transformá-las em um array e exibir. Vai depender do seu uso, de como você acessa essas categorias e do seu projeto.

Aqui também tem outro argumento de categoria — é a mesma coisa, mas um pouco mais completo.

Você poderia fazer isso com CSS? Pegar o :first-child no CSS? Poderia.
Mas, por algum motivo, eu achei melhor não fazer, por causa do tamanho da imagem.

O peso da imagem é importante. Nesse caso aqui, eu carreguei uma imagem maior, me permiti isso. Aqui, eu já peguei imagens menores nos demais blocos, o que faz toda a diferença quando você está trabalhando com algo que pode aparecer em mobile ou tablet.

Então, sempre que puder reduzir o peso, às vezes é melhor fazer outra query em SQL do que carregar uma imagem grande, que ao invés de ter 12 KB vai ter 50 ou 60 KB. Eu acho mais custoso.

Então, nesse caso, eu fiz assim por esse motivo.

— “Mas no exemplo que você deu, à esquerda, o destaque tem as categorias 2, 5, 4, 6 e 8. E embaixo, 2, 5 e 4. Com CSS você não conseguiria fazer isso.”

Não. Mas, na verdade, aqui eu usei só como exemplo. Nesse caso, as categorias eram as mesmas — eu só coloquei para dar um exemplo de argumento. Aqui é mais um exemplo do peso da imagem mesmo.

Bom, agora vamos começar a falar um pouco sobre como montar o backend.

Eu nem sei se estou indo rápido demais. Nem sei o tempo.

Então, o que acontece?

Como eu falei para vocês: vamos falar sobre o backend. E o backend tem que ser amigável. Estou repetindo isso porque é muito importante.

Vocês já viram que dá para montar — como o pessoal falou aqui — dá para montar tudo que você quiser no seu template. Seu template vai estar lá, montado. Você vai conseguir fazer no backend, puxar todos os posts que quiser, fazer tudo.

Mas, se você tiver que criar um documento para o cliente entender o que você fez, não está legal.

Vamos começar a pensar no backend para o cliente também.

Tudo aquilo que você faz no front-end — tipo uma área de destaque, uma área em grid, um slide em JavaScript… — tudo isso, você tem que pensar como vai fazer no admin, no painel.

Porque se você tiver que ficar explicando tudo para o cliente — tudo o que ele tem que mudar, como ele altera os dados —, você tá ferrado. Ele vai te procurar, vai te ligar, vai falar com você…

Você vai acabar dando um curso de WordPress para ele.

E o pior: você vai dar esse curso às 10 da noite… no Facebook!

Ou no Skype também. O Skype também está bombando.

Então, vou falar aqui sobre três plugins que são muito interessantes.

Tem o Advanced Custom Fields, que eu já estou falando aqui faz tempo. Para mim, isso devia estar no core do WordPress. Pode ser que eu esteja falando besteira, mas fazer WordPress sem ele não faz sentido. Essa opção “admin” está no editor.

Aliás, o cara que criou esse plugin é muito gente boa. Eu não sei se o nome dele é Yannis ou Janis, não sei. Mas, no Meetup que a gente fez em agosto, ele nos deu três licenças para sortear. Um dos ganhadores até está me cobrando, porque eu esqueci de mandar a licença. Mas tá no e-mail, fica tranquilo.

Ele foi super legal. Disse:
— “Cara, pega três licenças aqui. Quando tiver o WordCamp, me avisa que eu mando mais.”

Acabei esquecendo de avisar… mas vou tentar falar com ele de novo. É muita coisa para fazer.

E, como essa palestra provavelmente vai para o WordPress.tv, queria até agradecer publicamente a oportunidade que ele nos deu de distribuir essas licenças. E posso mostrar esse plugin para mais pessoas também, que é muito legal.

Eu até ia mudar a palestra para tirar a parte de custom post type e colocar o WP Generate, mas achei que ia ficar um pouco avançado demais. Achei que teria que explicar melhor como funciona aquele site, então acho que talvez o custom post type seja uma forma mais amigável de trabalhar com conteúdos personalizados.

O plugin Pulsar Constype permite criar áreas no seu admin que você não tinha antes. Você não precisa ficar preso ao “post”.

Uma das coisas que todo mundo faz no começo é: post, categoria… aí tá na categoria “destaque”, depois tá na “destaque da home”… e aí você começa a criar um monte de lógica baseada só em categorias.

E não precisa passar por isso.

Na verdade, há muito tempo não precisa mais passar por isso. E hoje, menos ainda, porque os clientes são mais exigentes.

Então você pode criar um tipo de post chamado “vídeo”, pode criar “edições anteriores”, “fotos”, “vagas de emprego” — como é o caso do menu do site do sindicato.

Você pode criar áreas específicas. Pode fazer o cliente entender. E, enfim, agora você pode ter essas áreas sem precisar explicar tudo para o cliente. Porque quando ele abrir o admin e vir “Vídeos”, ele vai clicar em “Vídeos”.

Ele não vai clicar em “Post”. Ele vai clicar em “Vídeos”.

— “Pô, legal, modernizou. Tem vídeos aqui!”

É mais ou menos isso. É a simplicidade da coisa que faz toda a diferença.

Agora, vamos para o Admin Menu Editor Pro.

O “Pro” é porque tem a versão padrão, que é gratuita — mas, sinceramente, eu acho que não funciona muito bem. Já tive problemas com ela. Não sei se melhorou. Mas, depois que comecei a usar a versão Pro, não voltei mais.

Porque o Pro tem a diferença seguinte: na versão gratuita, você muda para todo mundo.
Algo que você escondeu aqui, por exemplo, “Ferramentas” — que é uma coisa que eu escondo logo de cara…

— Olá Herick, meu nome é Felipe. Sou diretor da Digital Terrain. Herick, pelo que entendi do sistema que você apresentou, não há a necessidade de criar uma espécie de manual para o cliente. Você foca tanto no admin, de forma tão intuitiva, que ele se explica sozinho. O cliente consegue acompanhar e fazer as alterações sem precisar de nenhuma instrução adicional. É isso?

— Não. Na verdade, o seguinte: instrução você vai ter que dar, porque… imagina — eu penso assim — imagina seu pai, que tem setenta anos, não está acostumado a mexer com isso. Aí ele entra naquela coisa e pensa:
“Cara, o que é isso? O que eu faço?”

Eu gosto de fazer vídeo. Um vídeo usando screencast mesmo. Gosto de fazer isso: ensinar o cara a fazer da forma certa. Mas o fato de ser um painel amigável significa que o cara só vai precisar ver o vídeo uma vez, porque depois ele vai lembrar de tudo o que você explicou, porque está tudo ali, entendeu?

Se no vídeo você diz para o cara que ele tem que ir em “Aparência > Widgets > Sidebar 3” para mudar um alerta, toda vez que ele quiser alterar aquele texto, ele vai ter que lembrar desse caminho.

É diferente se você tiver uma área chamada “Alterar Alerta”. Ele pode nem lembrar qual era o primeiro texto ou o primeiro alerta, mas você já disse para ele:
— “Olha, aqui você altera o texto que aparece na tela.”

Então, toda vez que ele olhar aquele item no menu, ele vai saber que é aquilo.

Ou seja, não é que você evita fazer um manual, você apenas evita repetir a mesma coisa várias vezes, entendeu?

Acho que isso que é o importante. E aí entra a facilidade de um painel admin limpo, né?

Sim. O fato de você reduzir esse tipo de coisa salva vidas.

Esse é o plugin que você recomenda? Também tem o Adminimize. Você conhece?

Então, Adminize e Admin Menu Editor brigam um pouco. Se não me engano, o Admin Menu Editor prevalece sobre o Adminize. Mas vai de você.

O Adminize esconde muito mais coisa do que o Admin Menu Editor. Então, é uma escolha sua. Eu prefiro o Admin Menu Editor, porque o Adminize não permite renomear itens, e esse permite. Então, acho que…

Não estou fazendo propaganda do plugin não, tá? Só estou dizendo que pra mim, ajuda muito. Se vai ajudar você ou outra pessoa, eu não sei. Mas pra mim, funciona. E eu acho que vale a pena.

É quase um plugin core do WordPress, porque todo mundo instala o WordPress e já sai correndo para instalar ele. É muito fácil de usar, muito simples. E não tem muito o que falar sobre ele.

Acredito que todo mundo que trabalha com ACF já conhece. É um plugin que te permite adicionar campos aos seus posts. Ou seja, você não precisa colocar uma galeria para conseguir adicionar uma galeria de fotos no seu post.

Não. Você usa o ACF, e dentro do seu post você coloca o campo “Adicionar Fotos”.

Fica muito mais fácil para o cliente entender do que usar aquela short tag. O cara cria uma galeria no NextGen Gallery, copia uma short tag e coloca no campo de texto do WordPress? Não. Ele não vai fazer isso.

Ele tem um campo no post dizendo: “Inserir fotos.” Pronto.

E o mais bacana é que ele tem um add-on chamado Options, que permite criar subpáginas. Eu até coloquei o código aqui que ele usa.

Nesse caso, eu criei um conteúdo chamado Complementos. E dentro de “Complementos”, coloquei:

Destaques do topo
Documentos para download
Endereço de contato

Porque, por exemplo, o endereço de contato é algo que aparece no rodapé repetidamente. Rede social também — aparece no topo e no rodapé, direto.

Então, deixei isso aqui para o cliente poder preencher. Porque geralmente, quando o cliente pede um site, ele não te envia nem o link do Facebook na hora.

Aliás, ele quase não te envia nada na hora.

Então, você deixa tudo para ele editar. Tudo.

Às vezes, o e-mail que ele te manda, ele nem criou ainda, porque você ainda não configurou o servidor pra ele. Aí, o que acontece? Você já deixa o campo de e-mail lá.

O endereço — às vezes o cara nem tem loja ainda, então você nem sabe que endereço colocar. Então, deixa aberto pra ele editar também. Às vezes, ele quer mudar o telefone, colocar um celular… então, o Options é legal.

É um add-on pago, mas é baratinho. E vale a pena, porque você consegue fazer o conteúdo aparecer em todas as páginas. Você não precisa programar nada. É só uma chamadinha.

O campo, entendeu?
get_field(‘nome_do_campo’, ‘options’) — acabou. Esse campo vai aparecer em todas as páginas em que você o chamar, por exemplo, no footer.php. Ele sempre estará lá.

É muito fácil adicionar conteúdo adicional.

Por exemplo, aqui eu coloquei “Complementos” e “Destaques do Topo”. Tranquilo.

O cliente sabe que aquilo está lá na home. E se ele quiser usar esses destaques em várias outras páginas, está tudo em um único lugar. Ele não precisa ficar usando WP_Query pra ficar chamando os posts de destaque em todas as páginas, em loop. Não precisa.

Isso aqui já resolve.

Aqui está mais ou menos como aparece. Então, você tem: telefone, e-mail, os alertas (como eu disse, eu coloquei aqui também), os links para redes sociais… Você também tem campo repetidor — ou seja, se o cara quiser adicionar vários links de redes sociais sob demanda, ele pode.

Então, isso aqui é uma mão na roda.

E, por fim, a hierarquia de arquivos — que é muito importante também.

Quando eu disse que você pode ter uma categoria com um layout e outra categoria com outro layout — que foi uma dúvida que me perguntaram recentemente — o que acontece?

É muito simples.

Até quando eu expliquei para a pessoa como fazer, ela disse:
— “Cara, é só isso? Não precisa escrever nada?”

Não. É simples mesmo.

Você criou uma categoria chamada fotos? Então você vai criar o arquivo category-fotos.php.

— “Ah, mas eu coloquei fotos-evento como slug da minha categoria…”

Ok. Então vai ser: category-fotos-evento.php. Pronto.

Toda vez que acessar a categoria “fotos evento”, o WordPress vai procurar se existe esse arquivo. Se existir, ele vai exibir o HTML que você preparou. Se não existir, ele vai para o template padrão.

Ou seja, você não precisa criar para todas as categorias. Você cria só para as que quiser diferenciar. Para as outras, deixa ir para o category.php.

Essa foi até uma palestra que o Guga Alves deu, falando sobre hierarquia de arquivos. Depois, eu até apresento o link do PPTD — é um material interessante.

Ou seja, isso vale não só para categorias, mas também para posts individuais (single) e páginas.

Se você quer que um post único tenha uma aparência diferente, você coloca single-slug.php ou page-slug.php. E só aquela página vai ter aquele visual diferenciado.

Isso é para quem quer fazer layouts mais trabalhados, onde cada categoria tem uma listagem e uma aparência diferente.

É assim que funciona.

Por exemplo, aqui eu coloquei um exemplo onde temos:

Página da categoria “notícias”
Página da categoria “fotos”

Ambas são categorias, são listagens. Mas aqui eu coloquei um layout, e ali eu coloquei outro. Dá pra ver bem como você pode ter controle total sobre cada página.

E acho que é isso.

— Herick, voltando ao slide anterior… você estava falando sobre páginas customizadas para categorias e singles. Você falou sobre customizar o single para um post específico, mas e quando a gente quer customizar todos os posts de uma determinada categoria? Existe uma solução ideal para isso?

— Olha, vou te dizer que eu até conversei com o Guga sobre isso na época, porque eu tinha a mesma dúvida. Acho que, em termos de arquivo, não tem. Você vai ter que usar PHP ali, vai ter que tentar decodificar…

Pode ser que eu esteja enganado, porque isso já entra numa parte mais técnica do que estou acostumado a usar. Talvez alguém aqui possa complementar melhor.

Mas o que eu acredito é que você precisa identificar a categoria do post, e a partir disso, aplicar um visual — talvez jogar isso em uma variável — e com essa variável puxar um estilo CSS específico, ou até usar uma condição if para carregar um layout diferente.

Isso vai exigir algum tipo de programação, porque não existe nada predefinido no WordPress que associe automaticamente um single.php a uma categoria, só pelo nome do arquivo.

— Herick, boa tarde. Você estava falando de personalização. A gente também pode personalizar o header e o footer da mesma forma? Você coloca o nome do cabeçalho, o nome da categoria, e ele puxa também?

— Ela está falando de páginas dentro da categoria. Dá para fazer também.

Você pode, não sei exatamente de cabeça agora, mas dá para fazer sim. Dá para fazer para archive, dá para fazer para blog. Cada página que você coloca dentro da categoria, ele puxa também.

Sobre o que ela disse — um single específico para uma determinada categoria — talvez seja isso: você tem a categoria “fotos”, e quer que todos os posts dessa categoria usem um determinado template. É isso?

Ela estava tentando associar uma página de post único a uma categoria.

Então, nesse caso, como você disse, não existe na hierarquia de templates um arquivo específico para isso, como existe para outras situações.

Mas o que pode ser feito — que eu já fiz em um projeto — é o seguinte:

No single.php, você coloca um código que identifica a categoria. E aí faz um if:
— “Se for da categoria fotos e existir um arquivo single-fotos.php, carrega esse arquivo. Se não existir, carrega single-default.php.”

Sim, você faz isso com get_template_part() e pede para incluir o arquivo.

Aí você cria single-fotos.php para trazer todos os posts da categoria “fotos”, single-videos.php para os da categoria “vídeos”…

E, quando não for nenhuma das duas, ele carrega o default, que mostra o post de todas as outras categorias.

No fim das contas, você vai precisar de alguma intervenção direta no código.

Não tem mágica nesse ponto.