使用技巧

如何在WordPress中自动获取浏览器屏幕截图并显示它们

图像和屏幕截图是任何WordPress博客中的关键元素。 特别是,屏幕截图使您可以突出显示其他页面的关键方面。 但是,这样做可能会很麻烦 拍摄完美的浏览器截图 并将它们添加到您的帖子中。 尽管您可以根据操作系统(OS)完成工作,但始终如一地拍摄屏幕快照是一个挑战。

输入 浏览器截图 插入。 这使您可以截图任何网站,甚至无需离开WordPress编辑器。 如果您的耳朵对此感到不适,您可能会想要继续阅读。

让我们看看它是如何工作的!

浏览器屏幕截图插件简介

如何自动获取浏览器的屏幕截图并在WordPress中显示它们如何自动在WordPress中获取浏览器屏幕截图并显示它们

浏览器截图 可以说是一个利基插件,应该在您的网站上占有一席之地。 它使您无需离开WordPress编辑器即可获取任何页面的动态浏览器屏幕截图。 这适用于经典编辑器和块编辑器,具体取决于您的首选选项。 这与OS本地解决方案形成对比,后者要求您在平台之外打开新的浏览器窗口并进一步优化图像。

如果使用经典编辑器,则浏览器屏幕快照使您可以使用自定义短代码来生成所需的镜头。 您可以在任何页面或帖子中添加多个屏幕截图,并且这些截图也适用于“块编辑器”。

由于该插件会动态生成屏幕截图,因此非常适合您不想为内容使用过时的镜头的情况。 如果您的页面或帖子包含“浏览器屏幕截图”短代码或阻止,则访问者将看到实时屏幕抓图。 对于某些类型的内容,这是一个诱人的主张。

无论使用哪种方法,该插件还使您可以自定义所拍摄浏览器屏幕截图的分辨率。 您还可以在图像中添加替代文本和文本,以及自定义CSS类。

但是,重要的是要了解此插件只需要 “首屈一指” 浏览器屏幕截图。 这意味着将不会显示需要滚动到的区域。 该区域的大小取决于您为每个浏览器屏幕截图配置的参数,稍后您将学习如何进行操作。

主要特征:

  • 使用简码或代码块对浏览器窗口中的任何网站进行自定义拍摄。
  • 在内容中添加浏览器屏幕截图,而无需手动拍摄或上传。
  • 自定义浏览器屏幕截图的分辨率。
  • 将自定义CSS类添加到插件生成的图像。
  • 在图片中添加链接和替换文字。

价格:免费| 更多信息

如何使用浏览器屏幕截图插件(2种方法)

到目前为止,您已经知道Browser Screenshot插件的工作原理,因此让我们讨论如何使用它。 短代码是该插件的基本组成部分,因此让我们首先看一下。

1.使用简码生成动态浏览器屏幕截图

Browser Screenshots插件使您可以使用以下自定义短代码来生成动态浏览器快照:

[browser-shot url="elegantthemes.com" width="600" height="400"]

简码包含两个基本参数:width和height。 这两个参数都使用像素值,插件拍摄的默认分辨率为600 x400。当然,您还希望将要截屏的特定URL添加到短代码中。

无论您使用块编辑器还是经典编辑器,短代码都将呈现类似于以下内容的屏幕截图:

如何自动获取浏览器屏幕截图并在WordPress中显示它们-1如何自动获取浏览器屏幕截图并在WordPress中显示它们

但是,浏览器屏幕快照还使您可以设置几个自定义参数。 除了宽度和高度,这些还包括以下内容:

  • 替代:此参数使您可以为屏幕截图设置替代文本。
  • 链接:您可以使用此参数选择图像指向的链接(该链接可能与镜头的来源不同)。
  • 目标:使用此参数可以控制图像链接是否在新窗口中打开。

例如,这是包含所有参数的完整短代码如下所示:

[browser-shot url="http://www.google.com" width="700" height="500" alt="Google’s homepage" link="http://www.otherwebsite.com"]

您还可以使用简码来手动添加字幕:

[browser-shot url="http://www.google.com" width="700" height="500" alt="Google’s homepage" link="http://www.otherwebsite.com"]这是标题[/browser-shot]

在大多数情况下,您将使用的两个最重要的参数是宽度和高度。 对于所有浏览器屏幕快照,使用相同的值通常不会返回最佳结果,因此,您需要调整参数以适合内容。

2.使用块将截图添加到您的网站

如果使用“块编辑器”,则“浏览器屏幕截图”插件将使您可以访问名为“浏览器快照”的新块:

如何自动获取浏览器屏幕截图并在WordPress 2中显示它们如何在WordPress中自动获取浏览器屏幕截图并显示它们

选择“阻止”将提示插件询问您要使用哪个网站来生成屏幕截图。 在此示例中,我们使用亚马逊美国主页:

如何自动获取浏览器屏幕截图并在WordPress 3中显示它们如何在WordPress中自动获取浏览器屏幕截图并显示它们

单击“查找图像”后,插件将“截取”屏幕截图并将其显示在“块编辑器”中:

如何自动获取浏览器的屏幕截图并在WordPress中显示它们4如何自动在WordPress中获取浏览器屏幕截图并显示它们

要记住的一件事是,该插件无法访问私人页面或为您登录。 对于这些类型的浏览器屏幕截图,您必须自己做一些肮脏的工作。

继续前进,在该屏幕截图的右侧,您可以看到“阻止详细信息”选项卡。 这使您可以修改我们前面讨论的所有参数,而无需添加自定义短代码。

使用块编辑器修改浏览器屏幕截图的宽度和高度要简单得多。 这是因为编辑器使您可以通过单击height和width参数下方的Refresh Image按钮来检出预览:

如何自动获取浏览器的屏幕截图并在WordPress 5中显示它们如何在WordPress中自动获取浏览器屏幕截图并显示它们

如果您同时比较两个示例,则可以看到分辨率的变化如何修改插件为您截屏的区域。 除此之外,您还可以向屏幕截图添加自定义链接,配置是否在新标签页中打开它们,并在此处设置自定义CSS类。

结论

如果您经常在博客内容中包含浏览器屏幕截图,则 浏览器截图 插件可以为您节省很多时间。 这是一个相当小众的插件,但是如果您在我们提到的人群中,那么它将大大简化编辑帖子的过程。

使用浏览器屏幕截图,您可以使用简单的短代码或块编辑器添加浏览器的屏幕抓图。 对于简码,该插件包含几个参数,使您可以自定义屏幕截图,例如宽度,高度甚至alt(用于alt文本)。

您对如何使用浏览器屏幕截图插件有疑问吗? 让我们在下面的评论部分中讨论它们!

由VectorMine / shutterstock.com撰写的文章缩略图

资源