Hur man skapar automatiserade webbplatsbilder i WordPress

Att ta skärmdumpar för en handledning kan kännas som en oändlig uppgift. Du måste ta, beskära, kommentera och ladda upp varje bild, och upprepa processen om och om igen.

Vi känner till denna kamp alltför väl från att skapa våra egna guider här på WPBeginner. Det är en enorm tidstjuv som verkligen kan sakta ner ditt arbetsflöde för innehållsskapande.

De goda nyheterna är att du kan automatisera hela denna process. Detta sparar inte bara värdefull tid utan hjälper också till att hålla din webbplats professionell och konsekvent.

I den här artikeln visar vi hur du enkelt skapar automatiska skärmdumpar av webbplatser i WordPress.

Varför skapa automatiserade webbplats-skärmdumpar i WordPress?

Om du har en WordPress-webbplats, kanske du vill skapa och lägga till automatiserade webbplats-skärmdumpar i dina inlägg för att ge potentiella läsare ett snabbt sätt att se vad ditt innehåll handlar om.

Detta kan öka användarnas engagemang och bidra till din webbplats SEO. Relevanta, högkvalitativa bilder hjälper sökmotorer att bättre förstå ditt innehåll, och de kan förbättra besökarnas engagemangssignaler som tid på sidan.

På samma sätt kan du använda automatiserade webbplatsbilder för att skapa en visuell säkerhetskopia av din webbplats innan du uppdaterar ett tema eller gör några andra ändringar. Detta kan hjälpa dig att jämföra och se skillnaden mellan din webbplats nya och gamla stilar.

Automatiserade skärmdumpar kan också jämföra olika tjänster eller webbplatser, guida din läsare genom en steg-för-steg-handledning och spåra webbplatsens framsteg över tid.

Med det sagt, låt oss titta på hur du enkelt kan skapa automatiserade webbplats-skärmdumpar i WordPress:

• Metod 1: Skapa automatiska skärmdumpar av webbplatser i WordPress med ett plugin
• Metod 2: Skapa automatiserade skärmdumpar genom att lägga till kod i WordPress
• Bonus: Ta skärmdumpar manuellt för din webbplats
• Vanliga frågor
• Ytterligare resurser

Metod 1: Skapa automatiska skärmdumpar av webbplatser i WordPress med ett plugin

Den här metoden är enklare och rekommenderas därför för nybörjare och användare som inte vill hantera kod.

Först måste du installera och aktivera pluginet Browser Screenshots. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Viktigt: Observera att vid tidpunkten för skrivandet har detta plugin inte uppdaterats på länge. Även om det fortfarande kan fungera, kan det utgöra en kompatibilitets- eller säkerhetsrisk. Vi rekommenderar att du testar det på en staging-webbplats först, och se alltid till att du har en komplett WordPress-säkerhetskopia innan du installerar det.

Vid aktivering fungerar pluginet direkt ur lådan, och det finns inga inställningar att konfigurera.

Besök nu helt enkelt en sida eller ett inlägg där du vill lägga till en automatiserad webbplatsbild från sidomenyn i WordPress.

Klicka här på knappen ‘Lägg till block’ (+) längst upp till vänster på skärmen för att öppna blockmenyn. Lägg sedan till blocket ‘Webbläsarbilder’ i redigeraren.

När du har gjort det, lägg till URL:en för webbplatsen som du vill skaffa en automatiserad skärmdump för och klicka på knappen 'Ladda bild'.

Pluginet kommer nu automatiskt att lägga till en skärmdump för den webbplats du valde. Du kan nu lägga till en alternativtext för bilden och ändra dess bredd och höjd från blockpanelen till höger.

Genom att växla omkopplaren 'Använd länk' i panelen kan du lägga till en länk till skärmdumpen som leder dig till webbplatsen.

Du kan också växla omkopplaren 'Länka till det aktuella inlägget' om du vill lägga till inläggslänken i skärmdumpen.

Klicka slutligen på knappen ‘Uppdatera’ eller ‘Publicera’ för att spara dina inställningar.

Du kan nu besöka din WordPress-webbplats för att se den automatiserade skärmdumpen.

Observera: Browser Shots-plugin använder WordPress.com:s mshots API för att generera skärmdumpar i farten. Dessa bilder lagras inte i ditt WordPress mediebibliotek. De serveras direkt från WordPress.com:s servrar. Se vår guide om skillnaden mellan WordPress.com och WordPress.org.

Metod 2: Skapa automatiserade skärmdumpar genom att lägga till kod i WordPress

Den här metoden kräver att du lägger till kod i dina WordPress-filer. För att skapa automatiserade skärmdumpar måste du lägga till anpassad kod i ditt temas functions.php-fil.

Kom dock ihåg att det minsta felet i koden kan bryta din webbplats och göra den otillgänglig.

Det är därför vi rekommenderar att använda WPCode. Det är det bästa pluginet för kodavsnitt för WordPress på marknaden som gör det supersäkert och enkelt att lägga till anpassad kod.

Experttips: På WPBeginner använder vi WPCode för att hantera alla anpassade kodavsnitt över vår portfölj av webbplatser. Det gör att vårt utvecklingsteam kan lägga till och organisera kod säkert utan att någonsin behöva redigera temat functions.php-fil direkt.

Först måste du installera och aktivera pluginet WPCode. För detaljerade instruktioner, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

När du har aktiverat, besök sidan Kodavsnitt » + Lägg till avsnitt från WordPress-instrumentpanelen.

