Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Estilizando temas de WordPress

874 views

Published on

Quais são os principais métodos para estilização de temas de WordPress atualmente? Quais as aplicações, vantagens e desvantagens de cada um?

Palestra apresentada no WordCamp São Paulo 2016.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Estilizando temas de WordPress

  1. 1. Estilizando temas: Técnicas e dicas Anyssa Ferreira
  2. 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. 3. WordPress 2.0 (2005)
  4. 4. Tema Kubrick (2005)
  5. 5. Meu blogspot personalizado
  6. 6. Tema Workaholic (Graph Paper Press)
  7. 7. Motivos da personalização de temas ● Identidade própria e diferenciação ● Alterações visuais específicas ● Atender necessidades
  8. 8. Quero um tema que tenha unicórnios voadores e seja compatível com o IE7
  9. 9. Você já encontrou um tema perfeito?
  10. 10. Qual é o melhor jeito de personalizar um tema? Depende. Vem comigo!
  11. 11. Para alterações menores 1. Ajustes de partes menores do tema
  12. 12. Opções do tema O que o tema deixa você fazer?
  13. 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. 14. Utilizando plugins de personalização Instale um plugin e altere seu design
  15. 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. 16. Dicas de plugins ● Plugins de fontes; ● Plugins de shortcodes (botões, colunas, boxes, etc.); ● Plugins que adicionam galerias, sliders, etc.
  17. 17. Alterando o código de um tema direto Abra o arquivo style.css e comece a digitar
  18. 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. 19. Criando um tema filho Copie os arquivos para a pasta do tema filho e edite.
  20. 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. 21. Para um design completamente novo 2. Criar um tema único
  22. 22. Criando um tema próprio Inicie seu próprio tema, programando todo o CSS, HTML, PHP, etc.
  23. 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. 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. 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. 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. 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. 28. Dicas gerais 3. Para estilização de temas
  29. 29. No início do projeto, pense que recursos seu site precisa. Não que visual ele terá.
  30. 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. 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. 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. 33. Obrigada! Siga nas redes sociais @anyssaferreira www.hastedesign.com.br

×