Como criar capturas de tela automatizadas de sites no WordPress

Se você adiciona frequentemente capturas de tela do site aos seus posts ou páginas do WordPress, automatizar o processo economizará o tempo gasto na captura manual de capturas de tela.

Na WPBeginner, criamos e incluímos regularmente capturas de tela em nossos artigos para orientar nossos leitores de forma eficaz. Com mais de 16 anos de experiência na criação, edição e automatização de capturas de tela, desenvolvemos um sólido entendimento das práticas recomendadas para a criação de imagens claras.

Essa experiência nos ensinou a importância de capturas de tela bem elaboradas para melhorar a compreensão e o envolvimento do leitor com nosso conteúdo.

Neste artigo, mostraremos como criar facilmente capturas de tela automatizadas de sites no WordPress.

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

Se você tiver um site WordPress, talvez queira criar e adicionar capturas de tela automatizadas do site às suas postagens para oferecer aos possíveis leitores uma maneira rápida de ver do que se trata o seu conteúdo.

Isso pode aumentar o envolvimento e até mesmo ajudar a melhorar o SEO do site, pois os mecanismos de pesquisa geralmente usam imagens e capturas de tela para entender e indexar seu conteúdo.

Da mesma forma, você pode usar capturas de tela automatizadas do site para criar um backup visual do seu site antes de atualizar um tema ou fazer qualquer outra alteração. Isso pode ajudá-lo a comparar e ver a diferença entre os estilos novo e antigo do seu site.

As capturas de tela automatizadas também podem comparar diferentes serviços ou sites, orientar o leitor por meio de um tutorial passo a passo e acompanhar o progresso do site ao longo do tempo.

Dito isso, vamos dar uma olhada em como criar facilmente capturas de tela automatizadas de sites no WordPress:

Método 1: Criar capturas de tela automáticas do site no WordPress usando um plug-in

Esse método é mais fácil e, portanto, recomendado para iniciantes e usuários que não querem lidar com código.

Primeiro, você precisa instalar e ativar o plug-in Browser Screenshots. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Após a ativação, o plug-in funcionará imediatamente, e não há configurações a serem definidas.

Agora, basta visitar uma página ou publicação na qual deseja adicionar uma captura de tela automatizada do site na barra lateral de administração do WordPress.

Aqui, clique no botão “Add Block” (+) no canto superior esquerdo da tela para abrir o menu de blocos. Em seguida, adicione o bloco “Browser Shots” no editor.

Depois de fazer isso, adicione o URL do site para o qual deseja obter uma captura de tela automática e clique no botão “Load Image” (Carregar imagem).

O plug-in agora adicionará automaticamente uma captura de tela para o site que você escolheu. Agora você pode adicionar um texto alternativo para a imagem e alterar sua largura e altura no painel de blocos à direita.

Alternar a opção “Usar link” no painel permite adicionar um link à captura de tela que o direciona para o site.

Você também pode alternar a opção “Link para a postagem atual” se quiser adicionar o link da postagem à captura de tela.

Por fim, clique no botão “Update” (Atualizar) ou “Publish” (Publicar) para armazenar suas configurações.

Agora você pode visitar seu site do WordPress para ver a captura de tela automatizada.

Observação: o plug-in Browser Shots usa a API mshots do WordPress.com para gerar capturas de tela em tempo real. Essas imagens não são armazenadas na sua biblioteca de mídia do WordPress. Elas são fornecidas diretamente dos servidores do WordPress.com. Consulte nosso guia sobre a diferença entre o WordPress.com e o WordPress.org.

Método 2: Criar capturas de tela automatizadas adicionando código ao WordPress

Esse método exige que você adicione código aos arquivos do WordPress. Para criar capturas de tela automatizadas, você deve adicionar um código personalizado ao arquivo functions.php do seu tema.

No entanto, lembre-se de que o menor erro no código pode quebrar seu site e torná-lo inacessível.

É por isso que recomendamos o uso do WPCode. Ele é o melhor plugin de trechos de código para WordPress do mercado, o que torna super seguro e fácil adicionar códigos personalizados.

