WordPress: Come creare uno shortcode personalizzato

Nell’articolo di oggi vediamo come creare degli shortcodes personalizzati per WordPress.

Uno shortcode è un piccolo codice testuale nella forma [shortcode] che viene inserito come segnaposto nell’editor di WordPress e successivamente interpretato dal motore di renderizzazione del CMS per produrre un html più complesso.

Quando sviluppo un sito WordPress faccio spesso uso di shortcode perché, a mio avviso, rappresentano la via più semplice per dare all’utilizzatore finale (il vostro cliente) la flessibilità di inserire contenuti complessi in modo estremamente semplice.

In questo tutorial spiegherò passo passo come inserire un nuovo shortcode a quelli già presenti nella piattaforma.

Uno dei più famosi shortcode di WordPress è senz’altro [ gallery ], che permette di inserire nel frontend la cosidetta “Galleria” di immagini. Molti ne ignorano l’esistenza perché viene mascherato dall’editor con un elemento grafico, ma se andate a vedere sulla scheda HTML vi accorgerete che si tratta di uno shortcode.

Riprenderò in seguito il discorso [ gallery ] proponendovi un suggerimento per personalizzare l’html generato e creare quindi “Gallerie” di immagini potenzialmente infinite.

galleria-wordpress

Codice php per creare un nuovo shortcode

Cominciamo il tutorial con la definizione di un semplice shortcode per prendere confidenza con la sintassi delle API.

Supponiamo di voler creare lo shortcode [separatore] che lato frontend renderizza una semplice linea (utile ad esempio per separare graficamente sezioni di un articolo).

Potete inserire il codice php degli esempi che seguono direttamente nel vostro file functions.php del tema che usate o creare un nuovo file php (es. shortcodes.php) che avrete cura di includere (sempre dal file functions.php) qualora intendiate organizzare al meglio i file.

Per prima cosa, usando add_shortcode, definiamo il nostro shortcode e “comunichiamo” a WordPress la funzione php da invocare per sostituire il codice testuale con l’html che desideriamo.

add_shortcode("separatore", "separatore_html_render");  

Il secondo ed ultimo passaggio consiste nel definire la funzione che restituirà l’html. Nel nostro caso:

function separatore_html_render( $atts ) {  
return '<hr style=”border-top:1px solid #CCC;margin:15px 0” />"';  
}  

Il risultato di queste 4 righe di codice php è che quando inseriremo nell’editor di WordPress lo shortcode [separatore] vedremo nel frontend del sito una linea grigia che distanzia i contenuti che separa con margini di 15px sopra e sotto.

Bene, sorpassato il primo impatto analizziamo degli esempi più complessi.

Come utilizzare i parametri e il contenuto di uno shortcode

Uno shortcode è del tutto simile ad un tag html. Ha un tag di apertura, degli attributi, un contenuto e un tag di chiusura.

Nel prossimo esempio combineremo l’uso dei parametri e il contenuto per creare uno shortcode complesso che visualizza, lato frontend, vari tipi di alert box con messaggio.

Il risultato sarà qualcosa di simile all’immagine che segue (per comodità nel codice utilizzerò le classi del framework Bootstrap). Chiameremo il nostro shortcode [box].

Vediamo per prima cosa il codice php da inserire nel file functions.php:

function box_html_render($atts, $content = null) {
	extract(shortcode_atts(array(
		“type” => “info”
	), $atts));
	return '<div class="alert alert-'.$type.'">'.$content.'</div>';
}
add_shortcode(“box”, “box_html_render”);

e la sintassi da inserire nell’editor WordPress (quello che vedreste nel tab HTML) per visualizzare l’alert box giallino del secondo esempio nell’immagine qui sotto.

[box type="warning"] <strong>Attenzione!</strong> 
Questo articolo è datato e le informazioni che contiene potrebbero non essere più corrette.[/box]  

alert-boxes

La funzione box_html_render ha due parametri in ingresso. Il primo rappresenta tutti gli attributi dello shorcode, nel nostro caso solo type.

Questi vengono processati da due funzioni che li rendono disponibili all’interno della funzione di rendering come variabili (nel nostro caso $type) con il nome dichiarato.

Si possono assegnare agli attributi dei valori di default che verranno utilizzati qualora lo shortcode venga usato senza.

Nel nostro caso se si usasse la sintassi:

[box]<strong>Attenzione!</strong> 
Questo articolo è datato e le informazioni che contiene potrebbero non essere più corrette.[/box]

otterremmo un alert box di tipo info, quindi celestino (verrebbe infatti applicata la classe css Bootstrap alert-info).

Grazie a questi due semplici esempi avete imparato come creare shortcodes su WordPress. Gli utilizzi pratici sono pressoché infiniti e dovrete capire voi, in base alle vostre esigenze o a quelle dei vostri clienti, cosa farci e come implementarli.

 Esempio pratico di utilizzo di shortcode per inserimento banner AdSense

Voglio condividere con i lettori di YIW uno shortcode che trovo molto utile. Non metto il codice completo perché dipende molto dai vari casi, ma l’idea in sé è sempre valida.

L’idea per questo shortcode mi è venuta lavorando per un amico che aveva la necessità di inserire annunci AdSense all’interno degli articoli del suo blog, ma che voleva la flessibilità (non essendo un tecnico) di decidere dove e quale banner inserire nel testo.

Ecco lo pseudocodice:

