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

Realizarea de capturi de ecran pentru un tutorial poate părea o sarcină nesfârșită. Trebuie să capturați, să decupați, să adnotați și să încărcați fiecare imagine, repetând procesul iar și iar.

Cunoaștem acest efort prea bine din crearea propriilor noastre ghiduri aici, la WPBeginner. Este un consumator uriaș de timp care poate încetini cu adevărat fluxul de lucru de creare a conținutului.

Vestea bună este că puteți automatiza întregul proces. Acest lucru nu numai că vă economisește timp prețios, dar ajută și la menținerea aspectului profesional și consecvent al site-ului dvs.

În acest articol, vă vom arăta cum să creați cu ușurință capturi de ecran automate ale site-ului web în WordPress.

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

Dacă aveți un site web WordPress, atunci ați putea dori să creați și să adăugați capturi de ecran automate ale site-ului la postările dvs. pentru a oferi cititorilor potențiali o modalitate rapidă de a vedea despre ce este vorba în conținutul dvs.

Acest lucru poate stimula implicarea utilizatorilor și poate contribui la SEO-ul site-ului dvs. Imaginile relevante, de înaltă calitate, ajută motoarele de căutare să înțeleagă mai bine conținutul dvs. și pot îmbunătăți semnalele de implicare ale vizitatorilor, cum ar fi timpul petrecut pe pagină.

Similar, puteți utiliza capturi de ecran automate ale site-ului web pentru a crea o copie de rezervă vizuală a site-ului dvs. înainte de a actualiza o temă sau de a face alte modificări. Acest lucru vă poate ajuta să comparați și să vedeți diferența dintre stilurile noi și cele vechi ale site-ului dvs. web.

Capturile de ecran automate pot, de asemenea, compara diferite servicii sau site-uri web, vă pot ghida cititorul printr-un tutorial pas cu pas și pot urmări progresul site-ului web în timp.

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

• Metoda 1: Creați capturi de ecran automate ale site-urilor web în WordPress folosind un plugin
• Metoda 2: Creați capturi de ecran automate adăugând cod în WordPress
• Bonus: Faceți capturi de ecran manual pentru site-ul dvs.
• Întrebări frecvente
• Resurse suplimentare

Metoda 1: Creați capturi de ecran automate ale site-urilor web în WordPress folosind un plugin

Această metodă este mai ușoară și, prin urmare, recomandată pentru începători și utilizatori care nu doresc să se ocupe de cod.

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

Important: Vă rugăm să rețineți că la momentul scrierii, acest plugin nu a mai fost actualizat de mult timp. Deși ar putea funcționa în continuare, ar putea prezenta un risc de compatibilitate sau securitate. Vă recomandăm să îl testați mai întâi pe un site de testare și să vă asigurați întotdeauna că aveți o copie de rezervă completă a WordPress înainte de a-l instala.

După activare, pluginul va funcționa imediat și nu există setări de configurat.

Acum, vizitați pur și simplu o pagină sau o postare unde doriți să adăugați o captură de ecran automată a site-ului web din bara laterală de administrare WordPress.

Aici, faceți clic pe butonul „Adăugați bloc” (+) din colțul din stânga sus al ecranului pentru a deschide meniul de blocuri. Apoi, adăugați blocul „Capturi de ecran browser” în editor.

Odată ce ați făcut acest lucru, adăugați URL-ul site-ului web pentru care doriți să obțineți o captură de ecran automată și faceți clic pe butonul „Load Image”.

Pluginul va adăuga acum automat o captură de ecran pentru site-ul web pe care l-ați ales. Puteți adăuga acum un text alternativ pentru imagine și îi puteți modifica lățimea și înălțimea din panoul blocului din dreapta.

Comutarea comutatorului „Utilizați linkul” din panou vă permite să adăugați un link la captura de ecran care vă direcționează către site-ul web.

Puteți, de asemenea, să comutați comutatorul „Link către postarea curentă” dacă doriți să adăugați link-ul postării la captura de ecran.

