Gli Shortcode di WordPress: Guida Definitiva alla Creazione e all’Utilizzo

Gli shortcode di WordPress sono una potente funzione per fare cose interessanti con poco sforzo. Potete farci praticamente di tutto. Con gli shortcode, l’inserimento di elementi interattivi o la creazione di layout di pagina complessi diventa facile come inserire una singola riga di codice.

Se volete aggiungere una galleria, dovete semplicemente digitare il seguente codice:

[gallery ids="47 ,86, 92, 64, 48, 75, 89, 80" columns="4" size="medium"]

In questo modo viene visualizzata una galleria con gli ID immagine menzionati. Avrà 4 colonne e la loro dimensione massima sarà “media” (come definito da WordPress).

Non c’è bisogno di un brutto codice HTML.

Gli shortcode eliminano la necessità di script complicati. Grazie a loro, anche se avete poche o nessuna abilità di programmazione, potete aggiungere contenuti dinamici senza sforzo.

Sono molto popolari tra chi si occupa di sviluppo WordPress, in quanto aiutano tantissimo ad automatizzare la creazione di contenuti e design. Gli shortcode sono per chi sviluppa con WordPress ciò che le macro sono per gli analisti di dati, o le shortcode da tastiera chi si occupa di grafica professionale.

In questa guida, imparerete tutto quello che c’è da sapere sugli shortcode. Scoprirete come lavorare con l’API Shortcode creando i vostri shortcode. Alla fine, parleremo del futuro degli shortcode e di dove si inseriscono con il nuovo Block editor di WordPress.

Impazienti? Cominciamo!

Cos’è uno Shortcode?

In poche parole, Shortcode = Codice + Breve.

Gli shortcode usano i tag tra parentesi quadre [] per definire il modo in cui vengono utilizzati. Ogni shortcode svolge una particolare funzione in un sito. Può essere semplice come formattare il contenuto o complesso come definire l’intera struttura del sito web.

Ad esempio, è possibile utilizzare gli shortcode per incorporare cursori, moduli o tabelle dei prezzi. È anche possibile utilizzarli per creare modelli di progettazione di pagine riutilizzabili.

Una Breve Storia degli Shortcode

Gli shortcode sono stati resi popolari per la prima volta da un forum online chiamato Ultimate Bulletin Board (UBB). Nel 1998 avevano introdotto il BBCode (Bulletin Board Code), una raccolta di tag di facile utilizzo per consentire agli utenti di formattare facilmente i loro messaggi.

Essendo un linguaggio di markup leggero, il BBCode funziona sugli stessi principi dell’HTML, ma è molto più semplice.

Anche l’uso di tag predefiniti è molto più sicuro, in quanto gli utenti non possono inserire codice HTML e introdurre vulnerabilità per la sicurezza. Per esempio, un utente con intenzioni malevole potrebbe usare il tag <script> per eseguire codice JavaScript e interrompere la funzionalità del sito.

Poco dopo, altri software di forum online come phpBBB, XMB Forum e vBulletin hanno aggiunto la funzionalità BBCode nelle loro bacheche.

Gli shortcode consentono a chi amministra il sito di avere un maggiore controllo su ciò che i loro utenti possono e non possono fare. Inoltre, hanno permesso agli utenti di formattare i loro contenuti attraverso semplici tag.

Per le stesse ragioni di sicurezza, WordPress impedisce l’esecuzione del codice PHP all’interno dei contenuti del sito. Per superare questa limitazione, WordPress 2.5 nel 2008 ha introdotto la funzionalità shortcode con il rilascio di Shortcode API. Questa si è dimostrata essere una delle caratteristiche più utilizzate da molti sviluppatori di plugin e temi di WordPress.

Cosa Sono gli Shortcode di WordPress?

Gli shortcode di WordPress sono stringhe di parentesi quadre ([ ]) che si trasformano magicamente in qualcosa di affascinante che apparirà sul frontend. Offrono agli utenti un modo semplice per creare e modificare contenuti complicati senza preoccuparsi di HTML complesso o codici embed.

I 2 Tipi di Shortcode

In WordPress esistono principalmente due tipi di shortcode.

• Self-closing Shortcodes: Questi non hanno bisogno di un tag di chiusura.

