Temas: temas de blocos e temas clássicos

Módulo 5: Temas e plugins · Tempo de leitura: 9 minutos

Objetivo de aprendizagem: Depois desta lição, consegue explicar a diferença entre temas de blocos e temas clássicos e escolher um tema de forma criteriosa.

Conceitos-chave: tema, hierarquia de modelos, tema de blocos, modelo (template), parte de modelo (template part), theme.json, Editor do site, tema clássico, modelos PHP, Personalizador, widgets, criador de páginas, lock-in, pasta do tema

O que faz um tema

Um tema determina o aspeto da sua site e como as páginas estão organizadas: o cabeçalho com logótipo e menu, a largura do conteúdo, tipos de letra e cores, o rodapé, o aspeto de uma lista de artigos ou de um resultado de pesquisa. O conteúdo em si (os seus textos, páginas, imagens) está guardado na base de dados e mantém-se quando muda de tema.

Cada tema está numa pasta própria dentro de wp-content/themes/, por exemplo wp-content/themes/twentytwentyfive/. Nessa pasta existe sempre um ficheiro style.css com um cabeçalho no início que descreve o tema (nome, versão, autor). Isto será visto novamente na lição 5.2.

Desde o WordPress 5.9 (início de 2022) existem dois tipos de temas, e funcionam de forma bastante diferente.

Temas clássicos

Um tema clássico é composto por ficheiros PHP: header.php, footer.php, single.php, page.php, index.php, entre outros. O ficheiro usado para cada página segue a hierarquia de modelos (lição 1.2). As personalizações fazem-se:

• no Personalizador (Apresentação > Personalizador): logótipo, cores, opções oferecidas pelo tema;
• com widgets (Apresentação > Widgets): blocos na barra lateral ou no rodapé;
• com menus (Apresentação > Menus, lição 4.3);
• no código, com um tema filho (lição 5.2).

Muitos temas conhecidos são (ainda) clássicos ou híbridos. Funcionam bem e continuarão a ter suporte durante vários anos.

Temas de blocos

Um tema de blocos é construído com os mesmos blocos que o seu conteúdo. O tema tem:

• modelos (templates) como ficheiros HTML com blocos, na pasta templates/: index.html, single.html, page.html, 404.html;
• partes de modelo (template parts) em parts/: header.html, footer.html;
• um ficheiro theme.json com as definições de estilo: paleta de cores, tipos de letra, tamanhos de letra, largura do conteúdo, espaço entre blocos.

Um pequeno excerto de theme.json:

{
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primair", "color": "#1e3a5f", "name": "Primair" },
        { "slug": "accent", "color": "#e8a33d", "name": "Accent" }
      ]
    },
    "layout": { "contentSize": "720px", "wideSize": "1200px" }
  }
}

As personalizações fazem-se no Editor do site (Apresentação > Editor): edita o cabeçalho, o rodapé e os modelos com blocos, e em Estilos escolhe cores, tipos de letra e espaçamento para toda a site.

Uma diferença importante que deve conhecer: o que personaliza no Editor do site é guardado na base de dados, não nos ficheiros do tema. Uma atualização do tema não sobrepõe, assim, as suas personalizações. Mas isso também significa que um modelo personalizado na base de dados tem prioridade sobre o modelo do tema. Se o autor lançar um modelo melhorado, não o verá enquanto a sua versão personalizada existir. No Editor do site pode "repor" um modelo para a versão do tema.

Criadores de páginas

Um criador de páginas (como Elementor, Divi ou WPBakery) é um plugin ou tema com um editor próprio no qual arrasta e dá forma a páginas. São populares porque oferecem muitas possibilidades sem necessidade de código. Tenha em conta as desvantagens:

