Your SlideShare is downloading. ×
Odin: Um framework que chuta bundas
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Odin: Um framework que chuta bundas

3,053
views

Published on

Palestra feita no WordCamp Belo Horizonte (#WordCampBH) em 17 de Maio de 2014. …

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
24 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,053
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
37
Comments
4
Likes
24
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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