WordPress » Tutorials » Sviluppo » PHP » Internet

Wordpress: usare gli shortcodes

venerdì 3 luglio, 2009

Dalla versione 2.5 di Wordpress (meglio 2.5.1) sono disponibili i cosidetti shortcodes, una procedura che permette di creare delle callback, o meglio degli hook, quando nel testo del nostro post viene trovata una stringa formattata con le parentesi quadre tipo [id_shortcode]. Prima della release 2.5 di Wordpress gli shortcodes erano implementati manualmente (vedi Napolux), ora è possibile sfruttarli con più semplicità e per gli usi più disparati.

Sintassi

Per utilizzare gli shortcodes è sufficente creare una funzione di hook, con dei parametri standard e impostare lo shortcodes tramite add_shortcode():

PLAIN TEXT
PHP:
  1. /**
  2.  * Questo è il prototipo della funzione di hook
  3.  */
  4. function mio_shortcode_hook( $attrs, $content = null ) {
  5.     // codice qui
  6.     return "Output nel post";
  7. }
  8. /**
  9.  * add_shortcode() accetta due parametri:
  10.  *
  11.  * @param string $tag Shortcode tag to be searched in post content.
  12.  * @param callable $func Hook to run when shortcode is found.
  13.  */
  14. add_shortcode( "mio_shortcode", "mio_shortcodes_hook" );

Questo codice può essere posizionato nel file functions.php. Durante la scrittura del post inserendo mio_shortcode tra parentesi quadre sarà eseguito il codice dell'hook (della funzione) mio_shortcode_hook().

La funzione di hook, e il nostro shortcode, possono essere utilizzati in vari modi a seconda delle necessità:

PLAIN TEXT
HTML:
  1. <!-- solo shortcode -->
  2. [mio_shortcode]
  3. <!-- con attributi -->
  4. [mio_shortcode color='#000000']
  5. <!-- con contenuto incluso -->
  6. [mio_shortcode color='#000000']Sono il contenuto[/mio_shortcode]

Note: nel codice qui sopra ho dovuto inserire uno spazio nello shortcode di chiusura tra l'apertura della parentesi quadra e lo slash. Tale spazio andrà eliminato nel vostro codice. Tutto questo a causa di un conflitto con il plugin che uso per visualizzare il codice, in quanto anc'esso usa una sintassi simile a quella degli shortcode

Gestione degli attributi

Gli attributi inseriti in uno shortcode sono facilissimi da gestire ed è possibile impostare dei valore di default. Ecco ad esempio come creare uno shortcode che gestisca un titolo formattato in modo speciale:

PLAIN TEXT
PHP:
  1. function mio_shortcode_hook( $attrs, $content = null ) {
  2.     extract( shortcode_atts( array(
  3.         'attr_1' => 'attributo 1 default',
  4.         'attr_2' => 'attributo 2 default',
  5.         // ...etc
  6.         ), $attrs ) );
  7.     // ...
  8. }

Similmente a come abbiamo visto in Wordpress: wp_parse_args() , la gestione degli attributi è davvero semplice e permette di impostare dei valori di default in caso di assenza degli attributi stessi. Il codice sopra esposto "fonde" l'array $attrs con quello dinamico tramite la funzione shortcode_atts() (cugina della wp_parse_args()), rendendo disponibile nello scope della funzione (vedi extract()) gli attributi come variabili. Gli attributi devono essere tutti in lowercase!

Gestione del contenuto

La modalità con il content è quella più versatile in particolari casi, ecco un esempio chiarificatore:

PLAIN TEXT
PHP:
  1. function make_title_shortcode( $attrs, $content = null ) {
  2.    return '<h1 title="' . $content . '"><span>' . $content . '</span></h1>';
  3. }
  4. add_shortcode('my-title', 'make_title_shortcode');

Utilizzando lo shortcode nel nostro post:

PLAIN TEXT
HTML:
  1. [my-title]Questo è un titolo[/my-title]

Avremo come output:

PLAIN TEXT
HTML:
  1. <h1 title="Questo è un titolo"><span>Questo è un titolo</span></h1>

