Aldolat.it — Post con tag Shortcode

Evitare il texturize di WordPress

aldolat@gmail.com (Aldo Latino) — Sat, 16 Apr 2011 18:38:01 +0000

Nel cantiere continuamente aperto, che è questo blog, ho trasferito tutti gli shortcode che andavo copiando di tema in tema in un plugin apposito, UBN Shortcodes, in modo da averli sempre disponibili anche su temi che intendo solo provare. Si tratta di funzioni che mi aiutano parecchio nella stesura degli articoli; unito poi all’uso di AddQuicktag¹ la cosa diventa straordinaria.

Mentre facevo questa operazione, ho aggiunto uno shortcode dedicato all’elemento pre e mi sono accorto che WordPress cambiava le virgolette diritte " in quelle tipografiche “. Mi chiedevo come mai, visto che se usavo direttamente quell’elemento il cambio non veniva operato. Era chiaro che bisognava dare uno sguardo al file /wp-includes/formatting.php e, di preciso, alla funzione wptexturize($text), una vecchia conoscenza per chi ha a che fare con la creazione di temi e plugin. Questa funzione, che appunto trasforma alcuni caratteri in altri, non viene eseguita su quei caratteri che si trovano all’interno di alcuni elementi HTML prestabiliti, e cioè:

$default_no_texturize_tags = array('pre', 'code', 'kbd', 'style', 'script', 'tt');

Come vedete, troviamo anche il nostro pre. Alla riga successiva, troviamo un altro array, ma stavolta dedicato agli shortcode da non “texturizzare”. L’array, però, contiene solo code:

$default_no_texturize_shortcodes = array('code');

Per questo motivo il mio shortcode [pre] subiva gli effetti “nefasti” di wptexturize.

Per includere in un tema o in un plugin anche altri shortcode all’array, è sufficiente aggiungere un filtro. Infatti, se nel file formatting.php guardiamo un po’ oltre, vediamo questa riga:

$no_texturize_shortcodes = '(' . implode( '|', apply_filters( 'no_texturize_shortcodes', $default_no_texturize_shortcodes ) ) . ')';

dove la presenza di apply_filters ci consente di ampliare gli shortcode che non subiscono alcuna modifica al loro contenuto. Più tecnicamente, dobbiamo creare un array di elementi HTML da assegnare a no_texturize_shortcodes che verranno quindi aggiunti all’array principale $default_no_texturize_shortcodes.

Basta così creare una funzione apposita nel proprio tema o plugin che può suonare più o meno così:

add_filter('no_texturize_shortcodes',  'ubn_no_texturize_shortcodes');

function ubn_no_texturize_shortcodes( $shortcodes_array ) {
  $shortcodes_array = array( 'pre', 'tt' );

  return $shortcodes_array;
}

Ho inserito sia pre che tt, cioè due shortcode che uso io: potete sostituirli con quelli che volete o aggiungerne d altri. Questa semplice funzione vi garantisce che il testo inserito all’interno rimarrà intatto. Con questa tecnica si può allargare, ovviamente, pure l’array dedicato ai “tags”, anche se comunque non vedo necessità di farlo.

Scrissi qualcosa su AddQuicktag in questo post. ↩︎

L'articolo Evitare il texturize di WordPress è uno scritto di aldolat.it. Rispettane le condizioni di licenza.

Acrobat.com e Google Maps: shortcode per WordPress

aldolat@gmail.com (Aldo Latino) — Wed, 20 Jan 2010 11:38:57 +0000

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&ie=UTF8&ll=37.540222,13.95813&spn=4.555009,9.788818&z=7&output=embed"></iframe><br /><small><a href="http://maps.google.it/maps?hl=it&ie=UTF8&ll=37.540222,13.95813&spn=4.555009,9.788818&z=7&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:

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 è:

L'articolo Acrobat.com e Google Maps: shortcode per WordPress è uno scritto di aldolat.it. Rispettane le condizioni di licenza.

WordPress e Youtube: funzioni e shortcode

aldolat@gmail.com (Aldo Latino) — Thu, 14 Jan 2010 18:03:26 +0000

Sulla scia del post precedente, completo quanto già scritto con alcune indicazioni che magari possono tornare utili. L’argomento riguarda sempre WordPress e YouTube e come pubblicare un video evitando i problemi evidenziati prima. Alla funzione dell’articolo precedente qui aggiungo una carrellata di altre funzioni o, per essere più precisi, la medesima con alcune differenze: a seconda dei casi, può tornare utile l’una o l’altra.

Queste funzioni vanno inserite nel file functions.php del proprio tema: si scelga quella che più è congeniale con ciò che si deve fare o, se si vuole, possono essere usate tutte contemporaneamente.

Funzione 1. Inserire il video prelevandone l’URL da campo personalizzato e specificandone le dimensioni

Questa funzione, utile per chi sviluppa template, va utilizzata direttamente nel codice del tema: essa preleva l’indirizzo completo della pagina del video dal campo personalizzato (“video”) del post presente nel loop; si possono specificare le dimensioni nel richiamo della funzione, altrimenti essa applicherà quelli standard stabiliti nella funzione stessa. Eccola:

