SlideShare uma empresa Scribd logo
Estilizando temas:
Técnicas e dicas
Anyssa Ferreira
Anyssa Ferreira
Designer e desenvolvedora web, há 10 anos.
Fundadora do estúdio Haste. Professora e
palestrante. Membra da comunidade WordPress
de São Paulo, Organizadora do WordCamp SP e
Meetups.
Primeira ganhadora da Kim Parsell Scholarship da
Fundação WordPress em 2015..
WordPress 2.0 (2005)
Tema Kubrick (2005)
Meu blogspot personalizado
Tema Workaholic (Graph Paper Press)
Motivos da
personalização
de temas
● Identidade própria e
diferenciação
● Alterações visuais
específicas
● Atender necessidades
Quero um tema que tenha
unicórnios voadores e
seja compatível com o IE7
Você já encontrou um
tema perfeito?
Qual é o melhor jeito de
personalizar um tema?
Depende. Vem comigo!
Para alterações
menores
1.
Ajustes de partes menores do tema
Opções
do tema
O que o tema deixa você fazer?
Opções do tema - prós e contras
Prós
● Rápido
● Não é necessário
conhecimento de código
● Personalizações ficam
separadas do tema
Contras
● Personalizações podem se
perder ao trocar de tema
● Pouco controle
Utilizando
plugins de
personalização
Instale um plugin e altere seu design
Plugins - prós e contras
Prós
● Rápido
● Não é necessário
conhecimento de código
● Personalizações ficam
separadas do tema
● Não é vinculado ao tema
Contras
● Pode ser um excesso de
recursos
● Médio controle
Dicas de plugins
● Plugins de fontes;
● Plugins de shortcodes (botões,
colunas, boxes, etc.);
● Plugins que adicionam galerias, sliders,
etc.
Alterando o código de um
tema direto
Abra o arquivo style.css e comece a digitar
Alterações diretas - prós e contras
Prós
● O jeito mais rápido e
simples que envolve
programação
Contras
● Se uma atualização do
tema for feita, as
alterações são perdidas.
● Não indicado
Criando um tema filho
Copie os arquivos para a pasta do tema filho e edite.
Tema filho - prós e contras
Prós
● As alterações se mantém
mesmo com atualizações
do tema pai;
● Organização;
Contras
● É necessário entender o
funcionamento dos temas
filhos.
Para um design
completamente
novo
2.
Criar um tema único
Criando um tema próprio
Inicie seu próprio tema, programando todo o CSS, HTML, PHP, etc.
Tema próprio - prós e contras
Prós
● Garantia de que o resultado
obtido vai ser igual ao
design criado.
● Controle total do código
Contras
● Método mais demorado e
oneroso.
● Responsabilidade sobre o
código e sua qualidade.
● Necessário entrosamento
entre designers e
programadores.
Dicas para criar seu tema próprio
Designers: mesmo com a liberdade de criação, estudem padrões
vigentes e entendam as limitações da tecnologia.
Saibam o que é e o que não é possível fazer.
Dicas para criar seu tema próprio
Programadores: nem sempre fazer um tema próprio é iniciar da
estaca zero. Existem frameworks que adiantam muito o serviço. Dê
uma olhada no Underscores e no Odin (framework brasileiro).
Utilize também pré-processadores (SASS, LESS, Stylus) e task
runners (Gulp, Grunt). Eles deixam os estilos CSS mais dinâmicos e
organizados.
Criando um tema
com opções de
personalização
Além de criar um tema, você pode oferecer
opções para que os usuários tenham a
liberdade de personalizá-lo facilmente.
Tema com opções- prós e contras
Prós
● Oferece a outros usuários
leigos em código, algumas
opções de personalização.
● Pode servir para que um
tema seja usado mais de
uma vez (exemplo: temas
para serem vendidos).
Contras
● Exige conhecimento da
Customizer API do
WordPress.
● Exige um bom
planejamento das
possibilidades de design
que as opções resultarão.
Dicas
gerais
3.
Para estilização de temas
No início do projeto, pense que
recursos seu site precisa. Não que
visual ele terá.
Analise: vale a pena usar um tema
como base? O quanto terei que
modificá-lo?
Se for muito, considere criar um tema próprio.
Se for escolher um tema, vá com a mente
aberta. Considere como você pode usar o
que os temas oferecem, e não se um tema
que é exatamente como você imaginou.
Vá a caça com algumas ideias, mas sem
expectativas exatas.
Designers, experimentem CSS. Não tenha
medo de programar, o código é apenas
mais uma forma de imprimir o design.
CSS são apenas regras visuais descritas
verbalmente.
Obrigada!
Siga nas redes sociais
@anyssaferreira
www.hastedesign.com.br

