Come Creare Screenshot Automatici del Sito Web in WordPress

Aggiornare manualmente gli screenshot del sito web richiede molto tempo. Sia che tu stia creando un portfolio, una directory o recensendo software, la costante acquisizione, il ritaglio e il caricamento possono rallentare notevolmente la creazione dei tuoi contenuti.

Ho scoperto che, sebbene gli screenshot dettagliati dei tutorial richiedano ancora un tocco personale, l'automazione consente di risparmiare molto tempo per le anteprime rapide del sito web. È la chiave per mantenere il tuo sito aggiornato senza lo sforzo manuale infinito.

In questa guida, ti mostrerò tre metodi affidabili per acquisire facilmente screenshot automatici del sito web in WordPress.

Sia che tu voglia visualizzare uno screenshot di qualsiasi sito web o generare automaticamente miniature per il tuo portfolio, questi metodi ti aiuteranno a mantenere un sito professionale e aggiornato.

Perché Creare Screenshot Automatici del Sito Web in WordPress?

Se hai un sito web WordPress, aggiungere screenshot ai tuoi post offre ai lettori un modo visivo rapido per vedere di cosa tratta il tuo contenuto. Tuttavia, acquisire e ritagliare manualmente queste immagini per dozzine di collegamenti può richiedere molto tempo.

Gli screenshot automatizzati sono la soluzione perfetta per:

• Creare un portfolio di web design
• Creare una directory di temi
• Scrivere recensioni di software
• Eseguire test visivi sui propri siti

L'automazione fa risparmiare tempo e garantisce che le dimensioni delle tue immagini rimangano perfettamente coerenti. Inoltre, molti di questi strumenti ti consentono di acquisire facilmente uno screenshot dell'intera pagina automaticamente, anziché mettere insieme acquisizioni manuali.

Questa coerenza professionale aumenta il coinvolgimento degli utenti e contribuisce al SEO del tuo sito web. Immagini pertinenti e di alta qualità mantengono i visitatori più a lungo sulla tua pagina, inviando segnali positivi ai motori di ricerca.

Allo stesso modo, puoi utilizzare screenshot automatici del sito web per creare un backup visivo del tuo sito prima di aggiornare un tema o apportare modifiche significative al design. Ciò rende facile confrontare gli stili nuovi e vecchi del tuo sito web fianco a fianco.

Quando attenersi agli screenshot manuali

Ora, è importante sapere quando *non* usare l'automazione. Se stai creando un tutorial didattico, passo dopo passo, dovresti attenerti all'acquisizione manuale degli screenshot.

Gli strumenti automatizzati non possono accedere alla tua dashboard di amministrazione di WordPress, aprire menu a discesa nascosti o aggiungere caselle rosse e frecce precise per mostrare a un utente esattamente dove fare clic.

Ad esempio, su WPBeginner, acquisiamo manualmente tutti i nostri screenshot dei tutorial del backend. Utilizziamo quindi app grafiche dedicate come Adobe Photoshop o Affinity Studio per ripulire le immagini, sfocare i dati sensibili e aggiungere le nostre annotazioni distintive.

Ma per le anteprime dei siti web pubblici, l'automazione è assolutamente la strada migliore.

Ora, vediamo come creare facilmente screenshot automatizzati di siti web in WordPress:

Metodo 1: Utilizza il plugin Capture per screenshot e PDF

Se vuoi mostrare anteprime di siti web aggiornate dinamicamente senza dover gestire codice personalizzato, questo è il metodo più semplice.

Utilizzando un plugin dedicato come Capture, i tuoi screenshot vengono generati automaticamente in background. Se il sito web di destinazione cambia il suo design, il tuo screenshot si aggiornerà da solo per corrispondere al nuovo look.

Inoltre, poiché il plugin gestisce i file immagine, non occuperanno spazio sul tuo server WordPress.

Sebbene esistano molti plugin per screenshot più vecchi, la maggior parte è stata abbandonata. Per questo motivo, consiglio vivamente di utilizzare il plugin Capture, attivamente mantenuto, per generare in modo affidabile queste anteprime professionali con un semplice shortcode.

Passaggio 1. Installa e configura il plugin Capture

Innanzitutto, devi installare e attivare il plugin Capture. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Dopo aver attivato il plugin, devi navigare su Impostazioni » Capture. Qui, dovrai fare clic sul link 'Console di acquisizione' per creare un account gratuito e ottenere una chiave API.

Sebbene ciò richieda un passaggio di registrazione aggiuntivo, garantisce che il servizio rimanga stabile e affidabile rispetto ai plugin più vecchi e abbandonati.

