Un’Introduzione agli Shortcodes di WordPress (Con Esempi)

Pubblicato: di Brian Glassman
Un’Introduzione agli Shortcodes di WordPress (Con Esempi) thumbnail

I shortcode di WordPress possono migliorare facilmente il tuo sito web con elementi interattivi e coinvolgenti che possono essere ripetuti in post e pagine. Esempi includono gallerie di immagini, moduli di contatto e playlist per rendere i tuoi contenuti più utili e coinvolgenti.

In questo post, discuteremo i shortcode di WordPress e perché sono utili. Poi, delineeremo quattro metodi per iniziare ad utilizzare i shortcode sul tuo sito. Iniziamo!

WordPress Shortcodes 101

I shortcode di WordPress sono frammenti che permettono di incorporare rapidamente diversi file, oggetti o pezzi di contenuto nel tuo sito web. Sono singole linee di codice HTML che possono includere elementi interattivi del post.

Un shortcode appare così, racchiuso tra due parentesi quadre:

[exampleshortcode]

I shortcode sono stati introdotti nel 2008 per rendere la creazione di post e pagine più complesse più semplice. Offrono un modo semplice per inserire e caricare elementi di contenuto dinamico sul tuo sito.

Ad esempio, potresti voler personalizzare la tua pagina iniziale di WordPress incorporando una mappa di Google per mostrare la tua posizione commerciale. Potresti anche aggiungere un video introduttivo utilizzando un shortcode:

Codice breve video di WordPress

I proprietari di siti web utilizzano tipicamente gli shortcode nel corpo di post, pagine e tipi di post personalizzati. Fortunatamente, con l’evolversi dell’editor di blocchi Gutenberg, l’uso degli shortcode è diventato ancora più semplice. Ne parleremo più avanti nell’articolo.

Ricevi contenuti direttamente nella tua casella di posta

Iscriviti ora per ricevere tutti gli ultimi aggiornamenti direttamente nella tua casella di posta.

Perché Potresti Considerare L’Uso Dei Shortcode Di WordPress

Ci sono molteplici motivi per cui potresti voler utilizzare i shortcode di WordPress. Per cominciare, sono spesso più facili da aggiungere alla tua pagina rispetto a imparare e scrivere un lungo pezzo di codice HTML.

Inoltre, gli shortcode possono mantenere i tuoi contenuti puliti e organizzati. Non occupano tanto spazio nell’HTML del tuo post complessivo. Questo può aiutarti a identificare facilmente gli errori quando utilizzi l’editor di codice.

I Shortcodes sono anche riutilizzabili. Non dovrai aggiungere manualmente le stesse funzionalità, come un Call to Action (CTA) o pulsanti dei social media, a ogni post. Invece, puoi semplicemente incollare il tuo shortcode.

WordPress Shortcodes 101 (4 Modi di Utilizzare Questi Frammenti)

Ci sono due tipi fondamentali di shortcode con cui dovresti familiarizzare: auto-chiusura e contenitivi. Quelli di auto-chiusura stanno da soli e non necessitano di tag di chiusura:

[myshortcode]

I shortcode di tipo inclusione avvolgono un pezzo specifico di contenuto per modificarlo. Pertanto, i shortcode di tipo inclusione devono essere chiusi manualmente. Tipicamente appaiono così:

[myshortcode] contenuto [/myshortcode]

Puoi anche cambiare le proprietà degli shortcode con diversi attributi. Questi influenzeranno il modo in cui l’elemento viene visualizzato sul frontend.

Ad esempio, potresti cambiare la dimensione di un shortcode della galleria aggiungendo un attributo di dimensione:

[gallery id="123" size="medium"]​​

Se esplori la directory dei plugin di WordPress, scoprirai che ci sono molte opzioni per utilizzare gli shortcode sul tuo sito WordPress. Ecco quattro diverse opzioni!

1. Shortcode Predefiniti di WordPress

