Shortcodes WordPress: cosa sono, come usarli e perchè

By  /  Seguimi su:     

Shortcodes WordPress: guida rapida e semplice per iniziare a conoscere gli shortcode di WordPress e capire come sfruttarne al meglio tutte le opportunità d’uso.

Shortcodes WordPress: guida rapida – Vuoi sapere cosa sono gli shortcodes? Non sai come inserire gli shortcode in WordPress? Vuoi sapere come usare gli shortcodes? Non sai a cosa servono gli shortcodes? Nella guida di oggi ti presento una delle funzionalità più utili ed importanti di WordPress: vedremo cosa sono gli shortcode, a cosa servono e come usarli.

Grazie agli shortcode potrai arricchire le tue pagine e post con elementi interessanti in pochissimi secondi. Ti consiglio di investire qualche minuto per capire al meglio cosa sono, come usarli e come funzionano. Iniziamo subito.

Cosa sono gli shortcode WordPress

Gli shortcode sono delle piccolissime porzioni di codice che consentono di aggiungere delle funzionalità speciali nei post e nelle pagine di WordPress. Molti plugin di WordPress e alcuni temi introducono sulla piattaforma degli shortcode personalizzati che permettono di aggiungere differenti elementi nelle pagine del sito, come griglie di prezzi, calendari, slider e gallerie animate di immagini, form per interviste e via discorrendo.

Impara a capire quando non devi usare gli shortcode

Quando gli utenti alle prime armi scoprono gli shortcode, la tentazione che hanno è quella di usarli di continuo e un pò dappertutto, ma questo non è un comportamento corretto.

Infatti, invece di usare uno shortcode in ogni post, ad esempio per creare pulsanti di tipo call-to-action, è meglio che impari come programmare i pulsanti in WordPress ricorrendo all’uso dei CSS.

Allo stesso tempo, se hai la necessità di usare uno shortcode di continuo per integrare un banner o un qualsiasi altro elemento nel sito, forse è il caso di pensare all’utilizzo di un plugin specifico o all’arruolamento di uno sviluppatore che personalizzi la piattaforma o il tema per ospitare l’elemento di cui hai necessità.

Come si inseriscono gli shortcode in WordPress?

Alcuni shortcodes sono integrati in WordPress e ti basterebbe conoscerne il codice. Ma se vuoi usarne un po’ più complessi (e utili), a meno tu non sia un programmatore, hai due strade:

  1. Comprare un tema premium con integrati gli shortcode
  2. Installare un plugin specifico per generare gli shortcode che ti interessano

Come usare gli shortcode

Gli shortcode possono essere incollati direttamente all’interno dell’Editore Visuale/di Testo della pagina o del post dove vuoi fare apparire l’elemento corrispondente. WordPress non prevede che gli shortcode possano essere inseriti anche all’interno dei widget e della sidebar, però alcuni temi/plugin permettono di farlo.

Ogni shortcode ha una serie di attributi a sé. Per sapere quali sono, dovrai fare riferimento al sito ufficiale WordPress (per gli shortcode nativi) ed alla documentazione dei singoli plugin che fanno uso di shortcode.

Cosa sono gli shortcode nativi

Ci sono alcuni shortcode che fanno parte della piattaforma WordPress e possono essere utilizzati indipendentemente da quale tema e plugin sono installati sul tuo sito.

Qui trovi gli: Shortcode predefiniti di WordPress

Gli shortcode sono utilizzabili anche nei widget

Molti pensano che gli shortcode possano essere usati solo nelle pagine e nei post, ma in realtà puoi integrare queste porzioni di codice anche nei widget. Non devi fare altro che effettuare un drag&drop di un widget di testo ovvero trascinarlo nella tua sidebar e inserire lo shortcode che desideri usare.

Se questa modalità operativa non dovesse sortire alcun risultato, ricordati di modificare il file functions.php aggiungendo la dichiarazione seguente

add_filter(‘widget_text’, ‘do_shortcode’);

Come individuare gli shortcode nel tema WordPress

Spesso, i temi ed i plugin hanno degli shortcode personalizzati.
Per esempio, il plugin Contact Form 7 (uno dei plugin WordPress in assoluto più utilizzati; serve a creare moduli di contatto in WordPress)  usa proprio gli shortcode. Ad ogni form creato è assegnato uno shortcode, che può poi essere incollato sul sito quante volte desideri.

