Introdução

TEMAS

O tema é a parte do site responsável pela apresentação visual do conteúdo. Apenas isso!

Funcionalidades e lógicas de negócio devem ser tratadas por plugins.

Pelo menos deveria ser isso...

O que é necessário para construir um Tema?

Obrigatório

index.php - Arquivo principal do tema

style.css - Identificador e estilo principal

Arquivos auxiliares

functions.php - Controle e funcionalidades

footer.php - Rodapé

header.php - Cabeçalho

single.php  - Visualização de posts

page.php - Visualização de páginas

category.php - Arquivos de categorias

Entre outros...

Hierarquia de arquivos

Loop e TEMPLATE TAgs

Base fundamental para toda a listagem de conteúdo. Pode variar,

porém sempre é a mesma coisa, estruturas muito semelhantes.

<!-- Se existir posts, iterar sobre eles -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

    <!-- Template tags -->
    <div class="entry">
        <?php the_content(); ?>
    </div>

<!-- Fim do loop e início do bloco de ausência de posts -->
<?php endwhile; else: ?>

    <p>Nenhuma publicação encontrada.</p>

<?php endif; ?>

ESFORÇO REPETITIVO

Otimizando o worlflow

STARTER THEMES

Estrutura básica para iniciar a criação do tema. Projeto com os arquivos básicos, folha de estilo inicial e algumas estruturas que facilitam o processo de desenvolvimento.

FRAMEWORKS

Arcabouço de ferramentas, funcionalidades, classes, entre outros artifícios, que contribuem como facilitadores para a resolução de um problema ou construção de um projeto.

UNDERSCORES

Starter Theme

Open Source

Desenvolvido pela Automattic

Extremamente leve

Estrutura simplificada

Gerador de Tema

• Gerador de cabeçalhos
• Slug para internacionalização
• Diversas estruturas inciais

underscores.me

ODIN

Framework + Tema Base

Open Source

Bootstrap

SASS

Automatizado (Grunt e Gulp)

Classes utilitárias

• Custom Post Types (CPT)
• Taxonomias Personalizadas
• Shortcordes
• Metaboxes
• Aqua Resizer
• Formulários de Contato
• Entre outros...

WPOD.IN

MAntido pela Comunidade WordPress Brasil

Você também pode estar aqui, contribua

github.com/wpbrasil/odin

Gerando o tema

Site: underscores.me

Informar dados

Baixar o tema!

/*
Theme Name: WordCamp
Theme URI: http://underscores.me/
Author: Rodrigo Brito
Author URI: http://rodrigobrito.net
Description: Tema de exemplo

//Funções de internacionalização
_e( 'Comments are closed.', 'wordcamp' );
__( 'User password!', 'wordcamp' );

Vários formatos iniciais

components.underscores.me

Ativando o Tema

Copiar para  /wp-content/themes

Ativar pelo painel administrativo ou wp-cli 

Utilizando o Odin por demanda

/assets - Folhas de estilos, imagens, fontes, scripts.

/core - Arquivos e classes do framework

/languages - Arquivos de internacionalização

/inc - Arquivos auxiliares e fragmentos de template

/src - Configurações e dependências de automatizadores

O poder de Odin está no CORE!

Mas o poder do Node, SASS e Grunt JS está no /assets e /src

Caso prefira o Gulp JS: github.com/wpbrasil/odin-gulp

Inclua em seu tema apenas o que for necessário.

Utilizando o Odin por demanda

Exemplo para Bootstrap básico

• class-bootstrap-nav.php - Bootstrap Nav Walker
• class-thumbnail-resizer.php - Aqua Resizer

• helpers.php - Thumbnails, paginação, entre outros.

Copiar para a pasta do tema e incluir no functions.php

/**
 * Odin Classes.
 */
require_once get_template_directory() . '/inc/classes/class-bootstrap-nav.php';
require_once get_template_directory() . '/inc/classes/class-thumbnail-resizer.php';

/**
 * Core Helpers.
 */
require_once get_template_directory() . '/inc/helpers.php';

Incluindo estilos

Underscores possui apenas o normalize.css

Você pode adicionar o framework front-end de seu gosto.

O Odin utiliza o Bootstrap, uma excelente opção.

O Odin já vem preparado para utilizar o Bootstrap com o SASS via Grunt JS. Pastas \src e \assets.

Filtro de estilos - Diretório personalizado

function wordcamp_stylesheet_uri( $uri, $dir ) {
	return $dir . '/assets/css/style.css';
}

add_filter( 'stylesheet_uri', 'wordcamp_stylesheet_uri', 10, 2 );

Inclusão de tags BOOTSTRAP

div #container, incluir classe .container e div filha .row

div #primary, incluir classe .col-md-8

div #sidebar, incluir classe .col-md-4

Instalando dependências e ativando o GRunt

Acessar via terminar a pasta \src dentro do tema.

Pasta onde fica os arquivos Gruntfile.js e package.json

Necessário possuir o Node JS e NPM instalados!

Instalar dependências:

$ npm install

Iniciar o Grunt

$ grunt w

Pronto, agora a mágica começa!

SASS

Permite uso de variáveis, minificação, aninhamento de CSS

LiveRELOAD

Atualiza o navegador automaticamente quando salva.

// Grunt watch livereload in the browser.
wp_enqueue_script( 'odin-livereload', 'http://localhost:35729/livereload.js?snipver=1', array(), null, true );

JSHINT

