Cum să creezi capturi de ecran automate ale site-ului web în WordPress

Actualizarea manuală a capturilor de ecran ale site-ului web consumă mult timp. Indiferent dacă construiți un portofoliu, creați un director sau revizuiți software, capturarea, decuparea și încărcarea constantă pot încetini semnificativ crearea conținutului dvs.

Am constatat că, deși capturile de ecran detaliate pentru tutoriale necesită în continuare o notă personală, automatizarea economisește enorm de mult timp pentru previzualizări rapide ale site-urilor web. Este cheia pentru a vă menține site-ul proaspăt, fără efortul manual nesfârșit.

În acest ghid, vă voi arăta trei metode fiabile pentru a face cu ușurință capturi de ecran automate ale site-urilor web în WordPress.

Indiferent dacă doriți să afișați o captură de ecran a oricărui site web sau să generați automat miniaturi pentru portofoliul dvs., aceste metode vă vor ajuta să mențineți un site profesional și actualizat.

De ce să creați capturi de ecran automate ale site-urilor web în WordPress?

Dacă aveți un site web WordPress, adăugarea de capturi de ecran la postările dvs. oferă cititorilor o modalitate vizuală rapidă de a vedea despre ce este vorba în conținutul dvs. Cu toate acestea, realizarea și decuparea manuală a acestor imagini pentru zeci de linkuri poate dura mult timp.

Capturile de ecran automate sunt soluția perfectă pentru:

• Construirea unui portofoliu de web design
• Crearea unui director de teme
• Scrierea de recenzii de software
• Efectuarea de teste vizuale pe propriile site-uri

Automatizarea economisește timp și garantează că dimensiunile imaginilor dvs. rămân perfect consistente. În plus, multe dintre aceste instrumente vă permit să capturați cu ușurință o captură de ecran completă a paginii automat, mai degrabă decât să compuneți capturi manuale.

Această consistență profesională stimulează implicarea utilizatorilor și contribuie la SEO-ul site-ului dvs. Imaginile relevante și de înaltă calitate mențin vizitatorii pe pagina dvs. mai mult timp, ceea ce trimite semnale pozitive motoarelor de căutare.

Similar, puteți utiliza capturi de ecran automate ale site-urilor web pentru a crea o copie de rezervă vizuală a site-ului dvs. înainte de a actualiza o temă sau de a face modificări majore de design. Acest lucru face ușor să comparați stilurile noi și vechi ale site-ului dvs. unul lângă altul.

Când să vă limitați la capturi de ecran manuale

Acum, este important să știți când să nu folosiți automatizarea. Dacă creați un tutorial instrucțional, pas cu pas, atunci ar trebui să vă limitați la realizarea manuală a capturilor de ecran.

Instrumentele automate nu se pot autentifica în tabloul de bord de administrare WordPress, nu pot deschide meniuri derulante ascunse și nu pot adăuga casete roșii și săgeți precise pentru a arăta unui utilizator exact unde să facă clic.

De exemplu, la WPBeginner, realizăm manual toate capturile de ecran ale tutorialelor noastre din backend. Apoi folosim aplicații grafice dedicate precum Adobe Photoshop sau Affinity Studio pentru a curăța imaginile, a estompa datele sensibile și a adăuga adnotările noastre specifice.

Dar pentru previzualizări de site-uri web publice, automatizarea este absolut cea mai bună cale.

Acum, să vedem cum să creăm cu ușurință capturi de ecran automate ale site-urilor web în WordPress:

Metoda 1: Utilizați pluginul Capture pentru capturi de ecran și PDF

Dacă doriți să afișați previzualizări dinamice actualizate ale site-urilor web fără a vă ocupa de cod personalizat, atunci aceasta este cea mai ușoară metodă.

Folosind un plugin dedicat precum Capture, capturile dvs. de ecran sunt generate automat în fundal. Dacă site-ul web țintă își schimbă designul, captura dvs. de ecran se va actualiza singură pentru a se potrivi noului aspect.

În plus, deoarece pluginul gestionează fișierele imagine, acestea nu vor ocupa spațiu de stocare pe propriul server WordPress.