WordPress include shortcode di base integrati. Questi frammenti ti permettono di incorporare media aggiuntivi direttamente nei tuoi post.

Questi shortcode includono:

  • [caption]: Inserisce didascalie intorno al contenuto.
  • [gallery]: Mostra gallerie di immagini.
  • [audio]: Incorpora e riproduce file audio.
  • [video]: Incorpora e riproduce file video.
  • [playlist]: Visualizza una raccolta di file audio o video.
  • : Inserisce elementi incorporati.

Puoi anche abilitare una varietà di shortcode aggiuntivi tramite il plugin Jetpack.

Articolo correlato
The Best WordPress Plugins in 2025 (According to Site Owners)
Leggi di più

Prima di tutto, assicurati che il modulo Jetpack sia abilitato cliccando su Jetpack nel tuo dashboard WordPress:

Jetpack

Poi, seleziona Impostazioni:

Jetpack

Vai alla scheda Scrittura, scorri verso il basso fino alla sezione Composizione e attiva Componi utilizzando shortcode per incorporare media da siti popolari:

Jetpack

Una volta attivata questa opzione, puoi utilizzare il [tweet] shortcode per incorporare un tweet specifico nel tuo post. Copia semplicemente l’URL del tweet e incollalo all’interno delle parentesi dello shortcode:

Tweet shortcode

Questo incorporerà il tweet collegato nel tuo post. Il risultato apparirà così:

WordPress Twitter shortcode

Puoi utilizzare questi shortcode aggiuntivi per incorporare una serie di altri media nei tuoi contenuti, inclusi playlist di Spotify, documenti Google o ricette.

2. Shortcodes Gutenberg

Blocchi Gutenberg rendono l’aggiunta di contenuto dinamico nei tuoi post ancora più semplice. L’Editor di Blocchi ti permette di modificare facilmente singole sezioni e applicare impostazioni e regole di formattazione specifiche per il blocco senza utilizzare plugin.

L’editor Gutenberg è evoluto per rendere ancora più facile la composizione di post e pagine WordPress. Offre un modo user-friendly per inserire shortcode. La maggior parte dei blocchi Gutenberg sostituisce gli shortcode standard, ma l’editor di blocchi si è dimostrato un bersaglio in movimento, quindi è una buona idea imparare ad usare gli shortcode per la funzionalità.

Ad esempio, potresti usare un blocco Gutenberg per incorporare il tweet del nostro esempio precedente invece di un shortcode. Devi solo cliccare sull’icona + e selezionare il blocco Twitter :

Blocco Twitter in WordPress

Questo metodo ti permette di incollare direttamente l’URL del tweet nel blocco senza scrivere lo shortcode tra parentesi quadre.

Articolo correlato
Your Complete Guide to WordPress Full-Site Editing
Leggi di più

Inoltre, l’Editor di Blocchi Gutenberg presenta un blocco Shortcode . Ti permette di gestire i tuoi frammenti nell’editor visuale senza scrivere direttamente il codice in HTML:

Gutenberg ti permette anche di creare blocchi riutilizzabili, che possono essere utili per usare gli stessi frammenti di contenuto nei tuoi post. Possiamo dimostrare questo concetto con un CTA per i social media che potresti usare alla fine dei post che potresti scrivere sul tuo sito.

Puoi iniziare selezionando il blocco Shortcode dal pop-up:

Blocco Shortcode Gutenberg

Poi, una volta aggiunto il tuo frammento CTA, clicca sui tre punti per un menu delle opzioni e seleziona Aggiungi ai blocci riutilizzabili:

Blocchi riutilizzabili di WordPress

Puoi quindi nominare il blocco riutilizzabile:

denominazione dei blocchi riutilizzabili

Il tuo frammento sarà quindi salvato nella scheda riutilizzabile, consentendoti di usarlo ovunque nel tuo sito web, inclusi post, pagine e aree widget.

