 Bom, pessoal, hoje eu vou falar sobre o processo de desenvolvimento de temas, mas sobre o aspecto de como esse processo evolui, quando a gente começa a trabalhar com WordPress, até as demandas irem surgindo, e a gente acaba evoluindo para conseguir acompanhar. Eu já deixei aqui um link para essa palestra, então, se alguém quiser acompanhar os slides ou quiser guardar para depois, o pessoal da organização vai compartilhar depois, mas quem já quiser salvar o link pode aproveitar. Bom, só voltando um pouquinho, eu sou Anissa Ferreira, sou de São Paulo também, uma unidade de São Paulo presente aqui, sou designer e desenvolvedora web há dez anos, mais ou menos, sou formada pelo Senac, então estou em casa aqui, e contribuo com a comunidade desde 2013, 2014, e nesses anos de contribuição, a gente começou a trabalhar com WordPress, surgiram as dúvidas, a gente foi procurar a comunidade, teve muito suporte, muita ajuda, e começou a colaborar. Tenho o Studio Ast, sociedade com o Alisson, que está aqui, e sou a primeira ganhadora da Kim Parcel Scholarship, que foi uma bolsa da Fundação WordPress em 2015. Obrigada. Sobre a contribuição com a causa das mulheres na comunidade WordPress, mulheres que estão aqui, quiserem bater um papo, muito bem-vindas, vamos conversar sobre as mulheres no WordPress, muito feliz de ver muitas mulheres aqui. E aí o que acontece é que, para mim, o meu processo foi de vir de um mundo do design, das artes gráficas para a web, e eu fiquei totalmente perdida no início. Quem aqui é designer? Quem era de outra área que não fosse programação e teve que aprender na marra como desenvolver um site? Então é sobre vocês essas falastias. Quem já era desenvolvedor e teve que aprender WordPress também, ou mesmo quem iniciou com programação no WordPress, vai sentir também que foi o mesmo processo. E a dúvida inicial é, como eu passo de criador de sites para desenvolvedor, porque criar uma coisa, desenvolver é outra. Geralmente é esse o trajeto. Quem teve esse mesmo trajeto aqui? Bom, hoje, como a gente tem comunidade, forum, WordCamp, Meetups, a coisa fica um pouco mais simples. A gente já encontra alguns caminhos e sabe que outros não vão dar tão certo. Mas a ideia é que a gente possa fazer isso de uma forma ainda mais suave. Bom, e aí, quando a gente começa a mexer com WordPress, a nossa primeira dúvida geralmente é, como é que eu crio um site sem saber programar? Ainda não sei, mas eu quero criar. E aí que a gente conhece o nosso querido WordPress, porque ele foi uma plataforma que realmente revolucionou, possibilitou todo mundo a publicar na internet. E esse mês completa 15 anos. Então, há 15 anos, WordPress vem ajudando as pessoas a publicarem na internet. E aí é muito simples, realmente. Isso aqui foi um print que eu fiz, um GIF que eu fiz ontem. Então, só para vocês verem que eu tenho um site, uma instalação limpa, padrão. E em 15 segundos, eu posso mudar completamente a cara desse site. Eu posso ter outro site. Lógico, vou ter que fazer as configurações de conteúdo, menu e tudo mais, mas eu mudei completamente. Então, ele é realmente muito fácil. Mas essa facilidade de eu poder usar um sistema pronto que já me permite ter um site bem configurado, funcional, aos poucos, ela vai se tornando também uma limitação. Não por conta da ferramenta, porque o WordPress permite programar tudo ou não programar nada. Mas a nossa própria limitação de conhecimento pode ser um fator que te impeça de fazer as coisas que você quer fazer. E aí, nesse momento, você começa a pensar até onde eu quero simplicidade e facilidade e até onde eu quero liberdade. E é esse o balanço que a gente sempre tenta fazer. Está passando de dois em dois aqui. E aí, no ano passado, eu fiz uma pesquisa com 100 desenvolvedores WordPress perguntando o que eles utilizavam para criar temas. Desde ferramentas, softwares, técnicas e outros recursos. Especificamente sobre temas, não só sobre sites. Então, não inclui a parte de plugins, mas especificamente sobre temas. Aqui tem o link da pesquisa. Quem quiser conferir os resultados na íntegra está aqui. E aí, a primeira pergunta foi, qual era o seu perfil de desenvolvedor WordPress? A grande maioria se considera full stack, ou seja, faz front-end e back-end. Tem o pessoal que é mais especializado em front-end ou back-end. Tem o pessoal que é mais do perfil de design. E o pessoal que se considera personalizador. Faz algumas pequenas alterações, coloca conteúdo, mas não é tão focado em mexer em código, por exemplo, ou criar o design do site. E aí, a primeira tentativa que a gente vai fazer quando a gente quer personalizar aquele site, a gente instalou o tema. Ok, mas eu queria que o cabeçalho fosse diferente, ou que as cores fossem diferentes. Pode ser que a sua primeira tentativa tenha sido essa. Quem já fez isso? Eu já. Peguei o tema, falei, o código é aberto, vou mexer. E aí, o que acontece? Na próxima atualização, seu site foi embora. Por quê? Quando a gente atualiza um tema, ele apaga tudo e coloca os arquivos lá de novo. Então, as alterações são perdidas. Como eu faço isso da maneira certa? Tem várias formas. A primeira delas é CSS adicional. Quem já conhece o CSS adicional? Bom, foi um recurso adicionado na versão 4.7 do WordPress. Então, ele é bem recente até, que permitiu que a gente colocasse CSS direto no customizer, no personalizar. Então, ele adicionou um campo no customizer, onde a gente pode inserir CSS direto, que vai substituir ou sobreescrever o CSS do tema, na verdade. O que eu preciso saber para personalizar meus temas dessa forma? Só CSS básico. Entendendo as sintaxas dos CSS, as regras, eu consigo já personalizar um tema. Ah, mas isso é limitado, não dá para fazer muita coisa. Bom, nem tanto. Dá para fazer algumas coisas legais. Isso aqui é uma demonstração do próprio make.wordpress.org, quando o pessoal estava discutindo a implementação desse recurso. Então, você vê que é só digitar mesmo que ele esconde elementos, exibe, muda de cor, etc. Ou você pode, por exemplo, fazer algumas mudanças mais radicais. Como é o caso do site do WordCamp? Esse é o site do WordCamp em São Paulo, 2017, onde todas as alterações do tema foram feitas no CSS personalizado. Então, se eu não me engano, tinha 1.600 linhas de CSS personalizado. A gente colocou sas, então facilitava um pouco. Depois eu vou comentar o que é essa palavrinha. A próxima método seria os temas filhos. Quem conhece tema filho aqui? Para quem não conhece tema filho, é um tema que depende de outro. Então ele vai herdar as características do tema pai, exceto aquelas que a gente alterar. Então eu posso ter um tema filho onde eu quero alterar apenas o cabeçalho do tema pai. Dessa forma, eu posso atualizar o tema pai sem problemas que eu não vou perder as minhas alterações. Qual é a grande vantagem sobre o CSS personalizado? Eu posso alterar não só o CSS, mas PHP, HTML e outros recursos. Mas qual é a desvantagem? Eu dependo 100% do tema pai. Se eu perder o tema pai ou quebrar, ou o desenvolvedor resolver mudar tudo, eu tenho que refletir essas mudanças no meu tema. E o que eu tenho que entender para mexer e lidar com temas filhos, é legal você entender a hierarquia de templates. E a hierarquia de templates é uma série de regras que determina quais os templates PHP que o WordPress vai chamar para exibir um conteúdo quando ele abre um site. Então, por exemplo, aqui ele verifica se é a busca. Se for a busca, ele procura o arquivo search.php no tema. Se o tema não tiver, ele exibe a index no lugar. Mas tem outras regras mais complexas. Por exemplo, essa aqui. Quem quiser entender mais sobre isso, eu acredito que talvez o Eduardo Pitol vai falar... Cadê o Eduardo? Ele vai falar bastante na palestra dele sobre essas pormenores. Ou então dá uma olhadinha na documentação oficial. O Joel Spalski, que é o criador do Trello. Quem usa Trello aqui? Então, graças ao Joel e do Stack Exchange, ele diz que é mais difícil ler um código do que escrever, do que você criar um código. Então, é muito mais difícil entender o código que alguém escreveu do que você criar o seu próprio. E, baseado nisso, o próximo passo seria, então, você tentar criar o seu tema próprio do zero. Isso aqui são os passos de uma jornada que muitas pessoas seguiram. Nem todo mundo vai fazer todos os passos, mas alguns já começam daqui. E aí tenta o outro. Não é exatamente linear, mas eu coloquei mais no nível de dificuldade. Quem já criou um tema do zero aqui? Bastante gente, legal. E aí, o que você vai fazer? Criar os arquivos PHP de acordo com a estrutura do Wordpress, inserindo todos os recursos padrões da plataforma. Então, você vai ter que usar as próprias funções Wordpress e tudo mais para construir o seu site. E aí você consegue alcançar um design único, por exemplo, porque você vai também programar o CSS. Então, o Pro é que você tem muita liberdade. Você tem controle total do que você está fazendo. E o Contra é mais trabalho e exige conhecimento. Você tem que saber realmente o Wordpress, conhecer a plataforma e saber programar para desenvolver um tema do zero. Então, o que você precisa aprender para conseguir fazer um tema do zero? As linguagens de programação que o Wordpress utiliza, afinal, código e poesia. Por exemplo, PHP, HTML, CSS e JavaScript, que são, com certeza, as quatro principais. Dependendo do seu foco, se você for mais back-end ou front, você pode optar para uma ou outra. Aqui na pesquisa, o pessoal usa bastante na questão da versão do PHP, já estão usando as versões mais novas. E todo mundo sabe HTML, CSS e JavaScript um pouquinho menos, porque ainda tem uma curva de aprendizagem um pouquinho, maior do que os outros dois. Aqui o slide saiu da ordem, ele está mudando, depois a gente volta nisso. E outra coisa que preciso saber são os fundamentos do Wordpress, como a plataforma funciona. Muita gente acaba reescrevendo coisas, funções que o Wordpress já possui. Então, sempre pesquise antes para ver se aquilo que você está tentando fazer ou de prajá não faz sozinho. Aqui, por exemplo, a query, que é o processo de puxar do banco de dados, consultar determinados itens, como posts, usuários, etc. Então, aqui é sempre importante conhecer a WPquery, pre-getposts. O Leo Baiana, especialista em pre-getposts, chama até pelo nome ele, então, quem quiser, pode falar com ele. Eu estou oferecendo a consultoria dele aqui. E evite query posts. Aqui tem a explicação por que evitar. Basicamente, é ruim e não é performático. Exatamente. Aqui um exemplo, mas só para vocês verem que não é coisa de outro mundo. Com algumas linhas, você faz uma query. Você faz uma query, com algumas linhas, você faz uma query. Aqui, eu estou selecionando posts pelo maior número de comentários. Os posts mais comentados. Pronto. Aqui tem outras referências, mas só para ter o link na apresentação, depois vocês podem consultar. Outra questão importante, o loop, que é o processo de repetição, geralmente com base em uma query. Eu selecionei os posts. E agora, o que eu faço? Para cada um deles, vou exibir título, imagem destacada e resumo. Ele faz esse processo de loop, se houver posts, enquanto houver posts, puxa o post atual. E faz as coisas aqui. Título, imagem, resumo. E fecha o loop. É isso. Também é simples, mesmo quem não é programador por natureza, pode aprender e utilizar isso para criar seus próprios temas. Aqui são as templates tags, que vão geralmente dentro do loop. É importante conhecer elas, como puxar um título, classes do body, do elemento body. E aqui, por exemplo, como puxar um menu. Tags condicionais. Elas servem para verificar certas situações norte-presas. Se for a página single, um item, um post, por exemplo, vou exibir esse texto seguido do título. São apenas verificações. If is home, se é a página inicial, if is taxonomy, entre outras. Internacionalização também é importante. Eu usar essas funções aqui, underline, underline, underline e, que vão dizer que aquele texto é possível de ser traduzido. Se eu colocar o meu texto hard coded, quer dizer, só o texto lá no meu código, não vai ter nenhum plugin que consiga traduzir. E se algum dia eu quiser traduzir, eu vou ter que mexer no código em si. É muito importante, mesmo que não seja previsto, inicialmente, em uma tradução. Coding standards. Padrões de código. O PITOL também vai falar bastante disso. Então, só entender aqui, só para vocês verem, que tem algumas regras de indentação. Padrões de código para o CSS também, mesma coisa. Outra informação importante, é o plugin Territory, que o Alisson vai falar sobre isso. Coisas que não vão no tema, e sim no plugin, porque cada um tem a sua responsabilidade. É importante saber o que não colocar no tema. E aqui, o ambiente de desenvolvimento, essa parte, vou mostrar para vocês. O pessoal usa bastante o modelo LAMP, então, um chump, por exemplo, instalado, funciona super bem. Outros recursos mais avançados, ainda não são muito usados, então, não se preocupem em ter que montar um ambiente super sofisticado logo de início. Um chumpzinho já dá conta do recado. E por último aqui, um tema com base em um framework, que eu considero uma das formas mais otimizadas de você desenvolver temas, que é você ter uma base, onde você simplesmente não precisa reescrever código toda vez que você vai criar o seu site. Só uns exemplos de coisas que você já pode incluir nesse tema base para conseguir não repetir essas coisas toda vez. Você pode aprender muito, você conhece essas coisas. Eu usei aqui só as vantagens. Você tem muito mais liberdade, consistência do seu desenvolvimento, mas você pode demorar para encontrar um tema base bom. A gente utiliza o Odin da comunidade, então, quem quiser testar pode ver que ele é muito bom. E, como eu falei, você aprende muito. Você conhece ferramentas que você antes não conhecia. Só para finalizar, as dicas que eu dou são esse processo para tentar guiar o aprendizado de vocês e sigam para melhorar cada vez mais as suas habilidades, assim, vocês vão ter muito mais controle e vão poder escolher ou desenvolver, ou fazer uma pequena adaptação. Não que, necessariamente, sempre você vai precisar desenvolver tudo do zero. Muito obrigada, gente. Perguntas? Ainda dá tempo. Essa parte dos preprocessadores e tudo mais, tem mais gráficos? Então, vou deixar depois para quem quiser ver os dados. E é só isso. Perguntas? Anissa, você mostrou que você como designer correu atrás e tal, consegue fazer várias coisas como várias coisas que são funções do programador. O caminho inverso, você acha que é possível e seria muito difícil, mais difícil, como seria para um programador fazer esse caminho inverso e, de repente, começar a se meter a fazer um designer também? Eu acho que os dois vão ser um pouco difíceis, porque o designer tem às vezes a visão de que a programação é algo muito difícil, porque ela é assim, o programa roda ou não roda. Não tem meio termo. Se ele funcionou, funcionou. Se não funcionou, não funcionou. Já o designer é muito subjetivo. O que é um botão que funciona? O canto arredondado ou o canto quadrado? Mas aí, o programador tem que ter essa abertura de perceber que existem coisas como o contexto, a percepção, estudar principalmente a parte de UX, de user experience, de usabilidade, e entender que essas coisas, apesar de subjetivas, elas têm uma razão por trás. Mas eu acho que é mais uma questão de disposição. Então, eu sempre gostei de programar, por isso que hoje eu faço até bequente. Agora, se você não tem essa disposição, aí provavelmente não vai conseguir ter o tempo ou a vontade de estudar, mas é possível e é uma questão de se dedicar e ter abertura para poder experimentar com esse mundo novo, que não é o seu sozona de conforto. Mais alguém? Bom, então estarei aí o evento dia todo. Quem tiver dúvidas só deixar uma pergunta nas redes sociais. Depois, aqui no evento, só vim falar com a gente e no Orde Cana também. E é isso, muito obrigada.