Per scoprire quali shortcode mette a disposizione un tema che hai appena installato, puoi consultare la documentazione associata, installare i plugin specifici per inserire shortcode integrati nel tema stesso come add-ons oppure individuare il file functions.php che normalmente si trova nel percorso /wp-content/themes/nome-del-tuo-tema/, aprirlo con un qualsiasi editor e cercare al suo interno il termine add_shortcode.

Troverai una funzione PHP dove l’argomento della funzione rappresenta proprio il nome dello shortcode che puoi utilizzare, mentre la dichiarazione function ne specifica il comportamento.

Inserire uno shortcode alla fine degli articoli di WordPress

A volte potresti desiderare di inserire al termine di ogni articolo WordPress, immediatamente sotto l’ultimo capoverso di testo e non dopo i commenti o altri moduli, appaia uno specifico contenuto, incorporato in uno specifico shortcode. Puoi ad esempio avere la necessità di far apparire alla fine dei post di WordPress un form di iscrizione al blog, semplice testo con un link di collegamento oppure una galleria prodotti o semplici avvisi o box autore (Vedi l’articolo: come inserire un box autore in WordPress ) ecc…

Puoi fare tutto questo semplicemente aggiungendo al file function.php de l tuo tema WordPress il seguente codice:

/* Aggiungere qualcosa al termine di un articolo */
function contenuto_personalizzato_dopo_il_post($content){
if (is_single()) {
    $content .= 'INSERIRE QUI TESTO O HTML O SHORTCODE CHE SI VUOLE FAR APPARIRE AL TERMINE DI OGNI ARTICOLO';
}
    return $content;
}
add_filter( "the_content", "contenuto_personalizzato_dopo_il_post" );

Aggiungere uno shortcode nei file del tema

Se per qualsiasi ragione hai necessità di usare uno shortcode in un’area del tuo sito non personalizzabile con i widget, considera l’opportunità di integrare lo shortcode nel tuo tema WordPress. Ad esempio, puoi creare un template di pagina personalizzata e includere lo shortcode nel seguente modo:

<?php echo do_shortcode(“[example_shortcode]”); ?>

Creare un shortcode personalizzato: ecco degli esempi

Adesso ti mostro come creare uno shortcode personalizzato attraverso function.php. Ecco un esempio di shortcode personalizzato creato usando la funzione function di PHP con il quale mostrare l’ora aggiornata alla fine di un post:

add_filter( ‘widget_text’, ‘do_shortcode’ );
function ora() {
$orario = date(“H:i:s”);
return($orario);
}
add_shortcode(‘ora’, ‘ora’);

Ora, per richiamare la funzione, e stampare la data, basterà semplicemente inserire in un campo o editor visuale o di testo di WordPress lo shortcode [ora].
Un’altro esempio è magari quello di utilizzare gli shortcode per inserire un icona o un immagine personalizzata standardizzata alla fine dei post o come intestazione dei post, vediamo un esempio pratico:

function funzione_nome_shortcode( $atts ) {
return ‘<img src=”<percorso dell’immagine” alt=””/>’;
}
add_shortcode(“nome_shortcode”, “funzione_nome_shortcode”);

Per richiamare la funzione, e stampare l’immagine, basterà semplicemente inserire in un campo o editor visuale o di testo di WordPress lo shortcode [nome_shortcode].

Un’altro esempio più frequente è quello di utilizzare gli shortcode per inserire un pulsante alla fine dei post o per inserire degli avvisi in semplice testo o dei link di collegamento , vediamo un esempio pratico:

Per aggiungere un bottone tramite shortcode:

function button_shortcode( $atts, $content = null ){
    extract( shortcode_atts( array(
        'size'=> 'large',
        'src'=> '#',
        'title'=> '',
        'target'=> '_self'
    ), $atts) );    
    return'<a href="'. $src. '" target="'. $target. '" class="'. $size. '" title="'. $title. '">'. $content. '</a>';
}
add_shortcode( 'link', 'button_shortcode' );

  • add_shortcode() aggiunge un gancio al tag shortcode;
  • size è la misura del bottone. Nell’esempio ho inserito “large” perchè poi lo vado a richiamare nella classe (“class“), in modo tale da modificarlo graficamente tramite il CSS;
  • src serve ad inserire l’URL della pagina web da linkare;
  • title è il titolo che viene inserito dentro il tag <a> e che visualizzi quando passi con il mouse sopra il link ed in questo caso sul bottone;
  • target se impostato su _self apre il link nella stessa pagina del browser, mentre se è impostato su _blank apre il link in una nuova finestra.