Esempio: Lo shortcode gallery non ha bisogno di un tag di chiusura. Ci aggiungiamo tutto ciò di cui abbiamo bisogno con attributi diversi.

• Enclosing Shortcode: Questi hanno bisogno di un tag di chiusura. Gli enclosing shortcode generalmente manipolano il contenuto tra i tag di apertura e chiusura.

Esempio: Lo shortcode caption viene utilizzato per avvolgere una didascalia intorno a qualsiasi contenuto. Viene usato principalmente per aggiungere una didascalia alle immagini, ma funziona con qualsiasi elemento HTML.

Alcuni shortcode funzionano con o senza attributi. Dipende da come vengono definiti.

Gli Shortcode Predefiniti di WordPress

WordPress include 6 shortcode di default:

• audio: serve a incorporare i file audio sul vostro sito web. Include semplici controlli di riproduzione come Play & Pause.
• caption: serve ad avvolgere le didascalie intorno al tuo contenuto. È usato principalmente per aggiungere didascalie di immagini, ma si può usare per qualsiasi elemento HTML.
• embed : questo espande la funzione di default oEmbed e consente di impostare diversi attributi per i vostri embeddings come quella per le dimensioni massime.
• gallery : serve a inserire una semplice galleria di immagini sul vostro sito. È possibile utilizzare gli attributi per definire quali immagini vengono utilizzate e personalizzare l’aspetto della galleria.
• playlist : questo self-closing shortcode visualizza una raccolta di file audio o video. Potete dargli una modalità “dark” grazie al suo attributo di stile.
• video: incorpora un file video e lo riproduce con un semplice lettore video. Questo shortcode supporta l’incorporazione di video nei formati mp4, webm, m4v, webm, ogv, wmv, flv.

Per maggiori dettagli su come si possono usare gli shortcode di default e quali attributi supportano, fate riferimento ai documenti Codex collegati.

Come Utilizzare gli Shortcode di WordPress

L’utilizzo di shortcode in WordPress è un processo semplice. Ma dipende da dove volete aggiungerli sul vostro sito. Assicuratevi di leggere la documentazione degli shortcode per capire come funzionano e imparate quali attributi supporta, in modo da poter ottenere esattamente ciò che volete.

Utilizzo degli Shortcode di WordPress nelle Pagine e nei Post

Per prima cosa, andate all’editor di pagina/post dove volete inserire lo shortcode.

Se utilizzate l’editor di Gutenberg, potete aggiungere il tag shortcode nel blocco omonimo Shortcode. Lo trovate nella sezione Widget.

State ancora usando il Classic Editor (o il plugin)? Potete digitare i vostri tag shortcode nel modo classico. Alcuni shortcode possono anche includere un pulsante nella schermata dell’editor così da inserirli prontamente.

Utilizzo degli Shortcode di WordPress nei Widget della Barra Laterale

Gli shortcode possono essere inseriti anche nei widget della barra laterale. Per aggiungerli, andate su Appearance » Widgets e aggiungete un widget Text alla sezione in cui desiderate aggiungere lo shortcode.

Incollate lo shortcode all’interno del widget Text e salvatelo. Quando visitate il frontend del vostro sito vedrete l’output dello shortcode nella barra laterale.

Nota: le versioni di WordPress 4.8 e successive non supportano gli shortcode nei widget della barra laterale. Per saperne di più, leggete le note sui miglioramenti del widget nell’aggiornamento di WordPress 4.9.

Utilizzo dei Shortcode WordPress nell’Header e nel Footer

Gli shortcode di WordPress sono in genere destinati a pagine, post e widget. Ma avete un modo semplice per inserire gli shortcode in qualsiasi punto del vostro sito.

Diciamo che volete aggiungere un pulsante di call to action nel vostro footer o in tutti i vostri post prima della sezione commenti. La funzione di callback do_shortcode() viene utile in questo caso.

Dovete aggiungere il seguente codice all’header.php del tema, al footer.php o a uno qualsiasi dei suoi file di template:

<?php echo do_shortcode("[name_of_your_shortcode]"); ?>

