Cum să faceți automat capturile de ecran ale browserului și să le afișați în WordPress

Imaginile și capturile de ecran sunt un element cheie în orice blog WordPress. În special, capturile de ecran vă permit să evidențiați aspectele cheie ale altor pagini. Cu toate acestea, poate fi o problemă să faci capturile de ecran perfecte din browser și să le adaugi la postările tale. Deși puteți face treaba în funcție de sistemul dvs. de operare (SO), realizarea de capturi de ecran în mod consecvent este o provocare.

Introduceți pluginul Browser Screenshots. Acest lucru vă permite să capturați orice site web, fără a părăsi chiar editorul WordPress. Dacă urechile ți-au înțepat, probabil că vei dori să continui să citești.

Să verificăm cum funcționează!

Abonați-vă la canalul nostru Youtube

Introducere în pluginul pentru capturi de ecran pentru browser

Capturile de ecran ale browserului sunt, fără îndoială, un plugin de nișă care merită un loc pe site-ul dvs. web. Vă permite să faceți capturi de ecran dinamice ale browserului din orice pagină fără a părăsi editorul WordPress. Acest lucru se aplică atât editorilor clasici, cât și editorilor de blocuri, în funcție de opțiunea preferată. Acest lucru este în contrast cu soluțiile native pentru sisteme de operare, care necesită deschiderea unor noi ferestre de browser și optimizarea imaginilor în continuare, în afara platformei.

Dacă utilizați Editorul clasic, capturile de ecran ale browserului vă permit să utilizați un shortcode personalizat pentru a genera fotografiile dorite. Puteți adăuga mai multe capturi de ecran în orice pagină sau postare, la fel și la Editorul de blocuri.

Deoarece pluginul generează capturi de ecran dinamic, este perfect pentru situațiile în care nu doriți să utilizați fotografii învechite pentru conținutul dvs. Dacă aveți o pagină sau o postare care include un cod scurt sau un bloc de ecran pentru browser, vizitatorii vor vedea o captură a ecranului în timp real. Aceasta este o propunere tentantă pentru anumite tipuri de conținut.

Indiferent de abordarea pe care o utilizați, pluginul vă permite, de asemenea, să personalizați rezoluția capturilor de ecran ale browserului. De asemenea, puteți adăuga text alternativ și text la imaginile dvs., precum și clase CSS personalizate.

Cu toate acestea, este important să înțelegeți că acest plugin realizează doar capturi de ecran din partea de sus a browserului. Aceasta înseamnă că nu vor fi afișate zonele în care trebuie să derulați. Cât de mare este această zonă va depinde de parametrii pe care îi configurați pentru fiecare captură de ecran a browserului și veți afla cum să faceți acest lucru mai târziu.

Caracteristici cheie:

• Utilizați coduri scurte sau blocuri pentru a face fotografii personalizate ale oricărui site web din fereastra browserului dvs.
• Adăugați capturi de ecran din browser în conținutul dvs. fără a fi nevoie să le luați sau să le încărcați manual.
• Personalizați rezoluția capturilor de ecran ale browserului.
• Adăugați clase CSS personalizate la imaginile generate de plugin.
• Adăugați linkuri și text alternativ la imaginile dvs.

Preț: gratuit | Mai multe informatii

Cum se folosește pluginul pentru capturi de ecran pentru browser (2 abordări)

Până acum, știți deja cum funcționează pluginul Browser Screenshot, așa că haideți să discutăm cum să îl utilizați. Codurile scurte sunt o parte fundamentală a pluginului, așa că hai să ne uităm mai întâi la acest lucru.

1. Utilizați Shortcodes pentru a genera capturi de ecran din browserul dinamic

Plugin-ul Browser Screenshots vă permite să utilizați următorul cod scurt personalizat pentru a genera capturi dinamice ale browserului:

[browser-shot url="elegantthemes.com" width="600" height="400"]

Shortcode-ul include doi parametri de bază: lățimea și înălțimea . Ambii parametri folosesc valori pixel, iar rezoluția implicită utilizată de plugin pentru a face fotografii este de 600 x 400 . Desigur, veți dori, de asemenea, să adăugați URL-ul specific pe care doriți să îl capturați și în shortcode.

