Você já viu sites que mostram uma visualização ao vivo de links quando você passa o mouse sobre eles? Isso é feito usando um popup jQuery que exibe uma captura de tela de uma página vinculada quando os usuários passam o mouse sobre o link. Neste artigo, mostraremos como exibir uma visualização ao vivo de links no WordPress.
Tutorial em vídeo
Se você não gostar do vídeo ou precisar de mais instruções, continue lendo.
A primeira coisa que você precisa fazer é instalar e ativar o plug-in WP Live Preview Links. Após a ativação, um novo item de menu chamado Live Preview Links aparecerá em sua barra de administração do WordPress. Ao clicar nele, você será levado à página de configurações do plug-in.
Usando esse plug-in, você pode ter visualizações ao vivo para links externos, internos, todos ou seletivos. Dependendo do que você está tentando alcançar, muitos sites usam visualizações ao vivo para sites externos. Alguns sites de comércio eletrônico usam visualizações ao vivo para dar uma olhada nas páginas de produtos. Lembre-se de que o excesso de visualizações ao vivo pode distrair e incomodar os usuários.
A escolha da classe class="wp-live-preview" permitirá que você exiba manualmente visualizações ao vivo de links à medida que os adiciona. Basta adicionar a classe aos seus links desta forma:
<a href="http://www.example.com" class="wp-live-preview">Exemplo de link</a>
Entre outras configurações, você pode escolher o tamanho da janela pop-up de visualização ao vivo, a posição e a janela de visualização do site do link visualizado. As configurações padrão funcionariam para a maioria dos sites. Basta clicar no botão salvar alterações para armazenar suas configurações.
Agora você pode visitar seu site para ver a visualização ao vivo dos links em ação.
Esperamos que este artigo tenha ajudado você a aprender como mostrar a visualização ao vivo de links no WordPress. Você também pode dar uma olhada em nosso guia sobre como corrigir links quebrados no WordPress com o verificador de links quebrados.
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 Google+.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Colin says
Thanks for the article, that plugin has ceased operation and is no longer downloadable, if you had a new suggestion that works I’d greatly appreciate it. The RT Media paid version isn’t up to scratch and there’s not a lot to be found via Google.
WPBeginner Support says
Thank you for letting us know, we will be sure to look into updating this article
Administrador
Marcus Quiroga says
Hi,
Is there an update of this function nowadays? I’m trying it on external links at. Does someone could help me with that?
thank you
WPBeginner Staff says
Thanks for correcting us, we have updated the article.
Tim Roberts says
How do you get this to on work on specifc links.
WPBeginner Staff says
Unfortunately plugin does not have a way to show preview for selective links you can only choose from all, internal, or external links.
Bruce Brown says
Select the “class” option, then put the class on the links you want to display.
Per Søderlind says
Hi, I’m the plugin author.
You can get this to work on specific links by adding class=”wp-live-preview” to the link, and in the settings page set ‘Live Preview Links’ to ‘class=”wp-live-preview’. See the demo links on my site.