// Video di YouTube da campo personalizzato
// Esempio d'uso: youtubeCF('425', '344')
function youtubeCF($width = '425', $height = '344') {
    global $post;
    $videocf = substr(get_post_meta($post->ID, 'video', true), 31, 11);
    echo '<p><object type="application/x-shockwave-flash" data="http://www.youtube.com/v/'.$videocf.'&amp;hl=it_IT" width="'.$width.'" height="'.$height.'">
        <param name="movie" value="http://www.youtube.com/v/'.$videocf.'&hl=it_IT" />
        <param name="FlashVars" value="playerMode=embedded" />
        <param name="wmode" value="transparent" />
    </object></p>';
}

Il campo personalizzato è stabilito in “video”: potete cambiarlo nella funzione a quello che volete (riga 5). La funzione va richiamata così:

<?php youtubeCF('220', '178'); ?>

dove i due numeri sono le dimensioni di uscita del video (base, altezza). La si può utilizzare in sidebar, ad esempio, per presentare i video della sezione Multimedia del blog.

Funzione 2. Inserire il video specificandone l’URL e le dimensioni

Rispetto alla funzione di qui sopra, questa è più un esempio di come inserire un video direttamente nel file di un template e va modificata ogni volta nel template stesso. In questo caso vanno specificati l’indirizzo del video (sempre nella forma della URL della pagina) e, se lo si vuole, anche le dimensioni, altrimenti verranno usate quelle predefinite nella funzione.

// Video di YouTube da URL completo
// Esempio d'uso: youtubeURL('http://www.youtube.com/watch?v=kC9Ju63Bchk', '425', '344');
function youtubeURL($url = false, $width = '425', $height = '344') {
    $videourl = substr($url, 31, 11);
    echo '<p><object type="application/x-shockwave-flash" data="http://www.youtube.com/v/'.$videourl.'&amp;hl=it_IT" width="'.$width.'" height="'.$height.'">
        <param name="movie" value="http://www.youtube.com/v/'.$videourl.'&amp;hl=it_IT" />
        <param name="FlashVars" value="playerMode=embedded" />
        <param name="wmode" value="transparent" />
    </object></p>';
}

La funzione va richiamata così:

<?php youtubeURL('http://www.youtube.com/watch?v=kC9Ju63Bchk', '220', '178'); ?>

dove l’indirizzo è quello del video da mostrare e i due numeri sono le dimensioni di uscita del video (base, altezza).

Passiamo agli shortcode.

Shortcode 1. Inserire il video specificandone l’URL e le dimensioni

Questa funzione è la stessa di quella del post precedente, con la differenza che qui possiamo anche specificarne le dimensioni di uscita. La funzione è richiamabile nel box di scrittura dell’articolo perché è agganciata a uno shortcode. Ciò significa che quando volete visualizzare un video vi basterà inserire tra le righe dell’articolo lo shortcode necessario. Ecco la funzione:

// Shortcode per visualizzare un video da Youtube specificandone l'URL
function youtubeVideo($atts) {
    extract(shortcode_atts(array(
        'video' => '',
        'width' => '425',
        'height' => '344'
    ), $atts));
    $videoID = substr($video, 31, 11);
    return '<p><object type="application/x-shockwave-flash" data="http://www.youtube.com/v/'.$videoID.'&amp;hl=it_IT" width="'.$width.'" height="'.$height.'">
            <param name="movie" value="http://www.youtube.com/v/'.$videoID.'&amp;hl=it_IT" />
            <param name="FlashVars" value="playerMode=embedded" />
            <param name="wmode" value="transparent" />
    </object></p>';
}
add_shortcode("youtube", "youtubeVideo");

Lo shortcode va richiamato nel post così:

[youtube video="http://www.youtube.com/watch?v=kC9Ju63Bchk" width="220" height="178"]

È necessario solo inserire l’URL della pagina del video, mentre è facoltativo specificarne le dimensioni.

Shortcode 2. Prelevare il video da un campo personalizzato

Se nel post, per altre ragioni, avete già un campo personalizzato in cui è presente l’URL del video di YouTube, potete usare questo semplicissimo shortcode per richiamarlo nel testo dell’articolo:

// Shortcode per visualizzare un video di Youtube prelevando l'URL da campo personalizzato
function youtubeSCF($atts) {
    global $post;
    extract(shortcode_atts(array(
        'width' => '425',
        'height' => '344'
    ), $atts));
    $videoscf = substr(get_post_meta($post->ID, "video", true), 31, 11);
    return '<p><object type="application/x-shockwave-flash" data="http://www.youtube.com/v/'.$videoscf.'&amp;hl=it_IT" width="'.$width.'" height="'.$width.'">
        <param name="movie" value="http://www.youtube.com/v/'.$videoscf.'&hl=it_IT" />
        <param name="FlashVars" value="playerMode=embedded" />
        <param name="wmode" value="transparent" />
    </object></p>';
}
add_shortcode("youtubescf", "youtubeSCF");

Potete richiamare questo shortcode semplicemente con:

[youtubescf]

oppure specificando le dimensioni di uscita:

[youtubescf width="425" height="344"]

L'articolo WordPress e Youtube: funzioni e shortcode è uno scritto di aldolat.it. Rispettane le condizioni di licenza.