Sotto, troverai la sezione Impostazioni predefinite. La larghezza e l'altezza predefinite della viewport (1200x800) funzionano perfettamente per gli screenshot desktop standard.

Tuttavia, suggerisco di modificare il Ritardo predefinito (secondi) a 2 o 3 secondi. Molti siti web moderni hanno schermate di caricamento, font personalizzati o animazioni. Aggiungere un leggero ritardo dà al sito web di destinazione abbastanza tempo per caricarsi completamente prima che il plugin scatti la foto.

Quando sei soddisfatto della tua configurazione, assicurati di fare clic sul pulsante Salva modifiche.

Dopodiché, consiglio vivamente di fare clic sul pulsante Test connessioni. Questo verifica rapidamente che la tua chiave funzioni correttamente, in modo da non riscontrare errori in seguito.

Passaggio 2. Crea uno screenshot utilizzando lo shortcode

Ora, puoi aggiungere facilmente uno screenshot a qualsiasi post o pagina utilizzando un semplice shortcode. Cerca semplicemente il blocco Shortcode nell'editor a blocchi e incolla un codice come questo:

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

Come appare lo screenshot?

A differenza di un'immagine standard caricata nella tua libreria multimediale, questi screenshot automatici vengono generati istantaneamente quando un visitatore carica la tua pagina.

Poiché agiscono come una 'finestra live' sul sito web di destinazione, questo approccio è incredibilmente utile se gestisci una directory di temi, un portfolio di web design o un blog di recensioni software.

Puoi garantire che i tuoi lettori vedano sempre la versione più aggiornata del sito web di destinazione, senza che tu debba fare nulla per sostituire le vecchie immagini.

Personalizzazione dei tuoi screenshot

Il plugin Capture è incredibilmente flessibile. Puoi aggiungere parametri extra allo shortcode per modificare l'aspetto dello screenshot:

• Pagina Intera: Usa full=true per catturare l'intera lunghezza della pagina.
• Modalità Scura: Usa darkMode=true per catturare la versione scura di un sito web.
• Blocca Annunci: Usa blockAds=true per nascondere pubblicità fastidiose dallo screenshot.
• Formato Immagine: Usa type="webp" per assicurarti che le tue immagini siano in un formato moderno e leggero per un caricamento più veloce.

Ad esempio, se desideri uno screenshot in modalità scura, a pagina intera e in formato WebP, il tuo shortcode dovrebbe apparire così:

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

Questo metodo ti offre molto più controllo rispetto ai semplici strumenti gratuiti. È perfetto per siti di recensioni professionali e portfolio.

Metodo 2: Usa WPCode + mShots (Opzione Gratuita)

Se desideri gli stessi benefici dinamici e di risparmio di spazio del Metodo 1, ma preferisci una soluzione completamente gratuita senza creare account aggiuntivi, questo è il metodo che fa per te.

Aggiungendo uno shortcode personalizzato al tuo sito, puoi accedere all'API mShots di WordPress.com. Proprio come il plugin Capture, mShots genera immagini live istantaneamente al caricamento della pagina e le ospita esternamente, risparmiando spazio sul tuo server.

Passaggio 1: Aggiungi uno snippet di codice usando WPCode

Per aggiungere in sicurezza questo codice, consiglio vivamente di utilizzare WPCode. È il miglior plugin per snippet di codice di WordPress sul mercato. Ti consente di aggiungere codice personalizzato senza dover modificare direttamente il file functions.php del tuo tema.

Per prima cosa, installa e attiva il plugin gratuito WPCode. Quindi, naviga su Snippet di codice » + Aggiungi snippet nella tua bacheca di WordPress.

Seleziona ‘Aggiungi il tuo codice personalizzato (Nuovo snippet)’. Dai un nome al tuo snippet, ad esempio ‘Screenshot automatici’, e assicurati che il menu a discesa Tipo di codice sia impostato su ‘Snippet PHP’.

Successivamente, copia e incolla il seguente codice sicuro nella casella di anteprima del codice:

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

Scorri verso il basso fino alla sezione Inserimento e assicurati che sia impostata su ‘Inserimento automatico’.

Quindi, attiva l'interruttore in cima allo schermo da ‘Inattivo’ ad ‘Attivo’ e fai clic sul pulsante ‘Salva snippet’.

Passaggio 2. Crea uno screenshot utilizzando lo shortcode

Ora, per visualizzare lo screenshot automatico nei tuoi post o pagine WordPress, aggiungi semplicemente un blocco Shortcode all'editor dei contenuti e incolla il seguente shortcode:

[automated_shot url="https://example.com" alt="Sito Web di esempio" w="800" h="600"]