In questo modo l’output dello shortcode apparirà nel punto in cui avete inserito il codice.
Ricordate di includere le parentesi quadre tra le virgolette per far funzionare lo shortcode, perché includere solo il nome non funzionerà.

Allo stesso modo, potete utilizzare la funzione di richiamo do_shortcode() per attivare gli shortcode in qualsiasi punto di WordPress, come nella sezione dei commenti.

Una Rapida Introduzione alla Shortcode API

La Shortcode API di WordPress definisce in che modo è possibile utilizzare gli shortcode per personalizzare ed espandere le funzionalità del sito. Permette a chi si occupa di sviluppo di creare contenuti unici (ad es. moduli, caroselli, slider, ecc.) che gli utenti possono aggiungere nei loro siti incollando il relativo shortcode.

Con l’aiuto di shortcode è possibile aggiungere quasi tutte le funzioni che si possono immaginare al proprio sito web.

L’API supporta sia gli shortcode self-closing che quelli enclosing: gestisce tutti i difficili processi di analisi e include funzioni di supporto per impostare e recuperare gli attributi di default.

Grazie all’API, potrete tuffarvi direttamente nello sviluppo e nella personalizzazione degli shortcode, piuttosto che perdere tempo prezioso a definire regular expressions per ognuno di loro.

Capire le Basi della Shortcode API

Ogni volta che aprite una pagina o un post in WordPress, WordPress cerca gli shortcode registrati durante l’elaborazione dei contenuti del sito.

Se trova uno shortcode già registrato, la Shortcode API prende il controllo e restituisce l’output del/degli shortcode. La stringa di output restituita sostituisce il tag dello shortcode nella posizione in cui era stata aggiunta.

Per registrare uno shortcode in WordPress, si usa la funzione add_shortcode(). Ecco come fare:

add_shortcode( 'shortcode_name', 'shortcode_handler_function' );

• shortcode_name: questo è il tag che WordPress cercherà durante l’analisi del contenuto dei messaggi. La Shortcode API consiglia di utilizzare solo lettere minuscole, numeri e sottolineature per definirne il valore (evitare i trattini).
• shortcode_handler_function: questa è la funzione di callback che verrà eseguita dopo che WordPress conferma la presenza di uno shortcode registrato.

La funzione di gestione degli shortcode è definita come segue:

function shortcode_handler_function( $atts, $content, $tag ){ }

• $atts: un array associativo di attributi (cioè un array di coppie chiave-valore). Se non definite alcun attributo, il valore predefinito sarà una stringa vuota.
• $content: il contenuto allegato, se state definendo uno shortcode di tipo enclosing. È responsabilità della funzione handler garantire che il valore di $content venga restituito nell’output.
• $tag: il valore del tag shortcode (shortcode_name nell’esempio precedente). Se due o più shortcode condividono la stessa funzione callback (che è valida), il valore $tag vi aiuterà a determinare quale shortcode ha attivato la funzione handler.

L’API analizza il tag dello shortcode, gli attributi e il contenuto allegato (se presente) bypassando i valori alla funzione handler, che li elabora e restituisce una stringa di output.

Questa stringa di output sostituisce lo shortcode macro sul frontend del vostro sito. Ciò che in definitiva si vede nel browser è questo output.

Dove Aggiungere i Vostri Script per gli Shortcode Personalizzati?

Potete aggiungere i vostri script per gli shortcode personalizzati nel file functions.php del vostro tema o includerli in un plugin.

Se li aggiungete a un file del tema, potete eseguire la funzione add_shortcode() così com’è.

Se invece lo aggiungete ad un plugin, vi consiglio di inizializzarlo solo dopo che WordPress si è caricato completamente. Potete assicurarvi di questo avvolgendo la funzione add_shortcode() all’interno di un’altra funzione. Questa si chiama funzione wrapper:

function shortcodes_init(){
 add_shortcode( 'shortcode_name', 'shortcode_handler_function' );
}
add_action('init', 'shortcodes_init');

La funzione add_action() aggancia la funzione shortcodes_init per eseguirsi solo dopo che WordPress ha terminato il caricamento (e viene chiamata “init” hook).

Come Creare uno Shortcode Personalizzato in WordPress (Livello Principiante)

Ora che abbiamo visto le basi, è giunto il momento di creare uno shortcode personalizzato.

