Hur man skapar automatiserade webbplatsbilder i WordPress

Att manuellt uppdatera skärmdumpar av webbplatser slösar mycket tid. Oavsett om du bygger en portfölj, skapar en katalog eller granskar programvara, kan det ständiga tagandet, beskärningen och uppladdningen av bilder avsevärt sakta ner din innehållsskapande.

Jag har upptäckt att även om detaljerade skärmdumpar för handledningar fortfarande behöver en personlig touch, är automatisering en enorm tidsbesparare för snabba förhandsgranskningar av webbplatser. Det är nyckeln till att hålla din webbplats fräsch utan den oändliga manuella ansträngningen.

I den här guiden visar jag dig tre pålitliga metoder för att enkelt ta automatiska skärmdumpar av webbplatser i WordPress.

Oavsett om du vill visa en skärmdump av en webbplats eller automatiskt generera miniatyrbilder för din portfölj, kommer dessa metoder att hjälpa dig att underhålla en professionell, uppdaterad webbplats.

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

Om du har en WordPress-webbplats, ger det att lägga till skärmdumpar i dina inlägg läsarna ett snabbt visuellt sätt att se vad ditt innehåll handlar om. Att ta och beskära dessa bilder manuellt för dussintals länkar kan dock ta lång tid.

Automatiserade skärmdumpar är den perfekta lösningen för:

• Att bygga en portfölj för webbdesign
• Att skapa en temakatalog
• Att skriva programvarugranskningar
• Att utföra visuell testning på dina egna webbplatser

Automatisering sparar tid och garanterar att dina bildstorlekar förblir perfekt konsekventa. Dessutom tillåter många av dessa verktyg dig att enkelt ta en fullständig skärmdump automatiskt, snarare än att pussla ihop manuella tagningar.

Denna professionella konsekvens ökar användarnas engagemang och bidrar till din webbplats SEO. Relevanta, högkvalitativa bilder håller besökare på din sida längre, vilket skickar positiva signaler till sökmotorer.

På samma sätt kan du använda automatiserade skärmdumpar av webbplatser för att skapa en visuell säkerhetskopia av din webbplats innan du uppdaterar ett tema eller gör stora designändringar. Detta gör det enkelt att jämföra din webbplats nya och gamla stilar sida vid sida.

När du ska hålla dig till manuella skärmdumpar

Nu är det viktigt att veta när man *inte* ska använda automatisering. Om du skapar en instruktionsguide, steg-för-steg-handledning, bör du hålla dig till att ta skärmdumpar manuellt.

Automatiserade verktyg kan inte logga in på din WordPress-adminpanel, öppna dolda rullgardinsmenyer eller lägga till exakta röda rutor och pilar för att visa en användare exakt var de ska klicka.

Till exempel, på WPBeginner tar vi alla våra skärmdumpar för backend-handledningar manuellt. Vi använder sedan dedikerade grafikappar som Adobe Photoshop eller Affinity Studio för att rensa bilderna, sudda ut känslig data och lägga till våra signaturanteckningar.

Men för publika webbplatsförhandsvisningar är automatisering absolut den bästa vägen.

Nu ska vi titta på hur du enkelt skapar automatiserade webbplatsögonblicksbilder i WordPress:

Metod 1: Använd Capture-pluginet för ögonblicksbilder och PDF

Om du vill visa dynamiskt uppdaterade webbplatsförhandsvisningar utan att behöva hantera anpassad kod, är detta den enklaste metoden.

Genom att använda ett dedikerat plugin som Capture genereras dina ögonblicksbilder automatiskt i bakgrunden. Om målsidan ändrar sin design, kommer din ögonblicksbild att uppdateras helt av sig själv för att matcha det nya utseendet.

Dessutom, eftersom pluginet hanterar bildfilerna, kommer de inte att ta upp något lagringsutrymme på din egen WordPress-server.

Även om det finns många äldre plugins för ögonblicksbilder, har de flesta övergivits. Därför rekommenderar jag starkt att använda det aktivt underhållna Capture-pluginet för att pålitligt generera dessa professionella förhandsvisningar med en enkel kortkod.

Steg 1. Installera och konfigurera Capture-pluginet

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

Efter att ha aktiverat pluginet måste du navigera till Inställningar » Capture. Här måste du klicka på länken 'Capture Console' för att skapa ett gratis konto och få en API-nyckel.

Även om detta kräver ett extra registreringssteg, säkerställer det att tjänsten förblir stabil och pålitlig jämfört med äldre, övergivna plugins.

