Share
I denna handledning lär du dig en öppen hemlighet: hur man genererar skärmdumpar av webbplatser som ska användas i dina WordPress-inlägg med hjälp av en tjänst som tillhandahålls av WordPress.com. Vi gör det till en lättanvänd kortnummer för att visa skärmdumparna ... låt oss komma igång!
Det är en öppen hemlighet, och har varit ett par år, som WordPress avslöjar en skärmdumpgenerator på dess underdomän s.wordpress.com. Och scuttlebutt är det så länge du inte missbrukar det, så är det gratis att använda. WordPress.com använder det för att generera skärmdumpar eftersom det är olika aktiviteter.
Till exempel, här är webbadressen för att visa en skärmdump av wp.tutsplus med en bredd på 400 pixlar:
http://s.wordpress.com/mshots/v1/http%3A%2F%2Fwp.tutsplus.com?w=400
Du kan behöva klicka på länken igen eftersom generatorn tar lite tid att cache bilden.
Vad vi ska göra:
Vår kortnummer kommer att användas som:
[ss_screenshot site = "http://wp.tutsplus.com"]
Du kan lägga till koden i funktionen.php-filen i din temakatalog. Den fullständiga koden finns tillgänglig i källlänken ovan.
Accentsconagua
add_shortcode ('ss_screenshot', 'ss_screenshot_shortcode'); funktion 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 = '
'; eko ". $ image_tag. ''; else echo 'Bad screenshot url!'; I en post eller sida, sätt in denna kortnummer:
[ss_screenshot site = "http://amazon.com"]
När du tittar på inlägget eller sidan ska du se en 300 pixel bred skärmdump av Amazon. Kom ihåg att du kanske behöver uppdatera sidan efter några sekunder för att se den cachade skärmdumpen. Spela runt med bredden och se vad som händer när du går utanför räckhåll. Förresten kan du ställa in vilket breddsområde du vill ha. Testa också en dålig webbadress: Du bör se varningsmeddelandet istället för en skärmdump.
Nu när vi har en fungerande kortnummer, låt oss se hur vi kan införliva det i vår WordPress-loop.
Låt oss föreställa oss ett scenario där vi vill visa en skärmdump av en sida bredvid var och en av våra inlägg. För formatering och användbarhetsskäl är det bäst att automatisera denna process genom att lägga till ett anpassat fält på vår postredigeringsskärm. I det fältet kan vi mata in en webbadress som kan användas i efterloppet för att visa en skärmdump med vår nya kortnummer.
Om den anpassade fältrutan inte visas på skärmen för postredigering, titta på skärmens övre högra och du ska se fliken Skärmalternativ. Klicka på det och kryssa i rutan Anpassade fält. Nu borde du se något som här på skärmens botten:
Klicka på Skriv ny länk och skapa ett nytt anpassat fält som heter screenshot_url. Detta är vad du bör se:
Nu när du skapar / redigerar ett inlägg (det egna fältet visas för alla inlägg) kan du skriva in en webbadress för att generera en skärmdump relaterad till posten.
Här är en seriöst nedskuren version av standard WordPress-postslingan (som finns i en templatslogg), inklusive vår skärmdumpskärmskod:
om (have_posts ()) medan (have_posts ()): the_post (); titeln(); $ url = get_post_meta ($ post-> ID, 'screenshot_url', true); do_shortcode ('[ss_screenshot site = "'. $ url. '"]'); innehållet(); endif; EndWhile; Om du skapade ett inlägg med titeln Honda Accord och gav den en skärmdumpadress av http://www.honda.com, med hjälp av din nya loop setup, bör du se något så här:
I stället för att visa ett starkt varningsmeddelande om ett inlägg inte har en skärmdumpadress, kan du visa en standardbild.
Om du inte vill använda skärmdumpgeneratorn från WordPress, eller om du har större behov, kan du använda det fria alternativet på en skärmdumpstjänst som http://www.shrinktheweb.com. Du kan tillämpa de tekniker som används i denna handledning till alla skärmdumpar.
