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çãoInstale 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 filhoCopie 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óprioInicie 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çãoAlé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

@anyssaferreirawww.hastedesign.com.br