Nedanför hittar du avsnittet Standardinställningar. Standardbredden och höjden på visningsfönstret (1200×800) fungerar perfekt för vanliga ögonblicksbilder på stationära datorer.

Jag föreslår dock att du ändrar Standardfördröjning (sekunder) till 2 eller 3 sekunder. Många moderna webbplatser har laddningsskärmar, anpassade teckensnitt eller animationer. Att lägga till en liten fördröjning ger målsidan tillräckligt med tid att laddas helt innan pluginet tar bilden.

När du är nöjd med din installation, se till att klicka på knappen 'Spara ändringar'.

Efter det rekommenderar jag starkt att du klickar på knappen 'Testa anslutningar'. Detta verifierar snabbt att din nyckel fungerar korrekt, så att du inte stöter på fel senare.

Steg 2. Skapa en ögonblicksbild med kortkod

Nu kan du enkelt lägga till en ögonblicksbild i valfritt inlägg eller sida med en enkel kortkod. Sök helt enkelt efter kortkodsblocket i blockredigeraren och klistra in en kod som denna:

[capture_screenshot url="https://wpbeginner.com" vw=1200 vh=800 full=true]

Hur visas skärmdumpen?

Till skillnad från en vanlig bild som du laddar upp till ditt mediebibliotek, genereras dessa automatiserade skärmdumpar omedelbart när en besökare laddar din sida.

Eftersom de fungerar som ett 'live-fönster' till målsidan, är detta tillvägagångssätt otroligt användbart om du driver en temakatalog, en portfölj för webbdesign eller en blogg med programvarurecensioner.

Du kan garantera att dina läsare alltid ser den mest uppdaterade versionen av målsidan, utan att du behöver lyfta ett finger för att byta ut gamla bilder.

Anpassa dina ögonblicksbilder

Capture-pluginet är otroligt flexibelt. Du kan lägga till extra parametrar till kortkoden för att ändra hur skärmdumpen ser ut:

• Hela sidan: Använd full=true för att fånga hela sidans längd.
• Mörkt läge: Använd darkMode=true för att fånga den mörka versionen av en webbplats.
• Blockera annonser: Använd blockAds=true för att dölja irriterande annonser från skärmdumpen.
• Bildformat: Använd type="webp" för att säkerställa att dina bilder är i ett lättviktigt, modernt format för snabbare laddning.

Om du till exempel ville ha en mörkt läge, helsides skärmdump i WebP-format, skulle din kortkod se ut så här:

[capture_screenshot url="https://example.com" full=true darkMode=true type="webp"]

Denna metod ger dig mycket mer kontroll än grundläggande gratisverktyg. Den är perfekt för professionella recensionssajter och portföljer.

Metod 2: Använd WPCode + mShots (Gratis alternativ)

Om du vill ha exakt samma dynamiska, utrymmesbesparande fördelar som Metod 1, men föredrar en helt gratis lösning utan att skapa extra konton, är detta metoden för dig.

Genom att lägga till en anpassad kortkod på din webbplats kan du utnyttja WordPress.com mShots API. Precis som Capture-pluginet genererar mShots live-bilder omedelbart när sidan laddas och hostar dem externt, vilket sparar din servers lagringsutrymme.

Steg 1: Lägg till ett kodavsnitt med WPCode

För att säkert lägga till denna kod rekommenderar jag starkt att använda WPCode. Det är det bästa pluginet för kodavsnitt för WordPress på marknaden. Det låter dig lägga till anpassad kod utan att någonsin redigera din temas functions.php-fil direkt.

Installera och aktivera först det kostnadsfria WPCode-pluginet. Navigera sedan till Kodavsnitt » + Lägg till avsnitt i din WordPress-instrumentpanel.

Välj ‘Lägg till din anpassade kod (ny kodsnutt)’. Ge din kodsnutt ett namn, som ‘Automatiserade skärmdumpar’, och se till att rullgardinsmenyn Kodtyp är inställd på ‘PHP-kodsnutt’.

Kopiera och klistra sedan in följande säkra kod i rutan Kodförhandsgranskning:

function wpb_automated_screenshots($atts) {
    $a = shortcode_atts( array(
        'url' => 'https://www.wpbeginner.com',
        'alt' => 'Website screenshot',
        'w'   => '600',
        'h'   => '450'
    ), $atts );

    $mshots_api = 'https://s.wordpress.com/mshots/v1/';
    $target_url = urlencode( $a['url'] );
    $width      = intval( $a['w'] );
    $height     = intval( $a['h'] );
    $alt_text   = esc_attr( $a['alt'] );

    $img_src = $mshots_api . $target_url . '?w=' . $width . '&h=' . $height;

    return '<img src="' . esc_url( $img_src ) . '" alt="' . $alt_text . '" />';
}
add_shortcode('automated_shot', 'wpb_automated_screenshots');

