Desenvolvimento de Temas WordPress para Principiantes

Porquê desenvolver o seu próprio tema WordPress

A ferramenta de criação de sites WordPress alimenta mais de 40% de todos os sites da internet, e compreender como os temas funcionam abre as portas a um enorme mercado. Os temas prontos são excelentes para lançar um site rapidamente, mas muitas vezes vêm com código desnecessário, possibilidades de personalização limitadas e riscos de segurança. Criar o seu próprio tema dá-lhe controlo total sobre o aspeto, o desempenho e a funcionalidade do site.

O desenvolvimento de temas é uma das competências WordPress mais procuradas no mercado freelance. Para testar, utilize o ambiente de alojamento WordPress. Os clientes estão dispostos a pagar quantias significativas por um tema personalizado que se ajuste na perfeição às suas necessidades. Começando pela compreensão dos fundamentos, pode gradualmente construir um portefólio e aperfeiçoar as competências até ao nível de um programador de temas profissional.

Estrutura de um tema WordPress

Um tema WordPress encontra-se na pasta wp-content/themes/nome-do-tema/ e contém um conjunto de ficheiros PHP, CSS e JavaScript que, em conjunto, definem o aspeto e o comportamento do site. Um tema mínimo requer apenas dois ficheiros: style.css com as meta-informações do tema e index.php como template de recurso (fallback). No entanto, um tema profissional contém muitos mais ficheiros organizados numa estrutura lógica.

Ficheiros básicos do tema

• style.css - folha de estilos principal com meta-informações (Theme Name, Version, Author)
• index.php - template de recurso quando não existe um template específico
• functions.php - registo das funcionalidades do tema (menus, widgets, suporte de funcionalidades)
• header.php - cabeçalho do site com navegação e meta tags
• footer.php - rodapé do site com scripts e informação de direitos de autor
• sidebar.php - barra lateral com áreas de widgets
• single.php - template para apresentar artigos individuais do blogue
• page.php - template para apresentar páginas estáticas
• archive.php - template para páginas de arquivo (categorias, etiquetas, datas)
• 404.php - template para páginas inexistentes

Hierarquia de templates

A hierarquia de templates é o sistema que o WordPress utiliza para determinar qual o ficheiro de template a carregar para cada página. Este é um dos conceitos mais importantes no desenvolvimento WordPress. O WordPress procura o template mais específico e, se não o encontrar, passa para um mais geral até chegar ao index.php, que é a última opção.

Por exemplo, para apresentar a categoria Notícias, o WordPress procura primeiro category-noticias.php, depois category-3.php (em que 3 é o ID da categoria), depois category.php, depois archive.php e, por fim, index.php. Esta hierarquia permite-lhe criar designs específicos para diferentes partes do site sem programação complicada. Compreender a hierarquia é fundamental para um desenvolvimento de temas eficiente.

Ficheiros de template mais utilizados

Para artigos do blogue, a hierarquia é: single-{post-type}.php, single.php, singular.php, index.php. Para páginas: page-{slug}.php, page-{id}.php, page.php, singular.php, index.php. Para arquivos: category-{slug}.php, category.php, archive.php, index.php. Compreender este sistema permite um controlo preciso sobre a apresentação de cada tipo de conteúdo.

Functions.php - o coração do tema

O functions.php é o ficheiro mais importante de um tema, porque é nele que regista todas as funcionalidades que o seu tema suporta. Este ficheiro é carregado automaticamente sempre que o tema é ativado e funciona de forma semelhante a um plugin. Nele adiciona suporte de funcionalidades, regista menus e áreas de widgets, inclui ficheiros CSS e JavaScript e define funções personalizadas.

O que se define no functions.php

• Suporte de imagens em miniatura: add_theme_support('post-thumbnails')
• Registo de menus de navegação: register_nav_menus()
• Registo de áreas de widgets: register_sidebar()
• Inclusão de ficheiros CSS e JS: wp_enqueue_style() e wp_enqueue_script()
• Suporte de elementos HTML5: add_theme_support('html5')
• Tamanhos de imagem personalizados: add_image_size()
• Suporte de logótipo personalizado: add_theme_support('custom-logo')

A regra fundamental é nunca incluir ficheiros CSS e JavaScript diretamente no header.php ou footer.php através de tags HTML. Em vez disso, utilize sempre wp_enqueue_style() e wp_enqueue_script() no functions.php, porque isso permite ao WordPress gerir corretamente as dependências, evitar duplicados e possibilitar que outros plugins interajam com os seus scripts.

O WordPress Loop

O WordPress Loop é o código PHP que apresenta conteúdo de artigos ou páginas. Todos os templates que apresentam conteúdo utilizam o Loop para iterar pelos resultados de uma consulta. Compreender o Loop é fundamental, porque é o mecanismo que liga o seu template ao conteúdo da base de dados.

A estrutura básica do Loop utiliza um ciclo while com as funções have_posts() e the_post(). Dentro do loop, utilize template tags como the_title(), the_content(), the_excerpt(), the_permalink() e the_post_thumbnail() para apresentar diferentes partes do conteúdo. Pode personalizar o Loop utilizando a classe WP_Query para criar consultas personalizadas que devolvem exatamente os artigos que pretende apresentar.

Consultas personalizadas com WP_Query

A classe WP_Query permite criar consultas de artigos totalmente personalizadas. Pode filtrar por categoria, etiqueta, taxonomia personalizada, data, autor e meta campos. Por exemplo, pode apresentar os últimos 3 artigos da categoria Notícias, ou todos os produtos com preço inferior a 10 euros. A WP_Query é uma ferramenta poderosa que lhe dá controlo total sobre que conteúdo é apresentado e como é ordenado.

Template tags e campos personalizados

As template tags são funções PHP que o WordPress disponibiliza para apresentar conteúdo dinâmico nos temas. Para além das tags básicas para título e conteúdo, existem dezenas de tags especializadas para apresentar autor, data, categorias, etiquetas, comentários e navegação. A documentação em developer.wordpress.org é um recurso inestimável para conhecer todas as template tags disponíveis.

Os campos personalizados (meta campos) ampliam os artigos e páginas padrão com dados adicionais. Utilizando o plugin ACF (Advanced Custom Fields) ou funções nativas do WordPress, pode adicionar campos para preço, localização, galeria, avaliações e tudo o resto que o seu site exija. Os campos personalizados, combinados com tipos de conteúdo personalizados, permitem que o WordPress funcione como um CMS completo para qualquer tipo de conteúdo.

Próximos passos

Depois de dominar os fundamentos, explore tópicos avançados como os temas filhos (child themes). Veja a otimização SEO de sites WordPress como passo seguinte. Outros tópicos avançados incluem modificar com segurança temas existentes, desenvolvimento de block themes para o WordPress Full Site Editing, a REST API para WordPress headless e o WP-CLI para gestão de temas a partir da linha de comandos. O ecossistema WordPress é enorme e há sempre algo novo para aprender. Comece com um tema simples, adicione funcionalidades gradualmente e em breve sentir-se-á confiante para criar temas WordPress profissionais.