Mais conteúdo relacionado

Mais procurados

As novidades do WordPress 3.9 e como aumentar a produtividade trabalhando com...
As novidades do WordPress 3.9 e como aumentar a produtividade trabalhando com...As novidades do WordPress 3.9 e como aumentar a produtividade trabalhando com...
As novidades do WordPress 3.9 e como aumentar a produtividade trabalhando com...
WordPress Bahia
 
Curso de HTML5 - Tudo No HTML5 é Novo?
Curso de HTML5 - Tudo No HTML5 é Novo?Curso de HTML5 - Tudo No HTML5 é Novo?
Curso de HTML5 - Tudo No HTML5 é Novo?
Erick L. F.
 
Minicurso Web. Front-end e HTML5 (parte 2)
Minicurso Web. Front-end e HTML5 (parte 2)Minicurso Web. Front-end e HTML5 (parte 2)
Minicurso Web. Front-end e HTML5 (parte 2)
Luiz Felipe Fernandes Machado Costa
 
Design para WordPress- Anyssa Ferreira - WordCamp BH 2015
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
Design para WordPress- Anyssa Ferreira - WordCamp BH 2015
Anyssa Ferreira
 
O Básico para criar Sites Otimizados em Elementor
O Básico para criar Sites Otimizados em ElementorO Básico para criar Sites Otimizados em Elementor
O Básico para criar Sites Otimizados em Elementor
Daniel Paz
 
Performance e otimização no wordpress
Performance e otimização no wordpressPerformance e otimização no wordpress
Performance e otimização no wordpress
Daniel Paz
 
Ebook - Processo de Otimização de Sites WordPress
Ebook - Processo de Otimização de Sites WordPressEbook - Processo de Otimização de Sites WordPress
Ebook - Processo de Otimização de Sites WordPress
Daniel Paz
 
Treinamento 20130914
Treinamento 20130914Treinamento 20130914
Treinamento 20130914
Leandro Henrique Stein
 
Ebook - Check-list otimização WordPress
Ebook - Check-list otimização WordPressEbook - Check-list otimização WordPress
Ebook - Check-list otimização WordPress
Daniel Paz
 
XPT Framework
XPT FrameworkXPT Framework
XPT Framework
Alexsandro Pereira
 
Html5,css3,javascript o lugar onde sonhos se tornam realidade.
Html5,css3,javascript   o lugar onde sonhos se tornam realidade.Html5,css3,javascript   o lugar onde sonhos se tornam realidade.
Html5,css3,javascript o lugar onde sonhos se tornam realidade.
Edmo Jeova
 
Primeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-endPrimeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-end
Diego Eis
 
WordCamp Floripa 2021 - Daniel - Core web vitals e WordPress
WordCamp Floripa 2021 - Daniel  - Core web vitals e WordPressWordCamp Floripa 2021 - Daniel  - Core web vitals e WordPress
WordCamp Floripa 2021 - Daniel - Core web vitals e WordPress
WordCamp Floripa
 
Além do MVP com PHP - TDC Floripa 2016
Além do MVP com PHP - TDC Floripa 2016Além do MVP com PHP - TDC Floripa 2016
Além do MVP com PHP - TDC Floripa 2016
Romeu Mattos
 
Método The bridge
Método The bridgeMétodo The bridge
Método The bridge
Daniel Coscarelli
 
Drupal Performance - Dicas e técnicas para levar seu Drupal às nuvens
Drupal Performance - Dicas e técnicas para levar seu Drupal às nuvensDrupal Performance - Dicas e técnicas para levar seu Drupal às nuvens
Drupal Performance - Dicas e técnicas para levar seu Drupal às nuvens
Paulino Michelazzo
 
Wordpress basico
Wordpress basicoWordpress basico
Wordpress basico
Paulo Henrique
 
The Ultimate Guide to Development in WordPress
The Ultimate Guide to Development in WordPressThe Ultimate Guide to Development in WordPress
The Ultimate Guide to Development in WordPress
Jackson F. de A. Mafra
 
Front-end 001
Front-end 001Front-end 001
Front-end 001
mvcbotelho
 
Construindo seu framework CSS
Construindo seu framework CSSConstruindo seu framework CSS
Construindo seu framework CSS
Diego Eis
 

Mais procurados (20)

As novidades do WordPress 3.9 e como aumentar a produtividade trabalhando com...
As novidades do WordPress 3.9 e como aumentar a produtividade trabalhando com...As novidades do WordPress 3.9 e como aumentar a produtividade trabalhando com...
As novidades do WordPress 3.9 e como aumentar a produtividade trabalhando com...
 
