SlideShare uma empresa Scribd logo
1 de 60
Baixar para ler offline
O que eu preciso saber
para desenvolver temas
Anyssa Ferreira
Anyssa Ferreira
Designer e desenvolvedora web há
10 anos, especialista em WordPress.
Co-fundadora do estúdio Haste.
Organizadora da comunidade
WordPress, 1ª ganhadora da Kim
Parsell Scholarship.
@anyssaferreira
hastedesign.com.br
Como eu crio
um site sem saber
programar?
O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp SP 2017
Mais viável Mais livre
Programar
tudo
Usar um sistema
pronto
liberdade
vs
viabilidade
O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp SP 2017
Alterar temas
diretamente no códigoEventuais atualizações do tema
removerão as alterações
CSS adicional
make.wordpress.org
Hierarquia de Templates
Que arquivo são usados para exibir cada tipo de página do
WordPress?
Temas filhos
Um tema filho é um tema que
herda as funcionalidades e
estilos de outro tema, chamado
de tema pai. Os temas filhos são
a forma recomendada de
modificar um tema existente.
https://codex.wordpress.org/pt-br:Temas_Filhos
Facilidade para
alterar partes
específicas de um
tema
Fica dependente do
tema pai
O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp SP 2017
https://codex.wordpress.org/pt-br:Hierarquia_de_Modelos_WordPress
https://codex.wordpress.org/pt-br:Hierarquia_de_Modelos_WordPress
É mais difícil ler um código, do
que escrevê-lo.
– Joel Spolsky
Mesmo para criar um tema filho,
é importante conhecer os
templates e saber pelo menos
entender o código.
Criando seu tema do zero
Liberdade e controle
total
Muito trabalho. Exige
conhecimento real
de programação.
Linguagens básicas do
WordPress
Código é poesia
O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp SP 2017
O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp SP 2017
Coding standards
“Não é porque funciona que está certo”
Padrões de código para o PHP
● Indentação lógica e com TAB, não espaços.
● Aspas simples, a menos que esteja tratando algo na string.
● Condições Yoda. Inverta a verificação. Erros evitar você deve.
○ if ( true == $the_force ) {
○ $victorious = you_will( $be );
○ }
● Entre outros.
[EN] https://make.wordpress.org/core/handbook/best-practices/coding-standards/
[pt_BR] https://codex.wordpress.org/pt-br:Padroes_de_Codificacao_do_WordPress
Padrões de código para o CSS
● Indentação lógica e com TAB, não espaços.
● Quebre múltiplos seletores em linhas
● Nomes de seletores (classes e IDs) com letras minúsculas e
separados por hífens.
● Entre outros.
[EN] https://make.wordpress.org/core/handbook/best-practices/coding-standards/
Ambiente de
desenvolvimento
Roupa suja se lava em casa
O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp SP 2017
O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp SP 2017
Temas com base em um
framework ou tema base
Um framework ou tema base, é
um tema que já vem com
alguns recursos e templates
pré-criados, agilizando o
desenvolvimento e evitando
repetitividade.
O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp SP 2017
O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp SP 2017
O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp SP 2017
O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp SP 2017
Liberdade +
agilidade +
consistência
Leva tempo até
encontrar ou criar
um tema base bom
para você
Através de um
tema base você
também pode
aprender muito
Como eu
aprendi
Pré-processadores
Mais poder MWAHAHAHA e mais agilidade
Pré-processadores são
programas que recebem
uma entrada, efetuam um
processamento, e geram
uma saída, adicionando
recursos ou modificando a
forma que escrevemos o
código.
CSS
● Adicionam variáveis
● Adicionam funções
● Adicionam mixins
● Modificam a indentação,
tornando hierárquica
● Podem compilar media
queries mais complexas e
adicionar vendor-prefixes
facilmente.
● Entre outros recursos,
Pré-processadores
HTML e JS
● Simplificam a sintaxe,
deixando a escrita menos
verbosa
● Deixam o código mais
limpo Pré-processadores
O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp SP 2017
O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp SP 2017
O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp SP 2017
Task runners
Terceirize tarefas chatas
O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp SP 2017
Opções do tema
Deixa os garoto brincar*
Opções do tema permitem que
o usuário final personalize
alguns aspectos do site, mesmo
que não tenha contato com o
código.
O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp SP 2017
Versionamento
Proteja-se. Use versionamento.
O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp SP 2017
Editor de texto ou IDE
O editor ideal tem que ser sublime, visual e atômico.
O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp SP 2017
Sistema operacional
01110111 01101001 01101110 01100100 01101111 01110111 01110011
O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp SP 2017
Faltou alguma coisa?
???
O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp SP 2017
Façam temas!
Fim!
Obrigada!
@anyssaferreira
@hastedesign

