Come Creare Screenshot Automatici del Sito Web in WordPress

Scattare screenshot per un tutorial può sembrare un compito infinito. Devi acquisire, ritagliare, annotare e caricare ogni immagine, ripetendo il processo più e più volte.

Conosciamo bene questa lotta avendola vissuta creando le nostre guide qui su WPBeginner. È un enorme spreco di tempo che può rallentare notevolmente il tuo flusso di lavoro di creazione di contenuti.

La buona notizia è che puoi automatizzare l'intero processo. Questo non solo ti fa risparmiare tempo prezioso, ma aiuta anche a mantenere il tuo sito dall'aspetto professionale e coerente.

In questo articolo, ti mostreremo come creare facilmente screenshot automatici del sito web in WordPress.

Perché Creare Screenshot Automatici del Sito Web in WordPress?

Se hai un sito web WordPress, potresti voler creare e aggiungere screenshot automatici del sito ai tuoi post per offrire ai potenziali lettori un modo rapido per vedere di cosa tratta il tuo contenuto.

Questo può aumentare l'engagement degli utenti e contribuire al SEO del tuo sito web. Immagini pertinenti e di alta qualità aiutano i motori di ricerca a comprendere meglio il tuo contenuto e possono migliorare i segnali di engagement dei visitatori come il tempo sulla pagina.

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 altre modifiche. Questo può aiutarti a confrontare e vedere la differenza tra i nuovi e i vecchi stili del tuo sito web.

Gli screenshot automatici possono anche confrontare diversi servizi o siti web, guidare il lettore attraverso un tutorial passo-passo e monitorare i progressi del sito web nel tempo.

Detto questo, diamo un'occhiata a come creare facilmente screenshot automatici di siti web in WordPress:

• Metodo 1: Crea screenshot automatici di siti web in WordPress utilizzando un plugin
• Metodo 2: Crea screenshot automatici aggiungendo codice a WordPress
• Bonus: Scatta screenshot manualmente per il tuo sito web
• Domande frequenti
• Risorse aggiuntive

Metodo 1: Crea screenshot automatici di siti web in WordPress utilizzando un plugin

Questo metodo è più semplice e quindi consigliato ai principianti e agli utenti che non vogliono avere a che fare con il codice.

Innanzitutto, è necessario installare e attivare il plugin Browser Screenshots. Per maggiori dettagli, consulta la nostra guida passo-passo su come installare un plugin di WordPress.

Importante: Si prega di notare che al momento della scrittura, questo plugin non è stato aggiornato da molto tempo. Sebbene possa ancora funzionare, potrebbe comportare un rischio di compatibilità o sicurezza. Si consiglia di testarlo prima su un sito di staging e di assicurarsi sempre di avere un backup completo di WordPress prima di installarlo.

Dopo l'attivazione, il plugin funzionerà immediatamente e non ci sono impostazioni da configurare.

Ora, visita semplicemente una pagina o un post in cui desideri aggiungere uno screenshot automatico del sito web dalla barra laterale di amministrazione di WordPress.

Qui, fai clic sul pulsante 'Aggiungi blocco' (+) nell'angolo in alto a sinistra dello schermo per aprire il menu dei blocchi. Successivamente, aggiungi il blocco 'Browser Shots' nell'editor.

Una volta fatto ciò, aggiungi l'URL del sito web per il quale desideri acquisire uno screenshot automatico e fai clic sul pulsante 'Carica immagine'.

Il plugin aggiungerà ora automaticamente uno screenshot per il sito web che hai scelto. Puoi aggiungere un testo alternativo per l'immagine e modificarne larghezza e altezza dal pannello del blocco sulla destra.

L'attivazione dell'interruttore 'Usa link' nel pannello ti consente di aggiungere un link allo screenshot che ti indirizza al sito web.

Puoi anche attivare l'interruttore 'Collega al post corrente' se desideri aggiungere il link del post allo screenshot.

Infine, fai clic sul pulsante 'Aggiorna' o 'Pubblica' per salvare le tue impostazioni.

Ora puoi visitare il tuo sito WordPress per visualizzare lo screenshot automatico.

Nota: Il plugin Browser Shots utilizza l'API mshots di WordPress.com per generare screenshot al volo. Queste immagini non vengono archiviate nella libreria multimediale di WordPress. Vengono servite direttamente dai server di WordPress.com. Consulta la nostra guida sulla differenza tra WordPress.com e WordPress.org.

Metodo 2: Crea screenshot automatici aggiungendo codice a WordPress

Questo metodo richiede l'aggiunta di codice ai tuoi file WordPress. Per creare screenshot automatici, devi aggiungere codice personalizzato al file functions.php del tuo tema.

Tuttavia, ricorda che il più piccolo errore nel codice può compromettere il tuo sito e renderlo inaccessibile.

Ecco perché consigliamo di utilizzare WPCode. È il miglior plugin per snippet di codice WordPress sul mercato, che rende super sicuro e facile aggiungere codice personalizzato.

Suggerimento esperto: Su WPBeginner, utilizziamo WPCode per gestire tutti gli snippet di codice personalizzato nel nostro portafoglio di siti web. Permette al nostro team di sviluppo di aggiungere e organizzare il codice in modo sicuro senza dover mai modificare direttamente il file functions.php del tema.

Innanzitutto, devi installare e attivare il plugin WPCode. Per istruzioni dettagliate, consulta la nostra guida passo passo su come installare un plugin WordPress.

Dopo l'attivazione, visita la pagina Snippet di codice » + Aggiungi snippet dalla dashboard di WordPress.

Una volta lì, fai clic sul pulsante ‘Usa Snippet’ sotto l'opzione ‘Aggiungi il tuo codice personalizzato (Nuovo Snippet)’.