Análise sintática, qualidade e padronização de código

E muito mais

O Grunt JS e Gulp JS é uma verdadeira caixa de utilidades

• Deploy automatizado (rsync  e ftp)
• Fechamento de tema (zip)
• Minificação de imagens
• Auto-prefixer
• Entre outros...

Alterações de estilo muitos mais Fáceis

Modularize também o Bootstrap

No arquivo /assets/sass/bootstrap/_bootstrap.scss

Remova os módulos não utilizados: Tabs, Modal, Popovers...

// Components
 @import "bootstrap/dropdowns";
 @import "bootstrap/navs";
 @import "bootstrap/navbar";
 @import "bootstrap/pagination";
 @import "bootstrap/thumbnails";

// Utility classes
 @import "bootstrap/utilities";
 @import "bootstrap/responsive-utilities";

// Core variables and mixins
@import "bootstrap/variables";
@import "bootstrap/mixins";

// Reset and dependencies
@import "bootstrap/normalize";
@import "bootstrap/print";
@import "bootstrap/glyphicons";

// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";

Reduziu de 206KB para 60KB minificado!

Agora Você só Precisa ESTILIZAR

FUNCIONALIDADES

BOTSTRAP NAV WALKER

Construção do navbar com estrutura do Bootstrap

wp_nav_menu(
    array(
        'theme_location' => 'main-menu',
        'depth'          => 2,
        'container'      => false,
        'menu_class'     => 'nav navbar-nav',
        'fallback_cb'    => 'Odin_Bootstrap_Nav_Walker::fallback',
        'walker'         => new Odin_Bootstrap_Nav_Walker()
    )
);

No functions.php

No header.php

require_once get_template_directory() . '/inc/classes/class-bootstrap-nav.php';

Formulário de contato

function odin_contact_form() {
    $form = new Odin_Contact_Form(
        'contact_form',
        'voce@email.com'
    );
    $form->set_fields(
        array(
            // fields ....
            )
        )
    );
    $form->set_subject( __( 'Email enviado por [sender_name] <[sender_email]>', 'odin' ) );
    $form->set_content_type( 'html' );
    $form->set_reply_to( 'sender_email' );
    return $form;
}
add_action( 'init', array( odin_contact_form(), 'init' ), 1 );

No functions.php

require_once get_template_directory() . '/core/classes/abstracts/abstract-front-end-form.php';
require_once get_template_directory() . '/core/classes/class-contact-form.php';

Para renderizar

echo odin_contact_form()->render();

CAMPOS DE FORMUláRIO

'fields' => array(
    array(
        'id'          => 'sender_name', // Required
        'label'       => array(__( 'Nome', 'odin' ), // Required
        'type'        => 'text', // Required
        'required'    => true, // Optional (bool)
        'attributes'  => array( // Optional (html input elements)
            'placeholder' => __( 'Digite o seu nome' )
        )
    ),
)

Suporta diferentes tipos

• Texto
• Email
• Arquivo
• Textarea
• Checkbox
• Select
• Radio

Custom Post Type

require_once get_template_directory() . '/core/classes/class-post-type.php';

No functions.php

function wordcamp_cpt() {
    $trabalho = new Odin_Post_Type(
        'Trabalhos', // Nome (Singular) do Post Type.
        'trabalho' // Slug do Post Type.
    );
    
    
    $trabalho->set_arguments(
        array(
            'supports' => array( 'title', 'editor', 'thumbnail' ),
            'menu_icon' => 'dashicons-portfolio',
        )
    );
    
    $trabalho->set_labels(
        array(
            'menu_name' => __( 'Meus Trabalhos', 'wordcamp' )
        )
    );
}

add_action( 'init', 'wordcamp_cpt', 1 );

Inicializa CPT ( Portfólio )

Taxonomias Personalizadas

require_once get_template_directory() . '/core/classes/class-taxonomy.php;

No functions.php

function wordcamp_taxonomy() {
    $trabalho_tax = new Odin_Taxonomy(
        'Categoria', // Nome (Singular) da nova Taxonomia.
        'categoria', // Slug do Taxonomia.
        'trabalho' // Nome do tipo de conteúdo que a taxonomia irá fazer parte.
    );
}

add_action( 'init', 'wordcamp_taxonomy', 1 );

Inicializa Taxonomia ( Portfólio )

Iterando na Homepage

<h3><?php _e('Portfólio', 'wordcamp'); ?></h3>
<hr>
<div class="row">
	<?php $args = array( 'posts_per_page' => 4, 'post_type' => 'trabalho' );

	$myposts = get_posts( $args );
	foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
		<div class="col-md-3">
			<a href="<?php the_permalink(); ?>" class="thumbnail">
		    	<?php echo odin_thumbnail( 300, 300, get_the_title(), true); ?>
		    </a>
		    <h4><?php the_title(); ?></h4>
		</div>
	<?php endforeach;
	wp_reset_postdata();?>
</div>

E Muito mais

• Metabox e Custom Fields
• Post Status
• Shortcodes
• Term Meta
• Theme Options
• User Meta
• Entro outros...

Em conjunto com o ACF e outros plugins, o Odin torna-se uma verdadeira fábrica de  aplicações.

Acesse a WIKI

Github.com/wpbrasil/odin/wiki

Que a força de odin esteja com vocês

Perguntas?

Palestra: slides.com/rodrigo73/desenvolvimento-temas/

/Rodrigo-brito

@rodrigobrito

www.rodrigobrito.net