O documento discute a montagem de temas para front-end e back-end, abordando as linguagens HTML5, CSS3 e JavaScript/jQuery para estruturação e apresentação de conteúdo na frente, e a hierarquia de arquivos necessária para temas no WordPress no back-end, incluindo index.php e style.css.

1. Montagem de temas
Pensando no Front-end e Back-end
Valter Rodrigues

2. Front-end

3. HTML 5
∗ Linguagem para estruturação e apresentação de
conteúdo (Linguagem de Marcação de Hipertexto)
∗ Mudanças na semântica e acessibilidade
∗ Modificação na escrita
∗ Webkit (Compatibilidade com HTML5)
∗ Padronização de nomenclaturas

4. HTML 5
∗ Usos do HTML 5
∗ Tags Canvas
∗ Tags de vídeo
∗ Geolocalização
∗ Caching de aplicações

5. HTML 5

7. CSS 3
Temos vontade de matar o designer quando ele pede para...
∗ Fazer caixinhas com bordas arredondadas
∗ Colocar uma sombrinha nos textos/caixas
∗ Utilizar um background gigante
∗ Utilizar um background composto
∗ Fazer uma página adaptável ao tamanho da tela
∗ Fazer os títulos das páginas ter uma fonte mais “style”

8. CSS 3
∗ Frameworks

10. JS / Jquery
Principais funcionalidades do jQuery:
∗ Resolução da incompatibilidade entre os navegadores.
∗ Redução de código.
∗ Reutilização do código através de plugins.
∗ Utilização de uma vasta quantidade de plugins criados por
outros desenvolvedores.
∗ Trabalha com AJAX e DOM.
∗ Implementação segura de recursos do CSS1, CSS2 e CSS3.

11. Back-end

12. O que é um tema?
∗ É a aparência do seu website, uma espécie de casca
∗ Possibilitam muito mais funcionalidades e
possibilidades de implementação
∗ Facilidade de troca de layout
∗ Composto de arquivos de imagem, scripts (PHP e
javascript), folhas de estilo
∗ Integração com diversos plugins e ferramentas de
origem externa

13. Princípios básicos
∗ Templates personalizados para diferentes categorias,
datas, autores, páginas ou mesmo posts query_string
possibilita a identificação através do slug da página ou
post, como também através de seu ID
∗ Obrigatório respeitar uma hierarquia entre os arquivos,
afim de garantir uma melhor organização e total
funcionamento dos componentes do seu website
∗ O index.php é seu arquivo principal, podendo ser usurpado
pelo arquivo home.php em alguns casos

14. Hierarquia de arquivos de um tema

15. O style.css

16. Header.php

17. Index.php

18. Sidebar.php

19. comments.php

20. footer.php

21. Outros arquivos do tema
∗ archive.php – carrega o template de categorias, datas
e outras listagens
∗ comments.php – template da página de comentários
(opcional)
∗ author.php – template da página de autores
∗ functions.php – contém as funções do seu tema
∗ 404.php – retorna a página de erro quando conteúdo
não é encontrado

22. Modelo de tema

23. Considerações finais
∗ Facilidade e agilidade para desenvolver um tema
∗ Layout pode ser desenhado de qualquer maneira que
atendam suas necessidades
∗ Não tem um estilo padrão, ou mesmo só um esquema
de “blogs”, pode ser aplicado em sites e Portais
∗ Aceitam o uso de frameworks Javascript e até mesmo
flash (flash?)
∗ Não precisa ser um designer para criar um tema para
WordPress

24. Obrigado!!!!
valter@skyneti.com
www.skyneti.com