Verrai ora portato alla pagina ‘Crea Snippet Personalizzato’, dove puoi iniziare digitando un nome per il tuo snippet. Il nome può essere qualsiasi cosa che ti aiuti a identificare il codice.

Successivamente, seleziona ‘Snippet PHP’ come tipo di codice dal menu a discesa sulla destra.

Dopodiché, copia e incolla semplicemente il seguente codice nella casella ‘Anteprima Codice’:

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

Simile al plugin che abbiamo menzionato in precedenza, anche questo codice utilizza l'API Mshots di WordPress.com per generare screenshot al volo.

Ora, puoi aggiungere l'URL del sito web di cui desideri acquisire screenshot automatizzati accanto alla riga "url" =$gt; nel codice.

Puoi anche aggiungere la larghezza e l'altezza preferite per gli screenshot accanto alle righe "w" => e "h"=> nel codice.

Successivamente, scorri verso il basso fino alla sezione ‘Inserimento’ e scegli la modalità ‘Inserimento Automatico’.

Il codice verrà ora eseguito automaticamente all'attivazione.

Infine, scorri di nuovo verso l'alto della pagina e imposta l'interruttore ‘Inattivo’ su ‘Attivo’.

Successivamente, fai clic sul pulsante ‘Salva Snippet’ per memorizzare le tue impostazioni e attivare lo snippet.

Ora, per visualizzare uno screenshot di un sito web nei tuoi post e pagine di WordPress, dovrai inserire lo shortcode in questo modo:

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

Puoi sostituire i campi URL e Alt con i tuoi valori.

Per prima cosa, apri la pagina/post nell'editor a blocchi dalla dashboard di WordPress e fai clic sul pulsante ‘Aggiungi Blocco’ (+).

Da qui, aggiungi il blocco ‘Shortcode’ alla pagina/post. Quindi, aggiungi lo shortcode sopra e sostituiscilo con i tuoi valori.

Infine, fai clic sul pulsante ‘Aggiorna’ o ‘Pubblica’ per memorizzare le tue impostazioni.

Ora, visita il tuo sito WordPress per visualizzare lo screenshot automatizzato in azione.

Bonus: Scatta screenshot manualmente per il tuo sito web

Se non desideri utilizzare screenshot automatizzati, puoi acquisire screenshot manualmente con diversi strumenti come Droplr.

Questo ti dà maggiore libertà di scegliere un'area specifica per un'immagine rispetto agli screenshot automatici. Inoltre, puoi modificare queste immagini in Adobe Photoshop e aggiungere altri elementi come frecce o riquadri rossi.

Questa funzionalità non è disponibile per gli screenshot automatici in cui plugin o codice recuperano automaticamente l'immagine per te.

Per acquisire uno screenshot con Droplr, devi prima installare l'app sul tuo computer. Una volta fatto ciò, fai clic sull'icona di Droplr nella barra delle applicazioni di Windows o Mac e seleziona l'opzione 'Screenshot'.

Successivamente, puoi selezionare l'area in cui desideri acquisire lo screenshot.

Droplr aprirà quindi l'immagine in un browser dove potrai scaricarla o condividerne il link con altri. Per maggiori informazioni, consulta il nostro tutorial su come fare uno screenshot in WordPress.

Domande frequenti

Ecco alcune delle domande più frequenti che ci vengono poste sulla creazione di screenshot automatici in WordPress.

Gli screenshot automatici sono validi quanto quelli manuali?

Dipende dalle tue esigenze. Gli screenshot automatici sono eccellenti per velocità e coerenza, ma quelli manuali ti danno più controllo. Con le acquisizioni manuali, puoi selezionare aree specifiche, aggiungere annotazioni come frecce o testo e ottimizzare l'immagine prima di caricarla.

L'uso di screenshot automatici rallenterà il mio sito web?

No, non dovrebbero influire sulle prestazioni del tuo sito. I metodi descritti in questo articolo utilizzano un servizio esterno da WordPress.com per generare le immagini. Ciò significa che le immagini vengono caricate dai loro server, non dai tuoi, il che evita un carico aggiuntivo sul tuo hosting.

Posso personalizzare l'aspetto degli screenshot automatici?

La personalizzazione è limitata. Di solito puoi definire la larghezza e l'altezza dello screenshot. Tuttavia, non puoi aggiungere annotazioni, effetti o ritagliare una parte specifica della pagina come potresti fare con uno strumento di modifica manuale degli screenshot.

Gli screenshot vengono salvati nella mia libreria multimediale di WordPress?

No, gli screenshot vengono generati al momento e non vengono archiviati nella tua libreria multimediale. Questo aiuta a risparmiare spazio di archiviazione sul tuo account di hosting, poiché le immagini vengono servite direttamente dai server di WordPress.com.

Perché il mio screenshot automatico non viene visualizzato?

Il servizio WordPress.com che genera questi screenshot funziona benissimo per siti web live e pubblici. Tuttavia, potrebbe non essere in grado di acquisire screenshot di siti web che si trovano su un computer locale (localhost), protetti da password o dietro determinati firewall. Potrebbe anche non renderizzare perfettamente pagine che utilizzano animazioni complesse o richiedono l'interazione dell'utente per visualizzare contenuti.

Risorse aggiuntive

Ora che sai come automatizzare gli screenshot dei siti web, potresti anche voler consultare queste altre guide utili:

• Guida per principianti all'ottimizzazione delle immagini per i motori di ricerca – Scopri come ottimizzare correttamente le tue immagini per i motori di ricerca per ottenere più traffico sul tuo sito.
• Strumenti per creare immagini migliori per i tuoi post del blog – Dai un'occhiata alle nostre scelte di esperti per i migliori strumenti per creare immagini più coinvolgenti per i tuoi articoli.

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