O calendário padrão do WordPress, o detalhe que denuncia um tema inacabado nos primeiros três segundos. Uma tabela densa sem espaçamento, fundo cinzento por defeito, texto apertado nas células. O programador do tema passou uma semana em tipos de letra e cores, mas esqueceu-se do #wp-calendar.

Vinte linhas de CSS mudam tudo. Abaixo encontra código que pode copiar para qualquer projeto, juntamente com uma explicação linha a linha para não se limitar a colar, mas perceber o que cada seletor faz.

💡 Visão geral rápida:

• CSS pronto a usar para #wp-calendar, um bloco, copie na íntegra
• Onde inserir o código: Personalizador, plugin de snippets ou tema filho
• O que fazer se o CSS não funcionar, especificidade e como a contornar
• Porque é que a sombra na captura de ecrã é apenas para o artigo, não está no código real

Como funciona o widget de calendário

Antes de copiar o código, veja rapidamente a estrutura. O WordPress gera esta marcação para o widget:

• .widget_calendar, contentor do widget na barra lateral
• #wp-calendar, a própria tabela (cada widget tem o seu id)
• #wp-calendar caption, nome do mês (cabeçalho da tabela)
• #wp-calendar thead th, nomes abreviados dos dias
• #wp-calendar tbody td, células dos dias; as datas com artigos tornam-se links
• #wp-calendar tbody .pad, células vazias antes do primeiro e depois do último dia
• #wp-calendar tfoot #prev / #next, links para o mês anterior e seguinte

Estas classes não mudam há anos e funcionam em todas as versões do WordPress desde a 5.0 até aos lançamentos mais recentes. Nada de magia, apenas marcação padrão do núcleo.

Um pequeno vídeo sobre como adicionar e configurar o widget de calendário na administração:

CSS pronto a usar: copiar e colar

Adicione este código aos estilos do seu tema. O resultado é uma tabela leve com células cinzentas, efeito hover branco e fundo desativado para dias vazios.

1
/* calendar widget — minimalistic styling */
2
.widget_calendar {float: left;}
3
#wp-calendar {width: 100%;}
4
#wp-calendar caption {
5
    text-align: right;
6
    color: #333;
7
    font-size: 12px;
8
    margin-top: 10px;
9
    margin-bottom: 15px;
10
}
11
#wp-calendar thead {font-size: 10px;}
12
#wp-calendar thead th {padding-bottom: 10px;}
13
#wp-calendar tbody {color: #aaa;}
14
#wp-calendar tbody td {
15
    background: #f5f5f5;
16
    border: 1px solid #fff;
17
    text-align: center;
18
    padding: 8px;
19
}
20
#wp-calendar tbody td:hover {background: #fff;}
21
#wp-calendar tbody .pad {background: none;}
22
#wp-calendar tfoot #next {
23
    font-size: 10px;
24
    text-transform: uppercase;
25
    text-align: right;
26
}
27
#wp-calendar tfoot #prev {
28
    font-size: 10px;
29
    text-transform: uppercase;
30
    padding-top: 10px;
31
}

Desagregação por grupos:

Contentor e largura. .widget_calendar {float: left;} evita colisões de float em barras laterais estreitas. #wp-calendar {width: 100%;} força a tabela a esticar até à largura total do elemento pai; sem isto, o calendário comporta-se como um elemento inline e encolhe para a largura do conteúdo. Mais sobre CSS no WordPress.

Cabeçalho do mês. caption fica alinhado à direita, cor cinzento-escuro com margens superior e inferior. O mês lê-se como uma legenda da tabela, não como texto isolado.

Cabeçalho com nomes dos dias. thead e th, tipo de letra pequeno de 10px e padding inferior. Os nomes abreviados dos dias (Seg, Ter, Qua) não chamam a atenção para si próprios.

Células dos dias. Cor de texto principal #aaa, cinzento suave. Cada célula recebe um fundo #f5f5f5 e uma borda branca que separa visualmente os dias. padding: 8px dá espaço de respiração em volta dos números. Ao passar o rato, a célula fica branca, um hover simples e claro, sem animações.

Células vazias. .pad remove o preenchimento de fundo para que os «buracos» no início e no fim do mês não pareçam dias ativos.

Navegação do mês. tfoot #prev e #next, links para os meses adjacentes. Ambos em tipo de letra pequeno e maiúsculas; #prev à esquerda, #next à direita.

Nota: a sombra em volta do calendário na captura de ecrã abaixo serve apenas para ilustração do artigo. Não está no código real.

Três formas de adicionar CSS ao seu site

Da mais simples à mais correta.

Método 1: Personalizador. Vá a Aparência → Personalizar → CSS adicional e cole o código. Vantagens: pré-visualização instantânea, sem necessidade de mexer em ficheiros. Desvantagens: os estilos ficam vinculados ao tema, perdem-se quando mudar de tema.