Per seguire i passi indicati di seguito, dovreste avere familiarità con il codice PHP e saper modificare i file del vostro tema WordPress. Quando avrete finito con il tutorial, avrete il vostro primo shortcode per WordPress personalizzato e pronto a partire!

Inizieremo con lo shortcode più semplice possibile, per poi passare a quelli più complessi. Godetevi queste brevi tappe verso la padronanza degli shortcode!

Esempio 1: Shortcode con [current_year]

Creiamo uno shortcode chiamato [current_year] che riporta l’anno corrente sul vostro sito web.

Questo shortcode è utile se state aggiungendo contenuti al vostro sito web che devono essere aggiornati ogni anno. Ad esempio, quando aggiungete una nota di copyright al footer del vostro sito.

Userò un plugin barebone per aggiungere le funzioni del mio shortcode. Potreste aggiungerlo al file functions.php del vostro tema e ottenere gli stessi risultati, ma non lo consiglio. Questo va bene per i test e per l’apprendimento!

Iniziamo a creare un plugin. Create una nuova cartella nella vostra directory /wp-content/plugins/.

Sto chiamando il mio plugin “salcodes”, ma potete chiamarlo come volete.

Nella directory dei plugin <strong salcodes, create un file PHP con lo stesso nome (salcodes.php). Una volta fatto, aggiungete l’header seguente al file del plugin:

<?php

/*
Plugin Name:  Salcodes
Version: 1.0
Description: Output the current year in your WordPress site.
Author: Salman Ravoof
Author URI: https://www.salmanravoof.com/
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: salcodes
*/

Questa semplice intestazione del plugin è sufficiente per i nostri scopi. Per saperne di più sui requisiti per l’header dei plugin, consultare il Codex WordPress. Salvate questo file e poi andate sulla <a href=”https://kinsta.com/knowledgebase/wordpress-admin/”dashboard di WordPress per attivare il plugin.

Ora, registriamo lo shortcode e la sua funzione handler. Per fare ciò, aggiungete il seguente codice al file del vostro plugin:

/**
 * [current_year] returns the Current Year as a 4-digit string.
 * @return string Current Year
*/

add_shortcode( 'current_year', 'salcodes_year' );
function salcodes_init(){
 function salcodes_year() {
 return getdate()['year'];
 }
}
add_action('init', 'salcodes_init');

/** Always end your PHP files with this closing tag */
?>

• Il tag @return nel commento PHP definisce il tipo di output restituito. Segue una breve descrizione dello stesso.
• current_year è il tag o il nome dello shortcode. Questo definisce il tag di auto-chiusura da aggiungere nel contenuto, che in questo caso sarebbe [current_year].
• salcodes_year è il nome della funzione handler dello shortcode che restituirà la stringa di output. Definiremo questa funzione di callback nelle prossime righe. Dal momento che stiamo creando un semplice shortcode self-closing, non è necessario passargli alcun valore variabile come $attributes, $content o $tag.
• salcodes_init è la funzione wrapper che viene agganciata a ‘init’ per assicurarsi che lo shortcode sia registrato ed eseguito solo dopo che WordPress ha terminato il caricamento. La funzione add_action() integrata in WordPress lo rende possibile.
• getdate() è una funzione PHP che restituisce un array di informazioni sulla data del timestamp corrente. La chiave relativa all’anno contiene il valore dell’anno in corso (come stringa a 4 cifre). Quindi, getdate()[‘anno’] restituisce l’anno in corso. Questo è esattamente l’output che vogliamo.

Ora salvate il file del plugin e verificate se lo shortcode funziona come previsto.

Aggiungete lo shortcode in qualsiasi punto del vostro sito (pagina, post, widget della barra laterale, ecc.). Io lo aggiungo al widget di testo della barra laterale del mio sito.

Come previsto, funziona perfettamente.

Congratulazioni per aver raggiunto il vostro primo traguardo!

Lo shortcode appena creato non è associato a nessuna variabile $attributes o $content.
Imparerete ad usarle negli esempi seguenti.

Esempio 2: Shortcode per un Pulsante di Call-To-Action

Creiamo ora uno shortcode personalizzabile per un pulsante di call-to-action. Anche questo sarà uno shortcode self-closing (scusa $contento, devi aspettare fino al prossimo punto).