În cele din urmă, faceți clic pe butonul „Actualizare” sau „Publicare” pentru a salva setările.

Acum puteți vizita site-ul dvs. WordPress pentru a vizualiza captura de ecran automată.

Notă: Pluginul Browser Shots folosește API-ul mshots de la WordPress.com pentru a genera capturi de ecran din mers. Aceste imagini nu sunt stocate în biblioteca media WordPress. Sunt servite direct de pe serverele WordPress.com. Consultați ghidul nostru despre diferența dintre WordPress.com și WordPress.org.

Metoda 2: Creați capturi de ecran automate adăugând cod în WordPress

Această metodă necesită adăugarea de cod la fișierele WordPress. Pentru a crea capturi de ecran automate, trebuie să adăugați cod personalizat la fișierul functions.php al temei dvs.

Cu toate acestea, amintiți-vă că cea mai mică eroare în cod vă poate defecta site-ul și îl poate face inaccesibil.

Acesta este motivul pentru care recomandăm utilizarea WPCode. Este cel mai bun plugin pentru fragmente de cod WordPress de pe piață, care face super sigur și ușor să adăugați cod personalizat.

Sfat expert: La WPBeginner, folosim WPCode pentru a gestiona toate fragmentele de cod personalizate din portofoliul nostru de site-uri web. Permite echipei noastre de dezvoltare să adauge și să organizeze codul în siguranță, fără a fi nevoie să editeze direct fișierul functions.php al temei.

Mai întâi, trebuie să instalați și să activați pluginul WPCode. Pentru instrucțiuni detaliate, vă rugăm să consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

După activare, vizitați pagina Fragmente de cod » + Adăugați fragment din tabloul de bord WordPress.

Odată ce sunteți acolo, faceți clic pe butonul „Utilizați fragmentul” sub opțiunea „Adăugați codul personalizat (Fragment nou)”.

Veți fi acum direcționat către pagina „Creare fragment personalizat”, unde puteți începe prin a introduce un nume pentru fragmentul dvs. Numele poate fi orice vă ajută să identificați codul.

Apoi, selectați „Fragment PHP” ca tip de cod din meniul derulant din dreapta.

După aceea, pur și simplu copiați și lipiți următorul cod în caseta „Previzualizare cod”:

