Now you should see something like this at screen bottom: Click that and tick the Custom Fields box. If the custom field box is not showing on your post edit screen, then look at screen top right and you should see the Screen Options tab. Into that field we can input a site url which can then be used in the post loop to display a screenshot using our new shortcode. For formatting and usability reasons, it's best to automate this process by adding a custom field to our post edit screen. Let's imagine a scenario where we want to display a screenshot of a site beside each of our posts. Now that we have a working shortcode, let's see how we can incorporate that into our WordPress loop. Also, test a bad url: you should see the warning message instead of a screenshot. By the way, you can set any width range you like. Play around with the width and watch what happens when you go out of range. Remember, you may have to refresh the page after a few seconds to see the cached screenshot. When you view the post or page, you should see a 300 pixel wide screenshot of Amazon. In a post or page, insert this shortcode: It is one of the best screen capture tools which helps you to capture scrolling web pages from the Internet Explorer and other browsers. This tool allows you to quickly capture screenshots of a selected region, window, or entire screen. finally we wrap the query_url in an image tag and a link tag so that users can click the screenshot and be taken to the site Greenshot is an open source screen capture tool.we create a query url by adding a urlencoded site attribute and the width attribute.the site attribute is trimmed to remove accidental left and right spaces.This also takes into account a missing width attribute. Note: we use the PHP ternary operator to assign a default width of 200 if the supplied width is outside our range. the width attribute is converted to an integer and checked to make sure it's within a suitable range, in this case between 100 and 300 pixels.the shortcode function accepts the $atts array containing the two shortcode attributes: width and site.declare a shortcode called ss_screenshot with the add_shortcode function.add_shortcode('ss_screenshot', 'ss_screenshot_shortcode')
The full code is available in the source link above. You can add the code to the functions.php file in your theme directory.
You may need to click the link again as the generator takes a little time to cache the image. uses it for generating screenshots for it's various activities.įor instance, here's the url to show a screenshot of wp.tutsplus with a width of 400 pixels: And the scuttlebutt is that as long as you don't abuse it, then it's free to use. It's an open secret, and has been for a couple of years, that WordPress exposes a screenshot generator at it's s. subdomain. We'll even turn this into an easy-to-use shortcode to display the screenshots.
In this tutorial you'll learn an open secret: how to generate screenshots of websites to use in your WordPress posts using a service provided by.