Have you ever seen sites that show a live preview of links when you bring your mouse over them? That’s by using a jQuery popup which displays a screenshot of a linked page when users bring their mouse over the link. In this article we will show you how to show live preview of links in WordPress.

您是否曾经看到过将鼠标悬停在链接上实时显示预览的站点？ 这是通过使用jQuery弹出窗口来实现的，该弹出窗口在用户将鼠标移到链接上时显示链接页面的屏幕截图。 在本文中，我们将向您展示如何在WordPress中显示链接的实时预览。

影片教学 (Video Tutorial)

演示地址

If you don’t like the video or need more instructions, then continue reading.

如果您不喜欢该视频或需要更多说明，请继续阅读。

First thing you need to do is install and activate the WP Live Preview Links plugin. Upon activation, a new menu item labeled Live Preview Links will appear in your WordPress admin bar. Clicking on it will take you to the plugin’s settings page.

您需要做的第一件事是安装并激活WP Live Preview Links插件。 激活后，一个名为“实时预览链接”的新菜单项将出现在WordPress管理栏中。 单击它会将您带到插件的设置页面。

Using this plugin, you can have live previews for external, internal, all, or selective links. Depending on what you are trying to achieve, many sites use live previews for external sites. Some eCommerce sites use live previews to show a peek into product pages. Keep in mind that too many live previews can be very distracting and annoying for your users.

使用此插件，您可以实时预览外部，内部，所有或选择性链接。 根据您要实现的目标，许多站点都使用外部站点的实时预览。 一些电子商务网站使用实时预览来展示产品页面。 请记住，太多的实时预览会对您的用户造成很大的干扰和烦恼。

Choosing class="wp-live-preview" will allow you to manually display live previews for links as you add them. Simply add the class to your links like this:

选择class="wp-live-preview"将允许您在添加链接时手动显示其实时预览。 只需将类添加到您的链接中，如下所示：

<a href="http://www.example.com" class="wp-live-preview">Example Link</a>

<a href="http://www.example.com" class="wp-live-preview">Example Link</a>

Among other settings, you can choose the size of live preview popup window, position, and the site viewport of the link previewed. The default settings would work for most sites. Simply click on the save changes button to store your settings.

在其他设置中，您可以选择实时预览弹出窗口的大小，位置以及预览链接的站点视口。 默认设置适用于大多数站点。 只需单击“保存更改”按钮以存储您的设置。

You can now visit your website to see the live preview for links in action.

现在，您可以访问您的网站以查看活动链接的实时预览。

We hope this article helped you learn how to show live preview of links in WordPress. You may also want to take a look at our guide on how to fix broken links in WordPress with broken link checker.

我们希望本文能帮助您学习如何在WordPress中显示链接的实时预览。 您可能还想看看我们的指南，了解如何使用损坏的链接检查器修复WordPress中的损坏的链接。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Google+.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Google+上找到我们。

翻译自: https://www.wpbeginner.com/plugins/how-to-show-live-preview-of-links-in-wordpress/