O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
CRIANDO TEMAS
COM ODIN E KIRKI
Matheus Gimenez
WordPress - 3 anos
Contribuidor do Odin
Ex-moderador do fórum oficial do WP
brasa.art.br @deshawngamer
mat...
Minha história
com WordPress
Trabalho com WordPress a 4 anos direto.
Desses 4 anos, os 3 últimos são somente com
ele, ou s...
O que
exatamente é o
Odin?
Odin é um tema base e um
framework para temas WordPress
O que é um tema
base?
Tema base é como são chamados
os temas que possuem a parte
essencial dos arquivos de template
do Wor...
O que é um
framework?
Um tema base não precisa
necessariamente possuir funções e
classes para facilitar o
desenvolvimento....
Quem faz o Odin
O Odin é feito pela comunidade
brasileira de WordPress ( é nosso!!
)
E é o passo mais fácil para um
desenv...
Alguns cases
meus com Odin
http://quintaessentia.com.br/
http://diadograffiti.org
http://artesol.org.br/
http://residuozero.org.br/
Iniciando com o
Odin
Para iniciar o desenvolvimento de
um tema com o Odin basta ir até o
site oficial (http://wpod.in/) e ...
Iniciando com o
Odin
Depois de fazer o download é só
extrair o arquivo ZIP para a pasta
de temas do seu WordPress.
Odin e o
Bootstrap
Antes mergulhar em toda estrutura
do Odin é preciso saber que no
front-end é utilizado o framework
de g...
Odin e o Grunt
Já ouviu falar do grunt? Não?
GruntJS é um automatizador de
tarefas feito em JavaScript e
utilizado pelo Od...
Tarefas do Grunt
No Odin, temos 3 comandos para
execução de tarefas do Grunt, são
eles:
grunt - é o comando padrão do grun...
Odin e o SASS
SASS é pre-processador de CSS.
Com ele, podemos utilizar variáveis
no CSS e muito mais.
No Odin, os arquivos...
Odin e o SASS
SASS é pre-processador de CSS.
Com ele, podemos utilizar variáveis
no CSS e muito mais.
No Odin, os arquivos...
Funções e classes
PHP
Não é só de front-end que vive um
desenvolvedor WordPress, certo?
O Odin possuí também várias
classe...
Funções e classes
PHP
Não é só de front-end que vive um
desenvolvedor WordPress, certo?
O Odin possuí também várias
classe...
Funções e classes
PHP
Criação de tipos de posts ( Post
Types )
Documentação
Funções e classes
PHP
Criação de Taxonomias
personalizadas
Documentação
Funções e classes
PHP
Criação de campos personalizados
Documentação
Funções e classes
PHP
Criação de status personalizados
Documentação
Funções e classes
PHP
Formulários de contato
Documentação
Funções e classes
PHP
Custom Fields para perfis de
usuários
Documentação
Funções e classes
PHP
Custom fields para termos
Documentação
Funções e classes
PHP
Página de opções para o tema
Documentação
Funções e classes
PHP
Shortcodes
Documentação
Funções e classes
PHP
Personalização do Dashboard
(painel)
Documentação
A Customizer API
Customizer ( Personalizar ) é uma
página dentro do dashboard
utilizada para personalizações do
tema em te...
O Kirki
O Kirki é um plugin WordPress que
gerencia a Customizer API e
adiciona novos tipos de campo a
ela.
Mas vamos para ...
Formas de
integração do
Kirki com o tema
Formas de
integração do
Kirki com o tema
Pedindo o download do plugin:
Essa é a forma recomendada pelos
desenvolvedores do...
Formas de
integração do
Kirki com o tema
Incluindo o Kirki dentro do tema
Nessa forma você inclui o plugin dentro
do seu t...
Tipos de campos
padrão
Nos proximos sliders, veremos
uma lista de tipos de campo padrão
no Kirki/Customizer API.
Tipos de campos
padrão
Checkbox
Link da documentação.
Tipos de campos
padrão
Código
Link da documentação.
Tipos de campos
padrão
Color
Link da documentação.
Tipos de campos
padrão
Seletor de
Dashicons
Link da documentação.
Tipos de campos
padrão
Seletor de
páginas
Link da documentação.
Tipos de campos
padrão
Imagem
Link da documentação.
Tipos de campos
padrão
Multicheckbox
Link da documentação.
Tipos de campos
padrão
Paleta de cores
Link da documentação.
Tipos de campos
padrão
Campo repetidor
Link da documentação.
https://github.com/brasadesign/odin
brasa.art.br/blog
matheus@brasa.art.br
twitter.com/deshawngamer
( Apresentação ) criando temas com odin e kirki
( Apresentação ) criando temas com odin e kirki
( Apresentação ) criando temas com odin e kirki
( Apresentação ) criando temas com odin e kirki
( Apresentação ) criando temas com odin e kirki
Próximos SlideShares
Carregando em…5
×

de

( Apresentação ) criando temas com odin e kirki Slide 1 ( Apresentação ) criando temas com odin e kirki Slide 2 ( Apresentação ) criando temas com odin e kirki Slide 3 ( Apresentação ) criando temas com odin e kirki Slide 4 ( Apresentação ) criando temas com odin e kirki Slide 5 ( Apresentação ) criando temas com odin e kirki Slide 6 ( Apresentação ) criando temas com odin e kirki Slide 7 ( Apresentação ) criando temas com odin e kirki Slide 8 ( Apresentação ) criando temas com odin e kirki Slide 9 ( Apresentação ) criando temas com odin e kirki Slide 10 ( Apresentação ) criando temas com odin e kirki Slide 11 ( Apresentação ) criando temas com odin e kirki Slide 12 ( Apresentação ) criando temas com odin e kirki Slide 13 ( Apresentação ) criando temas com odin e kirki Slide 14 ( Apresentação ) criando temas com odin e kirki Slide 15 ( Apresentação ) criando temas com odin e kirki Slide 16 ( Apresentação ) criando temas com odin e kirki Slide 17 ( Apresentação ) criando temas com odin e kirki Slide 18 ( Apresentação ) criando temas com odin e kirki Slide 19 ( Apresentação ) criando temas com odin e kirki Slide 20 ( Apresentação ) criando temas com odin e kirki Slide 21 ( Apresentação ) criando temas com odin e kirki Slide 22 ( Apresentação ) criando temas com odin e kirki Slide 23 ( Apresentação ) criando temas com odin e kirki Slide 24 ( Apresentação ) criando temas com odin e kirki Slide 25 ( Apresentação ) criando temas com odin e kirki Slide 26 ( Apresentação ) criando temas com odin e kirki Slide 27 ( Apresentação ) criando temas com odin e kirki Slide 28 ( Apresentação ) criando temas com odin e kirki Slide 29 ( Apresentação ) criando temas com odin e kirki Slide 30 ( Apresentação ) criando temas com odin e kirki Slide 31 ( Apresentação ) criando temas com odin e kirki Slide 32 ( Apresentação ) criando temas com odin e kirki Slide 33 ( Apresentação ) criando temas com odin e kirki Slide 34 ( Apresentação ) criando temas com odin e kirki Slide 35 ( Apresentação ) criando temas com odin e kirki Slide 36 ( Apresentação ) criando temas com odin e kirki Slide 37 ( Apresentação ) criando temas com odin e kirki Slide 38 ( Apresentação ) criando temas com odin e kirki Slide 39 ( Apresentação ) criando temas com odin e kirki Slide 40 ( Apresentação ) criando temas com odin e kirki Slide 41 ( Apresentação ) criando temas com odin e kirki Slide 42 ( Apresentação ) criando temas com odin e kirki Slide 43 ( Apresentação ) criando temas com odin e kirki Slide 44 ( Apresentação ) criando temas com odin e kirki Slide 45 ( Apresentação ) criando temas com odin e kirki Slide 46 ( Apresentação ) criando temas com odin e kirki Slide 47 ( Apresentação ) criando temas com odin e kirki Slide 48 ( Apresentação ) criando temas com odin e kirki Slide 49 ( Apresentação ) criando temas com odin e kirki Slide 50 ( Apresentação ) criando temas com odin e kirki Slide 51 ( Apresentação ) criando temas com odin e kirki Slide 52 ( Apresentação ) criando temas com odin e kirki Slide 53
Próximos SlideShares
What to Upload to SlideShare
Avançar
Transfira para ler offline e ver em ecrã inteiro.

0 gostaram

Compartilhar

Baixar para ler offline

( Apresentação ) criando temas com odin e kirki

Baixar para ler offline

Apresentação feita durante o WordCamp Fortaleza 2016

  • Seja a primeira pessoa a gostar disto

( Apresentação ) criando temas com odin e kirki

  1. 1. CRIANDO TEMAS COM ODIN E KIRKI
  2. 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. 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. 4. O que exatamente é o Odin? Odin é um tema base e um framework para temas WordPress
  5. 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. 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. 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.
  8. 8. Alguns cases meus com Odin
  9. 9. http://quintaessentia.com.br/
  10. 10. http://diadograffiti.org
  11. 11. http://artesol.org.br/
  12. 12. http://residuozero.org.br/
  13. 13. 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.
  14. 14. Iniciando com o Odin Depois de fazer o download é só extrair o arquivo ZIP para a pasta de temas do seu WordPress.
  15. 15. 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.
  16. 16. 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.
  17. 17. 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/
  18. 18. 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.
  19. 19. 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.
  20. 20. 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.
  21. 21. 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.
  22. 22. Funções e classes PHP Criação de tipos de posts ( Post Types ) Documentação
  23. 23. Funções e classes PHP Criação de Taxonomias personalizadas Documentação
  24. 24. Funções e classes PHP Criação de campos personalizados Documentação
  25. 25. Funções e classes PHP Criação de status personalizados Documentação
  26. 26. Funções e classes PHP Formulários de contato Documentação
  27. 27. Funções e classes PHP Custom Fields para perfis de usuários Documentação
  28. 28. Funções e classes PHP Custom fields para termos Documentação
  29. 29. Funções e classes PHP Página de opções para o tema Documentação
  30. 30. Funções e classes PHP Shortcodes Documentação
  31. 31. Funções e classes PHP Personalização do Dashboard (painel) Documentação
  32. 32. 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.
  33. 33. 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.
  34. 34. Formas de integração do Kirki com o tema
  35. 35. 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
  36. 36. 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
  37. 37. Tipos de campos padrão Nos proximos sliders, veremos uma lista de tipos de campo padrão no Kirki/Customizer API.
  38. 38. Tipos de campos padrão Checkbox Link da documentação.
  39. 39. Tipos de campos padrão Código Link da documentação.
  40. 40. Tipos de campos padrão Color Link da documentação.
  41. 41. Tipos de campos padrão Seletor de Dashicons Link da documentação.
  42. 42. Tipos de campos padrão Seletor de páginas Link da documentação.
  43. 43. Tipos de campos padrão Imagem Link da documentação.
  44. 44. Tipos de campos padrão Multicheckbox Link da documentação.
  45. 45. Tipos de campos padrão Paleta de cores Link da documentação.
  46. 46. Tipos de campos padrão Campo repetidor Link da documentação.
  47. 47. https://github.com/brasadesign/odin
  48. 48. brasa.art.br/blog matheus@brasa.art.br twitter.com/deshawngamer

Apresentação feita durante o WordCamp Fortaleza 2016

Vistos

Vistos totais

1.483

No Slideshare

0

De incorporações

0

Número de incorporações

14

Ações

Baixados

1

Compartilhados

0

Comentários

0

Curtir

0

×