' @RafaelFunchalwpod.in'

' @RafaelFunchalwpod.in'

@RafaelFunchal

Publicitário, Web Developere músico nas horas vagas

Desenvolve com WordPressdesde 2009

Administrador do grupo WordPress Brasil no Facebook

Support Guru no MailPoet.com

' @RafaelFunchalwpod.in'

Um framework que chuta bundas!

' @RafaelFunchalwpod.in'

Um framework de verdade!

Use como um tema base para seus projetos

' @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

' @RafaelFunchalwpod.in'

OK, mas como um tema funciona?

' @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.

' @RafaelFunchalwpod.in'

Arquivos obrigatórios

Os arquivos mínimos para o funcionamento de um tema para WordPress são:

style.css

index.php

' @RafaelFunchalwpod.in'

codex.wordpress.org/Template_Hierarchy

' @RafaelFunchalwpod.in'

Relaxe, o Odin já fez esse trabalho por você

' @RafaelFunchalwpod.in'

Toda a estrutura está pronta!

' @RafaelFunchalwpod.in'

Mas por onde começo?

' @RafaelFunchalwpod.in'

Sem Grunt ou Sass

Faça suas alterações de CSS diretamente no seguinte arquivo:

- /assets

- - /css

- - -/style.css

' @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

' @RafaelFunchalwpod.in'

Altere o que quiser,mas não meta a mão no /core

' @RafaelFunchalwpod.in'

' @RafaelFunchalwpod.in'

Futuras atualizações serão feitas na pasta core

' @RafaelFunchalwpod.in'

O que mais o Odin pode fazer por você?

' @RafaelFunchalwpod.in'

Criar custom post typegithub.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' ) ));

' @RafaelFunchalwpod.in'

Criar custom taxonomygithub.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 ));

' @RafaelFunchalwpod.in'

Criar user metagithub.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' ) ) ));

' @RafaelFunchalwpod.in'

Criar formulário de contatogithub.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 );

' @RafaelFunchalwpod.in'

Criar opções do temagithub.com/wpbrasil/odin/wiki/Classe-Odin_Theme_Options

' @RafaelFunchalwpod.in'

Shortcodes disponíveisgithub.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]

' @RafaelFunchalwpod.in'

Personalizando o admin

Admin CSSodin_admin_css()

Barra de Admodin_admin_adminbar_remove_logo()

Rodapéodin_admin_footer()

Loginodin_admin_login_logo()odin_admin_logo_url()odin_admin_logo_title()

Remove widgets do Dashboardodin_admin_remove_dashboard_widgets()

github.com/wpbrasil/odin/wiki/Customizando-o-Admin

' @RafaelFunchalwpod.in'

Gerador para Yeoman

Instale o yonpm install -g yo

Instale o geradornpm install -g generator-odin

Crie seu projeto usando o Odincd /caminho/para/wordpress/wp-content/themes/nome-do-temayo odin

npmjs.org/package/generator-odin

' @RafaelFunchalwpod.in'

Encontrei um erro…sento e choro?

github.com/wpbrasil/odin/

ForkFixPull Request

Ou então abra um

Issue

' @RafaelFunchalwpod.in'

Muito obrigado!Perguntas? Dúvidas? Observações?