Voglio che gli utenti siano in grado di personalizzare le dimensioni e il colore del pulsante CTA con gli attributi dello shortcode.

Poiché l’output finale è un pulsante, si possono usare i suoi attributi HTML come href, id, class, target e label per personalizzarlo con facilità.

Potete utilizzare gli attributi id e class per cambiare lo stile del pulsante, dato che sono entrambi comuni selettori CSS.

Qui non avvolgerò la mia funzione handler, così sarà più semplice da spiegare.

/**
 * [cta_button] returns the HTML code for a CTA Button.
 * @return string Button HTML Code
*/

add_shortcode( 'cta_button', 'salcodes_cta' );

function salcodes_cta( $atts ) {
 $a = shortcode_atts( array(
 'link' => '#',
 'id' => 'salcodes',
 'color' => 'blue',
 'size' => '',
 'label' => 'Button',
 'target' => '_self'
 ), $atts );
 $output = '<p><a href="' . esc_url( $a['link'] ) . '" id="' . esc_attr( $a['id'] ) . '" class="button ' . esc_attr( $a['color'] ) . ' ' . esc_attr( $a['size'] ) . '" target="' . esc_attr($a['target']) . '">' . esc_attr( $a['label'] ) . '</a></p>';
 return $output;
}

Woah, c’è molto da disfare qui. Vi spiegherò tutto riga per riga, in modo che possiate capire come funziona.

• Abbiamo già visto cos’è e come funziona add_shortcode().
• shortcode_atts() è una funzione di WordPress che combina gli attributi shortcode dell’utente con gli attributi noti. Riempie i valori di default quando necessario (e li potete impostare anche voi stessi). Il risultato sarà un array contenente ogni chiave degli attributi noti, unito ai valori degli attributi shortcode definiti dall’utente.
• All’interno della funzione handler dello shortcode definiamo una variabile ($a) e la assegnamo all’array restituito da shortcode_atts(). Assegniamo agli attributi i loro valori di default con la seguente sintassi: attribute’ => ‘default-value. Per esempio, nel codice qui sopra, stiamo impostando il valore di default dell’etichetta dell’attributo su Button con la sintassi ‘label’ => ‘Button’.
• Possiamo estrarre i valori per ogni chiave di attributo con la sintassi PHP per gli array: $a[‘attribute’].
• La variabile $output memorizza il codice HTML dell’elemento pulsante (un tag ‘a’ con classe ‘button’). È la stringa che viene finalmente restituita dalla funzione.

Se desiderate impostare il link predefinito come URL della homepage del sito, potete utilizzare la funzione WordPress home_url().

Proviamo ad usare lo shortcode così com’è, senza definire alcun attributo, e vediamo cosa viene fuori.

Se vi state chiedendo a cosa servono le doppie parentesi quadre ([[cta_button]]), si tratta delle cosiddette escaping shortcode. Questi vi aiutano ad emettere qualsiasi shortcode registrato nel vostro sito come se fosse testo normale, come nell’immagine qui sotto.

Gli utenti possono personalizzare la dimensione e il colore del pulsante grazie allo shortcode. Abbiamo già impostato i loro valori di default nella funzione handler, ma è necessario registrare e accodare il foglio di stile nella lista delle risorse disponibili. Questo foglio di stile dovrebbe contenere tutte le classi definite nello shortcode.

Potete impostare queste classi anche nel foglio di stile globale del vostro tema, ma vi consiglio di caricarle separatamente. Questo assicura che anche se cambiate o aggiorna il tema di WordPress, queste classi continueranno a caricarsi insieme allo shortocode.

/** Enqueuing the Stylesheet for the CTA Button */

function salcodes_enqueue_scripts() {
 global $post;
 if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'cta_button') ) {
 wp_register_style( 'salcodes-stylesheet',  plugin_dir_url( __FILE__ ) . 'css/style.css' );
     wp_enqueue_style( 'salcodes-stylesheet' );
 }
}
add_action( 'wp_enqueue_scripts', 'salcodes_enqueue_scripts');

La funzione salcodes_enqueue_scripts() definisce la variabile globale $post, e quindi conferma due condizioni attraverso le seguenti:

