Como Criar Capturas de Tela Automatizadas de Sites no WordPress

Atualizar manualmente as capturas de tela do site desperdiça muito tempo. Esteja você criando um portfólio, um diretório ou revisando software, a captura, o corte e o upload constantes podem diminuir severamente a criação do seu conteúdo.

Descobri que, embora as capturas de tela detalhadas de tutoriais ainda precisem de um toque pessoal, a automação economiza muito tempo para visualizações rápidas do site. É a chave para manter seu site atualizado sem o esforço manual interminável.

Neste guia, mostrarei três métodos confiáveis para tirar facilmente capturas de tela automáticas de sites no WordPress.

Se você deseja exibir uma captura de tela de qualquer site ou gerar miniaturas automaticamente para seu portfólio, esses métodos o ajudarão a manter um site profissional e atualizado.

Por que criar capturas de tela automatizadas de sites no WordPress?

Se você tem um site WordPress, adicionar capturas de tela às suas postagens oferece aos leitores uma maneira visual rápida de ver sobre o que é o seu conteúdo. No entanto, tirar e cortar essas imagens manualmente para dezenas de links pode levar muito tempo.

Capturas de tela automatizadas são a solução perfeita para:

• Criar um portfólio de design de sites
• Criar um diretório de temas
• Escrever avaliações de software
• Realizar testes visuais em seus próprios sites

A automação economiza tempo e garante que o tamanho de suas imagens permaneça perfeitamente consistente. Além disso, muitas dessas ferramentas permitem capturar facilmente uma página inteira automaticamente, em vez de juntar várias capturas manuais.

Essa consistência profissional aumenta o engajamento do usuário e contribui para o SEO do seu site. Imagens relevantes e de alta qualidade mantêm os visitantes em sua página por mais tempo, o que envia sinais positivos aos mecanismos de busca.

Da mesma forma, você pode usar capturas de tela automatizadas de sites para criar um backup visual do seu site antes de atualizar um tema ou fazer grandes alterações de design. Isso facilita a comparação dos estilos novo e antigo do seu site lado a lado.

Quando usar capturas de tela manuais

Agora, é importante saber quando não usar a automação. Se você está criando um tutorial instrucional passo a passo, deve continuar tirando capturas de tela manualmente.

Ferramentas automatizadas não conseguem fazer login no seu painel de administração do WordPress, abrir menus suspensos ocultos ou adicionar caixas vermelhas e setas precisas para mostrar a um usuário exatamente onde clicar.

Por exemplo, no WPBeginner, tiramos manualmente todas as nossas capturas de tela de tutoriais de backend. Em seguida, usamos aplicativos gráficos dedicados como Adobe Photoshop ou Affinity Studio para refinar as imagens, borrar dados sensíveis e adicionar nossas anotações exclusivas.

Mas para pré-visualizações de sites públicos, a automação é absolutamente o melhor caminho.

Agora, vamos ver como criar facilmente capturas de tela de sites automatizadas no WordPress:

Método 1: Use o Plugin Capture para Capturas de Tela e PDF

Se você deseja exibir pré-visualizações de sites atualizadas dinamicamente sem lidar com código personalizado, este é o método mais fácil.

Ao usar um plugin dedicado como o Capture, suas capturas de tela são geradas automaticamente em segundo plano. Se o site de destino alterar seu design, sua captura de tela será atualizada sozinha para corresponder ao novo visual.

Além disso, como o plugin cuida dos arquivos de imagem, eles não ocuparão espaço de armazenamento em seu próprio servidor WordPress.

Embora existam muitos plugins de captura de tela antigos por aí, a maioria foi abandonada. Por causa disso, recomendo fortemente o uso do plugin Capture, ativamente mantido, para gerar de forma confiável essas pré-visualizações profissionais com um simples shortcode.

Passo 1. Instale e Configure o Plugin Capture

Primeiro, você precisa instalar e ativar o plugin Capture. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após ativar o plugin, você precisa navegar para Configurações » Capture. Aqui, você precisará clicar no link ‘Console de Captura’ para criar uma conta gratuita e obter uma chave de API.

Embora isso exija uma etapa extra de cadastro, garante que o serviço permaneça estável e confiável em comparação com plugins mais antigos e abandonados.

Abaixo disso, você encontrará a seção Configurações Padrão . A largura e altura padrão da viewport (1200×800) funcionam perfeitamente para capturas de tela de desktop padrão.