con return visualizzeremo nel front end della pagina il link.

Adesso sei pronto per richiamare lo shortcode del link dentro l’editor degli articoli del tuo blog WordPress. Per farlo devi semplicemente incollare uno dei seguenti codici:

[button src=”https://www.creareblogsitiwp.com/contatti”]Vai alla pagina contatti[/button]

oppure nella versione completa

[button size="large" src="https://www.creareblogsitiwp.com/contatti" title="Contatti" target="_blank"]Contattami[/button]

Il codice breve sopra mostrerebbe solamente un link testuale e non un pulsante, in questo caso ci vengono in aiuto i nostri CSS che trasformeranno un semplice testo in uno splendido bottone. Per trasformare il link testuale in un pulsante puoi usare questo codice CSS di esempio che puoi comunque variare a tuo piacimento:

a.small, a.medium, a.large{     background-color: #ff0000;     color: #fff; } a.small{     padding: 10px; } a.medium{     padding: 20px; } a.large{     padding: 30px; }

Per aggiungere del semplice testo o avvisi tramite shotcode personalizzato:

function my_text_exemple(){
return ‘<h3>Questo testo è appena stato generato usando lo shortcode che ho creato!</h3>’;
}
add_shortcode( ‘text’, ‘my_text_exemple’);

Per richiamare la funzione, e stampare il testo, basterà semplicemente inserire in un campo di WordPress lo shortcode [text].

Nascondere gli shortcode non funzionanti

Ogni qual volta dovessi cambiare il tema, rischieresti di trovarti gli shortcode usati nei post, nelle pagine e nei widget non funzionanti. Per ovviare al problema, aggiungi questo comando al file functions.php:

add_shortcode( ‘shortcodetag’, ‘__return_false’ );

In questo modo, nasconderai l’output degli shortcode non funzionanti.

Perché devi usare gli shortcode con cautela

Attenzione: gli shortcode WordPress sono belli ma creano dipendenza!

A parte gli scherzi, puoi usarli come e dove preferisci ma ti consiglio di usarli con cautela. A differenza dei vari linguaggi di programmazione (php, html, css, javascript, ecc), quello degli shortcode non è un codice “universale” ma soggetto al tipo di tema o plugin che usi.

Per questo devi fare molta attenzione a non abusarne. Perché se ti fai prendere la mano e un domani, per esempio, decidessi di cambiare il tema grafico o il plugin che ha generato gli shortcodes, non sarebbe come aver inserito un codice html che a prescindere del tema in uso e del plugin non cambia nulla per il tuo sito web.

Ti troverai infatti un sito web lato front-end (parte pubblica che vede l’utente) con codice rotto e non funzionante che ti toccherà rimuovere tutto a “mano”. Bel pasticcio non credi?

Conclusione su: cosa e come usare gli shortcode in WordPress

In questa breve guida ti ho spiegato cosa sono gli shortcode e come usare gli shortcode per aggiungere elementi avanzati alla pagine ed ai post del tuo sito WordPress attraversi gli shortcode.

Quando installi un plugin, ti consiglio di verificare se include shortcode ed iniziare a sperimentare! Presa la mano ti basteranno pochi secondi per dare una marcia in più ai tuoi contenuti.

Hai mai usato gli shortcode? 

Se questo articolo sugli shortcode WordPress ti è piaciuto come al solito ti invito a condividerlo sui social network oppure lascia un commento nell’apposito box in fondo!

come creare un blog Wordpress
By Antonio Rizzo

Ideatore e fondatore di Creare Blog e Siti Wordpress. Consulente Wordpress per aziende e professionisti che desiderano promuovere i loro servizi o prodotti sul web attraverso un blog, sito web o ecommerce.


Ottieni anche tu tutti i vantaggi riservati agli iscritti di Creare Blog e Siti Web Wordpress!

Rispondi con un commento

  Segui i nuovi commenti  
Notificami