Download - Estilizando temas de WordPress
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