O documento aborda o desenvolvimento de temas no WordPress, destacando a importância de temas filhos e a necessidade de conhecimentos de programação. Além disso, discute padrões de codificação, frameworks, pré-processadores e ferramentas recomendadas para facilitar o desenvolvimento. A autora, Anyssa Ferreira, enfatiza a importância do versionamento e personalização na criação de sites.

1. O que eu preciso saber
para desenvolver temas
Anyssa Ferreira

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. Como eu crio
um site sem saber
programar?

5. Mais viável Mais livre
Programar
tudo
Usar um sistema
pronto

6. liberdade
vs
viabilidade

8. Alterar temas
diretamente no códigoEventuais atualizações do tema
removerão as alterações

9. CSS adicional

10. make.wordpress.org

11. Hierarquia de Templates
Que arquivo são usados para exibir cada tipo de página do
WordPress?

12. Temas filhos

13. 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

14. Facilidade para
alterar partes
específicas de um
tema
Fica dependente do
tema pai

16. https://codex.wordpress.org/pt-br:Hierarquia_de_Modelos_WordPress

17. https://codex.wordpress.org/pt-br:Hierarquia_de_Modelos_WordPress

18. É 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.

19. Criando seu tema do zero

20. Liberdade e controle
total
Muito trabalho. Exige
conhecimento real
de programação.

21. Linguagens básicas do
WordPress
Código é poesia

24. Coding standards
“Não é porque funciona que está certo”

25. 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

26. 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/

27. Ambiente de
desenvolvimento
Roupa suja se lava em casa

30. Temas com base em um
framework ou tema base

31. Um framework ou tema base, é
um tema que já vem com
alguns recursos e templates
pré-criados, agilizando o
desenvolvimento e evitando
repetitividade.

36. Liberdade +
agilidade +
consistência
Leva tempo até
encontrar ou criar
um tema base bom
para você

37. Através de um
tema base você
também pode
aprender muito

38. Como eu
aprendi

39. Pré-processadores
Mais poder MWAHAHAHA e mais agilidade

40. 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.

41. 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

42. HTML e JS
● Simplificam a sintaxe,
deixando a escrita menos
verbosa
● Deixam o código mais
limpo Pré-processadores

46. Task runners
Terceirize tarefas chatas

48. Opções do tema
Deixa os garoto brincar*

49. 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.

51. Versionamento
Proteja-se. Use versionamento.

53. Editor de texto ou IDE
O editor ideal tem que ser sublime, visual e atômico.

55. Sistema operacional
01110111 01101001 01101110 01100100 01101111 01110111 01110011

57. Faltou alguma coisa?
???

59. Façam temas!

60. Fim!
Obrigada!
@anyssaferreira
@hastedesign