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

3.
WordPress 2.0 (2005)

4.
Tema Kubrick (2005)

5.
Meu blogspot personalizado

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

14.
Utilizando
plugins de
personalização
Instale um plugin e altere seu design

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.

21.
Para um design
completamente
novo
2.
Criar um tema único

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.

28.
Dicas
gerais
3.
Para estilização de temas

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