No entanto, sugiro alterar o Atraso Padrão (segundos) para 2 ou 3 segundos. Muitos sites modernos têm telas de carregamento, fontes personalizadas ou animações. Adicionar um pequeno atraso dá ao site de destino tempo suficiente para carregar completamente antes que o plugin tire a foto.

Quando estiver satisfeito com sua configuração, certifique-se de clicar no botão ‘Salvar Alterações’ .

Depois disso, recomendo fortemente clicar no botão ‘Testar Conexões’ . Isso verifica rapidamente se sua chave está funcionando corretamente, para que você não encontre erros mais tarde.

Passo 2. Crie uma Captura de Tela Usando Shortcode

Agora, você pode adicionar facilmente uma captura de tela a qualquer post ou página usando um shortcode simples. Simplesmente procure o bloco Shortcode no editor de blocos e cole um código como este:

[capture_screenshot url="https://wpbeginner.com" vw=1200 vh=800 full=true]

Como a Captura de Tela Aparece?

Ao contrário de uma imagem padrão que você carrega em sua biblioteca de mídia, essas capturas de tela automatizadas são geradas instantaneamente quando um visitante carrega sua página.

Como elas agem como uma ‘janela ao vivo’ para o site de destino, essa abordagem é incrivelmente útil se você administra um diretório de temas, um portfólio de design web ou um blog de análise de software.

Você pode garantir que seus leitores estejam sempre vendo a versão mais atualizada do site de destino, sem que você precise mover um dedo para substituir imagens antigas.

Personalizando Suas Capturas de Tela

O plugin Capture é incrivelmente flexível. Você pode adicionar parâmetros extras ao shortcode para alterar a aparência da captura de tela:

• Página Completa: Use full=true para capturar o comprimento inteiro da página.
• Modo Escuro: Use darkMode=true para capturar a versão escura de um site.
• Bloquear Anúncios: Use blockAds=true para ocultar anúncios irritantes da captura de tela.
• Formato da Imagem: Use type="webp" para garantir que suas imagens estejam em um formato leve e moderno para carregamento mais rápido.

Por exemplo, se você quisesse uma captura de tela em modo escuro, de página inteira, no formato WebP, seu shortcode ficaria assim:

[capture_screenshot url="https://example.com" full=true darkMode=true type="webp"]

Este método oferece muito mais controle do que ferramentas gratuitas básicas. É perfeito para sites de análise profissionais e portfólios.

Método 2: Use WPCode + mShots (Opção Gratuita)

Se você deseja os mesmos benefícios dinâmicos e de economia de espaço do Método 1, mas prefere uma solução totalmente gratuita sem criar contas extras, este é o método para você.

Ao adicionar um shortcode personalizado ao seu site, você pode acessar a API mShots do WordPress.com. Assim como o plugin Capture, o mShots gera imagens ao vivo instantaneamente quando a página carrega e as hospeda externamente, economizando o espaço de armazenamento do seu servidor.

Etapa 1: Adicione um Trecho de Código Usando WPCode

Para adicionar este código com segurança, recomendo fortemente o uso do WPCode. É o melhor plugin de trechos de código do WordPress do mercado. Ele permite que você adicione código personalizado sem editar diretamente o arquivo functions.php do seu tema.

Primeiro, instale e ative o plugin gratuito WPCode. Em seguida, navegue até Code Snippets » + Add Snippet no seu painel do WordPress.

Selecione ‘Adicionar seu código personalizado (Novo snippet)’. Dê um nome ao seu snippet, como ‘Capturas de tela automatizadas’, e certifique-se de que o menu suspenso Tipo de código esteja definido como ‘Snippet PHP’.

Em seguida, copie e cole o seguinte código seguro na caixa de visualização de código:

function wpb_automated_screenshots($atts) {
    $a = shortcode_atts( array(
        'url' => 'https://www.wpbeginner.com',
        'alt' => 'Website screenshot',
        'w'   => '600',
        'h'   => '450'
    ), $atts );

    $mshots_api = 'https://s.wordpress.com/mshots/v1/';
    $target_url = urlencode( $a['url'] );
    $width      = intval( $a['w'] );
    $height     = intval( $a['h'] );
    $alt_text   = esc_attr( $a['alt'] );

    $img_src = $mshots_api . $target_url . '?w=' . $width . '&h=' . $height;

    return '<img src="' . esc_url( $img_src ) . '" alt="' . $alt_text . '" />';
}
add_shortcode('automated_shot', 'wpb_automated_screenshots');

Role para baixo até a seção Inserção e certifique-se de que esteja definida como ‘Inserir automaticamente’.

