Criar um website com recurso a um sistema de gestão de conteúdos

Apresentação

UC02635 (50h · 4,5 pts) do curso Técnico de Multimédia. Cobre a construção de um website com CMS — instalação, configuração, temas (e child themes), editor de blocos (Gutenberg/FSE), plugins, estruturação de conteúdo (incluindo Custom Post Types), performance, SEO, segurança e publicação. Usa WordPress como referência. Liga ao design (UC02285) e ao código (UC02634); paralela à UC02832 do TDS, com ângulo mais "produzir o site do cliente".

CMS · panorama

CMS faz sentido quando o cliente quer editar conteúdo sem programar; quando o time-to-market importa; quando há ecossistema (plugins) que resolve metade dos requisitos.

WordPress · instalação

Ambiente local

• LocalWP (recomendado para iniciantes) — instala WordPress completo num clique.
• XAMPP / MAMP — Apache + MySQL + PHP manual.
• DDEV / Docker — reprodutível, mais próximo de produção.

Produção

• Hosting partilhado com 1-click install (Hostinger, SiteGround, Bluehost).
• VPS (DigitalOcean, Hetzner) + LEMP (Linux + Nginx + MySQL + PHP).
• WordPress gerido (Kinsta, WP Engine) — caro, sem dores.
• Cloudflare Pages + WP Headless — moderno, raro em iniciantes.

5-minute install

1. Descarregar WordPress de wordpress.org.
2. Criar BD MySQL + utilizador.
3. Copiar para o servidor.
4. Aceder ao domínio → assistente preenche wp-config.php.
5. Definir título, admin, senha.

Configuração pós-instalação

1. Permalinks → Definições → Permalinks → "Nome do post" (URLs limpas, SEO).
2. Apagar conteúdo demo (post "Hello World", página de exemplo, plugins/temas não usados).
3. HTTPS + certificado (Let's Encrypt automatico nos hosts modernos).
4. Backup automático desde o início (UpdraftPlus + cloud).
5. Senhas fortes + idealmente MFA; remover/renomear utilizador "admin".
6. Plugins iniciais: SEO + segurança.

Temas e blocos

Tipos de tema

• Block themes (FSE — Full Site Editing) — moderno (WordPress 5.9+); todo o site editável visualmente no Site Editor (header/footer incluídos), com blocos e padrões. Direção atual.
• Temas clássicos — PHP templates (header.php, single.php...). Ainda muito comuns (Astra, GeneratePress).
• Frameworks — Astra, GeneratePress, Kadence, Blocksy (leves, personalizáveis).

Child theme (clássicos)

Nunca editar o tema-pai — uma atualização apaga as alterações.

wp-content/themes/astra-child/
├── style.css
└── functions.php

/*
Theme Name:  Astra Child
Template:    astra
*/

<?php
add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style('parent', get_template_directory_uri().'/style.css');
    wp_enqueue_style('child', get_stylesheet_directory_uri().'/style.css', ['parent']);
});

Personalizações no child; o pai pode atualizar sem perder nada.

Editor de blocos (Gutenberg)

Construção visual baseada em blocos: - Blocos essenciais: parágrafo, cabeçalho, imagem, galeria, colunas, grupo, lista, citação, separador, query loop (loop de posts dinâmico), botão, vídeo/embed. - Padrões (patterns) — agrupamentos reutilizáveis (uma "secção hero", uma grelha de cards). - Templates por tipo (single, page, archive, 404) — editáveis no Site Editor (block themes). - Estilos globais — paleta, tipografia, espaçamentos a partir do theme.json.

Estruturar conteúdo

Tipos de conteúdo (built-in)

• Posts — cronológicos (blog/notícias).
• Páginas — estáticas (Sobre, Contacto, Serviços).
• Media — biblioteca de ficheiros (otimizar com UC00504!).

Custom Post Types (CPT)

Tipos próprios (ex.: Eventos, Produtos, Portfolio) — via plugin (CPT UI, Pods) ou código:

