Cum de a genera screenshot-uri pentru site-ul dvs. WordPress

În acest tutorial veți învăța un secret deschis: cum să generați capturi de ecran ale site-urilor web pentru a le utiliza în mesajele dvs. WordPress utilizând un serviciu furnizat de WordPress.com. Vom chiar transforma acest lucru într-un scurt-cod ușor de utilizat pentru a afișa capturile de ecran ... să începem!

fundal

Este un secret deschis și a fost de câțiva ani, WordPress expune un generator de screenshot-uri la subdomeniul său s.wordpress.com. Și scuttlebutt este că atâta timp cât nu-l abuzezi, atunci e liber să folosești. WordPress.com îl folosește pentru a genera capturi de ecran pentru diferite activități.

De exemplu, iată urlul pentru a afișa o captură de ecran a wp.tutsplus cu o lățime de 400 de pixeli:

http://s.wordpress.com/mshots/v1/http%3A%2F%2Fwp.tutsplus.com?w=400

Este posibil să trebuiască să faceți clic din nou pe link, deoarece generatorul are nevoie de puțin timp pentru a arhiva imaginea.

Ce vom face:

scrieți o funcție de cod scurt pentru a afișa o captură de ecran
utilizați codul scurt pentru a afișa o captură de ecran ca parte a buclăului post utilizând un câmp personalizat pentru adresa URL

Pasul 1 Funcția Shortcode

Codul nostru scurt va fi folosit ca:

 [ss_screenshot site = "http://wp.tutsplus.com"]

Puteți adăuga codul în fișierul functions.php din directorul tematic. Codul complet este disponibil în link-ul sursă de mai sus.

 add_shortcode ('ss_screenshot', 'ss_screenshot_shortcode'); funcția ss_screenshot_shortcode ($ atts) $ width = intval ($ atts ['lățime']); $ width = (100 <= $width && $width <= 300) ? $width : 200; $site = trim($atts['site']); if ($site !=") $query_url = 'http://s.wordpress.com/mshots/v1/' . urlencode($site) . '?w=' . $width; $image_tag = '„; echo ". $ image_tag. '';  altceva echo 'url url de ecran rău!';

Ce face acest cod:

declară un scurtcod numit ss_screenshot cu funcția add_shortcode
funcția shortcode acceptă matricea $ atts care conține cele două atribute shortcode: lățime și site
atributul de lățime este convertit la un număr întreg și verificat pentru a vă asigura că este într-un interval adecvat, în acest caz între 100 și 300 de pixeli. Notă: folosim operatorul ternar PHP pentru a atribui o lățime implicită de 200 dacă lățimea furnizată este în afara domeniului nostru. Acest lucru ia în considerare și un atribut de lățime lipsă.
atributul site-ului este tăiat pentru a elimina spațiile accidentale stânga și dreapta
vom crea o url de interogare prin adăugarea unui atribut site-ului urlencoded și a atributului width
în cele din urmă, împachetăm interogarea query_url într-o etichetă de imagine și o etichetă de legătură, astfel încât utilizatorii să poată face clic pe captura de ecran și să fie duși la site

Pasul 2 Testați codul scurt

Într-o postare sau o pagină, introduceți acest scurtcod:

 [ss_screenshot site = "http://amazon.com"]

Când vizualizați postarea sau pagina, ar trebui să vedeți o captură de ecran de 300 de pixeli pe Amazon. Rețineți că este posibil să fie necesar să actualizați pagina după câteva secunde pentru a vedea captura de ecran memorată în memoria cache. Jucați în jur cu lățimea și urmăriți ce se întâmplă atunci când ieșiți din rază. Apropo, puteți seta orice gamă de lățime doriți. De asemenea, testați un url urât: ar trebui să vedeți mesajul de avertizare în loc de o captură de ecran.

Acum, că avem un cod scurt de lucru, să vedem cum putem încorpora acest lucru în bucla noastră WordPress.

Pasul 3 Setarea câmpului personalizat

Să ne imaginăm un scenariu în care vrem să afișăm o captură de ecran a unui site de lângă fiecare dintre postările noastre. Din motive de formatare și de utilizare, este mai bine să automatizați acest proces prin adăugarea unui câmp personalizat în ecranul de editare postare. În acest câmp, putem introduce o adresă URL a site-ului, care poate fi utilizată apoi în buclă postală pentru a afișa o captură de ecran folosind noul cod scurt.

Dacă câmpul de câmp personalizat nu se afișează pe ecranul dvs. de editare a postărilor, consultați ecranul de sus dreapta și ar trebui să vedeți fila Ecran Opțiuni. Faceți clic pe acesta și bifați caseta Câmpuri personalizate. Acum ar trebui să vedeți ceva de genul acesta la fundul ecranului:

Faceți clic pe linkul Introduceți nou și creați un nou câmp personalizat numit screenshot_url. Aceasta este ceea ce ar trebui să vedeți:

Acum când creați / editați o postare (câmpul personalizat apare pentru toate postările), puteți introduce o adresă URL pentru generarea unei imagini de ecran referitoare la postare.

Pasul 4 Adăugați ecranul de afișare a ecranului în buclă

Iată o versiune serios tăiată a buclă postului WordPress standard (așa cum se găsește într-un fișier template temă), inclusiv codul nostru de afișare a ecranului:

 dacă (have_posts ()) în timp ce (have_posts ()): the_post (); titlul(); $ url = get_post_meta ($ post-> ID, 'screenshot_url', true); do_shortcode ("[ss_screenshot site =" '. $ url. "]]'); continutul(); endif; endwhile;

Ce face acest cod:

verificați dacă avem postări, începeți cu buclă și afișați titlul postului
obțineți conținutul câmpului personalizat screenshot_url prin trecerea ID-ului postului curent și a câmpului personalizat la funcția get_post_meta
pentru că suntem într-un fișier de șablon, folosim funcția do_shortcode pentru a analiza codul nostru scurt care include url-ul de ecran pentru această postare
apoi vom afișa conținutul postului și vom termina bucla

Pasul 5 Testați buclă

Dacă ați creat o postare cu titlul Honda Accord și i-ați oferit o adresă de urgență a http://www.honda.com, folosind noua configurare de buclă, ar trebui să vedeți ceva de genul:

Concluzie

În loc să afișezi un mesaj de avertizare dur dacă o postare nu are o adresă URL de ecran capturată, poți să arăți o imagine implicită.

Dacă nu doriți să utilizați generatorul de screenshot-uri din WordPress sau dacă aveți nevoi mai mari, puteți utiliza opțiunea gratuită de la un serviciu de screenshot cum ar fi http://www.shrinktheweb.com. Ați putea aplica tehnicile folosite în acest tutorial pentru orice serviciu de screenshot.

Lucruri de amintit:

capturile de ecran durează câteva secunde (de obicei) pentru a genera, astfel actualizați pagina
urlencode url trimis la serviciul de screenshot
începe url-urile dvs. cu http: //
dacă aveți mai multe nevoi exigente pentru capturi de ecran, utilizați un serviciu comercial

Cod