• Lock-in: a formatação é guardada num formato próprio (frequentemente shortcodes ou dados próprios em wp_postmeta). Se desativar o criador, resta muitas vezes uma confusão de códigos nas suas páginas. Mudar significa, geralmente, reconstruir tudo de novo.
• Mais pesado: muitos criadores carregam scripts e folhas de estilo adicionais em cada página. Isto pode tornar a sua site mais lenta (módulo 6).
• Mais um elemento a manter, com as suas próprias atualizações e as suas próprias vulnerabilidades.

Um criador de páginas não é uma escolha errada, mas faça-a de forma consciente. Para muitas sites, o que pretende também pode ser alcançado com um tema de blocos e padrões.

Como escolher um tema

Aspetos a ter em conta, por esta ordem:

1. Origem: a pasta de temas do wordpress.org (verificado por voluntários) ou um autor conhecido com site próprio. Nunca uma cópia "gratuita" de um tema pago proveniente de um site de downloads: contém frequentemente uma porta das traseiras (lição 5.3).
2. Manutenção: quando foi o tema atualizado pela última vez? Um tema sem atualizações no último ano torna-se um risco.
3. Blocos ou clássico: adequa-se à forma como pretende trabalhar? Um tema de blocos se quiser poder personalizar no Editor do site, um tema clássico se quiser dar continuidade a uma site existente da mesma forma.
4. O que traz incluído: um tema que "faz tudo" (slider, portefólio, formulário de contacto, SEO) prende as suas funcionalidades ao tema. Se mudar mais tarde, perde-as. As funcionalidades pertencem aos plugins, a aparência ao tema.
5. Acessibilidade e velocidade: na pasta de temas do wordpress.org pode filtrar pela característica "Accessibility Ready". Veja a demonstração do tema no PageSpeed Insights (lição 6.1).
6. Idioma: o tema está traduzido para português, ou pode personalizar os textos você mesmo?

Mudar de tema

Ao mudar de tema, o conteúdo mantém-se, mas tudo à sua volta muda. Nunca faça isto diretamente na sua site em produção:

• Experimente primeiro o novo tema com Pré-visualizar (em Apresentação > Temas), ou melhor ainda num ambiente de testes (staging) (lição 8.3).
• Depois, verifique menus (lição 4.3), widgets, logótipo, a página inicial e os tipos de artigo fornecidos pelo tema anterior (lição 4.2).
• Os shortcodes do tema anterior aparecem como texto solto ([slider id="3"]) nas suas páginas.

Resumo

• Um tema determina a aparência e a estrutura; o conteúdo existe à parte, na base de dados.
• Os temas clássicos são modelos PHP, personalizados através do Personalizador, widgets e menus.
• Os temas de blocos são construídos a partir de blocos e de theme.json, e são personalizados no Editor do site; essas personalizações ficam guardadas na base de dados.
• Os criadores de páginas oferecem muitas possibilidades, mas prendem-no a eles e podem tornar a sua site mais pesada.
• Escolha um tema pela origem, manutenção e simplicidade; as funcionalidades pertencem aos plugins, não ao tema.

Questionário

Exercício

Exercício A5.1: Que tema utiliza o seu site? Procure no código-fonte da sua página inicial (Ctrl+U) por /wp-content/themes/ e indique o nome da pasta do tema que aparece com mais frequência. Se utilizar um tema filho (lição 5.2), indique a pasta do tema filho e a do tema principal. Indique também se se trata de um tema de blocos ou de um tema clássico, e como o determinou. O programa lê a página inicial e o ficheiro style.css do tema indicado, e faz a comparação.

Leitura adicional

Para trabalhar dentro do próprio WordPress ainda não temos artigos próprios; a documentação oficial do WordPress é extensa.

• O que é um tema? (developer.wordpress.org, em inglês): https://developer.wordpress.org/themes/getting-started/what-is-a-theme/
• Temas em wordpress.org: https://wordpress.org/themes/
• Editor do site (wordpress.org, em inglês): https://wordpress.org/documentation/article/site-editor/
• theme.json (developer.wordpress.org, em inglês): https://developer.wordpress.org/themes/global-settings-and-styles/