Método 2: Plugin de snippets. Instale o Code Snippets ou o WPCode gratuitos e adicione o código como um snippet CSS ativado para todo o site. Vantagens: os estilos vivem independentemente do tema. Desvantagens: mais um plugin na administração.

Método 3: Tema filho. Crie o style.css num tema filho e cole lá o código. Este é o caminho correto para projetos de produção: os estilos sobrevivem a atualizações do tema pai e vivem em controlo de versões. Se ainda não tem um tema filho, o guia do WordPress.org orienta-o em dez minutos.

Resultado

Depois de adicionar o CSS, o widget fica com este aspeto:

Os dias ficam centrados, as células são separadas por bordas brancas, o hover torna o fundo branco. As células vazias não distraem, não têm fundo cinzento. O nome do mês lê-se como uma legenda organizada.

O que fazer se o CSS não funcionar

Se o widget não mudou depois de colar o código, o seu tema já contém estilos para #wp-calendar com prioridade mais alta. Abra o inspetor do navegador (F12), encontre o elemento #wp-calendar tbody td e verifique que regras estão a sobrepor-se ao background e ao padding.

Para contornar estilos incorporados do tema, adicione o ID da barra lateral aos seletores ou envolva o código num contexto mais específico, por exemplo, #sidebar .widget_calendar #wp-calendar tbody td. Isto aumenta a especificidade sem !important.

Widget ou bloco: o que usar

Com o lançamento do Gutenberg, o núcleo introduziu um bloco «Calendário», um substituto moderno para o widget clássico. Ele gera a mesma tabela #wp-calendar e é estilizado com o mesmo CSS. A diferença está na colocação:

• Widget clássico, através de Aparência → Widgets, funciona apenas em barras laterais e áreas de widgets do tema.
• Bloco «Calendário», inserido em qualquer página ou artigo através do editor de blocos, e também em áreas de widgets através de Aparência → Widgets (a partir do WordPress 5.8, os blocos também estão disponíveis aí).

O CSS deste artigo funciona com ambas as opções sem alterações. Escolha o bloco se precisar do calendário no corpo da página; o widget clássico se for apenas na barra lateral e não quiser alterar o seu fluxo de trabalho habitual.

⁉️🤔 Perguntas frequentes

Porque é que o meu calendário não responde ao CSS do artigo?

Muito provavelmente, o seu tema já contém estilos para #wp-calendar com prioridade mais alta. Abra o inspetor (F12 no navegador), clique numa célula do calendário e veja que regra está a sobrepor-se ao seu background. Solução: adicione o ID do contentor da barra lateral antes do seletor, por exemplo, #secondary .widget_calendar #wp-calendar tbody td. Isto aumenta a especificidade sem !important.

É necessário criar um tema filho para 20 linhas de CSS?

Para um widget, não. Comece com o CSS adicional no Personalizador (Aparência → Personalizar). Quando acumular regras personalizadas suficientes para uma personalização completa, aí crie um tema filho. O limiar do «está na hora» é cerca de 50 linhas de CSS ou a primeira alteração no functions.php.

Este CSS funciona com o bloco «Calendário» no Gutenberg?

Sim, completamente. O bloco «Calendário» renderiza a mesma tabela #wp-calendar com as mesmas classes. O código funciona sem alterações.

Posso alterar o esquema de cores?

Facilmente. Substitua #f5f5f5 (fundo da célula) e #fff (hover e borda) pelas cores do seu tema. Para um esquema escuro, experimente background: #2c2c2c; color: #ccc; para tbody td e background: #1a1a1a; para o hover. O principal é manter o contraste entre o fundo da célula e o texto.

O widget de calendário ainda é necessário em 2026?

Para sites de notícias e blogues ativos, sim. O calendário oferece aos leitores navegação por materiais antigos sem pesquisar por categorias. Para cartões de visita e landing pages, é inútil. Mas se o seu tema é vendido num marketplace, um widget estilizado é obrigatório: o comprador não deve ver uma tabela nua, mesmo que não use o calendário em si.

Calendário do WordPress: corrija em cinco minutos ou esqueça

O calendário é um pequeno pormenor que denuncia por completo um tema inacabado. Resolve-se copiando e colando vinte linhas de CSS.

• Se está a fazer um tema para si, copie o código para o CSS adicional no Personalizador e esqueça o assunto.
• Se está a escrever um tema para venda, inclua os estilos no style.css do tema filho, é higiene básica.
• Se não precisa do calendário de todo, estilize-o na mesma. Um comprador do tema pode ativar o widget, e ele não deve parecer partido.

Verifique como está o seu calendário agora mesmo: adicione o widget à barra lateral através de Aparência → Widgets e abra o site. Tabela nua? O código está acima, agarre-o e corrija em cinco minutos.