Share
In deze tutorial leer je een open geheim: hoe je screenshots van websites genereert om te gebruiken in je WordPress-berichten met behulp van een service van WordPress.com. We zullen dit zelfs veranderen in een eenvoudig te gebruiken shortcode om de schermafbeeldingen weer te geven ... Laten we aan de slag gaan!
Het is een open geheim en het is al een paar jaar geleden dat WordPress een screenshotgenerator op zijn subdomein s.wordpress.com openbaarde. En de scuttlebutt is dat zolang je het niet misbruikt, het dan gratis te gebruiken is. WordPress.com gebruikt het voor het genereren van screenshots voor zijn verschillende activiteiten.
Hier is bijvoorbeeld de url om een screenshot van wp.tutsplus te tonen met een breedte van 400 pixels:
http://s.wordpress.com/mshots/v1/http%3A%2F%2Fwp.tutsplus.com?w=400
Mogelijk moet u op de koppeling klikken omdat de generator enige tijd nodig heeft om de afbeelding in de cache op te slaan.
Wat we gaan doen:
Onze shortcode zal worden gebruikt zoals:
[ss_screenshot site = "http://wp.tutsplus.com"]
U kunt de code toevoegen aan het functions.php-bestand in uw themamap. De volledige code is beschikbaar in de bronlink hierboven.
Accentsconagua
add_shortcode ('ss_screenshot', 'ss_screenshot_shortcode'); functie 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 = '
'; echo ''. $ image_tag. ''; else echo 'Bad screenshot url!'; Voeg in een post of pagina deze shortcode toe:
[ss_screenshot site = "http://amazon.com"]
Wanneer u de post of pagina bekijkt, ziet u een 300 pixel breed screenshot van Amazon. Houd er rekening mee dat u de pagina na enkele seconden mogelijk moet vernieuwen om het screenshot in de cache te bekijken. Speel rond met de breedte en kijk wat er gebeurt als je buiten bereik komt. Overigens kunt u elk gewenst breedtebereik instellen. Test ook een slechte URL: u zou het waarschuwingsbericht moeten zien in plaats van een screenshot.
Nu we een werkende shortcode hebben, laten we zien hoe we dat in onze WordPress-lus kunnen opnemen.
Laten we ons een scenario voorstellen waarin we een schermafbeelding van een site naast elk van onze berichten willen weergeven. Om redenen van opmaak en bruikbaarheid is het het beste om dit proces te automatiseren door een aangepast veld toe te voegen aan ons berichtbewerkingsscherm. In dat veld kunnen we een site-url invoeren die vervolgens in de post-loop kan worden gebruikt om een screenshot weer te geven met onze nieuwe shortcode.
Als het aangepaste veldvak niet wordt weergegeven op je bewerkingsscherm, kijk dan rechtsboven naar het scherm en je zou het scherm Schermopties moeten zien. Klik daarop en vink het vakje Aangepaste velden aan. Nu zou je zoiets als onderaan scherm moeten zien:
Klik op de koppeling Nieuwe invoeren en maak een nieuw aangepast veld met de naam screenshot_url. Dit is wat u zou moeten zien:
Wanneer u nu een bericht maakt / bewerkt (het aangepaste veld verschijnt voor alle berichten), kunt u een URL invoeren om een screenshot te genereren met betrekking tot het bericht.
Hier is een serieus versimpelde versie van de standaard WordPress post loop (zoals te vinden in een themasjabloonbestand) inclusief onze schermcode voor het screenshot:
if (have_posts ()) while (have_posts ()): the_post (); de titel(); $ url = get_post_meta ($ post-> ID, 'screenshot_url', true); do_shortcode ('[ss_screenshot site = "'. $ url. '"]'); de inhoud(); stop als; endwhile; Als je een bericht met de titel Honda Accord hebt gemaakt en deze een schermafbeelding url van http://www.honda.com hebt gegeven, met behulp van je nieuwe loop-setup, zou je zoiets als dit moeten zien:
In plaats van een ruw waarschuwingsbericht weer te geven als een bericht geen screenshot-URL heeft, kunt u een standaardafbeelding weergeven.
Als u de screenshotgenerator van WordPress niet wilt gebruiken of als u grotere behoeften hebt, kunt u de gratis optie gebruiken op een screenshotdienst zoals http://www.shrinktheweb.com. U kunt de technieken die in deze zelfstudie worden gebruikt toepassen op elke screenshotdienst.
