海外社媒SNS代运营Tiktok代运营公司
Revive Old Posts

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

进入浏览器截图插件。 这使您可以截取任何网站,甚至无需离开 WordPress 编辑器。 如果您对此感到耳目一新,您可能会想继续阅读。

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

https://www.youtube.com/watch?v=t9kjwnKUPXA

订阅我们的 YouTube 频道

浏览器截图插件简介

浏览器截图插件。

Browser Screenshots 可以说是一个小众插件,值得在您的网站上占有一席之地。 它使您能够拍摄任何页面的动态浏览器屏幕截图 没有 离开 WordPress 编辑器。 这适用于经典编辑器和块编辑器,具体取决于您的首选选项。 这与操作系统原生解决方案形成对比,后者要求您在平台之外打开新的浏览器窗口并进一步优化您的图像。

如果您使用经典编辑器,浏览器屏幕截图可让您使用自定义短代码来生成您想要的截图。 您可以在任何页面或帖子中添加多个屏幕截图,这同样适用于块编辑器。

海外社媒SNS代运营Tiktok代运营公司

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

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

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

主要特点:

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

价钱: 免费 | 更多信息

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

到目前为止,您已经知道 Browser Screenshot 插件是如何工作的,所以让我们讨论一下如何使用它。 短代码是插件的基本部分,所以让我们先看看这个。

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

浏览器截图插件使您能够使用以下自定义短代码来生成动态浏览器截图:

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

短代码包括两个基本参数: 宽度 高度. 两个参数都使用像素值,插件用来拍照的默认分辨率是 600 × 400. 当然,您还需要将要截图的特定 URL 添加到短代码中。

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

优雅的主题主页。

但是,浏览器屏幕截图还允许您设置多个自定义参数。 除了宽度和高度,还包括以下内容:

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

例如,以下是包含所有参数的完整短代码的样子:

[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"]Here's the caption[/browser-shot]

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

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

如果您使用块编辑器,则浏览器屏幕截图插件将允许您访问名为的新块 浏览器截图

添加浏览器镜头块。

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

获取亚马逊主页的浏览器截图.d

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

亚马逊浏览器截图。

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

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

使用块编辑器修改浏览器屏幕截图的宽度和高度要简单得多。 这是因为编辑器使您可以通过点击 刷新图片 高度和宽度参数下方的按钮:

更改浏览器屏幕截图的分辨率。

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

结论

如果您经常在博客内容中包含浏览器屏幕截图,则浏览器屏幕截图插件可以为您节省大量时间。 这是一个相当小众的插件,但如果你是我们提到的人群之一,它会让编辑帖子变得更加容易。

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

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

文章缩略图由 VectorMine/shutterstock.com 提供

海外社媒SNS代运营Tiktok代运营公司
Revive Old Posts