Hoe maak je geautomatiseerde website-screenshots in WordPress

Wilt u geautomatiseerde websiteschermen maken op uw WordPress-site? Als u regelmatig websiteschermen toevoegt aan uw WordPress-berichten of -pagina's, bespaart het automatiseren van het proces u tijd die u besteedt aan het handmatig vastleggen van schermafbeeldingen. In dit artikel laten we u zien hoe u geautomatiseerde website-screenshots kunt maken in WordPress.

Methode 1: Automatische website-schermafbeelding maken in WordPress met Plugin

Deze methode is eenvoudiger dus aanbevolen voor beginners en gebruikers die geen gebruik willen maken van code.

Het eerste dat u hoeft te doen, is de plug-in Browser Shots installeren en activeren. Raadpleeg onze stapsgewijze handleiding over het installeren van een WordPress-plug-in voor meer informatie.

De plug-in werkt standaard en er zijn geen instellingen die u kunt configureren.

Bewerk gewoon een post / pagina of maak een nieuwe aan. U ziet een nieuwe knop in de visuele editor om schermafbeeldingen van websites toe te voegen.

Als u hierop klikt, verschijnt er een pop-up waar u de website-URL, alternatieve tekst, link naar URL en hoogte / breedte van de schermafbeelding kunt invoeren.

Klik op de knop OK en de plug-in zal een shortcode aan uw WordPress-bericht toevoegen. U kunt nu een voorbeeld van uw bericht bekijken om de plug-in in actie te zien.

Als u de Teksteditor in WordPress gebruikt of als u de knop niet in de visuele editor wilt gebruiken, kunt u de shortcode zelf handmatig toevoegen.

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

Standaard maakt de plug-in een screenshot van 600 x 600 pixels. U kunt dit wijzigen door de kenmerken width en height aan de shortcode toe te voegen.

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

Het zal ook automatisch linken naar de website. U kunt dit wijzigen door een linkkenmerk toe te voegen aan de shortcode en elke gewenste link toe te voegen.

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

Als u een bijschrift onder de schermafbeelding wilt toevoegen, dan kunt u dat doen door de bijschrifttekst om de shortcode te wikkelen.

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

Het bijschrift maakt gebruik van de ondertitelstijlen van uw WordPress-thema. Hier is hoe het eruit zag op onze demo-website:

Browser Shots-plug-in maakt gebruik van de mshots-API van WordPress.com om schermafbeeldingen te maken. Deze afbeeldingen worden niet opgeslagen in uw WordPress mediabibliotheek. Ze worden rechtstreeks geserveerd vanaf WordPress.com-servers.

Zie onze gids over het verschil tussen WordPress.com en WordPress.org.

Methode 2: Geautomatiseerde screenshots maken door code toe te voegen aan WordPress

Voor deze methode moet u code toevoegen aan uw WordPress-bestanden. Het wordt niet aanbevolen voor beginners. Als u vertrouwd bent met het plakken van fragmenten van internet in WordPress, kunt u deze methode gebruiken.

Voeg deze code toe aan het functions.php-bestand van uw thema of een sitespecifieke plug-in.

 functie 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 = ''; return $ img;  add_shortcode ("screen", "wpb_screenshots"); 

Net als de plug-in die we eerder noemden, gebruikt deze code ook de API van WordPress.com mshots om schermafbeeldingen te genereren.

Om een ​​screenshot van een website in uw WordPress-berichten en -pagina's weer te geven, moet u de shortcode als volgt invoeren:

[scherm url = "http://wpbeginner.com" alt = "WPBeginner"]

Vervang URL- en Alt-velden met uw eigen waarden.

Standaard zal deze code een screenshot van 600 x 450 pixels genereren. U kunt dit wijzigen door uw eigen kenmerken voor hoogte en breedte aan de shortcode toe te voegen.

[scherm url = "http://wpbeginner.com" alt = "WPBeginner" w = "400" h = "400"]

Dat is alles, we hopen dat dit artikel u heeft geholpen bij het maken van geautomatiseerde websiteschermen in WordPress. Wellicht wilt u ook onze handleiding over het automatiseren van WordPress en sociale media met IFTTT.

Als je dit artikel leuk vond, meld je dan aan voor onze YouTube-video-tutorials over WordPress. U kunt ons ook vinden op Twitter en Facebook.