Odin: Um framework que chuta bundas
31 gostaram7,185 visualizações
O documento apresenta o Odin, um framework para desenvolvimento de temas WordPress, destacando suas funcionalidades e estrutura básica, incluindo suporte a várias ferramentas como Twitter Bootstrap e WooCommerce. Explica como iniciar um projeto com Odin, criar custom post types, taxonomias, user meta e formulários de contato, além de oferecer opções para personalização do admin. O documento também menciona a possibilidade de contribuir para o projeto em caso de erros.
![' @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]](https://image.slidesharecdn.com/odin-umframeworkquechutabundas-140517120519-phpapp01/85/Odin-Um-framework-que-chuta-bundas-24-320.jpg)
Odin: Um framework que chuta bundas
- 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
- 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
- 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?