Em seguida, alterne o interruptor na parte superior da tela de ‘Inativo’ para ‘Ativo’ e clique no botão ‘Salvar snippet’.

Passo 2. Crie uma Captura de Tela Usando Shortcode

Agora, para exibir a captura de tela automatizada em suas postagens ou páginas do WordPress, basta adicionar um bloco de Shortcode ao editor de conteúdo e colar o seguinte shortcode:

[automated_shot url="https://example.com" alt="Exemplo de site" w="800" h="600"]

Certifique-se de substituir https://example.com pelo URL real do site que você deseja capturar. Você também pode alterar facilmente o texto alternativo, a largura e a altura diretamente no shortcode.

Se o seu site de destino atualizar o design, mas sua captura de tela ainda mostrar a versão antiga, a API mShots pode estar armazenando a imagem em cache. Você pode forçá-la facilmente a tirar uma nova captura de tela adicionando um número aleatório ao final do seu URL, assim: url="https://example.com/?v=1".

Método 3: Use Browse AI + Zapier para Automação Mãos Livres

Ao contrário dos dois primeiros métodos que exibem pré-visualizações ao vivo hospedadas externamente, este método fornece automação real com as mãos livres, salvando fisicamente os arquivos diretamente em seu site WordPress.

Usaremos o Browse AI para capturar automaticamente as capturas de tela e o Zapier para enviá-las diretamente para sua Biblioteca de Mídia. Isso lhe dá controle total sobre suas imagens.

Como suas capturas de tela são salvas em seu próprio servidor, elas carregarão instantaneamente e permanecerão em seu site permanentemente, mesmo que o site de destino fique offline ou mude completamente seu design.

Etapa 1: Crie um Robô de Captura de Tela no Browse AI

Primeiro, vá para Browse AI e crie uma conta gratuita.

Após fazer login, clique no botão ‘Criar Novo Robô’ e selecione a opção ‘Monitorar Mudanças no Site’.

Você será solicitado a inserir o URL do site que deseja capturar.

Depois de inserir o link, você precisará clicar no botão ‘Iniciar Treinamento do Robô’.

O Browse AI abrirá uma nova janela mostrando o site ao vivo.

Simplesmente clique no ícone do robô em sua tela para abrir o menu e selecione ‘Capturar Tela’.

Um pequeno menu aparecerá perguntando qual parte da página você deseja capturar. Você pode selecionar 'Página inteira' se quiser uma captura de tela completa, de cima a baixo, ou 'Parte visível' se quiser apenas a seção superior do site.

Em seguida, o Browse AI pedirá que você dê um nome à captura de tela. Você pode digitar algo fácil de lembrar, como 'Captura de Tela da Página Inicial' ou 'Preços do Concorrente', e pressionar Enter.

Quando terminar, clique no botão roxo 'Finalizar' na parte inferior do painel esquerdo para encerrar a gravação.

O Browse AI, então, pedirá que você dê um nome ao seu novo robô.

Digite algo fácil de reconhecer e clique no botão 'Salvar'.

Após salvar, você pode configurar um agendamento.

Por exemplo, você pode dizer ao robô para visitar o site automaticamente e tirar uma nova captura de tela toda semana ou mês.

Ao terminar, certifique-se de clicar no botão 'Salvar'.

Etapa 2: Prepare seu site WordPress

Antes de criarmos a automação, precisamos fornecer ao Zapier uma maneira segura de se comunicar com a Biblioteca de Mídia do seu site.

Em uma nova aba, acesse seu painel do WordPress e instale e ative o plugin gratuito Zapier for WordPress. Se precisar de ajuda, consulte nosso guia sobre como instalar um plugin do WordPress.

Com o plugin ativo em seu site, você está pronto para conectar o Zapier ao seu site WordPress.

Etapa 3: Crie um Zap no Zapier

Em seguida, você precisa conectar seu robô ao WordPress usando o Zapier.

Primeiro, você precisa fazer login na sua conta Zapier. No seu painel principal, clique no botão '+ Criar' no menu superior esquerdo e selecione 'Zaps' no menu suspenso.

Ao abrir o construtor, o Zapier mostrará uma caixa de texto pedindo para você descrever seu fluxo de trabalho e criá-lo usando IA. Como queremos configurar isso com precisão, você pode ignorar este prompt.

Em vez disso, olhe logo abaixo do divisor 'ou' e clique diretamente na caixa 'Trigger' para construir sua automação manualmente.

Um menu aparecerá.

Procure e selecione Browse AI como seu aplicativo.

