[gallery ids=\"47 ,86, 92, 64, 48, 75, 89, 80\" columns=\"4\" size=\"medium\"]<\/pre>\nIn questo modo viene visualizzata una galleria con gli ID immagine menzionati. Avr\u00e0 4 colonne e la loro dimensione massima sar\u00e0 “media” (come definito da WordPress).<\/p>\n
Non c’\u00e8 bisogno di un brutto codice HTML.<\/p>\n
Esempio di shortcode per galleria<\/figcaption><\/figure>\n Gli shortcode eliminano la necessit\u00e0 di script complicati. Grazie a loro, anche se avete poche o nessuna abilit\u00e0 di programmazione, potete aggiungere contenuti dinamici senza sforzo.<\/p>\n
Sono molto popolari tra chi si occupa di sviluppo WordPress<\/a>, in quanto aiutano tantissimo ad automatizzare la creazione di contenuti e design. Gli shortcode sono per chi sviluppa con WordPress ci\u00f2 che le macro sono per gli analisti di dati, o le shortcode da tastiera chi si occupa di grafica professionale.<\/p>\n
In questa guida, imparerete tutto quello che c’\u00e8 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<\/a>.<\/p>\n
Impazienti? Cominciamo!<\/p>\n
<\/div><\/kinsta-auto-toc>\n Cos’\u00e8 uno Shortcode?<\/h2>\n
In poche parole, Shortcode = Codice + Breve<\/strong>.<\/p>\n
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\u00f2 essere semplice come formattare il contenuto o complesso come definire l’intera struttura del sito web.<\/p>\n
Ad esempio, \u00e8 possibile utilizzare gli shortcode per incorporare cursori, moduli<\/a> o tabelle dei prezzi<\/a>. \u00c8 anche possibile utilizzarli per creare modelli di progettazione di pagine riutilizzabili.<\/p>\n
Una Breve Storia degli Shortcode<\/h3>\n
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)<\/a>, una raccolta di tag di facile utilizzo per consentire agli utenti di formattare facilmente i loro messaggi.<\/p>\n
Formattazione facile con semplici BBCode<\/figcaption><\/figure>\n Essendo un linguaggio di markup leggero, il BBCode funziona sugli stessi principi dell’HTML, ma \u00e8 molto pi\u00f9 semplice.<\/p>\n
Anche l’uso di tag predefiniti \u00e8 molto pi\u00f9 sicuro, in quanto gli utenti non possono inserire codice HTML e introdurre vulnerabilit\u00e0 per la sicurezza<\/a>. Per esempio, un utente con intenzioni malevole potrebbe usare il tag <script> per eseguire codice JavaScript e interrompere la funzionalit\u00e0 del sito.<\/p>\n
Poco dopo, altri software di forum online come phpBBB<\/a>, XMB Forum<\/a> e vBulletin<\/a> hanno aggiunto la funzionalit\u00e0 BBCode nelle loro bacheche.<\/p>\n
Gli shortcode consentono a chi amministra il sito di avere un maggiore controllo su ci\u00f2 che i loro utenti possono e non possono fare. Inoltre, hanno permesso agli utenti di formattare i loro contenuti attraverso semplici tag.<\/p>\n
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<\/a> nel 2008 ha introdotto la funzionalit\u00e0 shortcode con il rilascio di Shortcode API<\/a>. Questa si \u00e8 dimostrata essere una delle caratteristiche pi\u00f9 utilizzate da molti sviluppatori di plugin e temi di WordPress.<\/p>\n
Cosa Sono gli Shortcode di WordPress?<\/h3>\n
Gli shortcode di WordPress sono stringhe di parentesi quadre ([ ])<\/strong> che si trasformano magicamente in qualcosa di affascinante che apparir\u00e0 sul frontend. Offrono agli utenti un modo semplice per creare e modificare contenuti complicati senza preoccuparsi di HTML complesso o codici embed.<\/p>\n
Gli shortcode di WordPress sono semplici e facili da usare<\/figcaption><\/figure>\n I 2 Tipi di Shortcode<\/h3>\n
In WordPress esistono principalmente due tipi di shortcode.<\/p>\n
Gli shortcode self-closing e gli shortcode enclosing possono essere validi sia con che senza attributi.<\/figcaption><\/figure>\n \n
- Self-closing Shortcodes:<\/strong> Questi non hanno bisogno di un tag di chiusura.<\/li>\n<\/ul>\n
Esempio: Lo shortcode gallery<\/strong> non ha bisogno di un tag di chiusura. Ci aggiungiamo tutto ci\u00f2 di cui abbiamo bisogno con attributi diversi.<\/p>\n
\n
- Enclosing Shortcode:<\/strong> Questi hanno bisogno di un tag di chiusura. Gli enclosing shortcode generalmente manipolano il contenuto tra i tag di apertura e chiusura.<\/li>\n<\/ul>\n
Esempio: <\/em>Lo shortcode caption<\/strong> 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.<\/p>\n
Alcuni shortcode funzionano con o senza attributi. Dipende da come vengono definiti.<\/p>\n
Gli Shortcode Predefiniti di WordPress<\/h2>\n
WordPress include 6 shortcode di default:<\/p>\n
\n
- audio<\/a>: serve a incorporare i file audio sul vostro sito web. Include semplici controlli di riproduzione come Play & Pause.<\/li>\n
- caption<\/a>: <\/strong>serve ad avvolgere le didascalie intorno al tuo contenuto. \u00c8 usato principalmente per aggiungere didascalie di immagini, ma si pu\u00f2 usare per qualsiasi elemento HTML.<\/li>\n
- embed<\/a> : questo espande la funzione di default oEmbed e consente di impostare diversi attributi per i vostri embeddings come quella per le dimensioni massime.<\/li>\n
- gallery<\/a> : serve a inserire una semplice galleria di immagini sul vostro sito. \u00c8 possibile utilizzare gli attributi per definire quali immagini vengono utilizzate e personalizzare l’aspetto della galleria.<\/li>\n
- playlist<\/a> : questo self-closing shortcode visualizza una raccolta di file audio o video. Potete dargli una modalit\u00e0 “dark” grazie al suo attributo di stile.<\/li>\n
- video<\/a>: 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.<\/li>\n<\/ul>\n
Per maggiori dettagli su come si possono usare gli shortcode di default e quali attributi supportano, fate riferimento ai documenti Codex collegati.<\/p>\n
Come Utilizzare gli Shortcode di WordPress<\/h3>\n
L’utilizzo di shortcode in WordPress \u00e8 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\u00f2 che volete.<\/p>\n
Utilizzo degli Shortcode di WordPress nelle Pagine e nei Post<\/h3>\n
Per prima cosa, andate all’editor di pagina\/post dove volete inserire lo shortcode.<\/p>\n
Se utilizzate l’editor di Gutenberg, potete aggiungere il tag shortcode nel blocco omonimo Shortcode<\/em>. Lo trovate nella sezione Widget<\/em>.<\/p>\n
Aggiunta del blocco Shortcode in Gutenberg<\/figcaption><\/figure>\n Il blocco di Gutenberg dedicato agli shortcode<\/figcaption><\/figure>\n State ancora usando il Classic Editor (o il plugin)<\/a>? Potete digitare i vostri tag shortcode nel modo classico. Alcuni shortcode possono anche includere un pulsante nella schermata dell’editor cos\u00ec da inserirli prontamente.<\/p>\n
Aggiunta di uno shortcode nell’editor classico<\/figcaption><\/figure>\n Utilizzo degli Shortcode di WordPress nei Widget della Barra Laterale<\/h3>\n
Gli shortcode possono essere inseriti anche nei widget della barra laterale<\/a>. Per aggiungerli, andate su Appearance \u00bb Widgets<\/strong> e aggiungete un widget Text<\/strong> alla sezione in cui desiderate aggiungere lo shortcode.<\/p>\n
Aggiunta di shortcode nella barra laterale con il widget Testo<\/figcaption><\/figure>\n Incollate lo shortcode all’interno del widget Text<\/em> e salvatelo<\/em>. Quando visitate il frontend del vostro sito vedrete l’output dello shortcode nella barra laterale.<\/p>\n
Potete vedere il risultato dello shortcode (la gallery) nella barra laterale<\/figcaption><\/figure>\n Nota:<\/strong> le versioni di WordPress 4.8 e successive non supportano gli shortcode nei widget della barra laterale. Per saperne di pi\u00f9, leggete le note sui miglioramenti del widget nell’aggiornamento di WordPress 4.9<\/a>.<\/p>\n
Utilizzo dei Shortcode WordPress nell\u2019Header e nel Footer<\/h3>\n
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.<\/p>\n
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()<\/a> viene utile in questo caso.<\/p>\n
Dovete aggiungere il seguente codice all’header.php<\/em> del tema, al footer.php<\/em> o a uno qualsiasi dei suoi file di template:<\/p>\n
<?php echo do_shortcode(\"[name_of_your_shortcode]\"); ?><\/code><\/pre>\nIn questo modo l\u2019output dello shortcode apparir\u00e0 nel punto in cui avete inserito il codice.
\nRicordate di includere le parentesi quadre tra le virgolette per far funzionare lo shortcode, perch\u00e9 includere solo il nome non funzioner\u00e0.<\/p>\nAllo stesso modo, potete utilizzare la funzione di richiamo do_shortcode()<\/em> per attivare gli shortcode in qualsiasi punto di WordPress, come nella sezione dei commenti.<\/p>\n
Una Rapida Introduzione alla Shortcode API<\/h3>\n
La Shortcode API di WordPress<\/a> definisce in che modo \u00e8 possibile utilizzare gli shortcode per personalizzare ed espandere le funzionalit\u00e0 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.<\/p>\n
Con l’aiuto di shortcode \u00e8 possibile aggiungere quasi tutte le funzioni che si possono immaginare al proprio sito web.<\/p>\n
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.<\/p>\n
Grazie all\u2019API, potrete tuffarvi direttamente nello sviluppo e nella personalizzazione degli shortcode, piuttosto che perdere tempo prezioso a definire regular expressions per ognuno di loro.<\/p>\n
Capire le Basi della Shortcode API<\/h3>\n
Ogni volta che aprite una pagina o un post in WordPress, WordPress cerca gli shortcode registrati durante l’elaborazione dei contenuti del sito.<\/p>\n
Se trova uno shortcode gi\u00e0 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.<\/p>\n
Per registrare uno shortcode in WordPress, si usa la funzione add_shortcode()<\/a>. Ecco come fare:<\/p>\n
add_shortcode( 'shortcode_name', 'shortcode_handler_function' );<\/code><\/pre>\n\n
- shortcode_name:<\/strong> questo \u00e8 il tag che WordPress cercher\u00e0 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).<\/li>\n
- shortcode_handler_function: <\/strong>questa \u00e8 la funzione di callback che verr\u00e0 eseguita dopo che WordPress conferma la presenza di uno shortcode registrato.<\/li>\n<\/ul>\n
La funzione di gestione degli shortcode \u00e8 definita come segue:<\/p>\n
function shortcode_handler_function( $atts, $content, $tag ){ }<\/code><\/pre>\n\n
- $atts: <\/strong>un array associativo di attributi (cio\u00e8 un array di coppie chiave-valore). Se non definite alcun attributo, il valore predefinito sar\u00e0 una stringa vuota.<\/li>\n
- $content: <\/strong>il contenuto allegato, se state definendo uno shortcode di tipo enclosing. \u00c8 responsabilit\u00e0 della funzione handler<\/a> garantire che il valore di $content venga restituito nell\u2019output.<\/li>\n
- $tag:<\/strong> il valore del tag shortcode (shortcode_name<\/em> nell’esempio precedente). Se due o pi\u00f9 shortcode condividono la stessa funzione callback (che \u00e8 valida), il valore $tag vi aiuter\u00e0 a determinare quale shortcode ha attivato la funzione handler.<\/li>\n<\/ul>\n
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.<\/p>\n
Questa stringa di output sostituisce lo shortcode macro sul frontend del vostro sito. Ci\u00f2 che in definitiva si vede nel browser \u00e8 questo output.<\/p>\n
Dove Aggiungere i Vostri Script per gli Shortcode Personalizzati?<\/h3>\n
Potete aggiungere i vostri script per gli shortcode personalizzati nel file functions.php<\/em> del vostro tema o includerli in un plugin.<\/p>\n
Se li aggiungete a un file del tema, potete eseguire la funzione add_shortcode()<\/em><\/a> cos\u00ec com’\u00e8.<\/p>\n
Se invece lo aggiungete ad un plugin, vi consiglio di inizializzarlo solo dopo che WordPress si \u00e8 caricato completamente. Potete assicurarvi di questo avvolgendo la funzione add_shortcode()<\/em> all’interno di un’altra funzione. Questa si chiama funzione wrapper:<\/p>\n
function shortcodes_init(){\n add_shortcode( 'shortcode_name', 'shortcode_handler_function' );\n}\nadd_action('init', 'shortcodes_init');<\/code><\/pre>\nLa funzione add_action()<\/em><\/a> aggancia la funzione shortcodes_init<\/em><\/strong> per eseguirsi solo dopo che WordPress ha terminato il caricamento (e viene chiamata “init” hook<\/a>).<\/p>\n
Come Creare uno Shortcode Personalizzato in WordPress (Livello Principiante)<\/h2>\n
Ora che abbiamo visto le basi, \u00e8 giunto il momento di creare uno shortcode personalizzato.<\/p>\n
![\"Esempio](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/12\/esempio-codice-scorciatoia-galleria-3.jpg\")
![\"Formattazione](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/12\/semplice-formattazione-semplici-bbcode.png\")
![\"Gli](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/12\/codici-brevi-wordpress-semplici-facili-usare.png\")
![\"Gli](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/12\/codici-brevi-autochiusura-chiusura-possono-essere-validi-senza-attributi-1.png\")
![\"Aggiunta](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2020\/01\/aggiunta-blocco-codici-collegamento-gutenberg.png\")
![\"Il](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2020\/01\/blocco-codici-collegamento-dedicato-gutenberg.png\")
![\"Aggiunta](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2020\/01\/aggiunta-codice-scorciatoia-editor-classico.png\")
![\"Aggiunta](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2020\/01\/aggiungi-codice-scelta-rapida-barra-laterale-widget-testo.png\")
![\"Potete](\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2020\/01\/uscita-codice-breve-barra-laterale.png\")