Curso de HTML5 - Tudo No HTML5 é Novo?
Curso de HTML5 - Tudo No HTML5 é Novo?Curso de HTML5 - Tudo No HTML5 é Novo?
Curso de HTML5 - Tudo No HTML5 é Novo?
 
Minicurso Web. Front-end e HTML5 (parte 2)
Minicurso Web. Front-end e HTML5 (parte 2)Minicurso Web. Front-end e HTML5 (parte 2)
Minicurso Web. Front-end e HTML5 (parte 2)
 
Design para WordPress- Anyssa Ferreira - WordCamp BH 2015
Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015Design para WordPress-  Anyssa Ferreira - WordCamp BH 2015
Design para WordPress- Anyssa Ferreira - WordCamp BH 2015
 
O Básico para criar Sites Otimizados em Elementor
O Básico para criar Sites Otimizados em ElementorO Básico para criar Sites Otimizados em Elementor
O Básico para criar Sites Otimizados em Elementor
 
Performance e otimização no wordpress
Performance e otimização no wordpressPerformance e otimização no wordpress
Performance e otimização no wordpress
 
Ebook - Processo de Otimização de Sites WordPress
Ebook - Processo de Otimização de Sites WordPressEbook - Processo de Otimização de Sites WordPress
Ebook - Processo de Otimização de Sites WordPress
 
Treinamento 20130914
Treinamento 20130914Treinamento 20130914
Treinamento 20130914
 
Ebook - Check-list otimização WordPress
Ebook - Check-list otimização WordPressEbook - Check-list otimização WordPress
Ebook - Check-list otimização WordPress
 
XPT Framework
XPT FrameworkXPT Framework
XPT Framework
 
Html5,css3,javascript o lugar onde sonhos se tornam realidade.
Html5,css3,javascript   o lugar onde sonhos se tornam realidade.Html5,css3,javascript   o lugar onde sonhos se tornam realidade.
Html5,css3,javascript o lugar onde sonhos se tornam realidade.
 
Primeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-endPrimeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-end
 
WordCamp Floripa 2021 - Daniel - Core web vitals e WordPress
WordCamp Floripa 2021 - Daniel  - Core web vitals e WordPressWordCamp Floripa 2021 - Daniel  - Core web vitals e WordPress
WordCamp Floripa 2021 - Daniel - Core web vitals e WordPress
 
Além do MVP com PHP - TDC Floripa 2016
Além do MVP com PHP - TDC Floripa 2016Além do MVP com PHP - TDC Floripa 2016
Além do MVP com PHP - TDC Floripa 2016
 
Método The bridge
Método The bridgeMétodo The bridge
Método The bridge
 
Drupal Performance - Dicas e técnicas para levar seu Drupal às nuvens
Drupal Performance - Dicas e técnicas para levar seu Drupal às nuvensDrupal Performance - Dicas e técnicas para levar seu Drupal às nuvens
Drupal Performance - Dicas e técnicas para levar seu Drupal às nuvens
 
Wordpress basico
Wordpress basicoWordpress basico
Wordpress basico
 
The Ultimate Guide to Development in WordPress
The Ultimate Guide to Development in WordPressThe Ultimate Guide to Development in WordPress
The Ultimate Guide to Development in WordPress
 
Front-end 001
Front-end 001Front-end 001
Front-end 001
 
Construindo seu framework CSS
Construindo seu framework CSSConstruindo seu framework CSS
Construindo seu framework CSS
 

Destaque

Introdução a Hooks - Aprenda a customizar o WordPress com filtros e ações
Introdução a Hooks - Aprenda a customizar o WordPress com filtros e açõesIntrodução a Hooks - Aprenda a customizar o WordPress com filtros e ações
Introdução a Hooks - Aprenda a customizar o WordPress com filtros e ações
frq
 
Segurança da informação palestra wordcamp sp 2016
Segurança da informação   palestra wordcamp sp 2016Segurança da informação   palestra wordcamp sp 2016
Segurança da informação palestra wordcamp sp 2016
Thauã Cícero Santos Silva
 
WordCamp SP 2016
WordCamp SP 2016WordCamp SP 2016
WordCamp SP 2016
Edison Costa
 
Configurando SSL com Let’s Encrypt, EasyEngine e WP-CLI
Configurando SSL com Let’s Encrypt, EasyEngine e WP-CLIConfigurando SSL com Let’s Encrypt, EasyEngine e WP-CLI
Configurando SSL com Let’s Encrypt, EasyEngine e WP-CLI
Rafael Funchal
 
