Share
In questo tutorial imparerai un segreto: come generare screenshot di siti web da utilizzare nei tuoi post WordPress utilizzando un servizio fornito da WordPress.com. Trasformeremo anche questo in uno shortcode facile da usare per visualizzare gli screenshot ... iniziamo!
È un segreto aperto, ed è stato per un paio di anni, che WordPress espone un generatore di screenshot al suo sottodominio s.wordpress.com. E lo scuttlebutt è che finché non lo maltratti, allora è gratis da usare. WordPress.com lo usa per generare screenshot per le sue varie attività.
Ad esempio, ecco l'URL per mostrare uno screenshot di wp.tutsplus con una larghezza di 400 pixel:
http://s.wordpress.com/mshots/v1/http%3A%2F%2Fwp.tutsplus.com?w=400
Potrebbe essere necessario fare nuovamente clic sul collegamento poiché il generatore impiega un po 'di tempo per memorizzare l'immagine nella cache.
Cosa faremo:
Il nostro shortcode sarà usato come:
[ss_screenshot site = "http://wp.tutsplus.com"]
Puoi aggiungere il codice al file functions.php nella tua directory dei temi. Il codice completo è disponibile nel link sorgente sopra.
Accentsconagua
add_shortcode ('ss_screenshot', 'ss_screenshot_shortcode'); function ss_screenshot_shortcode ($ atts) $ width = intval ($ atts ['width']); $ larghezza = (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 = '
'; eco '' . $ image_tag. ''; else echo 'Bad screenshot url!'; In un post o pagina, inserisci questo shortcode:
[ss_screenshot site = "http://amazon.com"]
Quando visualizzi il post o la pagina, dovresti vedere uno screenshot di Amazon da 300 pixel. Ricorda, potresti dover aggiornare la pagina dopo alcuni secondi per vedere lo screenshot memorizzato nella cache. Gioca con la larghezza e guarda cosa succede quando vai fuori portata. A proposito, puoi impostare qualsiasi intervallo di larghezza che ti piace. Inoltre, prova un URL non valido: dovresti vedere il messaggio di avviso invece di uno screenshot.
Ora che abbiamo uno shortcode funzionante, vediamo come possiamo incorporarlo nel nostro ciclo WordPress.
Immaginiamo uno scenario in cui vogliamo visualizzare uno screenshot di un sito accanto a ciascuno dei nostri post. Per motivi di formattazione e usabilità, è meglio automatizzare questo processo aggiungendo un campo personalizzato alla nostra schermata di modifica del post. In quel campo possiamo inserire un url del sito che può essere usato nel post loop per mostrare uno screenshot usando il nostro nuovo shortcode.
Se la casella di campo personalizzata non viene visualizzata nella schermata di modifica del post, guarda la schermata in alto a destra e dovresti vedere la scheda Opzioni schermo. Fare clic e selezionare la casella Campi personalizzati. Ora dovresti vedere qualcosa di simile alla fine dello schermo:
Fai clic sul link Inserisci nuovo e crea un nuovo campo personalizzato chiamato screenshot_url. Questo è ciò che dovresti vedere:
Ora quando crei / modifichi un post (il campo personalizzato viene visualizzato per tutti i post) puoi inserire un url per generare uno screenshot correlato al post.
Ecco una versione seriamente ridotta del post loop standard di WordPress (come si trova in un file modello di tema) incluso il nostro codice di visualizzazione dello screenshot:
if (have_posts ()) while (have_posts ()): the_post (); il titolo(); $ url = get_post_meta ($ post-> ID, 'screenshot_url', true); do_shortcode ('[ss_screenshot site = "'. $ url. '"]'); il contenuto(); finisci se; ENDWHILE; Se hai creato un post con il titolo Honda Accord e gli hai dato un URL di http://www.honda.com, utilizzando la tua nuova configurazione del loop, dovresti vedere qualcosa di simile a questo:
Invece di visualizzare un messaggio di avvertimento severo se un post non ha un URL di screenshot allegato, è possibile mostrare un'immagine predefinita.
Se non desideri utilizzare il generatore di screenshot di WordPress o se hai esigenze più grandi, puoi utilizzare l'opzione gratuita su un servizio di screenshot come http://www.shrinktheweb.com. È possibile applicare le tecniche utilizzate in questo tutorial a qualsiasi servizio di screenshot.
