Automatically get website screenshots in WordPress posts

The following column WordPress Tutorial will introduce to you how to automatically obtain website screenshots in WordPress articles. I hope it will be helpful to friends in need!

1. Short code

Add the following code to the current theme function template functions.php:

function wp_screenshot($atts, $content=null){
extract(
shortcode_atts(
array(
"shots" => "https://s0.wordpress.com/mshots/v1/",
"url" => "https://www.wpbeginner.com",
"width" => "600",
"height" => "450",
"alt" => "screenshot"
), 
$atts
)
);
 
$img = &#39;<div class="wp-shot"><a href="&#39; . $url . &#39;" rel="external nofollow" target="_blank"><img src="&#39; . $shots . &#39;&#39; . urlencode($url) . &#39;?w=&#39; . $width . &#39;&h=&#39; . $height . &#39;" alt="&#39; . $alt . &#39;"  /></a></div>&#39;;
return $img;
}
add_shortcode("shot", "wp_screenshot");

When publishing an article, add the short code:

[shot url="http://zmingcx.com/"]

or customize the screenshot size

[shot url="http://zmingcx.com/" width="600" height="450"]

Just modify the URL link.

Specific effect

2. Add the link directly

This method is more convenient to use and is the basic method for obtaining screenshots Format:

https://s0.wordpress.com/mshots/v1/http://zmingcx.com/?w=600&h=450

You can also directly add the above address link format to the article like a normal image (inserted from the URL). The above screenshot is added in this way without using a short code.

Because you need to generate screenshots instantly, you may not be able to see the picture when you open it for the first time. Just refresh it. If it doesn't work, refresh it a few times. The generated screenshots are stored on the WordPress.com server and will not take up their own space and resources, but they may be a bit slow to load.

The above is the detailed content of Automatically get website screenshots in WordPress posts. For more information, please follow other related articles on the PHP Chinese website!