Procure a seção 'Conta' na barra lateral e clique no botão 'Entrar' para conectar com segurança sua conta Browse AI.

Depois que sua conta for vinculada, clique na caixa 'Evento de Trigger'. Você não precisa digitar nada no campo de pesquisa aqui! Simplesmente olhe logo abaixo da barra de pesquisa e clique na opção 'Nova Tarefa – Instantânea'.

Isso preencherá automaticamente o evento de trigger para você. Em seguida, você precisa clicar no botão 'Continuar' para passar para a próxima tela de configuração, onde o Zapier solicitará alguns detalhes.

Primeiro, selecione sua conta no menu suspenso 'Equipe'. Assim que fizer isso, um novo campo aparecerá onde você poderá selecionar o 'Robô' específico que criou anteriormente.

Finalmente, defina o 'Tipo de Evento' para 'Tarefa concluída com sucesso' para que o Zapier só seja executado quando uma boa captura de tela for tirada.

Certifique-se de clicar em 'Continuar' e, em seguida, clique no botão 'Testar trigger'. Esta é uma etapa necessária porque ela puxa sua captura de tela de teste recente para o Zapier para que o WordPress possa usá-la mais tarde.

Quando seu teste for bem-sucedido, clique na segunda caixa em seu fluxo de trabalho (a etapa de Ação) e pesquise por ‘WordPress’ como seu aplicativo.

Como você já instalou o plugin na Etapa 2, conectar seu site ao Zapier é simples.

Basta clicar no botão ‘Entrar’ na seção Conta e inserir suas credenciais de login do WordPress quando a janela pop-up aparecer.

Após o link do seu site, clique no menu suspenso ‘Evento de Ação’.

Pesquise e selecione a opção ‘Upload de Mídia’ e, em seguida, clique no botão ‘Continuar’ na parte inferior da página.

Agora, você precisa dizer ao WordPress qual arquivo carregar. Clique no botão ‘+’ (Inserir Dados) no lado direito da caixa ‘Arquivo’. Isso abrirá uma janela pop-up mostrando uma lista muito longa de dados de teste que o Zapier acabou de extrair do Browse AI.

Como a lista é muito longa, a maneira mais fácil de encontrar o arquivo certo é usar a barra de pesquisa na parte superior da janela pop-up. Digite ‘src’ para filtrar as opções.

Procure a opção que termina em ‘Screenshot Src’ e selecione-a. Pode ser necessário clicar no link ‘mais’ para ver o nome completo da opção.

Você também pode preencher os campos Título e Texto Alternativo, se desejar, mas pode deixar em branco todos os outros campos opcionais (como Legenda ou Autor) com segurança.

Quando terminar, clique em ‘Continuar’ e, em seguida, clique no botão ‘Testar etapa’.

O Zapier extrairá magicamente a captura de tela do Browse AI e a carregará diretamente na sua Biblioteca de Mídia do WordPress.

Se o teste for bem-sucedido, não se esqueça de clicar no botão Publicar para que seu novo Zap seja executado automaticamente em segundo plano.

O processo agora está completamente automatizado. Toda vez que o Browse AI capturar uma nova imagem, ela aparecerá automaticamente em sua Mídia » Biblioteca no WordPress, pronta para você usar em qualquer post ou página.

Bônus: Como Manter o Tamanho das Suas Capturas de Tela Consistente

Independentemente do método que você escolher acima, você precisará definir uma largura e altura para suas imagens automatizadas. Para manter seu blog com aparência limpa e profissional, recomendo o uso de uma proporção padrão de tela larga de 16:9.

A maioria dos temas do WordPress tem uma largura máxima fixa para posts de blog (por exemplo, 800 pixels). Se você definir todas as suas capturas de tela para corresponder a essa largura usando a proporção 16:9, todas elas terão automaticamente a mesma altura.

Isso cria um visual uniformemente bonito enquanto os usuários rolam seu artigo.

Para descobrir quais números digitar em sua ferramenta de captura de tela, você pode usar esta matemática simples:

• Se você sabe sua largura alvo: Simplesmente multiplique sua largura por 9 e, em seguida, divida por 16 para encontrar sua altura perfeita.
• Se você sabe sua altura alvo: Apenas multiplique sua altura por 16 e, em seguida, divida por 9 para encontrar sua largura correspondente.

Por exemplo, se a área de conteúdo do seu blog tem 800 pixels de largura, você multiplicaria 800 por 9 e depois dividiria por 16. Isso lhe dá uma altura perfeitamente dimensionada de 450.