Content Marketing - WordCamp São Paulo 2016
Content Marketing - WordCamp São Paulo 2016Content Marketing - WordCamp São Paulo 2016
Content Marketing - WordCamp São Paulo 2016
Edney Souza
 
Case Editora Abril
Case Editora AbrilCase Editora Abril
Case Editora Abril
Leonam Pereira Dias
 
Gerenciando sites em WordPress de forma eficiente: do deploy à manutenção
Gerenciando sites em WordPress de forma eficiente: do deploy à manutençãoGerenciando sites em WordPress de forma eficiente: do deploy à manutenção
Gerenciando sites em WordPress de forma eficiente: do deploy à manutenção
spirallab
 
Como Limpar Seu Site WordPress
Como Limpar Seu Site WordPressComo Limpar Seu Site WordPress
Como Limpar Seu Site WordPress
Sucuri
 
Eventos de Sucesso usam WordPress.
Eventos de Sucesso usam WordPress.Eventos de Sucesso usam WordPress.
Eventos de Sucesso usam WordPress.
Erika Souza
 
UX muito além da UI
UX muito além da UIUX muito além da UI
UX muito além da UI
Mellina
 
Matéria Impressa convertida ao virtual
Matéria Impressa convertida ao virtualMatéria Impressa convertida ao virtual
Matéria Impressa convertida ao virtual
frq
 
Apostila illustrator-cs5
Apostila illustrator-cs5Apostila illustrator-cs5
Apostila illustrator-cs5
aulaemvideo
 
Adobe illustrator: Galerias de ferramentas
Adobe illustrator: Galerias de ferramentasAdobe illustrator: Galerias de ferramentas
Adobe illustrator: Galerias de ferramentas
Sara Rangel
 
Tutoriais Illustrator - 02
Tutoriais Illustrator - 02Tutoriais Illustrator - 02
Tutoriais Illustrator - 02
Vanessa Mezzadri Brudzinski
 
illustrator
illustratorillustrator
illustrator
KellySales27
 
Marcos Bornelli - Planejamento para o uso de TICs na educação
Marcos Bornelli - Planejamento para o uso de TICs na educaçãoMarcos Bornelli - Planejamento para o uso de TICs na educação
Marcos Bornelli - Planejamento para o uso de TICs na educação
Marcos Bornelli
 
Métricas - Product tank
Métricas - Product tankMétricas - Product tank
Métricas - Product tank
Métricas Boss
 
Introduction to Illustrator's workshop - Covilha October 2012
Introduction to Illustrator's workshop - Covilha October 2012Introduction to Illustrator's workshop - Covilha October 2012
Introduction to Illustrator's workshop - Covilha October 2012
Leonardo Pereira
 
Atalhos e dicas do adobe illustrator
Atalhos e dicas do       adobe illustratorAtalhos e dicas do       adobe illustrator
Atalhos e dicas do adobe illustrator
MegaMazuk
 
Aula 6 - Cardinalidade
Aula 6 - CardinalidadeAula 6 - Cardinalidade
Aula 6 - Cardinalidade
Vitor Hugo Melo Araújo
 

Destaque (20)

Introdução a Hooks - Aprenda a customizar o WordPress com filtros e ações
Introdução a Hooks - Aprenda a customizar o WordPress com filtros e açõesIntrodução a Hooks - Aprenda a customizar o WordPress com filtros e ações
Introdução a Hooks - Aprenda a customizar o WordPress com filtros e ações
 
Segurança da informação palestra wordcamp sp 2016
Segurança da informação   palestra wordcamp sp 2016Segurança da informação   palestra wordcamp sp 2016
Segurança da informação palestra wordcamp sp 2016
 
WordCamp SP 2016
WordCamp SP 2016WordCamp SP 2016
WordCamp SP 2016
 
Configurando SSL com Let’s Encrypt, EasyEngine e WP-CLI
Configurando SSL com Let’s Encrypt, EasyEngine e WP-CLIConfigurando SSL com Let’s Encrypt, EasyEngine e WP-CLI
Configurando SSL com Let’s Encrypt, EasyEngine e WP-CLI
 
Content Marketing - WordCamp São Paulo 2016
Content Marketing - WordCamp São Paulo 2016Content Marketing - WordCamp São Paulo 2016
Content Marketing - WordCamp São Paulo 2016
 
Case Editora Abril
Case Editora AbrilCase Editora Abril
Case Editora Abril
 