Deși există multe pluginuri mai vechi pentru capturi de ecran, majoritatea au fost abandonate. Din acest motiv, recomand cu tărie utilizarea pluginului Capture, menținut activ, pentru a genera în mod fiabil aceste previzualizări profesionale cu un simplu shortcode.

Pasul 1. Instalați și configurați pluginul Capture

Mai întâi, trebuie să instalați și să activați pluginul Capture. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

După activarea pluginului, trebuie să navigați la Setări » Capture. Aici, va trebui să faceți clic pe linkul „Consola Capture” pentru a crea un cont gratuit și a obține o cheie API.

Deși acest lucru necesită un pas suplimentar de înregistrare, asigură că serviciul rămâne stabil și fiabil în comparație cu pluginurile mai vechi, abandonate.

Sub aceasta, veți găsi secțiunea Setări implicite. Lățimea și înălțimea implicită a viewport-ului (1200×800) funcționează perfect pentru capturile de ecran standard de desktop.

Cu toate acestea, sugerez să schimbați Întârzierea implicită (secunde) la 2 sau 3 secunde. Multe site-uri web moderne au ecrane de încărcare, fonturi personalizate sau animații. Adăugarea unei mici întârzieri oferă site-ului web țintă suficient timp pentru a se încărca complet înainte ca pluginul să facă captura.

Când sunteți mulțumit de configurarea dvs., asigurați-vă că faceți clic pe butonul Salvare modificări.

După aceea, recomand cu tărie să faceți clic pe butonul Testare conexiuni. Acest lucru verifică rapid dacă cheia dvs. funcționează corect, astfel încât să nu întâmpinați erori mai târziu.

Pasul 2. Creați o captură de ecran folosind Shortcode

Acum, puteți adăuga cu ușurință o captură de ecran la orice postare sau pagină folosind un shortcode simplu. Pur și simplu căutați blocul Shortcode în editorul de blocuri și lipiți un cod de genul acesta:

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

Cum apare screenshot-ul?

Spre deosebire de o imagine standard pe care o încărcați în biblioteca media, aceste screenshot-uri automate sunt generate instantaneu atunci când un vizitator încarcă pagina dvs.

Deoarece acționează ca o „fereastră live” către site-ul web țintă, această abordare este incredibil de utilă dacă gestionați un director de teme, un portofoliu de design web sau un blog de recenzii software.

Puteți garanta că cititorii dvs. văd întotdeauna cea mai actualizată versiune a site-ului web țintă, fără ca dvs. să depuneți niciun efort pentru a înlocui imaginile vechi.

Personalizarea capturilor de ecran

Pluginul Capture este incredibil de flexibil. Puteți adăuga parametri suplimentari la shortcode pentru a schimba modul în care arată screenshot-ul:

• Pagină completă: Utilizați full=true pentru a captura întreaga lungime a paginii.
• Mod întunecat: Utilizați darkMode=true pentru a captura versiunea întunecată a unui site web.
• Blocare reclame: Utilizați blockAds=true pentru a ascunde reclamele enervante din screenshot.
• Format imagine: Utilizați type="webp" pentru a vă asigura că imaginile dvs. sunt într-un format modern și ușor pentru încărcare mai rapidă.

De exemplu, dacă doriți un screenshot în mod întunecat, pe pagină întreagă, în format WebP, shortcode-ul dvs. ar arăta astfel:

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

Această metodă vă oferă mult mai mult control decât instrumentele gratuite de bază. Este perfectă pentru site-urile profesionale de recenzii și portofolii.

Metoda 2: Utilizați WPCode + mShots (Opțiune gratuită)

Dacă doriți aceleași beneficii dinamice, economice de spațiu ca și Metoda 1, dar preferați o soluție complet gratuită, fără a crea conturi suplimentare, aceasta este metoda pentru dvs.

Adăugând un snippet de cod personalizat pe site-ul dvs., puteți accesa API-ul mShots de pe WordPress.com. La fel ca pluginul Capture, mShots generează imagini live instantaneu la încărcarea paginii și le găzduiește extern, economisind spațiul de stocare al serverului dvs.

