Accentsconagua

Slik genererer du nettstedskjermbilder for ditt WordPress-nettsted

Kode
Share

I denne opplæringen lærer du en åpen hemmelighet: hvordan du genererer skjermbilder av nettsteder som skal brukes i WordPress-innleggene dine, ved hjelp av en tjeneste fra WordPress.com. Vi vil til og med gjøre dette til en brukervennlig kortkode for å vise skjermbilder ... la oss komme i gang!

Bakgrunn

Det er en åpen hemmelighet, og har vært i et par år, at WordPress avslører en skjermdumpgenerator på det s.wordpress.com underdomenet. Og scuttlebutt er at så lenge du ikke misbruker det, så er det gratis å bruke. WordPress.com bruker det til å generere skjermbilder fordi det er ulike aktiviteter.

For eksempel, her er url for å vise et skjermbilde av wp.tutsplus med en bredde på 400 piksler:

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

Du må kanskje klikke på koblingen igjen, da generatoren tar litt tid til å cache bildet.

Hva skal vi gjøre:

  • skriv en shortcode-funksjon for å vise et skjermbilde
  • bruk kortnummeret til å vise et skjermbilde som en del av postsløyfen ved å bruke et egendefinert felt for webadressen

Trinn 1 Kortnummerfunksjonen

Vår kortnummer vil bli brukt som:

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

Du kan legge til koden til functions.php-filen i temakatalogen din. Den fulle koden er tilgjengelig i kildekilden over.

 add_shortcode ('ss_screenshot', 'ss_screenshot_shortcode'); funksjon ss_screenshot_shortcode ($ atts) $ width = intval ($ atts ['width']); $ 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 = ''. $ site. ''; ekko '' . $ image_tag. '';  else echo 'Bad skjermbilde url!';

Hva denne koden gjør:

  • erklære en kortkode som heter ss_screenshot med add_shortcode-funksjonen
  • shortcode-funksjonen aksepterer $ atts-arrayet som inneholder de to shortcode-attributter: bredde og nettsted
  • Breddeattributtet konverteres til et heltall og kontrolleres for å sikre at det er innenfor et passende område, i dette tilfellet mellom 100 og 300 piksler. Merk: Vi bruker PHP-ternæroperatøren til å tildele en standardbredde på 200 hvis den medfølgende bredden ligger utenfor vårt område. Dette tar også hensyn til manglende breddeattributt.
  • Nettstedattributtet er trimmet for å fjerne utilsiktede venstre og høyre mellomrom
  • Vi oppretter en forespørselsadresse ved å legge til et urlenkodet nettstedattributt og breddeattributtet
  • til slutt pakker vi query_url i en bildetikett og en koblingsmerke slik at brukerne kan klikke på skjermbildet og bli tatt til nettstedet

Trinn 2 Test kortnummeret

I et innlegg eller en side legger du inn denne koden:

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

Når du ser innlegget eller siden, bør du se et 300 pixel bredt skjermbilde av Amazon. Husk at du kanskje må oppdatere siden etter noen få sekunder for å se det hurtigbufrede skjermbildet. Spill rundt med bredden og se hva som skjer når du går utenfor rekkevidde. Forresten, kan du angi hvilket breddeintervall du liker. Prøv også en dårlig url: Du bør se advarselsmeldingen i stedet for et skjermbilde.

Nå som vi har en fungerende kortkode, la oss se hvordan vi kan innlemme det inn i vår WordPress-løkke.

Trinn 3 Tilpasset feltoppsett

La oss tenke oss et scenario der vi vil vise et skjermbilde av et nettsted ved siden av hvert av innleggene våre. For formatering og brukervennlighet, er det best å automatisere denne prosessen ved å legge til et egendefinert felt på vår postredigeringsskjerm. I det feltet kan vi legge inn en webadresse som kan brukes i postsløyfen for å vise et skjermbilde ved hjelp av vår nye kortkode.

Hvis den egendefinerte feltboksen ikke vises på skjermbildet for innleggsredigering, så se på skjermen øverst til høyre, og du bør se kategorien Skjermalternativer. Klikk det og kryss av i Tilpassede felt-boksen. Nå bør du se noe som dette på skjermbunnen:

Klikk på Skriv inn ny lenke og opprett et nytt tilpasset felt kalt screenshot_url. Dette er hva du bør se:

Nå når du oppretter / redigerer et innlegg (det egendefinerte feltet vises for alle innlegg) kan du skrive inn en URL for å generere et skjermbilde relatert til innlegget.

Trinn 4 Legg til skjermbilde Vis til løkken

Her er en seriøst nedslagsversjon av standard WordPress-innleggsløyfen (som finnes i en templatmal), inkludert skjermbildevisningskoden:

 hvis (have_posts ()) mens (have_posts ()): the_post (); tittelen(); $ url = get_post_meta ($ post-> ID, 'screenshot_url', true); do_shortcode ('[ss_screenshot site = "'. $ url. '"]'); innholdet(); slutt om; EndWhile;

Hva denne koden gjør:

  • sjekk om vi har innlegg, start looping og vis posttittelen
  • få innholdet i skjermbildet for skjermbilde_url ved å sende nåværende post-ID og navnet på det egendefinerte feltet til get_post_meta-funksjonen
  • fordi vi er i en malfil, bruker vi do_shortcode-funksjonen til å analysere vår shortcode som inneholder skjermdumpen for dette innlegget
  • da viser vi innleggets innhold og avslutter sløyfen

Trinn 5 Test løkken

Hvis du opprettet et innlegg med tittelen Honda Accord og ga det et skjermbilde url på http://www.honda.com, ved hjelp av det nye loopoppsettet, bør du se noe slikt:

Konklusjon

I stedet for å vise en sterk advarselsmelding hvis et innlegg ikke har en skjermdump-adresse, kan du vise et standardbilde.

Hvis du ikke ønsker å bruke skjermbildegeneratoren fra WordPress, eller hvis du har større behov, kan du bruke det fulle alternativet på en skjermdumpstjeneste som http://www.shrinktheweb.com. Du kan bruke teknikkene som brukes i denne opplæringen til noen skjermdumpeservice.

Ting å huske:

  • skjermbildene tar noen sekunder (vanligvis) for å generere, så oppdater siden
  • urlenkre url sendt til skjermdumpetjenesten
  • start urlene med http: //
  • Hvis du har mer krevende behov for skjermbilder, bruk en kommersiell tjeneste
Kode
×