Gerenciando sites em WordPress de forma eficiente: do deploy à manutenção
Gerenciando sites em WordPress de forma eficiente: do deploy à manutençãoGerenciando sites em WordPress de forma eficiente: do deploy à manutenção
Gerenciando sites em WordPress de forma eficiente: do deploy à manutenção
 
Como Limpar Seu Site WordPress
Como Limpar Seu Site WordPressComo Limpar Seu Site WordPress
Como Limpar Seu Site WordPress
 
Eventos de Sucesso usam WordPress.
Eventos de Sucesso usam WordPress.Eventos de Sucesso usam WordPress.
Eventos de Sucesso usam WordPress.
 
UX muito além da UI
UX muito além da UIUX muito além da UI
UX muito além da UI
 
Matéria Impressa convertida ao virtual
Matéria Impressa convertida ao virtualMatéria Impressa convertida ao virtual
Matéria Impressa convertida ao virtual
 
Apostila illustrator-cs5
Apostila illustrator-cs5Apostila illustrator-cs5
Apostila illustrator-cs5
 
Adobe illustrator: Galerias de ferramentas
Adobe illustrator: Galerias de ferramentasAdobe illustrator: Galerias de ferramentas
Adobe illustrator: Galerias de ferramentas
 
Tutoriais Illustrator - 02
Tutoriais Illustrator - 02Tutoriais Illustrator - 02
Tutoriais Illustrator - 02
 
illustrator
illustratorillustrator
illustrator
 
Marcos Bornelli - Planejamento para o uso de TICs na educação
Marcos Bornelli - Planejamento para o uso de TICs na educaçãoMarcos Bornelli - Planejamento para o uso de TICs na educação
Marcos Bornelli - Planejamento para o uso de TICs na educação
 
Métricas - Product tank
Métricas - Product tankMétricas - Product tank
Métricas - Product tank
 
Introduction to Illustrator's workshop - Covilha October 2012
Introduction to Illustrator's workshop - Covilha October 2012Introduction to Illustrator's workshop - Covilha October 2012
Introduction to Illustrator's workshop - Covilha October 2012
 
Atalhos e dicas do adobe illustrator
Atalhos e dicas do       adobe illustratorAtalhos e dicas do       adobe illustrator
Atalhos e dicas do adobe illustrator
 
Aula 6 - Cardinalidade
Aula 6 - CardinalidadeAula 6 - Cardinalidade
Aula 6 - Cardinalidade
 

Semelhante a Estilizando temas de WordPress

O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp S...
O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp S...O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp S...
O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp S...
Anyssa Ferreira
 
Lucas Simões - Desmistificando o uso de temas "prontos" em WordPress
Lucas Simões - Desmistificando o uso de temas "prontos" em WordPressLucas Simões - Desmistificando o uso de temas "prontos" em WordPress
Lucas Simões - Desmistificando o uso de temas "prontos" em WordPress
WordPress Floripa
 
Word camp sp 2017 willian marques
Word camp sp 2017   willian marquesWord camp sp 2017   willian marques
Word camp sp 2017 willian marques
Willian Marques
 
Agilizando seus projetos em wordpress com underscores
Agilizando seus projetos em wordpress com underscoresAgilizando seus projetos em wordpress com underscores
Agilizando seus projetos em wordpress com underscores
Fellyph Cintra
 
Como escolher o tema ideal para o seu projeto
Como escolher o tema ideal para o seu projetoComo escolher o tema ideal para o seu projeto
Como escolher o tema ideal para o seu projeto
Marcos Alexandre
 
BITS | BrasilCMS | wordpress
BITS | BrasilCMS | wordpressBITS | BrasilCMS | wordpress
BITS | BrasilCMS | wordpress
Jackson F. de A. Mafra
 
Seis passos para ter (e manter) um site com wordpress
Seis passos para ter (e manter) um site com wordpressSeis passos para ter (e manter) um site com wordpress
Seis passos para ter (e manter) um site com wordpress
Tracto Content Marketing
 
Como desenvolver um tema wordpress de A a Z
Como desenvolver um tema wordpress de A a ZComo desenvolver um tema wordpress de A a Z
Como desenvolver um tema wordpress de A a Z
Marcos E Cris Tecnologiabrasil
 
Arquitetura de Informação em 7 etapas
Arquitetura de Informação em 7 etapasArquitetura de Informação em 7 etapas
Arquitetura de Informação em 7 etapas
André Silveira
 
Aula 01- web designer
Aula 01- web designerAula 01- web designer
Aula 01- web designer
Roney Sousa
 
