There is one extremely important and non-renewable resource that people often tend to overlook: time. You can’t do more, can you? What you can do is save him. And one of the ways to do this is to use the tools available to do for you what you would otherwise have to do manually.
This training Automatic screenshot taking in WordPress. There are two ways to do this, and we’ll show you both. But before we get to the heart of the how-to question to confuse a metaphor, let’s take some time to discuss the situations in which you might want to use this function. Here we will talk about it.
As is often the case, creating a WordPress post involves many different types of work. From research and data collection to the writing itself, many processes can involve tedious or repetitive tasks. That much is inevitable. But some of them can be automated, streamlining your process and saving you time and effort, and website screenshots are among those tasks.
A screenshot is effectively a pop-up to another website that you can add to your post or page. This functionality is useful when: provide web design or layout examples as part of your posts or pages, or if you want your visitors to be able to view a frequently updated page, such as a list of prices that may be subject to discounts. Also, if a website is not accessible from where you are, screenshot can bypass any restrictionsallows your visitors to access content they might not otherwise be able to access. Finally, a screenshot can be used for navigationas a link to a target website describing the current content of the target website.
One thing to be aware of when using any of the methods that we will be discussing is, screenshots are updated automatically when the source website is updated. Useful when embedding a frequently updated news website, less so for content with limited long-term value.
If you’re not sure about changing your website’s code, you can automate screenshot taking in WordPress using a plugin we recommend. The plugin we will use is Browser Screenshots – a user-friendly and free screenshot plugin. You can use it to add a screenshot of any website to your pages or posts. The screenshot will be updated automatically whenever the target website is also updated.
After installing and activating this plugin, you have done more or less what you need to do. You will gain a shortcode usage – [browser-shot] – you can use it to take a screenshot of any website of your choice, provided you provide the shortcode with sufficient shortcode parameters.
We’ll use it as part of a post to show you how it works, but you can use the shortcode in any widget ready area on your website.
We’ll start with a post we’ve provided with some placeholder text. We will need a shortcode block to add automatic screenshots. Click plus sign the icon and shortcode block from the menu.
We’ll add the required shortcode, but it requires two more parameters for it to work: the website URL and the screenshot width. Let’s say we want to use the shortcode to create a screenshot of our own website with a width of 700px. This is the full shortcode we will be using: [browser-shot url=”https://qodeinteractive.com/magazine/” width=”700“].
And our screenshot is now part of the post.
There are also a number of other parameters you can use to complete your screenshot. Here are a few of the most helpful, the rest can be found at: plugin’s wordpress.org page.
Of course, if you are using Workman visual editor, while you should use the shortcode element, Classical When the editor is in HTML editing mode, you can place your shortcode wherever you want.
The plugin described above uses a function developed by WordPress and you can do just that. However, your website functions.php file. If you’re not sure about changing your website’s code, we highly recommend using the plugin method above.
To access, go to: Appearance/Theme Editor Using your WordPress dashboard.
Find functions.php in the menu on the right Theme Editor screen and scroll to the bottom of the file.
This is the code you need to paste into your file. functions.php file. Do this, but be very careful not to disturb other code:
/**
* This shortcode will allow you to create a snapshot of a remote website and post it
* on your WordPress site.
*
* [snapshot url="http://www.wordpress.org" alt="WordPress.org" width="400" height="300"]
*/
add_shortcode( 'snapshot', function ( $atts ) {
$atts = shortcode_atts( array(
'alt' => '',
'url' => 'http://www.wordpress.org',
'width' => '400',
'height' => '300'
), $atts );
$params = array(
'w' => $atts['width'],
'h' => $atts['height'],
);
$url = urlencode( $atts['url'] );
$src="http://s.wordpress.com/mshots/v1/" . $url . '?' . http_build_query( $params, null, '&' );
$cache_key = 'snapshot_' . md5( $src );
$data_uri = get_transient( $cache_key );
if ( ! $data_uri ) {
$response = wp_remote_get( $src );
if ( 200 === wp_remote_retrieve_response_code( $response ) ) {
$image_data = wp_remote_retrieve_body( $response );
if ( $image_data && is_string( $image_data ) ) {
$src = $data_uri = 'data:image/jpeg;base64,' . base64_encode( $image_data );
set_transient( $cache_key, $data_uri, DAY_IN_SECONDS );
}
}
}
return '<img src="' . esc_attr( $src ) . '" alt="' . esc_attr( $atts['alt'] ) . '"/>';
} );
click Update File When finished.
This works pretty much the same as the plugin method described above. The shortcode is now called [snapshot] and uses some of the same parameters: url, width, height, and lower. Working with the same post used above, we’ll enter [snapshot width=’700′ height=’500′ url=’https://qodeinteractive.com/magazine/’] to our shortcode block for a 700 x 500 pixel screenshot of our website.
As you can see, the screenshot is there. This is just an image and does not link to the website where the screenshot was taken.
As a result
It’s that easy. Whether you rely on a plugin or your ability to modify code, you can now save a lot of time, money and effort by automating screenshots. As is often the case with WordPress, you can add functionality like this to your website with a few clicks of the mouse or a simple copy/paste command, and it doesn’t have to cost you a penny.
Support our work ❤️
If you enjoyed this article, consider leaving a tip to help us keep publishing great content.