Possiamo migliorare il nostro esempio introducento anche degli attributi per rendere più personalizzabile il nostro shortcode:

PLAIN TEXT
PHP:
  1. function make_title_shortcode( $attrs, $content = null ) {
  2.     extract( shortcode_atts( array(
  3.       'class' => 'my-title',
  4.       ), $attrs ) );
  5.  
  6.    return '<h1 class="' . $class . '" title="' . $content . '"><span>' . $content . '</span></h1>';
  7. }

PLAIN TEXT
HTML:
  1. [my-title class="color-red"]Questo è un titolo[/my-title]

PLAIN TEXT
HTML:
  1. <h1 class="color-red" title="Questo è un titolo"><span>Questo è un titolo</span></h1>

Come già indicato potete trovare molte informazioni sulla documentazine ufficiale di Wordpress. Ecco qualche utile shortcode.

Mostrare AdSense nei post

Inserire il codice qui sotto nel vostro file functions.php. Cambiate i codice Google AdSense con i vostri.

PLAIN TEXT
PHP:
  1. function show_adsense() {
  2.     return '<script type="text/javascript"><!--
  3.        google_ad_client = "pub-9877654123213210";
  4.        google_ad_slot = "9876543210";
  5.        google_ad_width = 468;
  6.        google_ad_height = 60;
  7.        //-->
  8.        </script>
  9.        <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
  10.        ';
  11. }
  12. add_shortcode('myadsense', 'adsense');

Nel posto basta inserire:

PLAIN TEXT
HTML:
  1. [myadsense]

Aggiungere note ad un post visibile solo dall'amministratore

Questo shortcode permette di aggiungere delle note ad un post visibili solo ad un amministratore.

PLAIN TEXT
PHP:
  1. function admin_note( $attrs, $content = null ) {
  2.     if ( current_user_can( 'publish_posts' ) )
  3.         return '<div class="admin-note">' . $content . '</div>';
  4.     return '';
  5. }
  6. add_shortcode( 'admin-note', 'admin_note' );

PLAIN TEXT
HTML:
  1. [note]Questa nota è visibile solo agli amministratori del blog[/note]

Pubblicherò in futuro altri shortcode utili...

Post correlati

Questo articolo ti è stato utile?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Loading ...

Tags: , , , , , ,

5 commenti a: “Wordpress: usare gli shortcodes”

  1. getAvatar 1.0
    07 lug, 2009 camu:

    Come direbbero qui in America... Awesome! Non conoscevo questa cosa degli short codes in wordpress, io ho sempre fatto "a mano" col vecchio metodo. Grazie.

    Rispondi Quota
  2. getAvatar 1.0
    07 lug, 2009 Giovambattista Fazioli:

    @camu: carissimo... effettivamente glishortcodes sono uno strumento davvero potente e utile, in molte occasioni. Apropos... mi sa che quest'anno non riuscirò a venire a farti un saluto, tuttavia conservo con cura i tuoi utilissimi consigli e cercherò di seguirli almeno per l'anno prossimo... :)

    Rispondi Quota
  3. getAvatar 1.0
    07 lug, 2009 camu:

    Assolutamente! Quando vuoi, sei il benvenuto ;)

    Rispondi Quota
  4. getAvatar 1.0
    09 lug, 2009 Undolog.com» Wordpress: usare gli shortcodes:

    [...] approfondire consulta articolo originale: Undolog.com» Wordpress: usare gli shortcodes Articoli correlati: FeedBurner IT – Wordpress: usare gli [...]

  5. getAvatar 1.0
    18 ago, 2009 Alessio:

    Ottimo :) o in questo modo avevo scritto un piccolo plugin bbcode :)

    Rispondi Quota

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre>         // blocco generico
[code][/code]       // blocco generico
[as][/as]           // Actionscript
[css][/css]         // CSS Style Sheet
[html][/html]       // HTML
[js][/js]           // Javascript
[objc][/objc]       // Objective-C
[php][/php]         // PHP
[sql][/sql]         // SQL