3. Shortcodes Plugin

Diversi plugin WordPress includono anche i propri shortcode. Alcuni di questi strumenti possono addirittura aiutarti ad aggiungere parametri personalizzabili agli shortcode predefiniti esistenti.

Ad esempio, puoi ottenere shortcode predefiniti per i moduli di contatto dal plugin Participants Database. Potresti semplicemente digitare [pdb_signup] per inserire un modulo di iscrizione in un post:

Blocco di Shortcode in WordPress

Il modulo verrà quindi visualizzato sul frontend:

creazione di un modulo web in WordPress

Se questo ti interessa, puoi leggere di più sui altri plugin WordPress che possono migliorare il tuo sito web. Questi includono il plugin Enhanced Media Library, che può aiutarti a regolare i parametri per i shortcode Playlist e Gallery integrati.

Tuttavia, ricorda di mantenere aggiornati i tuoi plugin shortcode di WordPress. Facendo ciò puoi garantire che il tuo sito funzioni il più velocemente possibile e non sia vulnerabile a minacce alla sicurezza.

4. Shortcode Personalizzati

Se hai bisogno di ulteriori funzionalità dagli shortcode, è possibile crearne di personalizzati. Possono essere strumenti preziosi per gli sviluppatori che cercano di ridurre il tempo speso nella codifica ripetitiva.

Dovresti notare che la creazione di shortcode personalizzati richiede una certa conoscenza tecnica. Se non ti senti sicuro con la programmazione, potresti voler optare per una delle altre strategie che abbiamo menzionato.

Se vuoi provare questo metodo, considera l’utilizzo di un generatore come GenerateWP per assisterti nella formattazione del tuo codice da zero. Puoi compilare diversi campi di attributi per modificare l’aspetto dell’elemento secondo i tuoi gusti.

Puoi quindi implementare questi shortcode utilizzando la funzione add_shortcode. In azione, apparirà così:

add_shortcode( string $tag, callable $callback )

Tuttavia, se non ti senti a tuo agio nel creare da zero un shortcode personalizzato, c’è un’altra soluzione! Puoi contattare il nostro team di servizi di sviluppo web personalizzato e noi possiamo aiutarti:

Servizi Professionali DreamHost - Design di siti web WordPress

Usando i Servizi Professionali DreamHost, devi solo compilare una richiesta di sviluppo web. Ti faremo alcune semplici domande sul tuo sito web e sulle tue esigenze. Poi, possiamo metterci al lavoro per implementare le tue modifiche su una versione provvisoria del tuo sito. Una volta che hai approvato gli ultimi aggiustamenti, possiamo applicare il nuovo codice al tuo sito live!

Usa Gli Shortcodes Di WordPress Per Migliorare Il Tuo Contenuto

I shortcode di WordPress possono migliorare i contenuti del tuo sito con funzionalità coinvolgenti per i visitatori. Possono garantire che i lettori interagiscano con il tuo sito e continuino a tornare per altro.

In questo post, abbiamo delineato quattro metodi per utilizzare i shortcode di WordPress sul tuo sito:

  1. Shortcodes predefiniti di WordPress
  2. Shortcodes di Gutenberg
  3. Shortcodes dei Plugin
  4. Shortcodes personalizzati

Se senti di non avere l’esperienza tecnica o il tempo per scrivere shortcode o blocchi, non preoccuparti! Puoi consultare i nostri Servizi Professionali di Sviluppo Siti Web per scoprire come possiamo personalizzare il tuo sito con codice di alta qualità.

Servizi di sviluppo di siti web personalizzati DreamHost
Ad background image

Lo Sogni, Noi Lo Programmiamo

Sfrutta oltre 20 anni di esperienza nella programmazione quando scegli il nostro servizio di Sviluppo Web. Dicci solo cosa desideri per il tuo sito u2014 ci occupiamo noi del resto.

Scopri di Più