如何在WordPress中创建自动网站截图

Do you want to create automated website screenshots in your WordPress site? If you frequently add website screenshots to your WordPress posts or pages, then automating the process will save you time spent on capturing screenshots manually. In this article, we will show you how to create automated website screenshots in WordPress.

您是否要在WordPress网站中创建自动网站截图？ 如果您经常将网站屏幕截图添加到WordPress帖子或页面中，那么自动执行该过程将节省您手动捕获屏幕截图的时间。 在本文中，我们将向您展示如何在WordPress中创建自动网站截图。

方法1：使用插件在WordPress中创建自动网站截图 (Method 1: Create Automatic Website Screenshots in WordPress using Plugin)

This method is easier thus recommended for beginners and users who don’t want to deal with code.

因此，此方法比较容易，因此建议初学者和不想处理代码的用户使用。

First thing you need to do is install and activate the Browser Shots plugin. For more details, see our step by step guide on how to install a WordPress plugin.

您需要做的第一件事是安装并激活Browser Shots插件。 有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。

The plugin works out of the box, and there are no settings for you to configure.

该插件可以直接使用，没有可供您配置的设置。

Simply edit a post/page or create a new one. You will notice a new button in the visual editor to add website screenshots.

只需编辑帖子/页面或创建一个新的即可。 您会在视觉编辑器中注意到一个新按钮，用于添加网站屏幕截图。

Clicking on it will bring up a popup where you can enter the website URL, alternate text, link to URL, and height / width of the screenshot.

单击它会弹出一个弹出窗口，您可以在其中输入网站URL，备用文本，URL链接以及屏幕截图的高度/宽度。

Click on OK button and the plugin will add a shortcode to your WordPress post. You can now preview your post to see the plugin in action.

单击确定按钮，该插件将在您的WordPress帖子中添加一个简码 。 现在，您可以预览您的帖子，以查看实际使用的插件。

If you are using the Text Editor in WordPress or don’t want to use the button in visual editor, then you can also manually add the shortcode yourself.

如果您在WordPress中使用文本编辑器 ，或者不想在可视化编辑器中使用按钮，那么您也可以自己手动添加简码。

[browser-shot url="https://www.wpbeginner.com"]

[browser-shot url="https://www.wpbeginner.com"]

By default, the plugin will create a screenshot of 600 x 600 pixels. You can change that by adding the width and height attributes to the shortcode.

默认情况下，该插件将创建600 x 600像素的屏幕截图。 您可以通过在短代码中添加width和height属性来更改它。

[browser-shot url="https://www.wpbeginner.com" width="400" height="400"]

[browser-shot url="https://www.wpbeginner.com" width="400" height="400"]

It will also automatically link to the website. You can change that by adding a link attribute to the shortcode and add any link you want.

它还将自动链接到该网站。 您可以通过将链接属性添加到短代码并添加所需的任何链接来更改它。

[browser-shot url="https://www.wpbeginner.com" width="400" height="400" link="http://example.com"]

[browser-shot url="https://www.wpbeginner.com" width="400" height="400" link="http://example.com"]

If you want to add a caption below the screenshot, then you can do that by wrapping the caption text around the shortcode.

如果要在屏幕截图下方添加标题 ，则可以通过将标题文本包装在简码周围来实现。

[browser-shot url="https://www.wpbeginner.com"]WPBeginner - WordPress Resource Site for Beginners[/browser-shot]

[browser-shot url="https://www.wpbeginner.com"]WPBeginner - WordPress Resource Site for Beginners[/browser-shot]

The caption will use your WordPress theme’s caption styles. Here is how it looked on our demo website:

字幕将使用您的WordPress主题的字幕样式。 这是在我们的演示网站上的外观：

Browser Shots plugin uses WordPress.com’s mshots API to generate screenshots on the fly. These images are not stored in your WordPress media library. They are served directly from WordPress.com servers.

Browser Shots插件使用WordPress.com的mshots API即时生成屏幕截图。 这些图像未存储在您的WordPress媒体库中。 它们直接从WordPress.com服务器提供。

See our guide on the difference between WordPress.com and WordPress.org.

请参阅有关WordPress.com和WordPress.org之间区别的指南。

方法2：通过向WordPress添加代码来创建自动屏幕截图 (Method 2: Create Automated Screenshots by Adding Code to WordPress)

This method requires you to add code to your WordPress files. It is not recommended for beginners. If you are comfortable pasting snippets from web into WordPress, then you can use this method.

此方法要求您将代码添加到WordPress文件中。 不建议初学者使用。 如果您愿意将Web片段粘贴到WordPress中 ，则可以使用此方法。

Simply add this code to your theme’s functions.php file or a site-specific plugin.

只需将此代码添加到主题的functions.php文件或特定于站点的插件中即可 。

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");

Similar to the plugin we mentioned earlier, this code also uses the WordPress.com mshots API to generate screenshots on the fly.

与我们前面提到的插件类似，此代码还使用WordPress.com mshots API即时生成屏幕截图。

To display a website screenshot in your WordPress posts and pages, you will need to enter the shortcode like this:

要在您的WordPress帖子和页面中显示网站屏幕截图，您需要输入以下简短代码：

[screen url=”http://wpbeginner.com” alt=”WPBeginner”]

[screen url =” http://wpbeginner.com” alt =“ WPBeginner”]

Replace URL and Alt fields with your own values.

用您自己的值替换URL和Alt字段。

By default, this code will generate a screenshot of 600 x 450 pixels. You can change that by adding your own height and width attributes to the shortcode.

默认情况下，此代码将生成600 x 450像素的屏幕截图。 您可以通过在短代码中添加自己的height和width属性来更改它。

[screen url=”http://wpbeginner.com” alt=”WPBeginner” w=”400″ h=”400″]

[屏幕url =” http://wpbeginner.com” alt =“ WPBeginner” w =” 400” h =” 400”]

That’s all, we hope this article helped you learn how to create automated website screenshots in WordPress. You may also want to see our guide on how to automate WordPress and social media with IFTTT.

仅此而已，我们希望本文能帮助您学习如何在WordPress中创建自动网站截图。 您可能还希望查看我们的指南，了解如何使用IFTTT自动化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 Facebook.

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

翻译自: https://www.wpbeginner.com/plugins/an-automated-way-of-taking-website-screenshot-in-wordpress/