Integração com WordPress

O WordPress oferece várias formas de incorporar temporizadores, desde abordagens baseadas em blocos a inserção de HTML personalizado. Este guia abrange todos os métodos para instalações modernas e clássicas de WordPress.

Método 1: Editor de Blocos do WordPress (Gutenberg)

O WordPress moderno utiliza o editor de blocos (Gutenberg), que fornece uma interface visual para construir páginas e artigos.

Guia passo a passo

Passo 1: Crie o seu temporizador

1. Aceda ao Editor
2. Desenhe e configure o seu temporizador
3. Copie o URL do temporizador na secção Renderer
4. Guarde-o para os próximos passos

Passo 2: Crie o código iFrame

Construa o código de incorporação iFrame usando o URL do seu temporizador:

<iframe
  src="https://gettickr.app/r/#YOUR-TIMER-ID"
  width="100%"
  height="400"
  style="border: none; max-width: 1200px; margin: 0 auto; display: block;"
  title="Temporizador de Contagem"
>
</iframe>

Passo 3: Adicione o bloco HTML Personalizado

1. Abra a página ou artigo onde quer colocar o temporizador
2. Clique no botão "+" para adicionar um novo bloco
3. Procure por "HTML Personalizado"
4. Selecione o bloco "HTML Personalizado"

Passo 4: Cole o seu código

1. Clique dentro do bloco HTML Personalizado
2. Cole o seu código iFrame completo
3. O bloco mostra “HTML Personalizado” durante a edição
4. Clique em "Pré-visualizar" para ver o temporizador em ação

Passo 5: Publique

1. Clique em "Atualizar" ou "Publicar" no canto superior direito
2. Veja a sua página para verificar se o temporizador aparece corretamente
3. Teste em dispositivos móveis ou use a pré-visualização responsiva

Dicas para o Editor de Blocos

Método 2: Editor Clássico

Se o seu site WordPress utiliza o Editor Clássico, pode adicionar temporizadores através do editor HTML.

Guia passo a passo

1. Abra a sua Página/Artigo no Editor Clássico
2. Clique no separador "Texto" (alterna do modo Visual para HTML)
3. Encontre o local onde quer o temporizador no seu HTML
4. Cole o código iFrame nesse local
5. Alterne para o separador "Visual" para pré-visualizar (opcional)
6. Atualize/Publique a sua página

Exemplo de código no Editor Clássico

<h2>Contagem para Evento</h2>

<iframe
  src="https://gettickr.app/r/#YOUR-TIMER-ID"
  width="800"
  height="400"
  frameborder="0"
  style="border: none; display: block; margin: 20px auto;"
>
</iframe>

<p>Junte-se a nós no evento do ano!</p>

Método 3: Page Builders (Construtores de Páginas)

Muitos sites WordPress usam page builders para design visual. Eis como adicionar temporizadores aos construtores populares:

Elementor

Dica Pro para Elementor:

Use o "Posicionamento Personalizado" do Elementor para sobrepor temporizadores em imagens ou secções para heros criativos!

Divi Builder

WPBakery Page Builder

Beaver Builder

Comparação de Page Builders

Método 4: Áreas de Widgets (Barra Lateral/Rodapé)

Para temporizadores que aparecem em várias páginas (barras laterais, rodapés, cabeçalhos):

Guia passo a passo

1. Vá a Dashboard → Aparência → Widgets
2. Encontre a Área de Widgets alvo (ex.: “Barra Lateral”, “Rodapé”)
3. Clique em "+" para Adicionar Bloco ou "Adicionar um Widget"
4. Procure por "HTML Personalizado"
5. Adicione o Widget HTML Personalizado
6. Cole o seu código iFrame
7. Adicione um Título (opcional, ex.: “Contagem para Evento”)
8. Clique em "Atualizar" ou "Guardar"

Recomendações de dimensionamento para Widgets

Método 5: Shortcodes para Reutilização

Crie um shortcode personalizado para usar o mesmo temporizador facilmente em várias páginas.

Criar um shortcode

Adicione ao functions.php do seu tema ou crie um plugin personalizado:

// Adicionar a functions.php
function tickr_countdown_shortcode($atts) {
    $atts = shortcode_atts(array(
        'id' => '',
        'width' => '100%',
        'height' => '400',
    ), $atts);

    if (empty($atts['id'])) {
        return '<p>Por favor indique um ID de temporizador</p>';
    }

    $output = '<iframe ';
    $output .= 'src="https://gettickr.app/r/#' . esc_attr($atts['id']) . '" ';
    $output .= 'width="' . esc_attr($atts['width']) . '" ';
    $output .= 'height="' . esc_attr($atts['height']) . '" ';
    $output .= 'style="border: none; max-width: 100%;" ';
    $output .= 'title="Temporizador de Contagem">';
    $output .= '</iframe>';

    return $output;
}
add_shortcode('tickr', 'tickr_countdown_shortcode');

Usar o seu shortcode

Depois de adicionado, use o shortcode em qualquer página, artigo ou widget:

Uso básico:

[tickr id="YOUR-TIMER-ID"]

Com dimensões personalizadas:

[tickr id="YOUR-TIMER-ID" width="800" height="500"]

Múltiplos temporizadores:

<h3>Evento 1</h3>
[tickr id="timer-1"]

<h3>Evento 2</h3>
[tickr id="timer-2"]

Benefícios dos shortcodes

Compatibilidade com Plugins

Problemas comuns de plugins

Permitir iFrames em plugins de segurança

Wordfence:

1. Vá a Wordfence → Firewall → All Firewall Options
2. Adicione gettickr.app aos domínios em whitelist
3. Guarde as definições

iThemes Security:

1. Vá a Security → Settings → Advanced
2. Desative “Filter Suspicious Query Strings in the URL” para páginas específicas
3. Ou coloque gettickr.app em whitelist

Resolução de Problemas na Integração WordPress

Temporizador não aparece

Problemas de apresentação

Problemas em mobile

WordPress Multisite

Para instalações WordPress Multisite:

Passos do Administrador de Rede:

1. Network Admin → Settings
2. Ativar “Unfiltered HTML” para administradores de sites (se necessário)
3. Os sites individuais podem então adicionar iFrames de temporizador normalmente

Próximos Passos

• Integração iFrame — Documentação detalhada de iFrame
• Personalizar Design do Temporizador — Alinhe com o seu tema WordPress
• Integração Shopify — WooCommerce é semelhante ao Shopify
• Controlo Remoto — Controle temporizadores enquanto gere o seu site WordPress