adsense_banner($atts) {
	extract(shortcode_atts(array(
		“type” => “leaderboard”
	), $atts));
	if($type == “skyscraper”){
		return '<div class=”adsense”> /* CODICE DELL’UNITA’ ADSENSE DI TIPO SKYSCRAPER */</div>';
}
	if($type == “square250”){
		return '<div class=”adsense”> /* CODICE DELL’UNITA’ ADSENSE DI TIPO 250x250*/</div>';
}
	if($type == “square336”){
		return '<div class=”adsense”> /* CODICE DELL’UNITA’ ADSENSE DI TIPO 336x280*/</div>';
}
return '<div class=”adsense”> /* CODICE DELL’UNITA’ ADSENSE DI TIPO LEADERBOARD */</div>';
}
add_shortcode(“adsense_banner”, “adsense_banner”); 

Spero sia di ispirazione per qualcuno.

Non bacchettatemi per non aver usato uno switch… è un esempio! :)

Personalizzazione dello shortcode [ gallery ] di WordPress

Come anticipavo, uno degli shortcode più usati è quello che permette di creare “Gallerie” di immagini in WordPress.

È uno dei miei shortcode preferiti, anche perché si riesce a istruire l’utilizzatore finale senza fargli usare “quegli incomprensibili codici tra parentesi quadre”.

Il problema è che, diciamocelo, l’html prodotto da questo shortcode non permette di fare grandi cose.

Quando lo uso “as is” cerco almeno di affiancargli un effetto lightbox.

jQuery(".gallery a").attr('rel', 'niki[foto]').prettyPhoto(
{animation_speed:'normal',theme:'light_square',overlay_gallery: false,deeplinking:false,slideshow:3000}
);

Ho trovato questo codice in un tema WordPress usato qualche anno fa… e mi ha letteralmente stupito perché “non ci ho pensato io!!!”.

Se volete che le vostre gallerie di default su WordPress abbiano un effetto lightbox (nell’esempio viene utilizzato l’ottimo PrettyPhoto) potete inserire questo codice all’interno dei file javascript caricati a fine pagina.

Mi raccomando di configurare da WordPress la galleria in modo che il link sia sul media e non sulla pagina.

Dopo avervi rivelato uno dei miei segreti meglio custoditi, ritorniamo alla nostra personalizzazione dello shortcode [ gallery ]. Supponiamo che vogliate visualizzare uno slideshow con le immagini di una galleria.

Ecco un’idea di come potrebbe essere il vostro shortcode:

/* questo rimuove lo shortcode nativo (in realtà non servirebbe)*/
remove_shortcode('gallery', 'gallery_shortcode');

add_shortcode('gallery', 'galleria_con_slideshow');

function galleria_con_slideshow($attr) {
$output = '<div>';
/* vostro fantastico codice per lo slideshow */
$output .= '</div>';
return $output;
}

La funzione do_shortcode

Non tutti sono a conoscenza di questa funzione del core di WordPress, pertanto ho ritenuto utile inserirla in questo articolo.

La funzione do_shortcode permette di eseguire in modo programmatico un particolare shortcode.

Che stiate scrivendo il vostro widget o semplicemente un template custom del vostro tema potrebbe tornarvi utile per eseguire shortcode (soprattutto quelli relativi al core di WP o a famosi plugin).

Potrete, ad esempio, voler “stampare” nel template custom che avete creato per la pagina Contatti del vostro sito un form di contatto creato con il plugin Contact Form 7.

Ecco il codice:

<?php echo do_shortcode('[contact-form-7 id="91" title="Fom di contatto"]'); ?>

o visualizzare una Galleria di immagini:

<?php echo do_shortcode('[ gallery]');  ?>

Conclusioni

Grazie a questo tutorial saprete ora come creare uno shortcode personalizzato su WordPress.

Se volete “fare un passo in più” vi consiglio questa guida di Tut+ che spiega come associare un pulsante dell’editor di WordPress ad un vostro shortcode personalizzato.

Eviterete così di dover far memorizzare all’utilizzatore finale i vari “codici” associati ai vostri nuovi shortcodes.

Spero abbiate trovato interessante questo articolo. Mi piacerebbe sapere come utilizzate o penserete di utilizzare gli shortcodes di WordPress… aspetto i vostri commenti.

PS: Mi farebbe piacere se mi aggiugeste alle vostre cerchie su Google Plus, vorrei entrare in contatto con i lettori di YIW e con chi, come me, ha una passione sfrenata per il web.

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
Tag: , ,

L'autore

Niki Rocco è Senior Web Developer e Seo Specialist presso Quag. Ha una passione sfrenata per il web e WordPress. Lo trovi su Google+

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

17 commenti

  1. Gloria
  2. antonio
  3. antonio
  4. Marcella

Trackback e pingback

  1. WordPress: Come creare uno shortcode personaliz...
    […] Nell’articolo di oggi vediamo come creare degli shortcodes personalizzati per Wordpress.  […]
  2. Wordpress: Come creare uno shortcode personaliz...
    […] Nell'articolo di oggi vediamo come creare degli shortcodes personalizzati per Wordpress. Uno shortcode è un piccolo codice testuale nella …
  3. Come personalizzare l’html della Galleria di default di Wordpress | Your Inspiration Web
    […] mio precedente articolo abbiamo visto come creare uno shortcode personalizzato e ho lasciato in sospeso l’esempio della personalizzazione dello …
  4. WordPress per i tuoi clienti: semplificare l’interfaccia del popolare CMS — Parte 3 | Your Inspiration Web
    […] Grazie ad alcune righe di codice (che come sempre potete inserire nel file functions.php del vostro tema) possiamo passare …

Lascia un Commento

Current day month ye@r *