Pasul 1: Adăugați un snippet de cod folosind WPCode

Pentru a adăuga în siguranță acest cod, recomand cu tărie utilizarea WPCode. Este cel mai bun plugin de snippets de cod pentru WordPress de pe piață. Vă permite să adăugați cod personalizat fără a edita direct fișierul functions.php al temei dvs.

Mai întâi, instalați și activați pluginul gratuit WPCode. Apoi, navigați la Code Snippets » + Add Snippet în tabloul de bord WordPress.

Selectați „Adăugați codul personalizat (Fragment nou)”. Denumiți fragmentul, de exemplu „Capturi de ecran automate” și asigurați-vă că meniul derulant Tip cod este setat la „Fragment PHP”.

Apoi, copiați și lipiți următorul cod securizat în caseta Previzualizare cod:

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

Derulați în jos la secțiunea Inserare și asigurați-vă că este setată la „Inserare automată”.

Apoi, comutați comutatorul din partea de sus a ecranului de la „Inactiv” la „Activ” și faceți clic pe butonul „Salvare fragment”.

Pasul 2. Creați o captură de ecran folosind Shortcode

Acum, pentru a afișa captura de ecran automată în postările sau paginile dvs. WordPress, pur și simplu adăugați un bloc Shortcode în editorul de conținut și lipiți următorul shortcode:

[automated_shot url="https://example.com" alt="Exemplu de site web" w="800" h="600"]

Asigurați-vă că înlocuiți https://example.com cu adresa URL reală a site-ului web pe care doriți să o capturați. De asemenea, puteți modifica cu ușurință textul alternativ, lățimea și înălțimea chiar în shortcode.

Dacă site-ul web țintă își actualizează designul, dar captura de ecran afișează în continuare versiunea veche, API-ul mShots ar putea să pună în cache imaginea. Puteți forța cu ușurință să facă o captură de ecran nouă, adăugând un număr aleatoriu la sfârșitul URL-ului dvs., astfel: url="https://example.com/?v=1".

Metoda 3: Utilizați Browse AI + Zapier pentru automatizare fără intervenție

Spre deosebire de primele două metode care afișează previzualizări live, găzduite extern, această metodă oferă o automatizare reală, fără intervenție, salvând fizic fișierele direct pe site-ul dvs. WordPress.

Vom folosi Browse AI pentru a captura automat capturile de ecran și Zapier pentru a le trimite direct în biblioteca dvs. media. Acest lucru vă oferă control complet asupra imaginilor dvs.

Deoarece capturile dvs. de ecran sunt salvate pe propriul server, acestea se vor încărca instantaneu și vor rămâne pe site-ul dvs. permanent, chiar dacă site-ul web țintă devine offline sau își schimbă complet designul.

Pasul 1: Creați un robot de captură de ecran în Browse AI

Mai întâi, accesați Browse AI și creați un cont gratuit.

După ce v-ați autentificat, faceți clic pe butonul „Build New Robot” și selectați opțiunea „Monitor Site Changes”.

Vi se va cere să introduceți adresa URL a site-ului web pe care doriți să îl capturați.

După ce introduceți linkul, va trebui să faceți clic pe butonul „Start Training Robot”.

Browse AI va deschide apoi o fereastră nouă care arată acel site web live.

Pur și simplu faceți clic pe pictograma robotului de pe ecran pentru a deschide meniul și selectați „Capture Screenshot”.

Va apărea un meniu mic, întrebându-vă ce parte a paginii doriți să capturați. Puteți selecta „Pagină întreagă” dacă doriți o captură de ecran completă, de sus în jos, sau „Parte vizibilă” dacă doriți doar secțiunea de sus a site-ului web.

Apoi, Browse AI vă va cere să dați un nume capturii de ecran. Puteți tasta ceva ușor de reținut, cum ar fi „Captură de ecran a paginii principale” sau „Prețuri concurență” și apăsați Enter.

