Screenshots af websites i WordPress


Her kommer en lille guide til hvordan du arbejder med screenshots af websites i WordPress. (Kan også bruges på andre sites).

Har du sommetider behov for at vise et screenshot af et website, så er her en nem måde at gøre det på. Det kan være et website der viser anmeldelser, et linkkatalog eller lignende hvor man gerne vil vise et billede af et website.

WordPress har en service som automatisk kan vise et screenshot, så du ikke behøver at lave et print screen og klippe/klistre i Photoshop.

<img alt="" src="http://s.wordpress.com/mshots/v1/http%3A%2F%2Fwww.larsbachmann.dk?w=400" />

ovenstående kode viser et screenshot af denne blog med en bredde på 400px. Parameteren w= bestemmer bredden på billedet.

Bruger du WordPress, og har du ofte brug for at vise et screenshot, så kan du med fordel lave en shortcode, så du nemt kan indsætte et screenshot.

function myScreenshot($atts, $content = null) {
extract(shortcode_atts(array(
"width" => 'width'
), $atts));
return '<img src="http://s.wordpress.com/mshots/v1/http%3A%2F%2F'.$content.'?w=' . esc_attr($width) . '" />';
}
add_shortcode("screenshot", "myScreenshot");

ovenstående kode indsætter du i functions.php som du finder i din tema mappe (husk at tage backup først.). Er du ikke meget for at rode med koden selv, så scroll lidt længere ned og download det hele som et plugin. Nemmere bliver det ikke.

Og så er det bare at indsætte:

[screenshot width=400]www.larsbachmann.dk[/screenshot]

der hvor du gerne vil vise et screenshot af et website.

Her kan du teste screenshots af din egen side: http://www.larsbachmann.dk/wp-screenshots

WP-screenshot plugin

Er du typen der ikke bryder dig om at rode med koden selv, så har jeg lavet funktionen som et plugin.

Download [wp-screenshot] fra WordPress.org og upload til din plugin mappe, og aktiver.
Nu skal du blot tilføje en shortcode der hvor du vil vise et screenshot. Du skal bruge en URL og en “width”.

Ex:

[screenshot width=500]www.wordpress.org[/screenshot]
(Visited 412 times, 1 visits today)

Lars Bachmann

Iværksætter og Online nørd. Arbejder med WordPress og online markedsføring i min virksomhed Conseo.

Prøv lige at se disse indlæg også!

26 kommentarer til Screenshots af websites i WordPress

  1. Det er bare skide smart – super!

  2. Jacob Worsøe siger:

    Genialt. Gemmer den så screenshottet eller bliver der hentet et nyt hver gang siden kaldes? Ovre på dit test link er den nemlig ret langsom til at hente screenshottet…

  3. Lars Bachmann siger:

    Nikolaj og Morten: Tak og velbekomme
    Jacob: Den gemmer screenshot’et i en periode. Ved dog ikke hvor længe, men jeg synes det er rimelig opdateret deres screenshots.

  4. Lars Bachmann siger:

    Har iøvrigt lige opdateret indlægget med en ekstra funktion, samt lavet det som et plugin, til dem der ikke vil rode med koden.

  5. Jacob Worsøe siger:

    Lars: Okay, der er ikke mulighed for at styre hvor længe den gemmer det?

  6. Lars Bachmann siger:

    Nope. Så skal du selv lave noget caching på billedet?
    Men når først billedet er genereret, så loader det hurtigt synes jeg, så jeg oplever ikke problemer med det.

  7. Janni Nielsen siger:

    Super smart har allerede brugt det, havde dog nogle problemer med at det tog lang tid før billedet bliver genereret. Men det ser ud til at virke fint nu.

  8. Lars Bachmann siger:

    Så er “WP-Screenshot” tilføjet til WordPress.org som et officielt plugin.
    http://wordpress.org/extend/plugins/wp-screenshot/

  9. Okay, det er fandme smart! Tak for det! 🙂

  10. Thomas siger:

    Super fedt plugin. Super anvendelige til mange forskellige formål.

  11. Kasper Toxvig siger:

    Super smart! Vidste ikke det var SÅ nemt!
    Og med dit plugin, kan det jo ikke gøres nemmere;-)
    TAK!:-)

  12. Skidesmart, mange tak! 🙂

  13. Pluginnet driller på mit site. Kommer med et 404 ikon: http://www.renefrederiksen.dk/blog-2/rejsebeskrivelser-og-blogs-om-usa/

    Nogen idéer?

  14. Lars Bachmann siger:

    Hej René
    Jeg tjekkede lige det ene 404 billede og det ser ud til at du har http:// med 2 gange?
    Det ser ud til at du har brugt [screenshot..]http://adresse.dk..[/screenshot]
    Men du skal blot bruge [screenshot..]adresse.dk[/screenshot] (altså uden http)

  15. Så virker det. Tak!

  16. Espen siger:

    Hej Lars

    Jeg får blot en hvid firkant, hvis jeg prøver at linke til http://www.visuell.dk – hvis jeg fra visuell.dk linker til visivi.dk, ja så virker det fint? Hvor kan jeg gøre noget?

  17. Espen siger:

    Hej Lars – Tak for det hurtige svar. Jeg har ikke http:// i koden på http://visivi.dk/fotografering/ , blot “[screenshot width=400]www.visuell.dk[/screenshot]”.
    Det mærkelige er, at fra visuell.dk virker det fint med at hente screenshot fra visivi.dk. Min mistanke er, at det må være “et-eller-andet” i opsætningen på visuell.dk, der gør knuder?

  18. Espen siger:

    Jeg prøvede lige at fjerne www – nu er der blot den berømte hvide firkant. Det er meget sært.

  19. Lars Bachmann siger:

    Hej Espen. Det har noget at gøre med hvordan dit site det loader. Problemet er at screenshot’et af din forside er hvid/blankt

    Kilde: http://www.larsbachmann.dk/wp-screenshots?www=visuell.dk

    Tester jeg f.eks. med din kontaktside, så virker det bedre

    Kilde: http://www.larsbachmann.dk/wp-screenshots?www=visuell.dk%2Fkontakt-2%2F

    Så der er desværre ikke umiddelbart noget at gøre ved det.

  20. Espen siger:

    Hej Lars

    Ja, det anede mig, at visuell.dk var selve problemet her; det har sikkert noget med selve galleriet der at gøre. Jeg vil lige påpege, at jeg ikke mistænkte dit fine plugin på noget tidspunkt, men tænkte at du måske fandt problemet “interessant” som udvikler 😉 Oh well, jeg laver bare et godt gammeldags screendump. Tak for indsatsen! 🙂

  21. Anton siger:

    Hey Lars,

    Great plugin – I really love it! I was wondering if you could help me out placing text next to the screenshot. I am currently creating lots of white space, therefore I would like to have text floating right next to the image. I tried different things but nothing worked.

    You find an example here: http://www.gegen-langeweile.org/fotoposter-bestellen/

  1. 21. januar 2013

    […] Screenshots af hjemmeside […]

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *