Como criar capturas de tela automatizadas de sites no WordPress

Deseja criar capturas de tela automatizadas do site no seu site 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.

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ê também pode usar capturas de tela automatizadas do site se quiser 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 o estilo novo e o 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.

Você também pode escolher se deseja adicionar um link à captura de tela que o direcione para o site, alternando o botão “Usar link” no painel.

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 a digitar um nome para o snippet. 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 daqui, 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.

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.