Mais conteúdo relacionado

Mais procurados

Processo completo de desenvolvimento de um tema (Do Photoshop ao PHP)
Processo completo de desenvolvimento de um tema (Do Photoshop ao PHP)Processo completo de desenvolvimento de um tema (Do Photoshop ao PHP)
Processo completo de desenvolvimento de um tema (Do Photoshop ao PHP)Leandrinho Vieira
 
[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
 
Odin excelente tema para WordPress
Odin excelente tema para WordPressOdin excelente tema para WordPress
Odin excelente tema para WordPressLuis Filho
 
O que há de novo no wordpress 4.0
O que há de novo no wordpress 4.0O que há de novo no wordpress 4.0
O que há de novo no wordpress 4.0Vasco Marques
 
Site profissional em wordpress - emerson01@gmail
Site profissional em wordpress - emerson01@gmailSite profissional em wordpress - emerson01@gmail
Site profissional em wordpress - emerson01@gmailEmersonGonalves43
 
Trabalhando com posts e campos personalizados #CPBR9
Trabalhando com posts e campos personalizados #CPBR9Trabalhando com posts e campos personalizados #CPBR9
Trabalhando com posts e campos personalizados #CPBR9Rafael Funchal
 
Wordpress :: Configurar seu blog
Wordpress :: Configurar seu blogWordpress :: Configurar seu blog
Wordpress :: Configurar seu blogWesley R. Bezerra
 
Como eu aprendo WordPress?
Como eu aprendo WordPress?Como eu aprendo WordPress?
Como eu aprendo WordPress?Breno Alves
 
Wordpress :: Ambiente administrativo
Wordpress :: Ambiente administrativoWordpress :: Ambiente administrativo
Wordpress :: Ambiente administrativoWesley R. Bezerra
 
Wordpress - Introdução
Wordpress - IntroduçãoWordpress - Introdução
Wordpress - IntroduçãoRennan Martini
 
Wordpress :: Alterando aparência
Wordpress :: Alterando aparênciaWordpress :: Alterando aparência
Wordpress :: Alterando aparênciaWesley R. Bezerra
 
Sass: Estilo levado à sério
Sass: Estilo levado à sérioSass: Estilo levado à sério
Sass: Estilo levado à sérioGabriel Nunes
 
Drupal - Um site com sua cara
Drupal - Um site com sua caraDrupal - Um site com sua cara
Drupal - Um site com sua carapedrofaria
 
Apresentação unidade 4 editor de texto.
Apresentação unidade 4  editor de texto.Apresentação unidade 4  editor de texto.
Apresentação unidade 4 editor de texto.betzandonadi
 
Formação WordPress
Formação WordPressFormação WordPress
Formação WordPressvaleriovaz
 

Mais procurados (19)

Processo completo de desenvolvimento de um tema (Do Photoshop ao PHP)
Processo completo de desenvolvimento de um tema (Do Photoshop ao PHP)Processo completo de desenvolvimento de um tema (Do Photoshop ao PHP)
Processo completo de desenvolvimento de um tema (Do Photoshop ao PHP)
 
[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
 
Odin excelente tema para WordPress
Odin excelente tema para WordPressOdin excelente tema para WordPress
Odin excelente tema para WordPress
 
Wordpress - Além dos blogs
Wordpress - Além dos blogsWordpress - Além dos blogs
Wordpress - Além dos blogs
 
O que há de novo no wordpress 4.0
O que há de novo no wordpress 4.0O que há de novo no wordpress 4.0
O que há de novo no wordpress 4.0
 
Site profissional em wordpress - emerson01@gmail
Site profissional em wordpress - emerson01@gmailSite profissional em wordpress - emerson01@gmail
Site profissional em wordpress - emerson01@gmail
 
Trabalhando com posts e campos personalizados #CPBR9
Trabalhando com posts e campos personalizados #CPBR9Trabalhando com posts e campos personalizados #CPBR9
Trabalhando com posts e campos personalizados #CPBR9
 
Wordpress :: Configurar seu blog
Wordpress :: Configurar seu blogWordpress :: Configurar seu blog
Wordpress :: Configurar seu blog
 
Como eu aprendo WordPress?
Como eu aprendo WordPress?Como eu aprendo WordPress?
Como eu aprendo WordPress?
 
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativosModular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
 
Wordpress :: Ambiente administrativo
Wordpress :: Ambiente administrativoWordpress :: Ambiente administrativo
Wordpress :: Ambiente administrativo
 
Wordpress - Introdução
Wordpress - IntroduçãoWordpress - Introdução
Wordpress - Introdução
 
Sass - css bomba[do]
Sass - css bomba[do]Sass - css bomba[do]
Sass - css bomba[do]
 
Wordpress :: Alterando aparência
Wordpress :: Alterando aparênciaWordpress :: Alterando aparência
Wordpress :: Alterando aparência
 
Sass: Estilo levado à sério
Sass: Estilo levado à sérioSass: Estilo levado à sério
Sass: Estilo levado à sério
 
Drupal - Um site com sua cara
Drupal - Um site com sua caraDrupal - Um site com sua cara
Drupal - Um site com sua cara
 
Apresentação unidade 4 editor de texto.
Apresentação unidade 4  editor de texto.Apresentação unidade 4  editor de texto.
Apresentação unidade 4 editor de texto.
 
Formação WordPress
Formação WordPressFormação WordPress
Formação WordPress
 
Aula 6
Aula 6Aula 6
Aula 6
 

Semelhante a O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp SP 2017

Word camp sp 2017 willian marques
Word camp sp 2017   willian marquesWord camp sp 2017   willian marques
Word camp sp 2017 willian marquesWillian Marques
 
Estilizando temas de WordPress
Estilizando temas de WordPressEstilizando temas de WordPress
Estilizando temas de WordPressAnyssa Ferreira
 
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 WordPressThiago Mendes
 
Wordpress além do blog
Wordpress além do blogWordpress além do blog
Wordpress além do blogMateus Neves
 
Facilitando sua vida com SASS
Facilitando sua vida com SASSFacilitando sua vida com SASS
Facilitando sua vida com SASSLarissa Carvalho
 
Hierarquia de templates WordPress
Hierarquia de templates WordPressHierarquia de templates WordPress
Hierarquia de templates WordPressGuga Alves
 
Aula3 - Curso Web-Design - ETECA Camargo Aranha
Aula3 - Curso Web-Design - ETECA Camargo Aranha Aula3 - Curso Web-Design - ETECA Camargo Aranha
Aula3 - Curso Web-Design - ETECA Camargo Aranha fevooduck
 
Introducao cms-wordpress
Introducao cms-wordpressIntroducao cms-wordpress
Introducao cms-wordpressMateus Neves
 
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 WordPressJackson F. de A. Mafra
 
[E-book] Como criar e manter um site ou blog com o Wordpress
[E-book] Como criar e manter um site ou blog com o Wordpress[E-book] Como criar e manter um site ou blog com o Wordpress
[E-book] Como criar e manter um site ou blog com o WordpressKingHost - Hospedagem de sites
 
Introducao ao WordPress
Introducao ao WordPressIntroducao ao WordPress
Introducao ao WordPressKennedy Lucas
 
Coisas que eu gostaria de saber antes de começar a desenvolver temas e plugin...
Coisas que eu gostaria de saber antes de começar a desenvolver temas e plugin...Coisas que eu gostaria de saber antes de começar a desenvolver temas e plugin...
Coisas que eu gostaria de saber antes de começar a desenvolver temas e plugin...Leo Baiano
 
Aula 01- web designer
Aula 01- web designerAula 01- web designer
Aula 01- web designerRoney Sousa
 
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 WordPressWordPress Floripa
 
Introdução ao WordPress
Introdução ao WordPressIntrodução ao WordPress
Introdução ao WordPressTales Augusto
 

Semelhante a O que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp SP 2017 (20)

Word camp sp 2017 willian marques
Word camp sp 2017   willian marquesWord camp sp 2017   willian marques
Word camp sp 2017 willian marques
 
Estilizando temas de WordPress
Estilizando temas de WordPressEstilizando temas de WordPress
Estilizando temas de WordPress
 
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
 
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
 
Wordpress além do blog
Wordpress além do blogWordpress além do blog
Wordpress além do blog
 
Wordpress
WordpressWordpress
Wordpress
 
Facilitando sua vida com SASS
Facilitando sua vida com SASSFacilitando sua vida com SASS
Facilitando sua vida com SASS
 
Hierarquia de templates WordPress
Hierarquia de templates WordPressHierarquia de templates WordPress
Hierarquia de templates WordPress
 
Aula3 - Curso Web-Design - ETECA Camargo Aranha
Aula3 - Curso Web-Design - ETECA Camargo Aranha Aula3 - Curso Web-Design - ETECA Camargo Aranha
Aula3 - Curso Web-Design - ETECA Camargo Aranha
 
Introducao cms-wordpress
Introducao cms-wordpressIntroducao cms-wordpress
Introducao cms-wordpress
 
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
 
[E-book] Como criar e manter um site ou blog com o Wordpress
[E-book] Como criar e manter um site ou blog com o Wordpress[E-book] Como criar e manter um site ou blog com o Wordpress
[E-book] Como criar e manter um site ou blog com o Wordpress
 
Introducao ao WordPress
Introducao ao WordPressIntroducao ao WordPress
Introducao ao WordPress
 
Coisas que eu gostaria de saber antes de começar a desenvolver temas e plugin...
Coisas que eu gostaria de saber antes de começar a desenvolver temas e plugin...Coisas que eu gostaria de saber antes de começar a desenvolver temas e plugin...
Coisas que eu gostaria de saber antes de começar a desenvolver temas e plugin...
 
CSS Mastigado
CSS MastigadoCSS Mastigado
CSS Mastigado
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
 
Aula 01- web designer
Aula 01- web designerAula 01- web designer
Aula 01- web designer
 
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
 
Introdução ao WordPress
Introdução ao WordPressIntrodução ao WordPress
Introdução ao WordPress
 
BITS | BrasilCMS | wordpress
BITS | BrasilCMS | wordpressBITS | BrasilCMS | wordpress
BITS | BrasilCMS | wordpress
 

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 WordPressAnyssa Ferreira
 
CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoAnyssa 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 + WooCommerceAnyssa 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 FerreiraAnyssa Ferreira
 
Vendendo (com) WordPress
Vendendo (com) WordPressVendendo (com) WordPress
Vendendo (com) WordPressAnyssa 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 WordPressAnyssa 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çãoAnyssa Ferreira
 
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 2015Anyssa Ferreira
 

Mais de Anyssa Ferreira (9)

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
 
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 que eu preciso saber para desenvolver temas? - Anyssa Ferreira - WordCamp SP 2017