add_action('init', function () {
    register_post_type('evento', [
        'label'        => 'Eventos',
        'public'       => true,
        'has_archive'  => true,
        'menu_icon'    => 'dashicons-calendar-alt',
        'supports'     => ['title', 'editor', 'thumbnail', 'excerpt'],
        'rewrite'      => ['slug' => 'eventos'],
        'show_in_rest' => true,
    ]);
});

Taxonomias

• Categorias (hierárquicas) e tags (flat) — built-in para posts.
• Custom taxonomies — próprias por CPT (ex.: "Local" para Eventos).
• ACF (Advanced Custom Fields) — campos personalizados (data, geo, números, etc.) para enriquecer CPTs.

Papéis (utilizadores)

Menor privilégio — dar o mínimo necessário; clientes raramente precisam de Administrator.

Plugins

⚠ Menos é mais. Cada plugin é código de terceiros — peso e superfície de ataque. Instalar só do repositório oficial ou fornecedores reputados.

Performance

• Cache — Super Cache / Rocket / LiteSpeed.
• Imagens otimizadas (UC00504): WebP/AVIF, srcset, lazy loading, dimensão correta.
• CDN — Cloudflare (gratuito).
• Menos plugins; auditar com Query Monitor.
• PHP atualizado (8.x); HTTP/2 ou 3.
• Lighthouse — Performance/CWV.

SEO

• Permalinks "Nome do post".
• Title e meta description únicos por página (via Yoast/Rank Math).
• Open Graph + Twitter Card para previews.
• Estrutura com h1 único, hierarquia coerente.
• Sitemap.xml + robots.txt (gerados pelo plugin SEO).
• Schema.org (JSON-LD) para tipos relevantes.
• Velocidade — fator de ranking.

Segurança

WordPress é alvo grande porque é o mais usado. Hardening obrigatório:

1. Atualizar core, temas, plugins (vetor nº 1 de ataque).
2. Menos plugins, só de fontes confiáveis.
3. Senhas fortes + MFA.
4. Não usar utilizador "admin" — criar próprio com nome único; remover o default.
5. Limitar tentativas de login (Wordfence/Limit Login Attempts).
6. WAF — Wordfence ou Cloudflare.
7. Backups automáticos e testados.
8. HTTPS obrigatório.
9. DISALLOW_FILE_EDIT no wp-config.php (impede editar PHP do dashboard).
10. Permissões de ficheiros corretas (644/755; wp-config 600).

Acessibilidade e ética

• Editor com a11y (a11y check em alguns blocos/themes).
• Contraste, foco, alt em todas as imagens.
• Conteúdo cumprindo RGPD (cookies/banners, privacidade).
• Plugins com licença; não instalar versões "nulled" (piratas — incluem malware).

Workflow do projeto

1. Briefing + sitemap + wireframes (UC02285).
2. Instalar WordPress (local).
3. Escolher tema + criar child theme (ou block theme + estilos globais).
4. Instalar plugins essenciais (poucos).
5. Estruturar conteúdo (páginas, CPTs, taxonomias).
6. Personalizar layout (Site Editor / CSS / patterns).
7. Conteúdo real + media otimizada.
8. Performance + SEO + a11y.
9. Backup.
10. Migrar para produção (Duplicator / All-in-One WP Migration).
11. Domínio, HTTPS, DNS apontado, último smoke test.

Apêndices

A · Estrutura WordPress

wp-admin/         painel
wp-content/
  themes/         temas (+ child)
  plugins/        plugins
  uploads/        media
wp-includes/      core (não tocar)
wp-config.php     credenciais BD, secrets, debug

B · Glossário

CMS. Content Management System. CPT. Custom Post Type. FSE. Full Site Editing. Gutenberg. Editor de blocos do WordPress. Headless. CMS via API; frontend separado. Permalink. Estrutura de URL. Theme.json. Configuração global (block themes). WAF. Web Application Firewall.

C · Recursos

• WordPress.org · documentação e descarregar.
• LocalWP · localwp.com — ambiente local.
• Learn WordPress · learn.wordpress.org — formação oficial.
• Spectra / Kadence Blocks · pack de blocos extra.
• Cloudflare · CDN + WAF gratuito.
• Kinsta blog · performance/segurança.