{"id":71276,"date":"2024-09-12T07:00:00","date_gmt":"2024-09-12T07:00:00","guid":{"rendered":"https:\/\/supporthost.com\/it\/?p=71276"},"modified":"2025-04-22T10:10:40","modified_gmt":"2025-04-22T08:10:40","slug":"wordpress-shortcode","status":"publish","type":"post","link":"https:\/\/supporthost.com\/it\/wordpress-shortcode\/","title":{"rendered":"WordPress e gli shortcode: cosa sono e come funzionano"},"content":{"rendered":"\n<p><span id=\"docs-internal-guid-11958b72-7fff-5c9c-fd06-46a06bfd7971\"><\/span><\/p>\n\n\n\n<p>Il mondo di WordPress e gli shortcode sono strettamente collegati fra di loro, soprattutto perch\u00e9 entrambi condividono il medesimo obiettivo: quello di semplificare il processo di sviluppo di un sito. I<strong>n questa guida vedremo cosa sono, a cosa servono e come si usano gli shortcode<\/strong>, in modo da fornirti un ulteriore strumento per facilitarti la progettazione delle tue pagine web.<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Indice<\/h2><nav><ul><li><a href=\"#che-cosa-sono-gli-shortcode\">Che cosa sono gli shortcode?<\/a><\/li><li><a href=\"#come-funzionano-gli-shortcode\">Come funzionano gli shortcode?<\/a><\/li><li><a href=\"#a-cosa-servono-gli-shortcode-di-word-press\">A cosa servono gli shortcode di WordPress?<\/a><\/li><li><a href=\"#tipi-di-shortcode\">Tipi di shortcode<\/a><\/li><li><a href=\"#word-press-shortcode-nativi\">WordPress shortcode nativi<\/a><\/li><li><a href=\"#come-creare-shortcode-su-word-press\">Come creare shortcode su WordPress<\/a><ul><li><a href=\"#creare-uno-shortcode-usando-code-snippets\">Creare uno shortcode usando Code Snippets<\/a><ul><li><a href=\"#funzione-di-callback-cose-e-come-funziona\">Funzione di callback: cos\u2019\u00e8 e come funziona<\/a><\/li><li><a href=\"#collegare-lo-shortcode-alla-sua-funzione\">Collegare lo shortcode alla sua funzione<\/a><\/li><\/ul><\/li><li><a href=\"#creare-uno-shortcode-usando-un-plugin-custom\">Creare uno shortcode usando un plugin custom<\/a><\/li><\/ul><\/li><li><a href=\"#come-e-dove-si-inseriscono-gli-shortcode\">Come e dove si inseriscono gli shortcode<\/a><ul><li><a href=\"#inserire-gli-shortcode-con-gutenberg\">Inserire gli shortcode con Gutenberg<\/a><\/li><li><a href=\"#aggiungere-gli-shortcode-nei-widget\">Aggiungere gli shortcode nei widget<\/a><\/li><li><a href=\"#inserire-gli-shortcode-nellheader-o-nel-footer\">Inserire gli shortcode nell\u2019header o nel footer<\/a><\/li><\/ul><\/li><li><a href=\"#come-testare-il-tuo-shortcode\">Come testare il tuo shortcode<\/a><\/li><li><a href=\"#plugin-wp-per-inserire-shortcode\">Plugin WP per inserire shortcode<\/a><\/li><li><a href=\"#conclusioni\">Conclusioni<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"che-cosa-sono-gli-shortcode\">Che cosa sono gli shortcode?<\/h2>\n\n\n\n<p>Le prime tracce di shortcode risalgono al lontano 1998 e avevano lo scopo non solo di semplificare il codice, ma anche di renderlo pi\u00f9 sicuro. In <a href=\"https:\/\/www.bbcode.org\/reference.php\" rel=\"noopener\">questa tabella riepilogativa<\/a> puoi trovare i primi tag che oggi sono diventati di uso comune e che vanno sotto il nome di \u201c<strong>BBCode<\/strong>\u201d con riferimento a Ultimate Bulletin Board, il forum in cui comparvero per la prima volta.<\/p>\n\n\n\n<p>La traduzione del nome \u201cshortcode\u201d dice gi\u00e0 moltissimo su questo strumento che fu implementato con la versione 2.5 di WordPress, nel 2008. Questo \u201ccodice breve\u201d &#8211; che non \u00e8 altro che uno <strong>snippet di codice<\/strong>, cio\u00e8 un frammento &#8211; \u00e8 un piccolo testo compreso fra due parentesi quadre che ha un po\u2019 la funzione di <strong>accorciare e semplificare dei comandi di codice HTML, PHP o JavaScript<\/strong>.<\/p>\n\n\n\n<p>Un esempio di shortcode potrebbe essere questo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;recent-posts posts=\"2\"]<\/code><\/pre>\n\n\n\n<p>e cio\u00e8 un modo molto rapido e alla portata di tutti per inserire in una pagina web una sezione che mostri gli ultimi due articoli di blog. Alla pari di un testo qualunque, ti sar\u00e0 sufficiente <strong>inserire questo comando nel punto esatto in cui vuoi che compaia l\u2019elemento<\/strong> (in questo caso gli articoli pi\u00f9 recenti) e, al momento della pubblicazione della pagina, al posto dello shortcode potrai visualizzare il contenuto dinamico desiderato.<\/p>\n\n\n\n<p>Si tratta di uno strumento utile solo per le pagine? Certo che no: questa stringa pu\u00f2 essere inserita in tantissime sezioni del tuo sito, come vedremo nel corso di questa guida dedicata agli shortcode.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"come-funzionano-gli-shortcode\">Come funzionano gli shortcode?<\/h2>\n\n\n\n<p>Probabilmente ti starai domandando com\u2019\u00e8 possibile che un piccolo testo fra due parentesi quadre possa avere questi \u201cpoteri speciali\u201d. Il merito in realt\u00e0 non \u00e8 delle parentesi quadre&nbsp;quanto, piuttosto, di una <strong>funzione PHP che indica a WordPress come comportarsi quando si trova davanti quello specifico snippet<\/strong>.<\/p>\n\n\n\n<p>A seconda della configurazione della funzione di callback (di cui parleremo a breve) e dei dettagli che andiamo a inserire fra le parentesi quadre, saremo in grado non soltanto di far comparire un elemento nella nostra pagina ma anche di definirne formattazione, comportamento e altri dettagli.<\/p>\n\n\n\n<p>Riprendiamo l\u2019esempio precedente:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;recent-posts posts=\"2\"]<\/code><\/pre>\n\n\n\n<p>Qui non abbiamo solo indicato a WordPress di far comparire gli ultimi articoli di blog, ma anche quanti dovr\u00e0 mostrarne, cio\u00e8 due.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"a-cosa-servono-gli-shortcode-di-word-press\">A cosa servono gli shortcode di WordPress?<\/h2>\n\n\n\n<p>Che servano a semplificarci la vita lo abbiamo gi\u00e0 detto e, allo stesso modo, dall\u2019esempio appena riportato avrai intuito quanto siano <strong>molto contenute le conoscenze di programmazione e di codice richieste<\/strong>.<\/p>\n\n\n\n<p>Sarebbe tuttavia limitativo definire gli shortcode come qualcosa di utile solo per le persone poco esperte di programmazione. Uno dei loro vantaggi &#8211; molto comodo anche per i web developer! &#8211; \u00e8 infatti anche quello di permettere di <strong>gestire in maniera centralizzata le modifiche a elementi che si ripetono in pi\u00f9 punti del tuo sito<\/strong>.<\/p>\n\n\n\n<p>Se per esempio vuoi modificare alcune caratteristiche o certi comportamenti di uno shortcode in tutto il sito web (un campo, gli articoli recenti, una photogallery) ti baster\u00e0 lavorare sullo script PHP a monte, una sola volta. Quella singola configurazione del tuo shortcode dar\u00e0 a WordPress le coordinate necessarie per capire come gestirlo, riportando le modifiche effettuate in tutti i punti in cui avrai inserito il tuo snippet di codice.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"tipi-di-shortcode\">Tipi di shortcode<\/h2>\n\n\n\n<p>Per iniziare a capire meglio come gestire l\u2019inserimento dei tuoi shortcode su WordPress, partiamo con il dividerli in due grandi categorie che, al di l\u00e0 della definizione, ti illustrano un pochino il loro funzionamento:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Self-closing Shortcode<\/strong>: sono i codici a se stanti, che non hanno bisogno di un tag di chiusura [\/].&nbsp; Servono di norma a inserire un elemento autonomo come una gallery, un form, una tipologia di contenuti.<\/li>\n\n\n\n<li><strong>Enclosing Shortcode<\/strong>: questa tipologia richiede un tag di apertura e uno di chiusura e, generalmente, serve per attivare una funzione collegata al contenuto inserito fra l\u2019apertura e la chiusura.<\/li>\n<\/ol>\n\n\n\n<p>Questo un esempio di Self-closing Shortcode:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;gallery id=\"123\" size=\"medium\"]<\/code><\/pre>\n\n\n\n<p>E questo, invece, un Enclosing Shortcode:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;shortcode_box titolo=\"Titolo\" bgcolor=\"#000000\"]Titolo sezione&#091;\/shortcode_box]<\/code><\/pre>\n\n\n\n<p>In linea generale potremmo fare anche una sorta di distinzione per livello di difficolt\u00e0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Se sei alle prime armi con la creazione di siti web, ti consigliamo di iniziare con gli <strong>shortcode nativi di WordPress<\/strong>, e cio\u00e8 quelli messi a disposizione dal CMS stesso e gi\u00e0 pronti all\u2019uso, di cui parleremo pi\u00f9 avanti.<\/li>\n\n\n\n<li>Se invece hai gi\u00e0 una certa dimestichezza con questo mondo, i tempi potrebbero essere maturi per <strong>imparare anche a crearne di tuoi<\/strong>, aggiungendo ulteriori funzionalit\u00e0 e contenuti dinamici al tuo sito con pochi comandi.<\/li>\n<\/ul>\n\n\n\n<p>In un certo senso gli shortcode sono una sorta di <strong>\u201cversione compatta\u201d di un codice<\/strong>, e nei prossimi paragrafi, andremo pi\u00f9 a fondo per capirne funzionamento e potenzialit\u00e0.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"word-press-shortcode-nativi\">WordPress shortcode nativi<\/h2>\n\n\n\n<p>WordPress prevede gi\u00e0 una serie di shortcode base che non necessitano di configurazione e che sono disponibili a prescindere da quale tema o builder utilizzerai per il tuo sito web, e sono questi:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>[<a href=\"https:\/\/wordpress.org\/documentation\/article\/audio-shortcode\/\" rel=\"noopener\">audio<\/a>]<\/strong> aggiunge dei file audio.<\/li>\n\n\n\n<li><strong>[<a href=\"https:\/\/codex.wordpress.org\/Caption_Shortcode\" rel=\"noopener\">caption<\/a>]<\/strong> inserisce una didascalia in corrispondenza di un\u2019immagine specifica, o anche di un altro elemento.<\/li>\n\n\n\n<li><strong>[<a href=\"https:\/\/codex.wordpress.org\/Embed_Shortcode\" rel=\"noopener\">embed<\/a>]<\/strong> incorpora elementi vari presenti su siti e piattaforme di terze parti, ad esempio un video caricato su un\u2019altra piattaforma come YouTube, o ancora Facebook, Vimeo e tanti altri.<\/li>\n\n\n\n<li><strong>[<a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/gallery_shortcode\/\" rel=\"noopener\">gallery<\/a>]<\/strong> permette di aggiungere una galleria fotografica.<\/li>\n\n\n\n<li><strong>[<a href=\"https:\/\/codex.wordpress.org\/Playlist_Shortcode\" rel=\"noopener\">playlist<\/a>]<\/strong> consente di inserire una lista di contenuti audio e video da poter ascoltare e vedere direttamente nella pagina stessa.<\/li>\n\n\n\n<li><strong>[<a href=\"https:\/\/wordpress.org\/documentation\/article\/video-shortcode\/\" rel=\"noopener\">video<\/a>]<\/strong> posiziona fra i contenuti un video.<\/li>\n<\/ol>\n\n\n\n<p>Come approfondimento ulteriore puoi leggere anche la <a href=\"https:\/\/codex.wordpress.org\/Shortcode\" rel=\"noopener\">documentazione ufficiale di WordPress sugli shortcode<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"come-creare-shortcode-su-word-press\">Come creare shortcode su WordPress<\/h2>\n\n\n\n<p>In questa guida non andremo troppo in profondit\u00e0 negli aspetti pi\u00f9 tecnici della programmazione PHP, ma ci limiteremo a fornirti le indicazioni base per muovere i primi passi nella configurazione degli shortcode su WordPress.<\/p>\n\n\n\n<p>I passaggi base per la creazione di questi snippet di codice sono questi:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>creare una <strong>funzione di callback<\/strong><\/li>\n\n\n\n<li><strong>collegare <\/strong>questa funzione al codice tra parentesi quadre<\/li>\n\n\n\n<li>se necessario, <strong>personalizzare uno shortcode<\/strong><\/li>\n<\/ol>\n\n\n\n<p>Vediamo i dettagli fondamentali di questi passaggi. <\/p>\n\n\n\n<p>Ci sono diverse alternative per creare uno shortcode.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Inserire il codice usando un plugin come Code Snippets.<\/li>\n\n\n\n<li>Aggiungere il codice al file functions.php del tema, creando prima un <a href=\"https:\/\/supporthost.com\/it\/tema-child\/\" data-type=\"post\" data-id=\"23609\">tema child<\/a>.<\/li>\n\n\n\n<li>Creare un plugin custom in cui inserire il codice.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"creare-uno-shortcode-usando-code-snippets\">Creare uno shortcode usando Code Snippets<\/h3>\n\n\n\n<p>Per rendere la procedura estremamente semplice ti consigliamo di installare il plugin \u201c<strong><a href=\"https:\/\/it.wordpress.org\/plugins\/code-snippets\/\" data-type=\"link\" data-id=\"https:\/\/it.wordpress.org\/plugins\/code-snippets\/\" rel=\"noopener\">Code Snippets<\/a><\/strong>\u201d, raggiungibile direttamente dal backend di WordPress.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"417\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/code-snippets-1024x417.png\" alt=\"Code Snippets\" class=\"wp-image-71282\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/code-snippets-1024x417.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/code-snippets-300x122.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/code-snippets-768x313.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/code-snippets-120x49.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/code-snippets-1536x625.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/code-snippets-2048x834.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Una volta installato e attivato ti comparir\u00e0 nel pannello di controllo di sinistra sotto la voce &#8220;<strong>Snippets<\/strong>&#8220;, e da qui potrai configurare comodamente i tuoi shortcode cliccando su \u201cAggiungi nuovo\u201d e procedendo come vedremo a seguire.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"598\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/code-snippet-wordpress-1024x598.png\" alt=\"Code Snippet WordPress\" class=\"wp-image-71284\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/code-snippet-wordpress-1024x598.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/code-snippet-wordpress-300x175.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/code-snippet-wordpress-768x448.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/code-snippet-wordpress-108x63.png 108w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/code-snippet-wordpress-1536x897.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/code-snippet-wordpress.png 1545w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"funzione-di-callback-cose-e-come-funziona\">Funzione di callback: cos\u2019\u00e8 e come funziona<\/h4>\n\n\n\n<p>Con funzione di callback si intende quel \u201crichiamo\u201d che p<strong>ermette a WordPress di eseguire alcuni comandi prestabiliti in presenza di un determinato shortcode<\/strong>.<\/p>\n\n\n\n<p>Dalla sezione &#8220;Snippets&#8221; clicca su &#8220;Add New&#8221; per inserire il tuo nuovo shortcode. Qui dovrai definire un nome per riconoscerlo nel tuo archivio, e nello spazio sottostante procedere con la scrittura della funzione.  <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"535\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/wordpress-shortcode-callback-1024x535.png\" alt=\"Wordpress Shortcode Callback\" class=\"wp-image-71291\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/wordpress-shortcode-callback-1024x535.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/wordpress-shortcode-callback-300x157.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/wordpress-shortcode-callback-768x402.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/wordpress-shortcode-callback-120x63.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/wordpress-shortcode-callback-1536x803.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/wordpress-shortcode-callback.png 1767w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>In questo esempio stiamo dicendo a WordPress che, in presenza dello shortcode \u201csmall\u201d, dovr\u00e0 prendere il contenuto e inserirlo fra due tag \u201csmall\u201d e \u201c\/small\u201d, che ne ridurranno automaticamente la dimensione. La specifica \u201cnull\u201d indica che, in assenza di contenuto, non ci sar\u00e0 nulla da fare.<\/p>\n\n\n\n<p>Se vuoi vedere pi\u00f9 nel dettaglio come puoi intervenire nella funzione di callback, il nostro Ivan ha realizzato questo tutorial molto specifico che ti illustrer\u00e0 proprio come creare uno shortcode su WordPress.<\/p>\n\n\n\n<div data-video-id=\"rArphMQey30\" style=\"--btn-hover-color:#ff0000;--btn-hover-scale:1;\" class=\"wp-block-supporthost-supporthost-youtube-block\">\n    <div class=\"youtube-video-play youtube-video-play--youtube\" style=\"height:60px;\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 71.412 50\" style=\"height:60px;\"><g transform=\"scale(.58824)\"><path class=\"yt-bg\" fill=\"rgba(0,0,0,0.8)\" d=\"M118.9 13.3c-1.4-5.2-5.5-9.3-10.7-10.7C98.7 0 60.7 0 60.7 0s-38 0-47.5 2.5C8.1 3.9 3.9 8.1 2.5 13.3 0 22.8 0 42.5 0 42.5s0 19.8 2.5 29.2C3.9 76.9 8 81 13.2 82.4 22.8 85 60.7 85 60.7 85s38 0 47.5-2.5c5.2-1.4 9.3-5.5 10.7-10.7 2.5-9.5 2.5-29.2 2.5-29.2s.1-19.8-2.5-29.3z\"\/><path fill=\"#ffffff\" d=\"M80.2 42.5L48.6 24.3v36.4z\"\/><\/g><\/svg><\/div>            <img src=\"https:\/\/img.youtube.com\/vi\/rArphMQey30\/maxresdefault.jpg\" loading=\"lazy\" decoding=\"async\">    <\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"collegare-lo-shortcode-alla-sua-funzione\">Collegare lo shortcode alla sua funzione<\/h4>\n\n\n\n<p>Nella funzione di callback che abbiamo visto poco fa, questa azione \u00e8 in realt\u00e0 gi\u00e0 inserita grazie alla stringa di codice \u201c<strong>add_shortcode<\/strong>\u201d senza la quale la funzione, anche se corretta al 100%, non si attiverebbe. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_shortcode ( 'small', 'my_custom_shortcode_small' );<\/code><\/pre>\n\n\n\n<p>Infatti, grazie alla stringa qui sopra, quando viene trovato lo shortcode &#8220;small&#8221; viene eseguita automaticamente la funzione &#8220;my_custom_shortcode_small&#8221;.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"creare-uno-shortcode-usando-un-plugin-custom\">Creare uno shortcode usando un plugin custom<\/h3>\n\n\n\n<p>Oltre a poter utilizzare Code Snippet, per shortcode con funzioni pi\u00f9 complesse pu\u00f2 essere utile creare un <strong>plugin custom<\/strong> che potremo poi attivare dal backend di WordPress come un normale plugin.<\/p>\n\n\n\n<p>Per creare un plugin custom ci basta: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>creare una cartella all&#8217;interno della cartella plugins (wp-content\/plugins) con il nome del plugin custom, per esempio &#8220;semplice-shortcode&#8221;;<\/li>\n\n\n\n<li>creare un file php all&#8217;interno di questa cartella, usando lo stesso nome. Es. &#8220;semplice-shortcode.php&#8221;.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"578\" height=\"292\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/creare-shortcode-con-plugin-custom.png\" alt=\"Creare Shortcode Con Plugin Custom\" class=\"wp-image-71387\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/creare-shortcode-con-plugin-custom.png 578w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/creare-shortcode-con-plugin-custom-300x152.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/creare-shortcode-con-plugin-custom-120x61.png 120w\" sizes=\"auto, (max-width: 578px) 100vw, 578px\" \/><\/figure>\n\n\n\n<p>A questo punto possiamo modificare il file php creato inserendo al suo interno il codice dello shortcode. <\/p>\n\n\n\n<p>Ecco un esempio molto semplice riprendendo il codice di prima.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n\/**\n * Plugin Name: Semplice Shortcode\n *\/ \n\nfunction my_custom_shortcode_small( $atts, $content = null) {\n    return '&lt;small&gt;' . $content . '&lt;\/small&gt;';\n}\n\nfunction register_shortcode(){\nadd_shortcode ( 'small', 'my_custom_shortcode_small' );\n}\n\nadd_action( 'init', 'register_shortcode' );\n?&gt;<\/code><\/pre>\n\n\n\n<p class=\"note\"><strong>Nota: <\/strong>in questo esempio abbiamo utilizzato solo il campo indispensabile nell&#8217;header del plugin, vale a dire quello per specificare il nome. Puoi anche inserire gli altri campi che trovi nella <a href=\"https:\/\/developer.wordpress.org\/plugins\/plugin-basics\/header-requirements\/\" rel=\"noopener\">documentazione<\/a>, tra cui URI, descrizione, autore, ecc. <\/p>\n\n\n\n<p>Usando un plugin custom possiamo far s\u00ec che lo shortcode venga eseguito dopo il caricamento di WordPress. <\/p>\n\n\n\n<p>In questo esempio abbiamo inserito la stringa &#8220;add_shortcode&#8221; in una funzione, chiamata &#8220;register_shortcode&#8221; e poi usato l<em>&#8216;<\/em><a href=\"https:\/\/supporthost.com\/it\/hook-wordpress\/\" data-type=\"post\" data-id=\"84714\">hook<\/a> <code>init<\/code> aggiungendo la stringa: <code>add_action( 'init', 'register_shortcode' );<\/code><\/p>\n\n\n\n<p>Questa ci permette eseguire la funzione &#8220;<code>register_shortcode<\/code>&#8220;, e quindi di eseguire il nostro shortcode, solo dopo che WordPress ha concluso il caricamento.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"come-e-dove-si-inseriscono-gli-shortcode\">Come e dove si inseriscono gli shortcode<\/h2>\n\n\n\n<p>Come abbiamo detto all\u2019inizio di questa guida dedicata agli shortcode, questi snippet possono essere aggiunti in qualsiasi sezione del tuo sito. Scopriamo insieme le principali modalit\u00e0 di inserimento.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"inserire-gli-shortcode-con-gutenberg\">Inserire gli shortcode con Gutenberg<\/h3>\n\n\n\n<p>Dall\u2019elenco dei blocchi di Gutenberg \u00e8 possibile selezionare il blocco \u201cShortcode\u201d, all\u2019interno del quale inserire il tuo snippet.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"463\" height=\"1024\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/shortcode-su-wordpress-con-gutenberg-463x1024.png\" alt=\"Shortcode Su WordPress Con Gutenberg\" class=\"wp-image-71286\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/shortcode-su-wordpress-con-gutenberg-463x1024.png 463w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/shortcode-su-wordpress-con-gutenberg-136x300.png 136w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/shortcode-su-wordpress-con-gutenberg-28x63.png 28w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/shortcode-su-wordpress-con-gutenberg.png 635w\" sizes=\"auto, (max-width: 463px) 100vw, 463px\" \/><\/figure>\n\n\n\n<p>Una volta aggiunto il blocco sar\u00e0 sufficiente digitare lo shortcode all&#8217;interno del campo specifico. Se non hai dimestichezza con l&#8217;editor a blocchi, puoi comprenderlo a fondo con la nostra <a href=\"https:\/\/supporthost.com\/it\/gutenberg\/\">guida completa dedicata a Gutenberg<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"225\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/esempio-blocco-shortcode-1024x225.png\" alt=\"Esempio Blocco Shortcode\" class=\"wp-image-71289\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/esempio-blocco-shortcode-1024x225.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/esempio-blocco-shortcode-300x66.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/esempio-blocco-shortcode-768x169.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/esempio-blocco-shortcode-120x26.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/esempio-blocco-shortcode-1536x338.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/esempio-blocco-shortcode.png 1754w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aggiungere-gli-shortcode-nei-widget\">Aggiungere gli shortcode nei widget<\/h3>\n\n\n\n<p>Anche per inserire uno shortcode nei tuoi widget ti consigliamo di utilizzare i blocchi di Gutenberg. Dalla sezione \u201cAspetto\u201d passa a \u201cWidget\u201d e qui, dopo aver cliccato sul simbolo \u201c+\u201d, potrai inserire il blocco Shortcode dall\u2019elenco.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"452\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/shortcode-nei-widget-di-wp-1024x452.png\" alt=\"Shortcode Nei Widget Di Wp\" class=\"wp-image-71287\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/shortcode-nei-widget-di-wp-1024x452.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/shortcode-nei-widget-di-wp-300x133.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/shortcode-nei-widget-di-wp-768x339.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/shortcode-nei-widget-di-wp-120x53.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/shortcode-nei-widget-di-wp-1536x678.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/shortcode-nei-widget-di-wp-2048x905.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>In questo modo ti assicurerai il <strong>corretto funzionamento dello snippet<\/strong>, che potrai verificare una volta cliccato su Aggiorna.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"514\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/barra-laterale-shortcode-1024x514.png\" alt=\"Barra Laterale Shortcode\" class=\"wp-image-71288\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/barra-laterale-shortcode-1024x514.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/barra-laterale-shortcode-300x150.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/barra-laterale-shortcode-768x385.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/barra-laterale-shortcode-120x60.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/barra-laterale-shortcode-1536x770.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/barra-laterale-shortcode-2048x1027.png 1843w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2024\/09\/barra-laterale-shortcode.png 1842w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"inserire-gli-shortcode-nellheader-o-nel-footer\">Inserire gli shortcode nell\u2019header o nel footer<\/h3>\n\n\n\n<p>Questa \u00e8 forse una delle poche sezioni in cui, per aggiungere uno shortcode, occorre prestare un pochino di attenzione. Occorre infatti <strong>accedere direttamente all\u2019editor del tema<\/strong>, nelle sezioni header.php o footer.php e inserire qui la funzione, ad esempio:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php echo do_shortcode('&#091;shortcode]'); ?&gt;<\/code><\/pre>\n\n\n\n<p>sostituendo il testo tra parentesi quadre con lo shortcode che ti interessa.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"come-testare-il-tuo-shortcode\">Come testare il tuo shortcode<\/h2>\n\n\n\n<p>Per assicurarti il corretto funzionamento dello shortcode<strong> pubblica la tua pagina e accertati che i parametri che hai impostato funzionino correttamente<\/strong>. Visualizzando la pagina online dovresti riuscire a colpo d\u2019occhio a intuire che tutto sia stato configurato in maniera corretta.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"plugin-wp-per-inserire-shortcode\">Plugin WP per inserire shortcode<\/h2>\n\n\n\n<p>Esistono diversi plugin che permettono di gestire gli shortcode con estrema facilit\u00e0. Uno dei pi\u00f9 completi \u00e8 senza dubbio <strong><a href=\"https:\/\/it.wordpress.org\/plugins\/shortcodes-ultimate\/\" rel=\"noopener\">Shortcodes Ultimate<\/a><\/strong>, con pi\u00f9 di 50 snippet gi\u00e0 pronti all\u2019uso e una live preview che rendono la configurazione estremamente semplice, disponibile sia in versione gratuita che a pagamento.<\/p>\n\n\n\n<p>Come buone alternative puoi valutare:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/mekshq.com\/\" rel=\"noopener\"><strong>Meks Shortcodes<\/strong><\/a>, che offre gratuitamente 12 shortcode gi\u00e0 configurati che coprono a grandi linee le funzionalit\u00e0 pi\u00f9 richieste;<\/li>\n\n\n\n<li><a href=\"https:\/\/www.aakashweb.com\/wordpress-plugins\/shortcoder\/\" rel=\"noopener\"><strong>Shortcoder<\/strong><\/a>, molto comodo per poter editare i tuoi snippet con una modalit\u00e0 visiva estremamente chiara e funzionale. Anche qui, con la funzione Pro, \u00e8 possibile accedere a strumenti aggiuntivi interessanti.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusioni\">Conclusioni<\/h2>\n\n\n\n<p>Gli shortcode sono diventati ormai da tempo una delle <strong>pietre miliari di WordPress<\/strong>, migliorando tantissimo la configurazione di numerose funzioni utili per i siti web. Con l\u2019arrivo dei builder a blocchi e di Gutenberg tanti dei benefici forniti dagli shortcode sono stati sostituiti e implementati da questi nuovi strumenti, portando ai massimi livelli la loro accessibilit\u00e0 per chi non ha dimestichezza con il codice.<\/p>\n\n\n\n<p>Un ultimo aspetto da tenere presente \u00e8 che l\u2019utilizzo di shortcode abbinati a <a href=\"https:\/\/supporthost.com\/it\/temi-wordpress\/\">temi WP<\/a> o builder particolari smetteranno di funzionare nel caso si decidesse di cambiare. Nonostante questo possiamo sicuramente confermare la loro importanza ancora oggi nella <strong>riduzione di tempi e rischi per molte funzionalit\u00e0 di un sito web<\/strong>.<\/p>\n\n\n\n<p>Quali sono gli shortcode che hai gi\u00e0 utilizzato? Lasciaci un commento e racconta la tua esperienza e se hai riscontrato qualche difficolt\u00e0 in particolare.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Il mondo di WordPress e gli shortcode sono strettamente collegati fra di loro, soprattutto perch\u00e9 entrambi condividono il medesimo obiettivo: quello di semplificare il processo di sviluppo di un sito. In questa guida vedremo cosa sono, a cosa servono e come si usano gli shortcode, in modo da fornirti un ulteriore strumento per facilitarti la [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":71454,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[33],"tags":[],"class_list":["post-71276","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"acf":[],"_links":{"self":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts\/71276","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/comments?post=71276"}],"version-history":[{"count":21,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts\/71276\/revisions"}],"predecessor-version":[{"id":105454,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts\/71276\/revisions\/105454"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/media\/71454"}],"wp:attachment":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/media?parent=71276"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/categories?post=71276"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/tags?post=71276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}