Skrolla ner till avsnittet Infogning och se till att det är inställt på ‘Infoga automatiskt’.

Växla sedan omkopplaren högst upp på skärmen från ‘Inaktiv’ till ‘Aktiv’ och klicka på knappen ‘Spara kodsnutt’.

Steg 2. Skapa en ögonblicksbild med kortkod

Nu, för att visa den automatiserade skärmdumpen i dina WordPress-inlägg eller sidor, lägg helt enkelt till ett Kortkodblock i innehållsredigeraren och klistra in följande kortkod:

[automated_shot url="https://example.com" alt="Exempelwebbplats" w="800" h="600"]

Se till att ersätta https://example.com med den faktiska webbplatsadressen du vill fånga. Du kan också enkelt ändra alternativtexten, bredden och höjden direkt i kortkoden.

Om din målsida uppdaterar sin design men din skärmdump fortfarande visar den gamla versionen, kan mShots API cacha bilden. Du kan enkelt tvinga den att ta en ny skärmdump genom att lägga till ett slumpmässigt nummer i slutet av din URL, så här: url="https://example.com/?v=1".

Metod 3: Använd Browse AI + Zapier för automatisk hantering

Till skillnad från de två första metoderna som visar live, externt hostade förhandsvisningar, ger den här metoden verklig automatisk hantering genom att fysiskt spara filerna direkt på din WordPress-webbplats.

Vi kommer att använda Browse AI för att automatiskt ta skärmdumpar och Zapier för att skicka dem direkt till ditt mediebibliotek. Detta ger dig fullständig kontroll över dina bilder.

Eftersom dina skärmdumpar sparas på din egen server laddas de omedelbart och stannar på din webbplats permanent, även om målsidan går offline eller helt ändrar sin design.

Steg 1: Skapa en skärmdumpsrobot i Browse AI

Gå först till Browse AI och skapa ett gratis konto.

När du har loggat in klickar du på knappen ‘Bygg ny robot’ och väljer alternativet ‘Övervaka webbplatsändringar’.

Du kommer att bli ombedd att ange URL:en för webbplatsen du vill fånga.

När du anger länken måste du klicka på knappen ‘Starta träning av robot’.

Browse AI öppnar sedan ett nytt fönster som visar den live webbplatsen.

Klicka helt enkelt på robotikonen på din skärm för att öppna menyn och välj ‘Ta skärmdump’.

En liten meny visas och frågar vilken del av sidan du vill fånga. Du kan välja 'Hela sidan' om du vill ha en fullständig skärmdump från topp till botten, eller 'Synlig del' om du bara vill ha den övre delen av webbplatsen.

Därefter kommer Browse AI att be dig att ge skärmdumpen ett namn. Du kan skriva in något lätt att komma ihåg, som 'Hemsideskärmdump' eller 'Konkurrentprissättning', och trycka på Enter.

När du är klar klickar du på den lila knappen 'Slutför' längst ner i den vänstra panelen för att avsluta inspelningen.

Browse AI kommer sedan att be dig att ge din nya robot ett namn.

Skriv in något lätt att känna igen och klicka på knappen 'Spara'.

Efter att ha sparat kan du ställa in ett schema.

Till exempel kan du tala om för roboten att automatiskt besöka webbplatsen och ta en ny skärmdump varje vecka eller månad.

När du är klar, se till att du klickar på knappen 'Spara'.

Steg 2: Förbered din WordPress-webbplats

Innan vi bygger automatiseringen behöver vi ge Zapier ett säkert sätt att kommunicera med din webbplats mediebibliotek.

Öppna en ny flik, gå till din WordPress-instrumentpanel och installera och aktivera gratispluginet Zapier for WordPress. Om du behöver hjälp, se vår guide om hur man installerar ett WordPress-plugin.

När pluginet är aktivt på din webbplats är du redo att ansluta Zapier till din WordPress-webbplats.

Steg 3: Skapa en Zap i Zapier

Därefter behöver du ansluta din robot till WordPress med hjälp av Zapier.

Först måste du logga in på ditt Zapier-konto. Från din huvudsakliga instrumentpanel klickar du på knappen '+ Skapa' i menyn längst upp till vänster och väljer 'Zaps' från rullgardinsmenyn.

När du öppnar byggaren kommer Zapier att visa en textruta där du uppmanas att beskriva din arbetsflödesuppbyggnad med hjälp av AI. Eftersom vi vill ställa in detta exakt, kan du ignorera denna uppmaning.