Odată ce ați terminat, faceți clic pe butonul mov „Finalizare” din partea de jos a panoului din stânga pentru a încheia înregistrarea.

Browse AI vă va cere apoi să dați un nume noului dvs. robot.

Tastați ceva ușor de recunoscut și faceți clic pe butonul „Salvare”.

După salvare, puteți configura un program.

De exemplu, puteți spune robotului să viziteze automat site-ul și să facă o captură de ecran proaspătă în fiecare săptămână sau lună.

Odată terminat, asigurați-vă că faceți clic pe butonul „Salvare”.

Pasul 2: Pregătiți-vă site-ul WordPress

Înainte de a construi automatizarea, trebuie să oferim Zapier o modalitate sigură de a comunica cu Biblioteca Media a site-ului dvs. web.

Într-o filă nouă, accesați tabloul de bord WordPress și instalați și activați pluginul gratuit Zapier for WordPress. Dacă aveți nevoie de ajutor, consultați ghidul nostru despre cum să instalați un plugin WordPress.

Odată ce pluginul este activ pe site-ul dvs., sunteți gata să conectați Zapier la site-ul dvs. WordPress.

Pasul 3: Creați un Zap în Zapier

Apoi, trebuie să conectați robotul la WordPress folosind Zapier.

Mai întâi, trebuie să vă conectați la contul dvs. Zapier. Din tabloul de bord principal, faceți clic pe butonul „+ Creare” din meniul din stânga sus și selectați „Zaps” din meniul derulant.

Când deschideți constructorul, Zapier va afișa o casetă de text în care vă va cere să descrieți fluxul dvs. de lucru, construindu-l cu ajutorul AI. Deoarece dorim să configurăm acest lucru precis, puteți ignora acest prompt.

În schimb, uitați-vă chiar sub separatorul „sau” și faceți clic direct pe caseta „Declanșator” pentru a construi automatizarea manual.

Va apărea un meniu.

Căutați și selectați Browse AI ca aplicație.

Căutați secțiunea „Cont” din bara laterală și faceți clic pe butonul „Autentificare” pentru a vă conecta în siguranță la contul dvs. Browse AI.

Odată ce contul dvs. este conectat, faceți clic pe caseta „Eveniment declanșator”. Nu este nevoie să tastați nimic în câmpul de căutare aici! Pur și simplu uitați-vă chiar sub bara de căutare și faceți clic pe opțiunea „Sarcină nouă – Instantaneu”.

Acest lucru va completa automat evenimentul declanșator pentru dvs. Apoi, trebuie să faceți clic pe butonul „Continuare” pentru a trece la ecranul de configurare următor, unde Zapier va solicita câteva detalii.

Mai întâi, selectați contul dvs. din meniul derulant „Echipă”. Odată ce faceți acest lucru, va apărea un nou câmp unde puteți selecta robotul specific pe care l-ați creat anterior.

În final, setați „Tipul evenimentului” la „Sarcină finalizată cu succes” pentru ca Zapier să ruleze doar atunci când este realizată o captură de ecran bună.

Asigurați-vă că faceți clic pe „Continuare” și apoi pe butonul „Testare declanșator”. Acesta este un pas necesar, deoarece extrage captura dvs. de ecran de testare recentă în Zapier, astfel încât WordPress să o poată utiliza ulterior.

Odată ce testul dvs. este reușit, faceți clic pe a doua casetă din fluxul dvs. de lucru (pasul Acțiune) și căutați „WordPress” ca aplicație.

Deoarece ați instalat deja pluginul în Pasul 2, conectarea site-ului dvs. la Zapier este simplă.

Doar faceți clic pe butonul „Autentificare” din secțiunea Cont și introduceți acreditările dvs. de conectare la WordPress atunci când apare fereastra pop-up.

După ce site-ul dvs. web este conectat, faceți clic pe meniul derulant „Eveniment de acțiune”.

Căutați și selectați opțiunea „Încărcare media” și apoi faceți clic pe butonul „Continuare” din partea de jos a paginii.

