Odin: Um framework que chuta bundas

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/

5230356422c1fb7f6bcefa55ed07f97d?s=128

Rafael Funchal

May 17, 2014
Tweet

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?