När du är där, klicka på knappen 'Använd kodavsnitt' under alternativet 'Lägg till din anpassade kod (nytt kodavsnitt)'.

Du kommer nu att tas till sidan 'Skapa anpassat kodavsnitt', där du kan börja med att skriva ett namn för ditt kodavsnitt. Namnet kan vara vad som helst som hjälper dig att identifiera koden.

Välj sedan 'PHP Snippet' som kodtyp från rullgardinsmenyn till höger.

Därefter kopierar och klistrar du helt enkelt in följande kod i rutan 'Kodförhandsgranskning':

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

Liksom plugin-programmet vi nämnde tidigare använder den här koden också WordPress.com Mshots API för att generera skärmdumpar i farten.

Nu kan du lägga till URL:en för webbplatsen vars automatiserade skärmdumpar du vill ta bredvid raden "url" =$gt; i koden.

Du kan också lägga till din föredragna bredd och höjd för skärmdumparna bredvid raderna "w" => och "h"=> i koden.

Rulla sedan ner till avsnittet 'Infogning' och välj läget 'Automatisk infogning'.

Koden kommer nu att köras automatiskt vid aktivering.

Skrolla slutligen tillbaka till toppen av sidan och växla omkopplaren 'Inaktiv' till 'Aktiv'.

Klicka sedan på knappen 'Spara kodavsnitt' för att lagra dina inställningar och aktivera kodavsnittet.

Nu, för att visa en skärmdump av en webbplats i dina WordPress-inlägg och sidor, måste du ange kortkoden så här:

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

Du kan ersätta fälten URL och Alt med dina egna värden.

Öppna först sidan/inlägget i blockredigeraren från WordPress-instrumentpanelen och klicka på knappen 'Lägg till block' (+).

Lägg här till blocket 'Kortkod' på sidan/inlägget. Lägg sedan till kortkoden ovan och ersätt den med dina egna värden.

Klicka slutligen på knappen 'Uppdatera' eller 'Publicera' för att spara dina inställningar.

Besök nu din WordPress-webbplats för att se den automatiska skärmdumpen i aktion.

Bonus: Ta skärmdumpar manuellt för din webbplats

Om du inte vill använda automatiserade skärmdumpar kan du ta skärmdumpar manuellt med olika verktyg som Droplr.

Detta ger dig mer frihet att välja ett specifikt område för en bild jämfört med automatiserade skärmdumpar. Dessutom kan du redigera dessa bilder i Adobe Photoshop och lägga till andra element som pilar eller röda rutor till dem.

Den här funktionen är inte tillgänglig för automatiserade skärmdumpar där plugins eller kod automatiskt hämtar bilden åt dig.

För att ta en skärmdump med Droplr måste du först installera appen på din dator. När du har gjort det klickar du på Droplr-ikonen i aktivitetsfältet på Windows eller Mac och väljer alternativet 'Skärmdump'.

Därefter kan du välja det område där du vill ta skärmdumpen.

Droplr öppnar sedan bilden i en webbläsare där du kan ladda ner den eller dela länken med andra. För mer information, se vår handledning om hur man tar en skärmdump i WordPress.

Vanliga frågor

Här är några av de vanligaste frågorna vi får om att skapa automatiserade skärmdumpar i WordPress.

Är automatiska skärmdumpar lika bra som manuella skärmdumpar?

Det beror på dina behov. Automatiserade skärmdumpar är utmärkta för snabbhet och konsekvens, men manuella skärmdumpar ger dig mer kontroll. Med manuella tagningar kan du välja specifika områden, lägga till anteckningar som pilar eller text och optimera bilden innan du laddar upp den.

Kommer användning av automatiserade skärmdumpar att sakta ner min webbplats?

Nej, de bör inte påverka din webbplats prestanda. Metoderna som beskrivs i den här artikeln använder en extern tjänst från WordPress.com för att generera bilderna. Det innebär att bilderna laddas från deras servrar, inte dina, vilket förhindrar extra belastning på din hosting.

Kan jag anpassa hur de automatiska skärmdumparna ser ut?

Anpassningen är begränsad. Du kan vanligtvis definiera skärmdumpens bredd och höjd. Du kan dock inte lägga till anteckningar, effekter eller beskära en specifik del av sidan som du kunde med ett manuellt verktyg för redigering av skärmdumpar.

Spara skärmdumparna i mitt WordPress mediebibliotek?

Nej, skärmdumparna genereras i farten och lagras inte i ditt mediebibliotek. Detta hjälper till att spara lagringsutrymme på ditt webbhotellskonto, eftersom bilderna serveras direkt från WordPress.com:s servrar.

Varför visas inte mina automatiska skärmdumpar?

WordPress.com-tjänsten som genererar dessa skärmdumpar fungerar utmärkt för live, offentliga webbplatser. Den kan dock inte ta skärmdumpar av webbplatser som finns på en lokal dator (localhost), är lösenordsskyddade eller bakom vissa brandväggar. Den kan också ha svårt att rendera sidor som använder komplexa animationer eller kräver användarinteraktion för att visa innehåll.

Ytterligare resurser

Nu när du vet hur du automatiserar skärmdumpar av webbplatser, kanske du också vill kolla in dessa andra hjälpsamma guider:

• Ny guide till bild-SEO – Lär dig hur du optimerar dina bilder korrekt för sökmotorer för att få mer trafik till din webbplats.
• Verktyg för att skapa bättre bilder för dina blogginlägg – Kolla in våra experters val av de bästa verktygen för att skapa mer engagerande bilder för dina artiklar.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.