Primeiro, você precisa instalar e ativar o plug-in WPCode. Para obter instruções detalhadas, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Após a ativação, acesse a página Code Snippets ” + Add Snippet no painel do WordPress.

Quando estiver lá, clique no botão “Use Snippet” na opção “Add Your Custom Code (New Snippet)”.

Agora você será levado à página “Criar snippet personalizado”, onde poderá começar digitando um nome para o snippet. O nome pode ser qualquer coisa que o ajude a identificar o código.

Em seguida, selecione “PHP Snippet” como o tipo de código no menu suspenso à direita.

Depois disso, basta copiar e colar o código a seguir na caixa “Code Preview” (Visualização de código):

function wpb_screenshots($atts, $content = NULL) {
extract(shortcode_atts(array(
"snap" => 'http://s.wordpress.com/mshots/v1/',
"url" => 'https://www.wpbeginner.com',
"alt" => 'screenshot',
"w" => '600', // width
"h" => '450' // height
), $atts));
  
$img = '<img alt="' . $alt . '" src="' . $snap . '' . urlencode($url) . '?w=' . $w . '&h=' . $h . '" />';
 
return $img;
}
add_shortcode("screen", "wpb_screenshots");

Semelhante ao plug-in que mencionamos anteriormente, esse código também usa a API Mshots do WordPress.com para gerar capturas de tela em tempo real.

Agora, você pode adicionar o URL do site cujas capturas de tela automatizadas deseja fazer ao lado da linha "url" =$gt; no código.

Você também pode adicionar sua largura e altura preferidas para as capturas de tela ao lado das linhas "w" => e "h"=> no código.

Em seguida, role para baixo até a seção “Insertion” (Inserção) e escolha o modo “Auto Insert” (Inserção automática).

O código será executado automaticamente após a ativação.

Por fim, role de volta para a parte superior da página e alterne o botão “Inativo” para “Ativo”.

Em seguida, clique no botão “Save Snippet” (Salvar snippet) para armazenar suas configurações e ativar o snippet.

Agora, para exibir uma captura de tela do site em seus posts e páginas do WordPress, você precisará inserir o shortcode da seguinte forma:

[screen url="http://wpbeginner.com" alt="WPBeginner"]

Você pode substituir os campos URL e Alt por seus próprios valores.

Primeiro, abra a página/post no editor de blocos do painel do WordPress e clique no botão “Add Block” (+).

A partir daí, adicione o bloco “Shortcode” à página/post. Em seguida, adicione o shortcode acima e substitua-o por seus próprios valores.

Por fim, clique no botão “Update” (Atualizar) ou “Publish” (Publicar) para armazenar suas configurações.

Agora, visite seu site do WordPress para ver a captura de tela automatizada em ação.

Bônus: Faça capturas de tela manualmente para o seu site

Se não quiser usar capturas de tela automatizadas, você poderá fazer capturas de tela manualmente com diferentes ferramentas, como o Droplr.

Isso lhe dá mais liberdade para escolher uma área específica para uma imagem, em comparação com as capturas de tela automatizadas. Além disso, você pode editar essas imagens no Adobe Photoshop e adicionar outros elementos, como setas ou caixas vermelhas.

Esse recurso não está disponível para capturas de tela automatizadas, em que plug-ins ou códigos obtêm automaticamente a imagem para você.

Para fazer uma captura de tela com o Droplr, primeiro instale o aplicativo no seu computador. Depois disso, clique no ícone do Droplr na barra de tarefas do Windows ou Mac e selecione a opção “Captura de tela”.

Em seguida, você pode selecionar a área em que deseja fazer a captura de tela.

O Droplr abrirá a imagem em um navegador, onde você poderá baixá-la ou compartilhar o link com outras pessoas. Para obter mais informações, consulte nosso tutorial sobre como fazer uma captura de tela no WordPress.

Esperamos que este artigo tenha ajudado você a aprender como criar capturas de tela automatizadas de sites no WordPress. Talvez você também queira ver nosso guia para iniciantes sobre SEO de imagens e nossas escolhas de especialistas sobre as melhores ferramentas para criar imagens melhores para as publicações do seu blog.

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