• is_a(): verifica se $post è un’istanza dell’oggetto WP_Post. Si riferisce a tutti i tipi di post in WordPress.
• has_shortcode(): verifica se il contenuto del messaggio contiene lo shortcode [cta_button].

Se entrambe le condizioni sono vere, la funzione registra e accoda il foglio di stile style.css incluso nella cartella CSS. La funzione plugin_dir_url( $file ) facilita l’ottenimento dell’URL della directory del plugin.

Non vi mostrerò il codice CSS qui, ma potete trovarlo nel codice sorgente collegato alla fine di questa sezione.

Infine, testiamo lo shortcode [cta_button] aggiungendolo al contenuto del post:

L’immagine sottostante mostra come appare il pulsante CTA sul frontend:

Ora che avete imparato a definire gli attributi personalizzati e ad includere gli stili, potete aggiungere varie altre funzionalità al vostro shortcode per il pulsante CTA. Ad esempio, potete dare agli utenti la possibilità di aggiungere animazioni, effetti hover e vari altri stili di pulsante.

Esempio 3: Shortcode Che Usa $content

Per il nostro esempio finale, costruiamo uno shortcode enclosing chiamato[boxed] che visualizza qualsiasi contenuto incluso fra i suoi tag in un box con titoli colorati.

Cominciamo registrando lo shortcode e definendo la sua funzione di handler:

/**
 * [boxed] returns the HTML code for a content box with colored titles.
 * @return string HTML code for boxed content
*/

add_shortcode( 'boxed', 'salcodes_boxed' );

function salcodes_boxed( $atts, $content = null, $tag = '' ) {
 $a = shortcode_atts( array(
 'title' => 'Title',
 'title_color' => 'white',
 'color' => 'blue',
 ), $atts );
 
 $output = '<div class="salcodes-boxed" style="border:2px solid ' . esc_attr( $a['color'] ) . ';">'.'<div class="salcodes-boxed-title" style="background-color:' . esc_attr( $a['color'] ) . ';"><h3 style="color:' . esc_attr( $a['title_color'] ) . ';">' . esc_attr( $a['title'] ) . '</h3></div>'.'<div class="salcodes-boxed-content"><p>' . esc_attr( $content ) . '</p></div>'.'</div>';
 
 return $output;
}

• $content = null : registra lo shortcode come tipo di allegato. Potete utilizzare la variabile $content all’interno della funzione handler per modificare l’output come desiderate.
• $tag = ”’ : definisce la variabile $tag dello shortcode. Non è necessario in questo esempio, ma è comunque una buona pratica includerlo.

In questo esempio, modifichiamo il contenuto utilizzando gli stili CSS in linea.

Gli stili per tutte le classi utilizzate all’interno dello shortcode sono registrati e accodati come abbiamo fatto nell’esempio precedente.

Ma quando due shortcode usano lo stesso foglio di stile significa fare in modo di caricarlo anche se uno solo dei due viene usato. Quindi, aggiorniamo la funzione salcodes_enqueue_scripts():

/** Enqueuing the Stylesheet for Salcodes */

function salcodes_enqueue_scripts() {
 global $post;
 $has_shortcode = has_shortcode( $post->post_content, 'cta_button' ) || has_shortcode( $post->post_content, 'boxed' );
 if( is_a( $post, 'WP_Post' ) && $has_shortcode ) {
 wp_register_style( 'salcodes-stylesheet',  plugin_dir_url( __FILE__ ) . 'css/style.css' );
     wp_enqueue_style( 'salcodes-stylesheet' );
 }
}
add_action( 'wp_enqueue_scripts', 'salcodes_enqueue_scripts');

• $has_shortcode: una variabile definita dall’utente che controlla se uno dei due shortcode esiste sulla pagina/post. L’operatore OR ||| è quello che lo rende possibile.

Ora prendiamo il nostro shortcode [boxed] e facciamogli fare un giro.

La schermata sottostante mostra l’output ottenuto:

Ora che avete imparato a creare i vostri shortcode, potete pensare creativamente e dar loro il vostro tocco personale. Non dimenticate di condividere le vostre creazioni con noi!