Assicurati di sostituire https://example.com con l'URL effettivo del sito web che desideri acquisire. Puoi anche cambiare facilmente il testo alternativo, la larghezza e l'altezza direttamente all'interno dello shortcode.

Se il tuo sito web di destinazione aggiorna il suo design ma il tuo screenshot mostra ancora la vecchia versione, l'API mShots potrebbe memorizzare nella cache l'immagine. Puoi forzarla facilmente a eseguire uno screenshot aggiornato aggiungendo un numero casuale alla fine del tuo URL, in questo modo: url="https://example.com/?v=1".

Metodo 3: Utilizza Browse AI + Zapier per l'automazione senza intervento manuale

A differenza dei primi due metodi che visualizzano anteprime live ospitate esternamente, questo metodo fornisce una vera automazione senza intervento manuale salvando fisicamente i file direttamente sul tuo sito WordPress.

Utilizzeremo Browse AI per acquisire automaticamente gli screenshot e Zapier per inviarli direttamente nella tua Libreria multimediale. Questo ti dà il controllo completo sulle tue immagini.

Poiché i tuoi screenshot vengono salvati sul tuo server, verranno caricati istantaneamente e rimarranno sul tuo sito in modo permanente, anche se il sito web di destinazione va offline o cambia completamente il suo design.

Passaggio 1: Crea un robot per screenshot in Browse AI

Innanzitutto, vai su Browse AI e crea un account gratuito.

Una volta effettuato l'accesso, fai clic sul pulsante ‘Costruisci nuovo robot’ e seleziona l'opzione ‘Monitora modifiche del sito’.

Ti verrà chiesto di inserire l'URL del sito web che desideri acquisire.

Una volta inserito il link, dovrai fare clic sul pulsante ‘Avvia addestramento robot’.

Browse AI aprirà quindi una nuova finestra che mostra quel sito web live.

Fai semplicemente clic sull'icona del robot sul tuo schermo per aprire il menu e seleziona ‘Acquisisci screenshot’.

Apparirà un piccolo menu che ti chiederà quale parte della pagina vuoi acquisire. Puoi selezionare 'Pagina intera' se desideri uno screenshot completo, dall'alto verso il basso, o 'Parte visibile' se desideri solo la sezione superiore del sito web.

Successivamente, Browse AI ti chiederà di dare un nome allo screenshot. Puoi digitare qualcosa di facile da ricordare, come 'Screenshot Homepage' o 'Prezzi concorrenti', e premere Invio.

Una volta terminato, fai clic sul pulsante viola 'Fine' in fondo al pannello di sinistra per terminare la registrazione.

Browse AI ti chiederà quindi di dare un nome al tuo nuovo robot.

Digita qualcosa di facile da riconoscere e fai clic sul pulsante 'Salva'.

Dopo aver salvato, puoi impostare una pianificazione.

Ad esempio, puoi dire al robot di visitare automaticamente il sito e acquisire uno screenshot aggiornato ogni settimana o mese.

Una volta terminato, assicurati di fare clic sul pulsante 'Salva'.

Passaggio 2: Prepara il tuo sito WordPress

Prima di creare l'automazione, dobbiamo fornire a Zapier un modo sicuro per comunicare con la Libreria multimediale del tuo sito web.

In una nuova scheda, vai alla tua dashboard di WordPress e installa e attiva il plugin gratuito Zapier for WordPress. Se hai bisogno di aiuto, consulta la nostra guida su come installare un plugin di WordPress.

Una volta che il plugin è attivo sul tuo sito, sei pronto per connettere Zapier al tuo sito WordPress.

Passaggio 3: Crea uno Zap in Zapier

Successivamente, devi connettere il tuo robot a WordPress utilizzando Zapier.

Innanzitutto, devi accedere al tuo account Zapier. Dalla tua dashboard principale, fai clic sul pulsante '+ Crea' nel menu in alto a sinistra e seleziona 'Zaps' dal menu a discesa.

Quando apri il builder, Zapier mostrerà una casella di testo che ti chiederà di descrivere il tuo flusso di lavoro e crearlo usando l'IA. Poiché vogliamo impostarlo con precisione, puoi ignorare questo prompt.

Invece, guarda appena sotto il divisore 'o' e fai clic direttamente sulla casella 'Trigger' per creare la tua automazione manualmente.

Apparirà un menu.

Cerca e seleziona Browse AI come tua app.

Cerca la sezione 'Account' nella barra laterale e fai clic sul pulsante 'Accedi' per connettere in modo sicuro il tuo account Browse AI.