Acum, trebuie să îi spuneți WordPress-ului ce fișier să încarce. Faceți clic pe butonul „+” (Inserare date) din partea dreaptă a casetei „Fișier”. Aceasta va deschide o fereastră pop-up care afișează o listă foarte lungă de date de test pe care Zapier tocmai le-a extras din Browse AI.

Deoarece lista este atât de lungă, cel mai simplu mod de a găsi fișierul corect este să utilizați bara de căutare din partea de sus a ferestrei pop-up. Tastați „src” pentru a filtra opțiunile.

Căutați opțiunea care se termină cu „Screenshot Src” și selectați-o. Poate fi necesar să faceți clic pe linkul „mai multe” pentru a vedea numele complet al opțiunii.

Puteți completa, de asemenea, câmpurile Titlu și Text alternativ dacă doriți, dar puteți lăsa în siguranță toate celelalte câmpuri opționale (cum ar fi Legenda sau Autorul) necompletate.

Odată ce ați terminat, faceți clic pe „Continuare” și apoi pe butonul „Testare pas”.

Zapier va extrage în mod magic captura de ecran din Browse AI și o va încărca direct în biblioteca dvs. media WordPress.

Dacă testul este reușit, nu uitați să faceți clic pe butonul Publicare, astfel încât noul dvs. Zap să ruleze automat în fundal.

Procesul este acum complet automatizat. De fiecare dată când Browse AI capturează o nouă imagine, aceasta va apărea automat în Media » Bibliotecă în WordPress, gata să fie utilizată în orice postare sau pagină.

Bonus: Cum să păstrați dimensiunile capturilor de ecran consistente

Indiferent de metoda aleasă mai sus, va trebui să setați o lățime și o înălțime pentru imaginile dvs. automate. Pentru a menține blogul dvs. curat și profesional, recomand cu tărie utilizarea unui raport de aspect standard widescreen 16:9.

Majoritatea temelor WordPress au o lățime maximă fixă pentru postările de blog (de exemplu, 800 de pixeli). Dacă setați toate capturile de ecran să corespundă acestei lățimi, folosind raportul 16:9, toate vor avea automat aceeași înălțime.

Acest lucru creează un aspect uniform, frumos, pe măsură ce utilizatorii derulează prin articolul dvs.

Pentru a afla ce numere să introduceți în instrumentul de captură de ecran, puteți folosi această matematică simplă:

• Dacă știți lățimea țintă: Pur și simplu înmulțiți lățimea cu 9, apoi împărțiți-o la 16 pentru a găsi înălțimea perfectă.
• Dacă știți înălțimea țintă: Pur și simplu înmulțiți înălțimea cu 16, apoi împărțiți-o la 9 pentru a găsi lățimea corespunzătoare.

De exemplu, dacă zona de conținut a blogului dvs. are o lățime de 800 de pixeli, ați înmulți 800 cu 9, apoi ați împărți la 16. Acest lucru vă oferă o înălțime perfect scalată de 450.

Deci, pur și simplu ați introduce noile numere în parametrii shortcode-ului dvs., cum ar fi w="800" h="450".

Întrebări frecvente

Am răspuns la destul de multe întrebări despre automatizarea imaginilor de pe site-uri web. Iată câteva dintre cele mai frecvente întrebări pe care le pun oamenii despre crearea de capturi de ecran automate pentru site-uri web.

1. Cum pot face automat o captură de ecran pe pagină completă a unui site web în WordPress?

Pentru a face o captură de ecran automată în WordPress, puteți folosi un plugin dedicat de captură de ecran WordPress, cum ar fi Capture, puteți integra o API gratuită de imagini, cum ar fi mShots de la WordPress.com, sau puteți construi un flux de lucru de automatizare folosind instrumente precum Browse AI și Zapier.

Aceste instrumente preiau automat URL-ul public al unui site web țintă. În funcție de metoda aleasă, acestea vor afișa fie o previzualizare live instantaneu, fie vor încărca fișierul imagine efectiv direct în biblioteca media WordPress.

2. Trebuie să plătesc pentru a crea capturi de ecran automate pentru site-uri web în WordPress?

