Download - Odin: Um framework que chuta bundas
' @RafaelFunchalwpod.in'
' @RafaelFunchalwpod.in'
@RafaelFunchal
Publicitário, Web Developere músico nas horas vagas
Desenvolve com WordPressdesde 2009
Administrador do grupo WordPress Brasil no Facebook
Support Guru no MailPoet.com
' @RafaelFunchalwpod.in'
Um framework que chuta bundas!
' @RafaelFunchalwpod.in'
Um framework de verdade!
Use como um tema base para seus projetos
' @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
' @RafaelFunchalwpod.in'
OK, mas como um tema funciona?
' @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.
' @RafaelFunchalwpod.in'
Arquivos obrigatórios
Os arquivos mínimos para o funcionamento de um tema para WordPress são:
style.css
index.php
' @RafaelFunchalwpod.in'
codex.wordpress.org/Template_Hierarchy
' @RafaelFunchalwpod.in'
Relaxe, o Odin já fez esse trabalho por você
' @RafaelFunchalwpod.in'
Toda a estrutura está pronta!
' @RafaelFunchalwpod.in'
Mas por onde começo?
' @RafaelFunchalwpod.in'
Sem Grunt ou Sass
Faça suas alterações de CSS diretamente no seguinte arquivo:
- /assets
- - /css
- - -/style.css
' @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
' @RafaelFunchalwpod.in'
Altere o que quiser,mas não meta a mão no /core
' @RafaelFunchalwpod.in'
' @RafaelFunchalwpod.in'
Futuras atualizações serão feitas na pasta core
' @RafaelFunchalwpod.in'
O que mais o Odin pode fazer por você?
' @RafaelFunchalwpod.in'
Criar custom post typegithub.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' ) ));
' @RafaelFunchalwpod.in'
Criar custom taxonomygithub.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 ));
' @RafaelFunchalwpod.in'
Criar user metagithub.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' ) ) ));
' @RafaelFunchalwpod.in'
Criar formulário de contatogithub.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 );
' @RafaelFunchalwpod.in'
Criar opções do temagithub.com/wpbrasil/odin/wiki/Classe-Odin_Theme_Options
' @RafaelFunchalwpod.in'
Shortcodes disponíveisgithub.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]
' @RafaelFunchalwpod.in'
Personalizando o admin
Admin CSSodin_admin_css()
Barra de Admodin_admin_adminbar_remove_logo()
Rodapéodin_admin_footer()
Loginodin_admin_login_logo()odin_admin_logo_url()odin_admin_logo_title()
Remove widgets do Dashboardodin_admin_remove_dashboard_widgets()
github.com/wpbrasil/odin/wiki/Customizando-o-Admin
' @RafaelFunchalwpod.in'
Gerador para Yeoman
Instale o yonpm install -g yo
Instale o geradornpm install -g generator-odin
Crie seu projeto usando o Odincd /caminho/para/wordpress/wp-content/themes/nome-do-temayo odin
npmjs.org/package/generator-odin
' @RafaelFunchalwpod.in'
Encontrei um erro…sento e choro?
github.com/wpbrasil/odin/
ForkFixPull Request
Ou então abra um
Issue
' @RafaelFunchalwpod.in'
Muito obrigado!Perguntas? Dúvidas? Observações?