Desenvolvimento web com (cms) Drupal
Desenvolvimento web com (cms) DrupalDesenvolvimento web com (cms) Drupal
Desenvolvimento web com (cms) Drupal
Emerson Barros
 
Boas Práticas de programação WordPress
Boas Práticas de programação WordPressBoas Práticas de programação WordPress
Boas Práticas de programação WordPress
Thiago Mendes
 
( Apresentação ) criando temas com odin e kirki
( Apresentação ) criando temas com odin e kirki( Apresentação ) criando temas com odin e kirki
( Apresentação ) criando temas com odin e kirki
Matheus Petroni
 
Um overview sobre temas em wp
Um overview sobre temas em wpUm overview sobre temas em wp
Um overview sobre temas em wp
InCuca
 
Oficina de WordPress - Semana de Comunicação Universidade Veiga de Almeida (S...
Oficina de WordPress - Semana de Comunicação Universidade Veiga de Almeida (S...Oficina de WordPress - Semana de Comunicação Universidade Veiga de Almeida (S...
Oficina de WordPress - Semana de Comunicação Universidade Veiga de Almeida (S...
Guga Alves
 
Wordpress
WordpressWordpress
Seja um júnior não seja um sobrinho
Seja um júnior não seja um sobrinhoSeja um júnior não seja um sobrinho
Seja um júnior não seja um sobrinho
Alexandre Andrade
 
Blogger, WordPress e Tumblr - Trabalho de Mídias Sociais - UniCeub
Blogger, WordPress e Tumblr - Trabalho de Mídias Sociais - UniCeubBlogger, WordPress e Tumblr - Trabalho de Mídias Sociais - UniCeub
Blogger, WordPress e Tumblr - Trabalho de Mídias Sociais - UniCeub
lvclucas
 
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
@cristianoweb
 
Material Design - do smartphone ao desktop
Material Design - do smartphone ao desktopMaterial Design - do smartphone ao desktop
Material Design - do smartphone ao desktop
Hillary Sousa
 

Semelhante a Estilizando temas de WordPress (20)

O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp S...
O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp S...O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp S...
O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp S...
 
Lucas Simões - Desmistificando o uso de temas "prontos" em WordPress
Lucas Simões - Desmistificando o uso de temas "prontos" em WordPressLucas Simões - Desmistificando o uso de temas "prontos" em WordPress
Lucas Simões - Desmistificando o uso de temas "prontos" em WordPress
 
Word camp sp 2017 willian marques
Word camp sp 2017   willian marquesWord camp sp 2017   willian marques
Word camp sp 2017 willian marques
 
Agilizando seus projetos em wordpress com underscores
Agilizando seus projetos em wordpress com underscoresAgilizando seus projetos em wordpress com underscores
Agilizando seus projetos em wordpress com underscores
 
Como escolher o tema ideal para o seu projeto
Como escolher o tema ideal para o seu projetoComo escolher o tema ideal para o seu projeto
Como escolher o tema ideal para o seu projeto
 
BITS | BrasilCMS | wordpress
BITS | BrasilCMS | wordpressBITS | BrasilCMS | wordpress
BITS | BrasilCMS | wordpress
 
Seis passos para ter (e manter) um site com wordpress
Seis passos para ter (e manter) um site com wordpressSeis passos para ter (e manter) um site com wordpress
Seis passos para ter (e manter) um site com wordpress
 
Como desenvolver um tema wordpress de A a Z
Como desenvolver um tema wordpress de A a ZComo desenvolver um tema wordpress de A a Z
Como desenvolver um tema wordpress de A a Z
 
Arquitetura de Informação em 7 etapas
Arquitetura de Informação em 7 etapasArquitetura de Informação em 7 etapas
Arquitetura de Informação em 7 etapas
 
Aula 01- web designer
Aula 01- web designerAula 01- web designer
Aula 01- web designer
 
Desenvolvimento web com (cms) Drupal
Desenvolvimento web com (cms) DrupalDesenvolvimento web com (cms) Drupal
Desenvolvimento web com (cms) Drupal
 
Boas Práticas de programação WordPress
Boas Práticas de programação WordPressBoas Práticas de programação WordPress
Boas Práticas de programação WordPress
 
( Apresentação ) criando temas com odin e kirki
( Apresentação ) criando temas com odin e kirki( Apresentação ) criando temas com odin e kirki
( Apresentação ) criando temas com odin e kirki
 
Um overview sobre temas em wp
Um overview sobre temas em wpUm overview sobre temas em wp
Um overview sobre temas em wp
 
Oficina de WordPress - Semana de Comunicação Universidade Veiga de Almeida (S...
Oficina de WordPress - Semana de Comunicação Universidade Veiga de Almeida (S...Oficina de WordPress - Semana de Comunicação Universidade Veiga de Almeida (S...
Oficina de WordPress - Semana de Comunicação Universidade Veiga de Almeida (S...
 
Wordpress
WordpressWordpress
Wordpress
 
Seja um júnior não seja um sobrinho
Seja um júnior não seja um sobrinhoSeja um júnior não seja um sobrinho
Seja um júnior não seja um sobrinho
 
Blogger, WordPress e Tumblr - Trabalho de Mídias Sociais - UniCeub
Blogger, WordPress e Tumblr - Trabalho de Mídias Sociais - UniCeubBlogger, WordPress e Tumblr - Trabalho de Mídias Sociais - UniCeub
Blogger, WordPress e Tumblr - Trabalho de Mídias Sociais - UniCeub
 
[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end[INFNET] Criando layouts em PSD pensando no front-end e back-end
[INFNET] Criando layouts em PSD pensando no front-end e back-end
 
Material Design - do smartphone ao desktop
Material Design - do smartphone ao desktopMaterial Design - do smartphone ao desktop
Material Design - do smartphone ao desktop
 

Mais de Anyssa Ferreira

Como começar com o Gutenberg, o novo editor do WordPress
Como começar com o Gutenberg, o novo editor do WordPressComo começar com o Gutenberg, o novo editor do WordPress
Como começar com o Gutenberg, o novo editor do WordPress
Anyssa Ferreira
 
CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser Subestimado
Anyssa Ferreira
 
Instalando o WordPress local em qualquer sistema operacional - Anyssa Ferreir...
Instalando o WordPress local em qualquer sistema operacional - Anyssa Ferreir...Instalando o WordPress local em qualquer sistema operacional - Anyssa Ferreir...
Instalando o WordPress local em qualquer sistema operacional - Anyssa Ferreir...
Anyssa Ferreira
 
Lojas virtuais com WordPress + WooCommerce
Lojas virtuais com WordPress + WooCommerceLojas virtuais com WordPress + WooCommerce
Lojas virtuais com WordPress + WooCommerce
Anyssa Ferreira
 
Design de temas para WooCommerce - Anyssa Ferreira
Design de temas para WooCommerce - Anyssa FerreiraDesign de temas para WooCommerce - Anyssa Ferreira
Design de temas para WooCommerce - Anyssa Ferreira
Anyssa Ferreira
 
Vendendo (com) WordPress
Vendendo (com) WordPressVendendo (com) WordPress
Vendendo (com) WordPress
Anyssa Ferreira
 
Percepção e participação das mulheres na comunidade WordPress
Percepção e participação das mulheres na comunidade WordPressPercepção e participação das mulheres na comunidade WordPress
Percepção e participação das mulheres na comunidade WordPress
Anyssa Ferreira
 
Elo perdido entre design e programação
Elo perdido entre design e programaçãoElo perdido entre design e programação
Elo perdido entre design e programação
Anyssa Ferreira
 

Mais de Anyssa Ferreira (8)

Como começar com o Gutenberg, o novo editor do WordPress
Como começar com o Gutenberg, o novo editor do WordPressComo começar com o Gutenberg, o novo editor do WordPress
Como começar com o Gutenberg, o novo editor do WordPress
 
CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser Subestimado
 
Instalando o WordPress local em qualquer sistema operacional - Anyssa Ferreir...
Instalando o WordPress local em qualquer sistema operacional - Anyssa Ferreir...Instalando o WordPress local em qualquer sistema operacional - Anyssa Ferreir...
Instalando o WordPress local em qualquer sistema operacional - Anyssa Ferreir...
 
Lojas virtuais com WordPress + WooCommerce
Lojas virtuais com WordPress + WooCommerceLojas virtuais com WordPress + WooCommerce
Lojas virtuais com WordPress + WooCommerce
 
Design de temas para WooCommerce - Anyssa Ferreira
Design de temas para WooCommerce - Anyssa FerreiraDesign de temas para WooCommerce - Anyssa Ferreira
Design de temas para WooCommerce - Anyssa Ferreira
 
Vendendo (com) WordPress
Vendendo (com) WordPressVendendo (com) WordPress
Vendendo (com) WordPress
 
Percepção e participação das mulheres na comunidade WordPress
Percepção e participação das mulheres na comunidade WordPressPercepção e participação das mulheres na comunidade WordPress
Percepção e participação das mulheres na comunidade WordPress
 
Elo perdido entre design e programação
Elo perdido entre design e programaçãoElo perdido entre design e programação
Elo perdido entre design e programação
 

Estilizando temas de WordPress

  • 1. Estilizando temas: Técnicas e dicas Anyssa Ferreira
  • 2. Anyssa Ferreira Designer e desenvolvedora web, há 10 anos. Fundadora do estúdio Haste. Professora e palestrante. Membra da comunidade WordPress de São Paulo, Organizadora do WordCamp SP e Meetups. Primeira ganhadora da Kim Parsell Scholarship da Fundação WordPress em 2015..
  • 6. Tema Workaholic (Graph Paper Press)
  • 7. Motivos da personalização de temas ● Identidade própria e diferenciação ● Alterações visuais específicas ● Atender necessidades
  • 8. Quero um tema que tenha unicórnios voadores e seja compatível com o IE7
  • 9. Você já encontrou um tema perfeito?
  • 10. Qual é o melhor jeito de personalizar um tema? Depende. Vem comigo!
  • 11. Para alterações menores 1. Ajustes de partes menores do tema
  • 12. Opções do tema O que o tema deixa você fazer?
  • 13. Opções do tema - prós e contras Prós ● Rápido ● Não é necessário conhecimento de código ● Personalizações ficam separadas do tema Contras ● Personalizações podem se perder ao trocar de tema ● Pouco controle
  • 15. Plugins - prós e contras Prós ● Rápido ● Não é necessário conhecimento de código ● Personalizações ficam separadas do tema ● Não é vinculado ao tema Contras ● Pode ser um excesso de recursos ● Médio controle
  • 16. Dicas de plugins ● Plugins de fontes; ● Plugins de shortcodes (botões, colunas, boxes, etc.); ● Plugins que adicionam galerias, sliders, etc.
  • 17. Alterando o código de um tema direto Abra o arquivo style.css e comece a digitar
  • 18. Alterações diretas - prós e contras Prós ● O jeito mais rápido e simples que envolve programação Contras ● Se uma atualização do tema for feita, as alterações são perdidas. ● Não indicado
  • 19. Criando um tema filho Copie os arquivos para a pasta do tema filho e edite.
  • 20. Tema filho - prós e contras Prós ● As alterações se mantém mesmo com atualizações do tema pai; ● Organização; Contras ● É necessário entender o funcionamento dos temas filhos.
  • 22. Criando um tema próprio Inicie seu próprio tema, programando todo o CSS, HTML, PHP, etc.
  • 23. Tema próprio - prós e contras Prós ● Garantia de que o resultado obtido vai ser igual ao design criado. ● Controle total do código Contras ● Método mais demorado e oneroso. ● Responsabilidade sobre o código e sua qualidade. ● Necessário entrosamento entre designers e programadores.
  • 24. Dicas para criar seu tema próprio Designers: mesmo com a liberdade de criação, estudem padrões vigentes e entendam as limitações da tecnologia. Saibam o que é e o que não é possível fazer.
  • 25. Dicas para criar seu tema próprio Programadores: nem sempre fazer um tema próprio é iniciar da estaca zero. Existem frameworks que adiantam muito o serviço. Dê uma olhada no Underscores e no Odin (framework brasileiro). Utilize também pré-processadores (SASS, LESS, Stylus) e task runners (Gulp, Grunt). Eles deixam os estilos CSS mais dinâmicos e organizados.
  • 26. Criando um tema com opções de personalização Além de criar um tema, você pode oferecer opções para que os usuários tenham a liberdade de personalizá-lo facilmente.
  • 27. Tema com opções- prós e contras Prós ● Oferece a outros usuários leigos em código, algumas opções de personalização. ● Pode servir para que um tema seja usado mais de uma vez (exemplo: temas para serem vendidos). Contras ● Exige conhecimento da Customizer API do WordPress. ● Exige um bom planejamento das possibilidades de design que as opções resultarão.
  • 29. No início do projeto, pense que recursos seu site precisa. Não que visual ele terá.
  • 30. Analise: vale a pena usar um tema como base? O quanto terei que modificá-lo? Se for muito, considere criar um tema próprio.
  • 31. Se for escolher um tema, vá com a mente aberta. Considere como você pode usar o que os temas oferecem, e não se um tema que é exatamente como você imaginou. Vá a caça com algumas ideias, mas sem expectativas exatas.
  • 32. Designers, experimentem CSS. Não tenha medo de programar, o código é apenas mais uma forma de imprimir o design. CSS são apenas regras visuais descritas verbalmente.
  • 33. Obrigada! Siga nas redes sociais @anyssaferreira www.hastedesign.com.br