Nu, nu trebuie să plătiți pentru a genera capturi de ecran automate. Puteți folosi metode complet gratuite, cum ar fi adăugarea unui fragment PHP personalizat prin intermediul pluginului gratuit WPCode pentru a vă conecta la API-ul gratuit mShots de la WordPress.com.

În plus, platformele de automatizare terțe, cum ar fi Browse AI și Zapier, oferă niveluri gratuite care permit proprietarilor de site-uri web să captureze un număr limitat de capturi de ecran în fiecare lună, fără costuri.

3. Pot folosi instrumente automate de captură de ecran pe site-uri WordPress locale, de testare sau private?

Nu, API-urile automate de captură de ecran, cum ar fi mShots sau pluginul Capture, necesită un URL live, accesibil public al site-ului web pentru a funcționa. Aceste instrumente externe de captură de ecran nu pot accesa site-uri web care sunt găzduite local pe un computer personal (localhost).

Mai mult, instrumentele automate de captură de ecran nu pot accesa mediile de testare WordPress care sunt ascunse în spatele unei parole, a unui plugin de mod de întreținere sau a unui firewall.

4. Este sigur să folosesc o API terță pentru a automatiza capturile de ecran ale site-urilor web?

Da, utilizarea API-urilor de captură de ecran reputabile, cum ar fi mShots de la WordPress.com sau pluginul Capture, este, în general, sigură pentru conținutul public. Aceste servicii terțe vizitează pur și simplu un URL public al site-ului web și fac o fotografie a ceea ce este vizibil public pe internet.

Cu toate acestea, proprietarii de site-uri web nu ar trebui niciodată să folosească instrumente terțe de automatizare a capturilor de ecran pentru a captura pagini private, autentificate, din tabloul de bord WordPress sau pagini web care conțin date personale sensibile.

5. De ce captura mea automată WordPress.com mShots arată o pagină goală?

API-ul WordPress.com mShots poate afișa ocazional un spațiu gol chiar prima dată când este solicitat un anumit URL de site web.

Acest lucru se întâmplă deoarece API-ul mShots are nevoie de câteva secunde pentru a genera imaginea inițială. Dacă captura automată este goală, reîmprospătarea paginii WordPress rezolvă de obicei problema. 

Deoarece mShots stochează și imagini în cache, puteți forța API-ul să facă o captură de ecran proaspătă a site-ului web adăugând un șir de versiune aleatoriu la sfârșitul URL-ului țintă în shortcode-ul dvs. WordPress.

Resurse suplimentare pentru îmbunătățirea conținutului vizual

Sper că acest articol v-a ajutat să învățați cum să creați cu ușurință capturi de ecran automate ale site-urilor web în WordPress. Dacă doriți să duceți performanța imaginilor și a media a site-ului dvs. la nivelul următor, poate doriți să consultați și aceste resurse suplimentare:

• Ghidul începătorului pentru SEO de imagini – Optimizați imaginile pentru motoarele de căutare – Aflați cum să denumiți și să etichetați corect capturile de ecran pentru a genera mai mult trafic organic de căutare către site-ul dvs.
• Instrumente pentru a crea imagini mai bune pentru postările dvs. de blog – Descoperiți selecțiile noastre de experți pentru cele mai bune instrumente pentru a crea grafice, adnotări și conținut vizual captivant pentru tutorialele dvs.
• Cum să optimizați imaginile pentru performanța web fără a pierde calitatea – Aflați cum să comprimați corect capturile de ecran și fotografiile, astfel încât site-ul dvs. să continue să se încarce fulgerător.
• Cele mai bune pluginuri de portofoliu WordPress pentru designeri și fotografi – Dacă utilizați capturi de ecran automate pentru a vă prezenta munca de web design, aceste pluginuri vă vor ajuta să le afișați frumos potențialilor clienți.

Dacă v-a plăcut acest articol, atunci vă rugăm să vă abonați la Canalul nostru de YouTube pentru tutoriale video despre WordPress. Ne puteți găsi, de asemenea, pe Twitter și Facebook.