Odin: Um framework que chuta bundas

5,800 views

Published on

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/

Published in: Technology
4 Comments
31 Likes
Statistics
Notes
No Downloads
Views
Total views
5,800
On SlideShare
0
From Embeds
0
Number of Embeds
277
Actions
Shares
0
Downloads
66
Comments
4
Likes
31
Embeds 0
No embeds

No notes for slide

Odin: Um framework que chuta bundas

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

×