Introdução ao desenvolvimento de temas com frameworks
WordCamp BH 2016
Rodrigo Brito
Rodrigo Brito
Brasileiro, Mineiro, Sabarense
Estudante de Sistemas de Informação - IFMG
Desenvolvedor WordPress desde 2012
Entusiasta de tecnologias WEB e Open Source
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
/*
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
- 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
Que a força de odin esteja com vocês
Perguntas?
Palestra: slides.com/rodrigo73/desenvolvimento-temas/
/Rodrigo-brito
@rodrigobrito
www.rodrigobrito.net
WordCamp BH 2016 - Desenvolvimento de temas com frameworks
By Rodrigo Brito
WordCamp BH 2016 - Desenvolvimento de temas com frameworks
Palestra introdutória de desenvolvimento de temas com frameworks apresentada no WordCamp BH 2016
- 5,531