Portanto, você simplesmente inseriria seus novos números nos parâmetros do seu shortcode, como w="800" h="450".

Perguntas Frequentes

Respondi a algumas perguntas sobre a automação de imagens de sites. Aqui estão algumas das perguntas mais comuns que as pessoas fazem sobre a criação de capturas de tela automatizadas de sites.

1. Como faço para tirar automaticamente uma captura de tela de página inteira de um site no WordPress?

Para tirar uma captura de tela automática no WordPress, você pode usar um plugin dedicado de captura de tela do WordPress como o Capture, integrar uma API de imagem gratuita como o mShots do WordPress.com, ou construir um fluxo de trabalho de automação usando ferramentas como Browse AI e Zapier.

Essas ferramentas buscam automaticamente o URL público de um site alvo. Dependendo do método escolhido, elas exibirão uma pré-visualização ao vivo instantaneamente ou farão o upload do arquivo de imagem real diretamente para sua Biblioteca de Mídia do WordPress.

2. Preciso pagar para criar capturas de tela automatizadas de sites no WordPress?

Não, você não precisa pagar para gerar capturas de tela automatizadas. Você pode usar métodos totalmente gratuitos, como adicionar um snippet PHP personalizado através do plugin gratuito WPCode para se conectar à API gratuita mShots do WordPress.com.

Além disso, plataformas de automação de terceiros como Browse AI e Zapier oferecem planos gratuitos que permitem aos proprietários de sites capturar um número limitado de capturas de tela a cada mês sem custo.

3. Posso usar ferramentas de captura de tela automatizadas em sites locais, de staging ou privados do WordPress?

Não, APIs de captura de tela automatizadas como mShots ou o plugin Capture exigem um URL de site ativo e publicamente acessível para funcionar. Essas ferramentas externas de captura de tela não podem acessar sites que estão hospedados localmente em um computador pessoal (localhost).

Além disso, ferramentas de captura de tela automatizadas não podem acessar ambientes de staging do WordPress que estão ocultos atrás de uma senha, um plugin de modo de manutenção ou um firewall.

4. É seguro usar uma API de terceiros para automatizar capturas de tela de sites?

Sim, usar APIs de captura de tela confiáveis como mShots do WordPress.com ou o plugin Capture é geralmente seguro para conteúdo público. Esses serviços de terceiros simplesmente visitam um URL de site público e tiram uma foto do que é publicamente visível na internet.

No entanto, os proprietários de sites nunca devem usar ferramentas de automação de captura de tela de terceiros para capturar páginas privadas do painel do WordPress em que o usuário fez login ou páginas da web que contenham dados pessoais sensíveis.

5. Por que minha captura de tela automatizada do WordPress.com mShots está mostrando uma página em branco?

A API mShots do WordPress.com ocasionalmente pode mostrar um espaço em branco na primeira vez que um URL de site específico é solicitado.

Isso ocorre porque a API mShots leva alguns segundos para gerar a imagem inicial. Se a captura de tela automatizada estiver em branco, simplesmente atualizar a página do WordPress geralmente corrige o problema. 

Como o mShots também armazena imagens em cache, você pode forçar a API a tirar uma nova captura de tela do site adicionando uma string de versão aleatória ao final do seu URL de destino em seu shortcode do WordPress.

Recursos Adicionais para Aprimorar Seu Conteúdo Visual

Espero que este artigo tenha ajudado você a aprender como criar facilmente capturas de tela automatizadas de sites no WordPress. Se você deseja levar o desempenho de imagens e mídias do seu site para o próximo nível, talvez também queira ver estes recursos adicionais:

• Guia para Iniciantes em SEO de Imagens – Otimize Imagens para Mecanismos de Busca – Aprenda a nomear e marcar corretamente suas capturas de tela para gerar mais tráfego orgânico para seu site.
• Ferramentas para Criar Melhores Imagens para Seus Posts de Blog – Descubra nossas principais escolhas de especialistas para as melhores ferramentas para criar gráficos envolventes, anotações e conteúdo visual para seus tutoriais.
• Como Otimizar Imagens para Desempenho da Web Sem Perder Qualidade – Descubra como comprimir corretamente suas capturas de tela e fotos para que seu site continue carregando rapidamente.
• Melhores Plugins de Portfólio WordPress para Designers e Fotógrafos – Se você está usando capturas de tela automatizadas para exibir seu trabalho de design web, esses plugins o ajudarão a exibi-los lindamente para clientes em potencial.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.