Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp SP 2017

176 views

Published on

Palestra apresentada no WordCamp São Paulo 2017.

Esta palestra é sobre a jornada pela qual todo desenvolvedor de temas para WordPress passa. Desde os inciantes que personalizam CSS, até os desenvolvedores avançados que utilizam frameworks e diversas ferramentas no processo. Nesta apresentação, conheceremos os diferentes métodos, suas aplicações e o que é necessário aprender para desenvolver temas cada vez mais personalizados e melhores.

Para embasar esta palestra, efetuei uma pesquisa com 100 desenvolvedores WordPress, sobre as ferramentas, técnicas e recursos mais utilizados. Os resultados, apresentados na palestra, oferecem uma rica referência de qual é a situação do processo atual de desenvolvimento de temas na comunidade brasileira.

Para os iniciantes, é uma oportunidade de descobrir a resposta para as seguintes perguntas: como ter mais controle sobre o layout do meu site WordPress? Quais são as boas práticas ao criar um novo tema? É realmente necessário saber programar para criar temas, e, se for, quais linguagens devo aprender?

Para os mais experientes, teremos dicas de padrões de desenvolvimento, pré-processadores, task runners, frameworks, e outras ferramentas, e como será o futuro do desenvolvimento de temas frente a novos recursos como React.js e bibliotecas semelhantes, e o Gutenberg.

Versão animada dos slides:
https://www.hastedesign.com.br/dicas/o-que-eu-preciso-saber-para-desenvolver-temas-wordpress

Published in: Software
  • Be the first to comment

O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp SP 2017

  1. 1. O que eu preciso saber para desenvolver temas Anyssa Ferreira
  2. 2. Anyssa Ferreira Designer e desenvolvedora web há 10 anos, especialista em WordPress. Co-fundadora do estúdio Haste. Organizadora da comunidade WordPress, 1ª ganhadora da Kim Parsell Scholarship. @anyssaferreira hastedesign.com.br
  3. 3. Como eu crio um site sem saber programar?
  4. 4. Mais viável Mais livre Programar tudo Usar um sistema pronto
  5. 5. liberdade vs viabilidade
  6. 6. Alterar temas diretamente no códigoEventuais atualizações do tema removerão as alterações
  7. 7. CSS adicional
  8. 8. make.wordpress.org
  9. 9. Hierarquia de Templates Que arquivo são usados para exibir cada tipo de página do WordPress?
  10. 10. Temas filhos
  11. 11. Um tema filho é um tema que herda as funcionalidades e estilos de outro tema, chamado de tema pai. Os temas filhos são a forma recomendada de modificar um tema existente. https://codex.wordpress.org/pt-br:Temas_Filhos
  12. 12. Facilidade para alterar partes específicas de um tema Fica dependente do tema pai
  13. 13. https://codex.wordpress.org/pt-br:Hierarquia_de_Modelos_WordPress
  14. 14. https://codex.wordpress.org/pt-br:Hierarquia_de_Modelos_WordPress
  15. 15. É mais difícil ler um código, do que escrevê-lo. – Joel Spolsky Mesmo para criar um tema filho, é importante conhecer os templates e saber pelo menos entender o código.
  16. 16. Criando seu tema do zero
  17. 17. Liberdade e controle total Muito trabalho. Exige conhecimento real de programação.
  18. 18. Linguagens básicas do WordPress Código é poesia
  19. 19. Coding standards “Não é porque funciona que está certo”
  20. 20. Padrões de código para o PHP ● Indentação lógica e com TAB, não espaços. ● Aspas simples, a menos que esteja tratando algo na string. ● Condições Yoda. Inverta a verificação. Erros evitar você deve. ○ if ( true == $the_force ) { ○ $victorious = you_will( $be ); ○ } ● Entre outros. [EN] https://make.wordpress.org/core/handbook/best-practices/coding-standards/ [pt_BR] https://codex.wordpress.org/pt-br:Padroes_de_Codificacao_do_WordPress
  21. 21. Padrões de código para o CSS ● Indentação lógica e com TAB, não espaços. ● Quebre múltiplos seletores em linhas ● Nomes de seletores (classes e IDs) com letras minúsculas e separados por hífens. ● Entre outros. [EN] https://make.wordpress.org/core/handbook/best-practices/coding-standards/
  22. 22. Ambiente de desenvolvimento Roupa suja se lava em casa
  23. 23. Temas com base em um framework ou tema base
  24. 24. Um framework ou tema base, é um tema que já vem com alguns recursos e templates pré-criados, agilizando o desenvolvimento e evitando repetitividade.
  25. 25. Liberdade + agilidade + consistência Leva tempo até encontrar ou criar um tema base bom para você
  26. 26. Através de um tema base você também pode aprender muito
  27. 27. Como eu aprendi
  28. 28. Pré-processadores Mais poder MWAHAHAHA e mais agilidade
  29. 29. Pré-processadores são programas que recebem uma entrada, efetuam um processamento, e geram uma saída, adicionando recursos ou modificando a forma que escrevemos o código.
  30. 30. CSS ● Adicionam variáveis ● Adicionam funções ● Adicionam mixins ● Modificam a indentação, tornando hierárquica ● Podem compilar media queries mais complexas e adicionar vendor-prefixes facilmente. ● Entre outros recursos, Pré-processadores
  31. 31. HTML e JS ● Simplificam a sintaxe, deixando a escrita menos verbosa ● Deixam o código mais limpo Pré-processadores
  32. 32. Task runners Terceirize tarefas chatas
  33. 33. Opções do tema Deixa os garoto brincar*
  34. 34. Opções do tema permitem que o usuário final personalize alguns aspectos do site, mesmo que não tenha contato com o código.
  35. 35. Versionamento Proteja-se. Use versionamento.
  36. 36. Editor de texto ou IDE O editor ideal tem que ser sublime, visual e atômico.
  37. 37. Sistema operacional 01110111 01101001 01101110 01100100 01101111 01110111 01110011
  38. 38. Faltou alguma coisa? ???
  39. 39. Façam temas!
  40. 40. Fim! Obrigada! @anyssaferreira @hastedesign

×