Apresentação feita durante o WordCamp Fortaleza 2016

1. CRIANDO TEMAS
COM ODIN E KIRKI

2. Matheus Gimenez
WordPress - 3 anos
Contribuidor do Odin
Ex-moderador do fórum oficial do WP
brasa.art.br @deshawngamer
matheus@brasa.art.br

3. Minha história
com WordPress
Trabalho com WordPress a 4 anos direto.
Desses 4 anos, os 3 últimos são somente com
ele, ou seja, trabalho exclusivamente com ele
hoje.
Contribuo com Odin framework e utilizo ele em
todos meus projetos.
Atualmente lidero a equipe de desenvolvimento
da Brasa.art.br

4. O que
exatamente é o
Odin?
Odin é um tema base e um
framework para temas WordPress

5. O que é um tema
base?
Tema base é como são chamados
os temas que possuem a parte
essencial dos arquivos de template
do WordPress.
Basicamente, é um tema que vem
pronto para ser modificado.

6. O que é um
framework?
Um tema base não precisa
necessariamente possuir funções e
classes para facilitar o
desenvolvimento. Um tema base
só possui os arquivos de template.
Já um framework, como o Odin,
possui dentro dele várias funções e
classes para facilitar o
desenvolvimento.

7. Quem faz o Odin
O Odin é feito pela comunidade
brasileira de WordPress ( é nosso!!
)
E é o passo mais fácil para um
desenvolvedor WordPress
brasileiro começar a contribuir com
um software livre.
Então se você é um
desenvolvedor, fique a vontade
para contribuir.

9. Alguns cases
meus com Odin

10. http://quintaessentia.com.br/

11. http://diadograffiti.org

12. http://artesol.org.br/

13. http://residuozero.org.br/

14. Iniciando com o
Odin
Para iniciar o desenvolvimento de
um tema com o Odin basta ir até o
site oficial (http://wpod.in/) e fazer o
download.

16. Iniciando com o
Odin
Depois de fazer o download é só
extrair o arquivo ZIP para a pasta
de temas do seu WordPress.

17. Odin e o
Bootstrap
Antes mergulhar em toda estrutura
do Odin é preciso saber que no
front-end é utilizado o framework
de grids Bootstrap.
É sempre interessante ter essa
noção e sempre utilizar a
documentação do mesmo pra não
recriar a roda no CSS.

18. Odin e o Grunt
Já ouviu falar do grunt? Não?
GruntJS é um automatizador de
tarefas feito em JavaScript e
utilizado pelo Odin.
Com ele, podemos ter tarefas para
por exemplo, minificar todo o
JavaScript utilizado no tema.
Ou, podemos otimizar todas
imagens do tema com um só
comando.

19. Tarefas do Grunt
No Odin, temos 3 comandos para
execução de tarefas do Grunt, são
eles:
grunt - é o comando padrão do grunt,
no Odin, ele vai rodar as tarefas de
processar o SASS e minificar o
JavaScript.
grunt watch - Fica “assistindo
alterações” e executando tarefas
conforme essas alterações ocorrem.
grunt optimize - otimiza as imagens
na pasta assets/images/

20. Odin e o SASS
SASS é pre-processador de CSS.
Com ele, podemos utilizar variáveis
no CSS e muito mais.
No Odin, os arquivos SASS ficam
na pasta assets/sass. O arquivo
principal é o assets/sass/style.scss,
é ele que carrega os demais
arquivos.

21. Odin e o SASS
SASS é pre-processador de CSS.
Com ele, podemos utilizar variáveis
no CSS e muito mais.
No Odin, os arquivos SASS ficam
na pasta assets/sass. O arquivo
principal é o assets/sass/style.scss,
é ele que carrega os demais
arquivos.

22. Funções e classes
PHP
Não é só de front-end que vive um
desenvolvedor WordPress, certo?
O Odin possuí também várias
classes e funções do PHP para
facilitar o desenvolvimento.
Vou listar eles nos proximos sliders
com o link da documentação de
cada um.

23. Funções e classes
PHP
Não é só de front-end que vive um
desenvolvedor WordPress, certo?
O Odin possuí também várias
classes e funções do PHP para
facilitar o desenvolvimento.
Vou listar eles nos proximos sliders
com o link da documentação de
cada um.

24. Funções e classes
PHP
Criação de tipos de posts ( Post
Types )
Documentação

25. Funções e classes
PHP
Criação de Taxonomias
personalizadas
Documentação

26. Funções e classes
PHP
Criação de campos personalizados
Documentação

27. Funções e classes
PHP
Criação de status personalizados
Documentação

28. Funções e classes
PHP
Formulários de contato
Documentação

29. Funções e classes
PHP
Custom Fields para perfis de
usuários
Documentação

30. Funções e classes
PHP
Custom fields para termos
Documentação

31. Funções e classes
PHP
Página de opções para o tema
Documentação

32. Funções e classes
PHP
Shortcodes
Documentação

33. Funções e classes
PHP
Personalização do Dashboard
(painel)
Documentação

34. A Customizer API
Customizer ( Personalizar ) é uma
página dentro do dashboard
utilizada para personalizações do
tema em tempo real.
Desde o final do ano passado é
tornou-se obrigatório para temas
enviados ao WP.org, dessa forma,
tende-se a se tornar um padrão em
temas WordPress.

36. O Kirki
O Kirki é um plugin WordPress que
gerencia a Customizer API e
adiciona novos tipos de campo a
ela.
Mas vamos para o código um
pouco entender como funciona.

37. Formas de
integração do
Kirki com o tema

38. Formas de
integração do
Kirki com o tema
Pedindo o download do plugin:
Essa é a forma recomendada pelos
desenvolvedores do Kirki, seria,
basicamente, colocar um aviso para os
administradores do site fazerem a
instalação do plugin.
Link da documentação

39. Formas de
integração do
Kirki com o tema
Incluindo o Kirki dentro do tema
Nessa forma você inclui o plugin dentro
do seu tema. Apesar de não
recomendada, é minha preferida, utilizo
o Kirki como um sub-modulo no Git.
Link da documentação

42. Tipos de campos
padrão
Nos proximos sliders, veremos
uma lista de tipos de campo padrão
no Kirki/Customizer API.

43. Tipos de campos
padrão
Checkbox
Link da documentação.

44. Tipos de campos
padrão
Código
Link da documentação.

45. Tipos de campos
padrão
Color
Link da documentação.

46. Tipos de campos
padrão
Seletor de
Dashicons
Link da documentação.

47. Tipos de campos
padrão
Seletor de
páginas
Link da documentação.

48. Tipos de campos
padrão
Imagem
Link da documentação.

49. Tipos de campos
padrão
Multicheckbox
Link da documentação.

50. Tipos de campos
padrão
Paleta de cores
Link da documentação.

51. Tipos de campos
padrão
Campo repetidor
Link da documentação.

52. https://github.com/brasadesign/odin

53. brasa.art.br/blog
matheus@brasa.art.br
twitter.com/deshawngamer