Una volta collegato il tuo account, fai clic sulla casella 'Trigger Event'. Non è necessario digitare nulla nel campo di ricerca qui! Guarda semplicemente sotto la barra di ricerca e fai clic sull'opzione 'New Task – Instant'.

Questo riempirà automaticamente l'evento trigger per te. Successivamente, devi fare clic sul pulsante 'Continua' per passare alla schermata di configurazione successiva, dove Zapier richiederà alcuni dettagli.

Innanzitutto, seleziona il tuo account nel menu a discesa 'Team'. Una volta fatto ciò, apparirà un nuovo campo in cui potrai selezionare il 'Robot' specifico che hai creato in precedenza.

Infine, imposta l''Event Type' su 'Task finished successfully' in modo che Zapier venga eseguito solo quando viene acquisito uno screenshot valido.

Assicurati di fare clic su 'Continua' e poi fai clic sul pulsante 'Test trigger'. Questo è un passaggio necessario perché estrae il tuo screenshot di test recente in Zapier in modo che WordPress possa utilizzarlo in seguito.

Una volta che il tuo test ha avuto successo, fai clic sulla seconda casella nel tuo flusso di lavoro (il passaggio Azione) e cerca 'WordPress' come tua app.

Poiché hai già installato il plugin nel passaggio 2, collegare il tuo sito a Zapier è semplice.

Fai semplicemente clic sul pulsante 'Accedi' nella sezione Account e inserisci le tue credenziali di accesso di WordPress quando appare la finestra popup.

Dopo che il tuo sito Web è stato collegato, fai clic sul menu a discesa 'Evento Azione'.

Cerca e seleziona l'opzione 'Carica Media', quindi fai clic sul pulsante 'Continua' in fondo alla pagina.

Ora, devi dire a WordPress quale file caricare. Fai clic sul pulsante '+' (Inserisci Dati) sul lato destro della casella 'File'. Questo aprirà una finestra popup che mostra un elenco molto lungo di dati di test che Zapier ha appena estratto da Browse AI.

Poiché l'elenco è così lungo, il modo più semplice per trovare il file giusto è utilizzare la barra di ricerca in cima alla finestra popup. Digita 'src' per filtrare le opzioni.

Cerca l'opzione che termina con 'Screenshot Src' e selezionala. Potrebbe essere necessario fare clic sul collegamento 'altro' per vedere il nome completo dell'opzione.

Puoi anche compilare i campi Titolo e Testo alternativo se lo desideri, ma puoi tranquillamente lasciare vuoti tutti gli altri campi opzionali (come Didascalia o Autore).

Una volta terminato, fai clic su 'Continua' e quindi fai clic sul pulsante 'Testa passaggio'.

Zapier estrarrà magicamente lo screenshot da Browse AI e lo caricherà direttamente nella tua Libreria Media di WordPress.

Se il test ha successo, non dimenticare di fare clic sul pulsante Pubblica in modo che il tuo nuovo Zap venga eseguito automaticamente in background.

Il processo è ora completamente automatizzato. Ogni volta che Browse AI acquisisce una nuova immagine, apparirà automaticamente nella tua Media » Libreria in WordPress, pronta per essere utilizzata in qualsiasi post o pagina.

Bonus: Come mantenere coerenti le dimensioni degli screenshot

Indipendentemente dal metodo scelto sopra, dovrai impostare una larghezza e un'altezza per le tue immagini automatizzate. Per mantenere il tuo blog pulito e professionale, consiglio vivamente di utilizzare un rapporto d'aspetto standard widescreen 16:9.

La maggior parte dei temi WordPress ha una larghezza massima fissa per i post del blog (ad esempio, 800 pixel). Se imposti tutti i tuoi screenshot per adattarli a questa larghezza utilizzando il rapporto 16:9, avranno tutti automaticamente la stessa identica altezza.

Ciò crea un aspetto uniformemente gradevole mentre gli utenti scorrono il tuo articolo.

Per capire quali numeri inserire nel tuo strumento per screenshot, puoi usare questa semplice matematica:

• Se conosci la larghezza desiderata: Moltiplica semplicemente la tua larghezza per 9, e poi dividila per 16 per trovare la tua altezza perfetta.
• Se conosci l'altezza desiderata: Moltiplica semplicemente la tua altezza per 16, e poi dividila per 9 per trovare la larghezza corrispondente.

Ad esempio, se l'area dei contenuti del tuo blog è larga 800 pixel, dovresti moltiplicare 800 per 9 e poi dividere per 16. Questo ti darà un'altezza perfettamente proporzionata di 450.

Quindi, dovresti semplicemente inserire i tuoi nuovi numeri nei parametri del tuo shortcode, come w="800" h="450".

Domande frequenti

