Slide 1
Slide 1 text
'
@RafaelFunchal
wpod.in
'
Slide 2
Slide 2 text
'
@RafaelFunchal
wpod.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
Slide 3
Slide 3 text
'
@RafaelFunchal
wpod.in
'
Um framework que chuta bundas!
Slide 4
Slide 4 text
'
@RafaelFunchal
wpod.in
'
Um framework
de verdade!
Use como um
tema base para
seus projetos
Slide 5
Slide 5 text
'
@RafaelFunchal
wpod.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
Slide 6
Slide 6 text
'
@RafaelFunchal
wpod.in
'
OK, mas como um tema
funciona?
Slide 7
Slide 7 text
'
@RafaelFunchal
wpod.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.
Slide 8
Slide 8 text
'
@RafaelFunchal
wpod.in
'
Arquivos obrigatórios
Os arquivos mínimos para o funcionamento
de um tema para WordPress são:
style.css
index.php
Slide 9
Slide 9 text
'
@RafaelFunchal
wpod.in
'
codex.wordpress.org/Template_Hierarchy
Slide 10
Slide 10 text
'
@RafaelFunchal
wpod.in
'
Relaxe, o Odin já fez esse
trabalho por você
Slide 11
Slide 11 text
'
@RafaelFunchal
wpod.in
'
Toda a estrutura está pronta!
Slide 12
Slide 12 text
'
@RafaelFunchal
wpod.in
'
Mas por onde começo?
Slide 13
Slide 13 text
'
@RafaelFunchal
wpod.in
'
Sem Grunt ou Sass
Faça suas alterações de CSS diretamente no
seguinte arquivo:
- /assets
- - /css
- - -/style.css
Slide 14
Slide 14 text
'
@RafaelFunchal
wpod.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
Slide 15
Slide 15 text
'
@RafaelFunchal
wpod.in
'
Altere o que quiser,
mas não meta a mão no /core
Slide 16
Slide 16 text
'
@RafaelFunchal
wpod.in
'
Slide 17
Slide 17 text
'
@RafaelFunchal
wpod.in
'
Futuras atualizações serão
feitas na pasta core
Slide 18
Slide 18 text
'
@RafaelFunchal
wpod.in
'
O que mais o Odin pode
fazer por você?
Slide 19
Slide 19 text
'
@RafaelFunchal
wpod.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' )
)
);
Slide 20
Slide 20 text
'
@RafaelFunchal
wpod.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
)
);
Slide 21
Slide 21 text
'
@RafaelFunchal
wpod.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' )
)
)
);
Slide 22
Slide 22 text
'
@RafaelFunchal
wpod.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
'[email protected]', // E-mail do destinatário.
array( '[email protected]', '[email protected]' ), // array com e-mails que
receberão cópia.
array( '[email protected]' ) // 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 );
Slide 23
Slide 23 text
'
@RafaelFunchal
wpod.in
'
Criar opções do tema
github.com/wpbrasil/odin/wiki/Classe-Odin_Theme_Options
Slide 24
Slide 24 text
'
@RafaelFunchal
wpod.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]
Slide 25
Slide 25 text
'
@RafaelFunchal
wpod.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
Slide 26
Slide 26 text
'
@RafaelFunchal
wpod.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
Slide 27
Slide 27 text
'
@RafaelFunchal
wpod.in
'
Encontrei um erro…sento e choro?
github.com/wpbrasil/odin/
Fork
Fix
Pull Request
Ou então abra um
Issue
Slide 28
Slide 28 text
'
@RafaelFunchal
wpod.in
'
Muito obrigado!
Perguntas? Dúvidas? Observações?