function wpb_screenshots($atts, $content = NULL) {
extract(shortcode_atts(array(
"snap" => 'http://s.wordpress.com/mshots/v1/',
"url" => 'https://014.leahstevensyj.workers.dev',
"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");

Similar cu pluginul menționat anterior, acest cod folosește, de asemenea, API-ul Mshots de la WordPress.com pentru a genera capturi de ecran din mers.

Acum, puteți adăuga URL-ul site-ului web ale cărui capturi de ecran automate doriți să le faceți, lângă linia "url" =$gt; din cod.

Puteți adăuga, de asemenea, lățimea și înălțimea preferate pentru capturile de ecran lângă liniile "w" => și "h"=> din cod.

Apoi, derulați în jos la secțiunea „Inserare” și alegeți modul „Inserare automată”.

Codul va fi acum executat automat la activare.

În cele din urmă, derulați înapoi în partea de sus a paginii și comutați comutatorul „Inactiv” la „Activ”.

Apoi, faceți clic pe butonul „Salvare fragment” pentru a stoca setările și a activa fragmentul.

Acum, pentru a afișa o captură de ecran a site-ului web în postările și paginile dvs. WordPress, va trebui să introduceți shortcode-ul astfel:

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

Puteți înlocui câmpurile URL și Alt cu propriile valori.

Mai întâi, deschideți pagina/postarea în editorul de blocuri din tabloul de bord WordPress și faceți clic pe butonul „Adăugare bloc” (+).

De aici, adăugați blocul „Shortcode” la pagină/postare. Apoi, adăugați shortcode-ul de mai sus și înlocuiți-l cu propriile valori.

În cele din urmă, faceți clic pe butonul „Actualizare” sau „Publicare” pentru a salva setările.

Acum, vizitați site-ul dvs. WordPress pentru a vedea captura de ecran automată în acțiune.

Bonus: Faceți capturi de ecran manual pentru site-ul dvs.

Dacă nu doriți să utilizați capturi de ecran automate, atunci puteți face capturi de ecran manual cu diferite instrumente precum Droplr.

Acest lucru vă oferă mai multă libertate de a alege o zonă specifică pentru o imagine, comparativ cu capturile de ecran automate. În plus, puteți edita aceste imagini în Adobe Photoshop și puteți adăuga alte elemente, cum ar fi săgeți sau casete roșii.

Această funcție nu este disponibilă pentru capturile de ecran automate, unde pluginurile sau codul preiau automat imaginea pentru dvs.

Pentru a face o captură de ecran cu Droplr, trebuie mai întâi să instalați aplicația pe computer. Odată ce ați făcut acest lucru, faceți clic pe pictograma Droplr din bara de activități Windows sau Mac și selectați opțiunea „Captură de ecran”.

Apoi, puteți selecta zona unde doriți să faceți captura de ecran.

Droplr va deschide apoi acea imagine într-un browser unde o puteți descărca sau partaja link-ul cu alții. Pentru mai multe informații, consultați tutorialul nostru despre cum să faci o captură de ecran în WordPress.

Întrebări frecvente

Iată câteva dintre cele mai frecvente întrebări pe care le primim despre crearea de capturi de ecran automate în WordPress.

Capturile automate de ecran sunt la fel de bune ca și cele manuale?

Depinde de nevoile dvs. Capturile de ecran automate sunt excelente pentru viteză și consistență, dar capturile de ecran manuale vă oferă mai mult control. Cu capturi manuale, puteți selecta zone specifice, puteți adăuga adnotări precum săgeți sau text și puteți optimiza imaginea înainte de încărcare.

Utilizarea capturilor de ecran automate va încetini site-ul meu web?

Nu, nu ar trebui să vă afecteze performanța site-ului. Metodele descrise în acest articol folosesc un serviciu extern de la WordPress.com pentru a genera imaginile. Aceasta înseamnă că imaginile sunt încărcate de pe serverele lor, nu de pe ale dvs., ceea ce previne o încărcare suplimentară pe găzduirea dvs.

Pot personaliza aspectul capturilor de ecran automate?

Personalizarea este limitată. De obicei, puteți defini lățimea și înălțimea capturii de ecran. Cu toate acestea, nu puteți adăuga adnotări, efecte sau decupa o anumită parte a paginii, așa cum ați putea face cu un instrument manual de editare a capturilor de ecran.

Capturile de ecran sunt salvate în biblioteca media WordPress?

Nu, capturile de ecran sunt generate pe loc și nu sunt stocate în Biblioteca dvs. media. Acest lucru ajută la economisirea spațiului de stocare pe contul dvs. de găzduire, deoarece imaginile sunt servite direct de pe serverele WordPress.com.

De ce nu apare captura mea automată de ecran?

Serviciul WordPress.com care generează aceste capturi de ecran funcționează excelent pentru site-uri web publice, live. Cu toate acestea, este posibil să nu poată captura capturi de ecran ale site-urilor web care se află pe un computer local (localhost), protejate prin parolă sau în spatele anumitor firewall-uri. De asemenea, este posibil să nu redea perfect paginile care utilizează animații complexe sau necesită interacțiune cu utilizatorul pentru a afișa conținutul.

Resurse suplimentare

Acum că știți cum să automatizați capturile de ecran ale site-urilor web, s-ar putea să doriți să consultați și aceste alte ghiduri utile:

• Ghid pentru începători despre SEO pentru imagini – Aflați cum să vă optimizați corect imaginile pentru motoarele de căutare pentru a obține mai mult trafic pe site-ul dvs.
• Instrumente pentru a crea imagini mai bune pentru postările de pe blog – Consultați selecția noastră de experți pentru cele mai bune instrumente pentru a crea imagini mai captivante pentru articolele dvs.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.