Ho risposto a diverse domande sull'automazione delle immagini del sito web. Ecco alcune delle domande più comuni che le persone pongono sulla creazione di screenshot automatizzati del sito web.

1. Come posso acquisire automaticamente uno screenshot a pagina intera di un sito web in WordPress?

Per acquisire uno screenshot automatico in WordPress, puoi utilizzare un plugin dedicato per screenshot di WordPress come Capture, integrare un'API gratuita per immagini come mShots di WordPress.com, o costruire un flusso di lavoro di automazione utilizzando strumenti come Browse AI e Zapier.

Questi strumenti recuperano automaticamente l'URL pubblico di un sito web di destinazione. A seconda del metodo scelto, visualizzeranno immediatamente un'anteprima live o caricheranno il file immagine effettivo direttamente nella tua Libreria multimediale di WordPress.

2. Devo pagare per creare screenshot automatizzati del sito web in WordPress?

No, non devi pagare per generare screenshot automatizzati. Puoi utilizzare metodi completamente gratuiti, come l'aggiunta di uno snippet PHP personalizzato tramite il plugin gratuito WPCode per connetterti all'API gratuita mShots di WordPress.com.

Inoltre, piattaforme di automazione di terze parti come Browse AI e Zapier offrono piani gratuiti che consentono ai proprietari di siti web di acquisire un numero limitato di screenshot ogni mese senza costi.

3. Posso utilizzare strumenti di screenshot automatizzati su siti WordPress locali, di staging o privati?

No, le API per screenshot automatizzati come mShots o il plugin Capture richiedono un URL del sito web live e accessibile pubblicamente per funzionare. Questi strumenti esterni per screenshot non possono accedere a siti web ospitati localmente su un computer personale (localhost).

Inoltre, gli strumenti di screenshot automatizzati non possono accedere ad ambienti di staging WordPress che sono nascosti dietro una password, un plugin di modalità di manutenzione o un firewall.

4. È sicuro utilizzare un'API di terze parti per automatizzare gli screenshot del sito web?

Sì, l'utilizzo di API per screenshot affidabili come mShots di WordPress.com o il plugin Capture è generalmente sicuro per i contenuti pubblici. Questi servizi di terze parti visitano semplicemente un URL di sito web pubblico e scattano un'immagine di ciò che è visibile pubblicamente su Internet.

Tuttavia, i proprietari di siti web non dovrebbero mai utilizzare strumenti di automazione di screenshot di terze parti per acquisire pagine private di bacheca di WordPress a cui si è effettuato l'accesso o pagine web contenenti dati personali sensibili.

5. Perché lo screenshot automatico mShots di WordPress.com mostra una pagina vuota?

L'API mShots di WordPress.com potrebbe occasionalmente mostrare uno spazio vuoto la prima volta che viene richiesta una specifica URL del sito web.

Ciò è dovuto al fatto che l'API mShots impiega alcuni secondi per generare l'immagine iniziale. Se lo screenshot automatico è vuoto, il semplice aggiornamento della pagina di WordPress di solito risolve il problema. 

Poiché mShots memorizza anche le immagini nella cache, è possibile forzare l'API a creare uno screenshot fresco del sito web aggiungendo una stringa di versione casuale alla fine dell'URL di destinazione nel tuo shortcode di WordPress.

Risorse aggiuntive per migliorare i tuoi contenuti visivi

Spero che questo articolo ti abbia aiutato a imparare come creare facilmente screenshot automatici del sito web in WordPress. Se vuoi portare le immagini e le prestazioni multimediali del tuo sito web al livello successivo, potresti anche voler consultare queste risorse aggiuntive:

• Guida per principianti alla SEO delle immagini – Ottimizza le immagini per i motori di ricerca – Scopri come nominare e taggare correttamente i tuoi screenshot per generare più traffico organico verso il tuo sito.
• Strumenti per creare immagini migliori per i tuoi post del blog – Scopri le nostre scelte di esperti per i migliori strumenti per creare grafiche accattivanti, annotazioni e contenuti visivi per i tuoi tutorial.
• Come ottimizzare le immagini per le prestazioni web senza perdere qualità – Scopri come comprimere correttamente i tuoi screenshot e le tue foto in modo che il tuo sito web continui a caricarsi velocemente.
• I migliori plugin per portfolio WordPress per designer e fotografi – Se stai utilizzando screenshot automatici per mostrare il tuo lavoro di web design, questi plugin ti aiuteranno a visualizzarli magnificamente ai potenziali clienti.

Se ti è piaciuto questo articolo, iscriviti al nostro Canale YouTube per tutorial video su WordPress. Puoi trovarci anche su Twitter e Facebook.