Titta istället precis under 'eller'-avdelaren och klicka direkt på 'Trigger'-rutan för att bygga din automatisering manuellt.

En meny kommer att dyka upp.

Sök efter och välj Browse AI som din app.

Leta efter avsnittet 'Konto' i sidofältet och klicka på knappen 'Logga in' för att säkert ansluta ditt Browse AI-konto.

När ditt konto är länkat, klicka på rutan 'Trigger Event'. Du behöver inte skriva något i sökfältet här! Titta helt enkelt precis under sökfältet och klicka på alternativet 'New Task – Instant'.

Detta fyller automatiskt i utlösarhändelsen åt dig. Därefter måste du klicka på knappen 'Fortsätt' för att gå vidare till nästa inställningsskärm, där Zapier kommer att be om lite information.

Välj först ditt konto i rullgardinsmenyn 'Team'. När du har gjort det visas ett nytt fält där du kan välja den specifika 'Robot' du skapade tidigare.

Slutligen, ställ in 'Event Type' till 'Task finished successfully' så att Zapier bara körs när en bra skärmdump tas.

Se till att du klickar på 'Fortsätt' och sedan klickar på knappen 'Test trigger'. Detta är ett nödvändigt steg eftersom det hämtar din senaste testscreenshot till Zapier så att WordPress kan använda den senare.

När ditt test är lyckat klickar du på den andra rutan i ditt arbetsflöde (åtgärdssteget) och söker efter ”WordPress” som din app.

Zapier kommer magiskt att hämta skärmdumpen från Browse AI och ladda upp den direkt till ditt WordPress mediebibliotek.

Klicka bara på knappen ”Logga in” i avsnittet Konto och ange dina WordPress-inloggningsuppgifter när popup-fönstret visas.

När din webbplats är länkad klickar du på rullgardinsmenyn ”Åtgärdshändelse”.

Sök efter och välj alternativet ”Ladda upp media” och klicka sedan på knappen ”Fortsätt” längst ner på sidan.

Nu måste du tala om för WordPress vilken fil som ska laddas upp. Klicka på knappen ”+” (Infoga data) på höger sida av rutan ”Fil”. Detta öppnar ett popup-fönster som visar en mycket lång lista med testdata som Zapier precis hämtat från Browse AI.

Eftersom listan är så lång är det enklaste sättet att hitta rätt fil att använda sökfältet högst upp i popup-fönstret. Skriv ”src” för att filtrera alternativen.

Leta efter alternativet som slutar med ”Screenshot Src” och välj det. Du kan behöva klicka på länken ”mer” för att se hela namnet på alternativet.

Du kan också fylla i fälten Titel och Alt-text om du vill, men du kan säkert lämna alla andra valfria fält (som Bildtext eller Författare) tomma.

När du är klar klickar du på ”Fortsätt” och sedan på knappen ”Testa steg”.

Zapier kommer magiskt att hämta skärmdumpen från Browse AI och ladda upp den direkt till ditt WordPress-mediebibliotek.

Om testet är lyckat, glöm inte att klicka på knappen Publicera så att din nya Zap körs automatiskt i bakgrunden.

Processen är nu helt automatiserad. Varje gång Browse AI fångar en ny bild kommer den automatiskt att visas i ditt Media » Bibliotek i WordPress, redo för dig att använda i vilket inlägg eller sida som helst.

Bonus: Hur du håller storleken på dina ögonblicksbilder konsekvent

Oavsett vilken metod du väljer ovan måste du ställa in en bredd och höjd för dina automatiserade bilder. För att hålla din blogg ren och professionell rekommenderar jag starkt att du använder ett standard bildförhållande för widescreen 16:9.

De flesta WordPress-teman har en fast maximal bredd för blogginlägg (till exempel 800 pixlar). Om du ställer in alla dina skärmdumpar för att matcha denna bredd med 16:9-förhållandet, kommer de alla automatiskt att ha exakt samma höjd.

Detta skapar ett vackert enhetligt utseende när användare scrollar genom ditt inlägg.

För att räkna ut vilka siffror du ska skriva in i ditt skärmdumpsverktyg kan du använda denna enkla matematik:

• Om du känner till din målbredd: Multiplicera helt enkelt din bredd med 9 och dividera sedan med 16 för att hitta din perfekta höjd.
• Om du känner till din målhjöd: Multiplicera helt enkelt din höjd med 16 och dividera sedan med 9 för att hitta din matchande bredd.

Till exempel, om ditt blogginläggsområde är 800 pixlar brett, skulle du multiplicera 800 med 9 och sedan dividera med 16. Detta ger dig en perfekt skalad höjd på 450.