Indiferent dacă utilizați Editorul de blocuri sau Editorul clasic, codul scurt va reda o captură de ecran similară cu următoarea:

Cu toate acestea, capturile de ecran ale browserului vă permit, de asemenea, să setați mai mulți parametri personalizați. Pe lângă lățime și înălțime, acestea includ următoarele:

• Alt: Acest parametru vă permite să setați text alternativ pentru captura de ecran.
• Link: Puteți alege către ce legătură vizualizează imaginea folosind acest parametru (care poate diferi de unde provine fotografia).
• Țintă: Acest parametru vă permite să controlați dacă linkurile de imagine se deschid într-o fereastră nouă sau nu.

De exemplu, iată cum ar arăta un cod scurt complet, care include toți parametrii:

[browser-shot url="http://www.google.com" width="700" height="500" alt="Google's homepage" link="http://www.otherwebsite.com"]

De asemenea, puteți utiliza coduri scurte pentru a adăuga subtitrări manual:

[browser-shot url="http://www.google.com" width="700" height="500" alt="Google's homepage" link="http://www.otherwebsite.com"]Here's the caption[/browser-shot]

În majoritatea cazurilor, cei doi parametri cei mai importanți pe care îi veți folosi sunt lățimea și înălțimea . Folosind aceleași valori pentru toate capturile de ecran pe care le faceți de multe ori, nu veți obține cele mai bune rezultate, așa că veți dori să vă adaptați parametrii pentru a se potrivi conținutului.

2. Utilizați blocuri pentru a adăuga capturi de ecran pe site-ul dvs. web

Dacă utilizați Editorul de blocuri, pluginul Browser Screenshots vă va oferi acces la un nou bloc numit Browser Shots :

Dacă selectați Blocarea, vi se va solicita pluginul să vă întrebe ce site web doriți să utilizați pentru a genera o captură de ecran. În acest exemplu, folosim pagina de pornire Amazon SUA:

După ce faceți clic pe Găsiți imaginea , pluginul va „face” o captură de ecran și o va afișa în Block Editor:

Un lucru de reținut este că pluginul nu poate accesa paginile private sau să se conecteze la ele pentru dvs. Pentru acele tipuri de capturi de ecran ale browserului, va trebui să faceți singuri lucrurile murdare.

Mai departe, în dreapta acelei capturi de ecran puteți vedea fila Blocare detalii. Acest lucru vă permite să modificați toți parametrii pe care i-am discutat anterior fără a fi nevoie să adăugați coduri scurte personalizate.

Modificarea lățimii și înălțimii capturilor de ecran ale browserului dvs. este mult mai simplă folosind Block Editor. Acest lucru se datorează faptului că editorul vă permite să verificați o previzualizare apăsând butonul Reîmprospătare imagine sub parametrii de înălțime și lățime:

Dacă comparați ambele exemple, puteți vedea cum modificarea rezoluției modifică zona pe care pluginul o captează pentru dvs. Dincolo de aceasta, puteți adăuga, de asemenea, linkuri personalizate la capturile de ecran, puteți configura dacă acestea se deschid într-o filă nouă sau nu și puteți seta aici clase CSS personalizate.

Concluzie

Dacă includeți în mod regulat capturi de ecran ale browserului în conținutul blogului dvs., pluginul Browser Screenshots vă poate economisi mult timp. Este un plugin de nișă destul de mare, dar dacă vă aflați printre mulțimea pe care am menționat-o, va facilita editarea posturilor.

Utilizând capturile de ecran ale browserului, puteți adăuga screengrabs ale browserului dvs. utilizând un cod scurt scurt sau Editorul de blocuri. Pentru codurile scurte, pluginul include mai mulți parametri care vă permit să personalizați capturi de ecran, cum ar fi lățimea, înălțimea și chiar alt (pentru text alternativ).

Aveți întrebări despre cum să utilizați pluginul pentru capturi de ecran pentru browser? Să vorbim despre ele în secțiunea de comentarii de mai jos!

Imagine în miniatură a articolului de VectorMine / shutterstock.com