Odin: Um framework que chuta bundas

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/

Transcript

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