Så du skulle helt enkelt ange dina nya siffror i dina kortkodsparametrar, som w="800" h="450".

Vanliga frågor

Jag har besvarat ganska många frågor om att automatisera webbplatsbilder. Här är några av de vanligaste frågorna folk ställer om att skapa automatiserade webbplats-skärmdumpar.

1. Hur tar jag automatiskt en skärmdump av en hel sida på en webbplats i WordPress?

För att ta en automatisk skärmdump i WordPress kan du använda ett dedikerat WordPress-plugin för skärmdumpar som Capture, integrera ett gratis bild-API som WordPress.com mShots, eller bygga en automatiseringsarbetsflöde med verktyg som Browse AI och Zapier.

Dessa verktyg hämtar automatiskt en måls webbplats offentliga URL. Beroende på vilken metod du väljer, kommer de antingen att visa en live-förhandsgranskning omedelbart eller ladda upp själva bildfilen direkt till ditt WordPress-mediebibliotek.

2. Måste jag betala för att skapa automatiserade webbplats-skärmdumpar i WordPress?

Nej, du behöver inte betala för att generera automatiserade skärmdumpar. Du kan använda helt gratis metoder, som att lägga till ett anpassat PHP-avsnitt via det kostnadsfria WPCode-pluginet för att ansluta till det kostnadsfria WordPress.com mShots API.

Dessutom erbjuder tredjeparts automatiseringsplattformar som Browse AI och Zapier gratis nivåer som tillåter webbplatsägare att ta ett begränsat antal skärmdumpar varje månad utan kostnad.

3. Kan jag använda automatiserade skärmdumpsverktyg på lokala, staging- eller privata WordPress-webbplatser?

Nej, automatiserade skärmdumps-API:er som mShots eller Capture-pluginet kräver en live, offentligt tillgänglig webbplats-URL för att fungera. Dessa externa skärmdumpsverktyg kan inte komma åt webbplatser som är hostade lokalt på en persondator (localhost).

Dessutom kan automatiserade skärmdumpsverktyg inte komma åt WordPress staging-miljöer som är dolda bakom ett lösenord, ett underhållsläges-plugin eller en brandvägg.

4. Är det säkert att använda ett tredjeparts-API för att automatisera webbplats-skärmdumpar?

Ja, att använda ansedda skärmdumps-API:er som WordPress.com mShots eller Capture-pluginet är generellt säkert för offentligt innehåll. Dessa tredjepartstjänster besöker helt enkelt en offentlig webbplats-URL och tar en bild av vad som är offentligt synligt på internet.

Men webbplatsägare bör aldrig använda tredjepartsverktyg för skärmbildsautomatisering för att fånga privata, inloggade WordPress-instrumentpaneler eller webbsidor som innehåller känsliga personuppgifter.

5. Varför visar min automatiserade WordPress.com mShots-skärmbild en tom sida?

WordPress.com mShots API kan ibland visa ett tomt utrymme första gången en specifik webbplats URL begärs.

Det beror på att mShots API tar några sekunder på sig att generera den första bilden. Om den automatiska skärmbilden är tom, löser det vanligtvis problemet att bara uppdatera WordPress-sidan. 

Eftersom mShots också cachar bilder kan du tvinga API:et att ta en ny skärmbild av webbplatsen genom att lägga till en slumpmässig versionssträng i slutet av din måladress i din WordPress-kortkod.

Ytterligare resurser för att förbättra ditt visuella innehåll

Jag hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt skapar automatiserade skärmbilder av webbplatser i WordPress. Om du vill ta din webbplats bilder och medieprestanda till nästa nivå, kanske du också vill se dessa ytterligare resurser:

• Börjarhandbok för bild-SEO – Optimera bilder för sökmotorer – Lär dig hur du korrekt namnger och taggar dina skärmbilder för att driva mer organisk söktrafik till din webbplats.
• Verktyg för att skapa bättre bilder för dina blogginlägg – Upptäck våra experttips för de bästa verktygen för att skapa engagerande grafik, annoteringar och visuellt innehåll för dina handledningar.
• Hur man optimerar bilder för webbprestanda utan kvalitetsförlust – Ta reda på hur du korrekt komprimerar dina skärmbilder och foton så att din webbplats fortsätter att laddas blixtsnabbt.
• Bästa WordPress portföljplugins för designers & fotografer – Om du använder automatiserade skärmbilder för att visa upp ditt webbdesignarbete, hjälper dessa plugins dig att visa upp dem vackert för potentiella kunder.

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