Palestra feita no WordCamp Belo Horizonte (#WordCampBH) em 17 de Maio de 2014. Aprenda como o Odin pode auxiliar no desenvolvimento ágil de temas para WordPress, conheça suas funções e vire um ninja na arte milenar de chutar bundas. http://2014.belohorizonte.wordcamp.org/session/odin-um-framework-que-chuta-bundas/

1. ' @RafaelFunchalwpod.in
'

2. ' @RafaelFunchalwpod.in
'
@RafaelFunchal
Publicitário, Web Developer
e músico nas horas vagas
Desenvolve com WordPress
desde 2009
Administrador do grupo
WordPress Brasil no Facebook
Support Guru no MailPoet.com

3. ' @RafaelFunchalwpod.in
'
Um framework que chuta bundas!

4. ' @RafaelFunchalwpod.in
'
Um framework
de verdade!
Use como um
tema base para
seus projetos

5. ' @RafaelFunchalwpod.in
'
O que vem no Odin?
●
Twitter Bootstrap
●
Suporte a WooCommerce e Jigoshop
●
Suporte ao Infinite Scroll do Jetpack
●
Sass/Compass
●
GruntJS
●
Aqua Resizer
●
FitVids
●
EditorConfig

6. ' @RafaelFunchalwpod.in
'
OK, mas como um tema
funciona?

7. ' @RafaelFunchalwpod.in
'
De forma básica, funciona com arquivos de
templates que carregam funções com
loops/laços para a exibição do conteúdo.
Todo o conteúdo virá do banco de dados e
desta forma você poderá usar o tema em
outros sites/blogs sem nenhum problema.

8. ' @RafaelFunchalwpod.in
'
Arquivos obrigatórios
Os arquivos mínimos para o funcionamento
de um tema para WordPress são:
style.css
index.php

9. ' @RafaelFunchalwpod.in
'
codex.wordpress.org/Template_Hierarchy

10. ' @RafaelFunchalwpod.in
'
Relaxe, o Odin já fez esse
trabalho por você

11. ' @RafaelFunchalwpod.in
'
Toda a estrutura está pronta!

12. ' @RafaelFunchalwpod.in
'
Mas por onde começo?

13. ' @RafaelFunchalwpod.in
'
Sem Grunt ou Sass
Faça suas alterações de CSS diretamente no
seguinte arquivo:
- /assets
- - /css
- - -/style.css

14. ' @RafaelFunchalwpod.in
'
Magicamente com Grunt e Sass
Basta instalar os módulos e dependências e
alterar os arquivos .scss:
$ cd /src
$ npm install
$ grunt watch
https://github.com/wpbrasil/odin/wiki/Usando-o-GruntJS

15. ' @RafaelFunchalwpod.in
'
Altere o que quiser,
mas não meta a mão no /core

16. ' @RafaelFunchalwpod.in
'

17. ' @RafaelFunchalwpod.in
'
Futuras atualizações serão
feitas na pasta core

18. ' @RafaelFunchalwpod.in
'
O que mais o Odin pode
fazer por você?

19. ' @RafaelFunchalwpod.in
'
Criar custom post type
github.com/wpbrasil/odin/wiki/Classe-Odin_Post_Type
Criando um CPT Video
$video = new Odin_Post_Type(
__( 'Video', 'odin' ), // Nome (Singular) do Post Type.
'video' // Slug do Post Type.
);
Setandos os títulos
$video->set_labels(
array(
'menu_name' => __( 'Meus Videos', 'odin' )
)
);
Setando os argumentos
$video->set_arguments(
array(
'supports' => array( 'title', 'editor', 'thumbnail' )
)
);

20. ' @RafaelFunchalwpod.in
'
Criar custom taxonomy
github.com/wpbrasil/odin/wiki/Classe-Odin_Taxonomy
Criando uma taxonomia
$video = new Odin_Taxonomy(
'Categoria', // Nome (Singular) da nova Taxonomia.
'categoria', // Slug do Taxonomia.
'post' // Nome do tipo de conteúdo que a taxonomia irá fazer parte.
);
Setando os títulos
$video->set_labels(
array(
'menu_name' => __( 'Tipos de vídeo', 'odin' )
)
);
Setando argumentos
$video->set_arguments(
array(
'hierarchical' => false
)
);

21. ' @RafaelFunchalwpod.in
'
Criar user meta
github.com/wpbrasil/odin/wiki/Classe-Odin_User_Meta
Criando o user meta
$adicionais_user_meta = new Odin_User_Meta(
'adicionais', // Slug/ID do User Meta (obrigatório)
'Informações Adicionais' // Nome do User Meta (obrigatório)
);
Adicionando campos
$adicionais_user_meta->set_fields(
array(
array(
'id' => 'test_text',
'label' => __( 'Test Text', 'odin' ),
'type' => 'text',
'description' => __( 'Descrição do campo de text', 'odin' )
)
)
);

22. ' @RafaelFunchalwpod.in
'
Criar formulário de contato
github.com/wpbrasil/odin/wiki/Classe-Odin_Contact_Form
function odin_contact_form() {
$form = new Odin_Contact_Form(
'form_id', // ID do formulário
'eu@email.com', // E-mail do destinatário.
array( 'vc@email.com', 'tu@email.com' ), // array com e-mails que
receberão cópia.
array( 'alguem@email.com' ) // array com e-mails que receberão cópia
oculta.
// array( 'class' => 'form' ) // array com atributos para o formulário.
// 'file' // string com método que será enviado o anexo, no caso 'file'
como anexo e 'url' para enviar links.
);
return $form;
}
add_action( 'init', array( odin_contact_form(), 'init' ), 1 );

23. ' @RafaelFunchalwpod.in
'
Criar opções do tema
github.com/wpbrasil/odin/wiki/Classe-Odin_Theme_Options

24. ' @RafaelFunchalwpod.in
'
Shortcodes disponíveis
github.com/wpbrasil/odin/wiki/Classe-Odin_Shortcodes
[button]Text[/button]
[button_group][button]Text[/button][button]Text[/button][/button_group]
[alert]Message[/alert]
[label]Message[/label]
[badge]123[/badge]
[icon]
[well]Content[/well]
[table cols="#,Table heading" rows="1,Table cell"]
[progress]
[tooltip title="Text"]Content[/tooltip]
[map]
[clear]
[qrcode data="Text"]
[panel]
[tabs]
[row] [col class="col-md-6"]Content left[/col]

25. ' @RafaelFunchalwpod.in
'
Personalizando o admin
Admin CSS
odin_admin_css()
Barra de Adm
odin_admin_adminbar_remove_logo()
Rodapé
odin_admin_footer()
Login
odin_admin_login_logo()
odin_admin_logo_url()
odin_admin_logo_title()
Remove widgets do Dashboard
odin_admin_remove_dashboard_widgets()
github.com/wpbrasil/odin/wiki/Customizando-o-Admin

26. ' @RafaelFunchalwpod.in
'
Gerador para Yeoman
Instale o yo
npm install -g yo
Instale o gerador
npm install -g generator-odin
Crie seu projeto usando o Odin
cd /caminho/para/wordpress/wp-content/themes/nome-do-tema
yo odin
npmjs.org/package/generator-odin

27. ' @RafaelFunchalwpod.in
'
Encontrei um erro…sento e choro?
github.com/wpbrasil/odin/
Fork
Fix
Pull Request
Ou então abra um
Issue

28. ' @RafaelFunchalwpod.in
'
Muito obrigado!
Perguntas? Dúvidas? Observações?