Acrobat.com e Google Maps: shortcode per WordPress

Come inserire con due shortcode le mappe di Google Maps e i documenti ospitati su Acrobat.com. Vita facile, eh?

Questo è un post tecnico di 7 anni fa. Le istruzioni potrebbero non essere più valide.

Dopo la serie su YouTube ecco altri due shortcode da usare in WordPress. Ricordo che gli shortcode in WordPress, nel caso degli esempi di questo articolo e detto in maniera semplice, consentono di incorporare codice web di servizi come Google e Acrobat. Se, ad esempio volete pubblicare una mappa di Google Maps, Google vi fornisce un pezzo di codice da incollare nella pagina web, qualcosa del tipo:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.it/maps?hl=it&amp;ie=UTF8&amp;ll=37.540222,13.95813&amp;spn=4.555009,9.788818&amp;z=7&amp;output=embed"></iframe><br /><small><a href="http://maps.google.it/maps?hl=it&amp;ie=UTF8&amp;ll=37.540222,13.95813&amp;spn=4.555009,9.788818&amp;z=7&amp;source=embed" style="color:#0000FF;text-align:left">Visualizzazione ingrandita della mappa</a></small>

Se volete modificare le dimensioni della mappa restituita, dovete modificare i due parametri width e height.

Tutto questo, però, può essere semplificato con uno shortcode, più semplice da utilizzare e gestire. Vediamo come farlo per Google Maps e Acrobat.com.

Google Maps

Questo shortcode è il medesimo che Digging into WordPress ha pubblicato, ma ha bisogno di una modifica.

Incollate nel file functions.php del vostro tema questo codice:

function googleMaps($atts) {
	extract(shortcode_atts(array(
		'url' => '',
		'base' => '425',
		'altezza'=> '350'
	), $atts));
	return '<iframe width="'.$base.'" height="'.$altezza.'" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'.$url.'&amp;output=embed"></iframe>';
}
add_shortcode("mappa", "googleMaps");

Salvate e inviatelo al vostro server. Nell’articolo o nella pagina dove volete far vedere la mappa usate questa riga:

[mappa url="{inserire URL}" base="460" altezza="372"]

Adattate la riga inserendo l’URL della mappa e le dimensioni con cui volete farla visualizzare (parametri, questi ultimi due, facoltativi). Per essere precisi, ecco qual è l’URL:

Se, come è probabile che sia, pubblicate le mappe sempre alle stesse dimensioni, specificatele nel codice che incollate nel file functions.php, in modo da evitare di specificarlo ogni volta. In questo caso lo shortcode sarà soltanto:

[mappa url="{inserire URL}"]

Ecco un esempio d’uso:

View larger map

Note
Aggiornamento. In questo commento ho inserito la riga del link verso la mappa ingrandita.

Acrobat.com

Acrobat.com è un servizio di Adobe che consente anche la conservazione e condivisione dei propri file .pdf, .odt, .doc, .txt, ecc. Dopo la registrazione al servizio, vi verranno forniti gratuitamente ben 5 giga di spazio. Anche qui, se utilizzaste il codice fornito da Acrobat.com, esso sarebbe qualcosa del tipo:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="365" height="400" codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab"><param name="movie" value="https://acrobat.com/Clients/current/ADCMainEmbed.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#202020" /><param name="allowScriptAccess" value="sameDomain" /><param name="allowFullScreen" value="true" /><param name="flashvars" value="d=fALAQRsn1zcCtkjEa0IYeA" /><embed src="https://acrobat.com/Clients/current/ADCMainEmbed.swf" quality="high" bgcolor="#202020" width="365" height="400" align="middle" play="true" loop="false" quality="high" wmode="transparent" allowScriptAccess="sameDomain" allowFullScreen="true" type="application/x-shockwave-flash" flashvars="d=fALAQRsn1zcCtkjEa0IYeA" pluginspage="http://www.adobe.com/go/getflashplayer"></embed></object>

che tra l’altro non verrebbe validato per via dell’elemento <embed>. Con lo shortcode tutto diventa più semplice e il codice restituito è valido.

Incollate nel file functions.php le linee:

function ubn_acrobat($atts) {
	extract(shortcode_atts(array(
		'id'     => '',
		'width'  => '460',
		'height' => '400'
	), $atts));
	$docid = substr($id, 23);
	$output = '<p><object type="application/x-shockwave-flash" data="https://acrobat.com/Clients/current/ADCMainEmbed.swf" width="'.$width.'" height="'.$height.'">
			<param name="movie" value="https://acrobat.com/Clients/current/ADCMainEmbed.swf" />
			<param name="flashvars" value="d='.$docid.'" />
			<param name="quality" value="high" />
			<param name="allowScriptAccess" value="sameDomain" />
			<param name="allowFullScreen" value="true" />
			<param name="wmode" value="transparent" />
		</object></p>';
	return $output;
}
add_shortcode('acrobat', 'ubn_acrobat');

Salvate e inviatelo al vostro server. Nell’articolo o nella pagina dove volete far vedere il documento usate una riga come questa:

[acrobat id="{inserire URL}" width="640" height="480"]

Adattate i parametri id del documento e quelli facoltativi width e height. L’URL da inserire nel parametro id vi viene fornito da Acrobat.com quando decidete di condividerlo con chiunque. Ecco qual è:

Esempio d’uso:

Autore: Aldo Latino

Aldo Latino usa con entusiasmo Linux nella distribuzione Ubuntu, è un appassionato di WordPress e si diletta a fare il blogger. Ha anche una lista dei desideri. Per altre informazioni visita la sua .

9 pensieri riguardo “Acrobat.com e Google Maps: shortcode per WordPress”

  1. L’inserimento del codice all’interno del file, functions.php, va bene per qualsiasi versione di Wordpress?
    Io utilizzo la 2.8.6. e mi trovo benissimo… non vorrei…

  2. Grazie Aldo, proprio quello che mi serviva per inserire Google Maps in un sito con WordPress senza utilizzare plugin!

    Se invece si inserisce l’iframe di Google Maps direttamente nella pagina o nell’articolo, ho notato che quando si passa dalla modalità HTML a quella VISUALE, l’iframe scompare!

    Così invece sembra funzionare benissimo! ;)

    Pensi che si possa integrare in qualche modo nella funzione anche il tag “small” per la stringa sotto che permette la visualizzazione ingrandita della mappa?

    1. Ciao Matteo,
      certo che si può aggiungere. Ecco il codice nuovo da sostituire a quello presentato nell’articolo:

      /**
       * Visualizza una mappa di Google.
       *
       * @example [mappa url="{inserire URL}" base="460" altezza="372"]
       * @return string L'elemento iframe.
       */
      function googleMaps($atts) {
      	extract(shortcode_atts(array(
      		'url' => '',
      		'base' => '425',
      		'altezza'=> '350'
      	), $atts));
      
      	$output = '<iframe width="' . $base . '" height="' . $altezza . '" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="' . $url . '&output=embed"></iframe>';
      	$output .= '<br /><small><a href="' . $url . '&source=embed">Visualizzazione ingrandita della mappa</a></small>';
      
      	return $output;
      }
      add_shortcode('mappa', 'googleMaps');
      1. Ottima guida, finalmente ho risolto il problema nel quale non mi compariva l’immagine, ma compariva solo la scritta.
        Ora ho aggiunto questo codice ma la scritta mi compare sottolineata e con spazzi lunghissimi…
        Visualizzazione__________________________ ingrandita_________________ della___________ mappa
        che parti del codice devo modificare per aggiustare questa cosa, uso wordpress.
        Grazie mille :)

        1. scusami ancora, un’altra cosa, klikando su visulizzazione ingrandita della mappa, posso fare in modo che si apre in’un’altra pagina e non sulla stessa?

          1. Per il primo problema, è probabile che dipenda dal tuo CSS.

            Per il secondo, inserisci target="_blank" nel link. Ti conviene prendere il codice che ho pubblicato in questo commento e cambia la riga 15 con questa:

            $output .= '<br /><small><a href="' . $url . '&source=embed" target="_blank">Visualizzazione ingrandita della mappa</a></small>';

I commenti sono chiusi