Se volete, potete scaricare il codice sorgente dello Shortcode Plugin da qui.

Gli Shortcode di WordPress: Pro e Contro

I Pro

• Gli shortcode semplificano l’aggiunta di funzioni complesse nei siti WordPress. Potete aggiungere quasi di tutto solo digitando una sola riga di codice.
• Gli shortcode automatizzano il flusso di lavoro di sviluppo. Eliminano la necessità di scrivere script complessi ogni volta che voleteinserire una certa caratteristica.
• Gli shortcode sono più facili da usare rispetto al codice HTML o agli script PHP.
• Gli shortcode possono essere forniti in dotazione con un plugin. Anche se aggiornate WordPress o cambiate/aggiornate il tema, gli shortcode saranno ancora validi e continueranno a funzionare come prima.
• La presenza di shortcode in dotazione con un plugin li rende facili da usare su più siti web WordPress. Se vi occupate di sviluppo e gestite molti siti, avere tutti i vostro shortcode personalizzati pronti all’uso è un salvavita.
• Poiché gli shortcode accettano anche gli attributi, gli utenti possono modificare il comportamento dello stesso shortcode modificando semplicemente le opzioni degli attributi.

I Contro

• Gli shortcode non sono uno strumento intuitivo per l’utente finale, soprattutto quando se ne usano molti su una pagina. In questi casi, sono più adatti a chi si occupa di sviluppo.
• È difficile dire cosa fa uno shortcode solo al vederlo. Il team di WordPress li ha giustamente denominati “mystery meat embed codes” proprio per questo motivo.
• Gli shortcode inclusi nel codice di un tema smetteranno di funzionare se cambierete il tema.
• Gli shortcode hanno una sintassi ambigua. Ad esempio, alcuni di essi supportano la chiusura opzionale, in modo da poterli utilizzare sia come self-closing che come enclosing, o addirittura entrambi, se sono annidati. Immaginate con quanta velocità la situazione possa diventare super confusa.
• Gli shortcode possono rompere l’HTML a causa di tag in conflitto fra loro o di problemi di interoperabilità. Non è mai bello vederli sul frontend di un sito.
• Gli shortcode aggiungono un carico supplementare sul vostro server. Con l’aumentare del numero di shortcode sulle vostre pagine/post, aumenta anche questo carico. Troppi shortcode possono portare il vostro sito web a un crawl (ad esempio l’output della maggior parte dei page builder).

Shortcode e Blocchi di Gutenberg

L’introduzione di Gutenberg ha ridotto il fascino degli shortcode. Gli utenti possono ora aggiungere blocchi direttamente dall’interfaccia dell’editor, invece di occuparsi dei markup degli shortcode, a prescindere dalla loro semplicità.

E se desiderate aggiungere degli shortcode, Gutenberg dispone anche di un blocco appositamente dedicato. I blocchi sono i nuovi shortcode.

“Se si può fare con uno shortcode, si può fare come un blocco”. – James Huff, Happiness Engineer in Automattic

Questo spiega perché tutti i popolari shortcode vengono convertiti in blocchi. Molti sviluppatori di WordPress si sono orientati a far funzionare i loro prodotti e servizi esclusivamente con l’editor a blocchi (Gutenberg).

Ma questo non significa che sia la fine del mondo per gli shortcode. Il core team di WordPress ha promesso molti miglioramenti all’editor a blocchi, che si possono già vedere nel tema Twenty Twenty; ma fino ad allora, gli shortcode sono qui per rimanere!

Sommario

Aggiungere funzionalità complesse ovunque nel vostro sito WordPress è facile grazie agli shortcode. Forniscono agli utenti dei tag facili da digitare che potete utilizzare senza temere di dovervi destreggiare con del codice complicato.

Anche se non ci sono shortcode nella vita, ci sono sicuramente molte shortcode da usare in WordPress. I nostri preferiti sono Shortcodes Ultimate e Shortcodes di Angie Makes.

E se non riuscite a trovare quello che cercate, potete crearne uno voi stessi.

Potete anche usare uno shortcode per creare il vostro codice personalizzato utilizzando il plugin Shortcoder. Si prenderà cura di tutto l’essenziale al postro costro. E ricordate: la vita è breve, usate le scorciatoie!