Volete utilizzare gli shortcode nel vostro tema WordPress?
Normalmente, si utilizzano gli shortcode all’interno di aree di contenuto come i post, le pagine o i widget della barra laterale. Tuttavia, a volte è possibile aggiungere uno shortcode all’interno del tema di WordPress.
In questo articolo vi mostreremo come aggiungere facilmente qualsiasi shortcode al vostro tema WordPress.
Perché usare gli shortcode nei vostri temi WordPress?
Gli shortcode consentono di aggiungere al sito web ogni tipo di funzionalità, tra cui gallerie di immagini, moduli, feed di social media e molto altro.
WordPress è dotato di alcuni shortcode integrati, ma ci sono anche molti plugin WordPress popolari che aggiungono shortcode al vostro sito.
Ad esempio, WPForms ha blocchi facili da usare, ma fornisce anche shortcode per aggiungere moduli ad altre aree del sito.
Nella maggior parte dei casi, si aggiungono gli shortcode all’interno di aree di contenuto come i post e le pagine.
Per saperne di più, consultate la nostra guida completa su come aggiungere uno shortcode in WordPress.
Tuttavia, a volte è possibile utilizzare uno shortcode all’interno dei file del tema di WordPress.
Ciò consente di aggiungere elementi dinamici ad aree che non si possono modificare con l’editor standard dei post di WordPress, come la pagina dell’archivio. È anche un modo semplice per utilizzare lo stesso shortcode su più pagine.
Ad esempio, si può aggiungere uno shortcode al modello di pagina o di post del tema.
Tenendo presente questo, vediamo come utilizzare gli shortcode nel vostro tema WordPress. Utilizzate i link rapidi qui sotto per passare direttamente al metodo che desiderate utilizzare:
Metodo 1: Utilizzo dell’editor del sito completo (solo per i temi a blocchi)
Il modo più semplice per utilizzare gli shortcode nel vostro tema WordPress è utilizzare l’editor completo del sito. In questo modo è possibile aggiungere un blocco di shortcode a qualsiasi parte del sito.
Tuttavia, questo metodo funziona solo con temi basati su blocchi come Hestia Pro. Se non si utilizza un tema abilitato ai blocchi, è necessario utilizzare un metodo diverso.
Per iniziare, andate su Aspetto ” Editor nella dashboard di WordPress.
Per impostazione predefinita, l’editor completo del sito mostra il modello di home del tema, ma è possibile aggiungere shortcode a qualsiasi modello.
Per visualizzare tutte le opzioni disponibili, selezionare “Modelli”.
A questo punto è possibile fare clic sul modello che si desidera modificare.
A titolo di esempio, aggiungeremo uno shortcode al modello della pagina 404, ma i passaggi saranno esattamente gli stessi indipendentemente dal modello selezionato.
A questo punto WordPress mostrerà un’anteprima del modello.
Per aggiungere un codice breve, fare clic sull’icona della matita.
A questo punto, fare clic sull’icona blu “+” nell’angolo in alto a sinistra.
Nella barra di ricerca, è necessario digitare “Shortcode”.
Quando appare il blocco giusto, trascinarlo sul modello del tema.
A questo punto è possibile incollare o digitare lo shortcode che si desidera utilizzare.
Dopodiché, fare clic sul pulsante “Salva”.
Ora è sufficiente visitare il vostro blog WordPress per vedere lo shortcode in azione.
Metodo 2: Modifica dei file del tema WordPress (funziona con qualsiasi tema WordPress)
È anche possibile aggiungere shortcode al tema WordPress modificando i file del tema. Questo metodo è più avanzato, ma funziona con tutti i temi di WordPress.
Se non avete mai aggiunto codice al vostro sito, date un’occhiata alla nostra guida passo passo su come copiare e incollare codice in WordPress.
È possibile modificare direttamente i singoli file del tema, ma questo rende difficile aggiornare il tema WordPress senza perdere la personalizzazione. Per questo motivo, si consiglia di sovrascrivere i file del tema creando un tema figlio.
Se si sta creando un tema personalizzato, è possibile aggiungere o modificare il codice nei file del tema esistente.
Quando si modificano i file del tema, non è possibile aggiungere lo shortcode nello stesso formato utilizzato per le aree di contenuto standard. Invece di vedere l’output dello shortcode, si vedrà lo shortcode stesso sullo schermo.
Questo accade perché WordPress non esegue gli shortcode all’interno dei file modello dei temi. È invece necessario indicare esplicitamente a WordPress di eseguire lo shortcode utilizzando la funzione do_shortcode.
Per ulteriori informazioni, consultare la nostra guida su come aggiungere facilmente codice personalizzato.
Ecco un esempio del codice da aggiungere ai file del vostro tema WordPress:
echo do_shortcode('[gallery]');
È sufficiente sostituire ‘gallery’ con lo shortcode che si desidera utilizzare.
Se non siete sicuri di dove aggiungere lo shortcode, consultate la nostra guida per principianti sulla gerarchia dei template di WordPress.
Se si aggiunge uno shortcode con parametri aggiuntivi, è necessario utilizzare uno snippet di codice leggermente diverso.
Immaginate di aver creato un modulo di contatto utilizzando WPForms. In questo caso, dovrete usare lo shortcode standard di WPForms e l’ID del modulo:
echo do_shortcode("[wpforms id='92']");
Risoluzione dei problemi: Cosa fare quando do_shortcode non funziona
A volte può capitare di aggiungere uno shortcode a un file di tema, ma l’output del codice non appare sul vostro sito web WordPress. Questo di solito significa che lo shortcode dipende da un plugin di WordPress o da qualche altro codice presente sul vostro sito web.
Se la funzione do_shortcode non funziona, accertarsi che il plugin che fornisce lo shortcode sia installato e attivato andando su Plugin ” Plugin installati.
Nell’immagine seguente, WPForms è installato ma disattivato, quindi il codice echo do_shortcode non funziona.
Si può anche verificare se uno shortcode è disponibile per l’uso aggiungendo la funzione shortcode_exists() al file index.php.
Nel seguente snippet, controlliamo se lo snippet WPForms è disponibile per l’uso sul nostro sito web:
if ( shortcode_exists( 'wpforms' )) {
echo do_shortcode("[[wpforms id='147']]");
}
Se ancora non vedete lo shortcode sul vostro sito web, provate a svuotare la cache di WordPress, perché potreste vedere una versione non aggiornata del vostro sito.
Metodo 3: Creare il proprio tema WordPress (completamente personalizzabile)
Un’altra opzione è quella di creare un tema WordPress personalizzato. Si tratta di un metodo più avanzato, ma che consente di aggiungere tutti gli shortcode che si desidera a qualsiasi area del tema WordPress. Potete anche apportare altre modifiche per creare un tema che abbia esattamente le caratteristiche e il design che desiderate.
In passato, per creare un tema WordPress personalizzato era necessario seguire complicati tutorial di WordPress e scrivere codice. Tuttavia, ora è possibile creare un tema personalizzato senza scrivere una sola riga di codice utilizzando SeedProd.
SeedProd è il miglior costruttore di pagine di WordPress e dispone anche di un costruttore di temi. Questo vi permette di progettare i vostri temi utilizzando il drag and drop.
Per le istruzioni passo-passo, consultate la nostra guida su come creare un tema WordPress personalizzato (senza alcun codice).
Dopo aver creato un tema, è possibile aggiungere gli shortcode a qualsiasi parte del sito WordPress andando su SeedProd ” Theme Builder.
Qui, trovare il modello in cui si desidera utilizzare lo shortcode.
A questo punto, basta passare il mouse su quel modello e fare clic su “Modifica design” quando appare.
Questo aprirà il modello nel costruttore di pagine drag-and-drop di SeedProd.
Nel menu di sinistra, scorrere fino alla sezione “Avanzate”. Qui, trovare il blocco Shortcode e trascinarlo nel layout.
Nell’anteprima live, è sufficiente fare clic per selezionare il blocco Shortcode.
A questo punto è possibile aggiungere lo shortcode nella casella “Shortcode”.
Per impostazione predefinita, SeedProd non mostra l’output dello shortcode nell’anteprima live.
Per vedere il vostro shortcode in azione, fate clic sulla levetta “Mostra opzione shortcode”.
Successivamente, si può aggiungere un po’ di stile all’output dello shortcode selezionando la scheda “Avanzate”.
Qui è possibile modificare la spaziatura, aggiungere CSS personalizzati e persino aggiungere effetti di animazione CSS.
Quando si è soddisfatti dell’aspetto della pagina, basta fare clic sul pulsante “Salva”.
Quindi, selezionare “Pubblica” per rendere attivo lo shortcode.
Ora è possibile visitare il proprio sito web per vedere lo shortcode personalizzato in azione.
Speriamo che questo tutorial vi abbia aiutato a imparare a usare gli shortcode nei vostri temi WordPress. Potreste anche dare un’occhiata alla nostra guida su come creare una landing page in WordPress e alle nostre scelte degli esperti sui migliori plugin per i social media per WordPress.
Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Jiří Vaněk says
Is there a way to create a shortcode myself, rather than just inserting one that’s already created by a plugin? Let me give an example. I create a piece of code that I don’t necessarily want to insert everywhere as PHP code. Can I turn that code into a shortcode, which I then simply insert in the desired location, and the entire PHP code hidden within that shortcode gets executed there?
WPBeginner Support says
We have a guide on creating your own shortcode that you would want to take a look at below:
https://www.wpbeginner.com/wp-tutorials/how-to-add-a-shortcode-in-wordpress/
Admin
Jiří Vaněk says
Thank you very much for the link; I’ll go check out the article. I have several codes that I would like to turn into shortcodes to make my work easier. Thank you for the link to the article, and also for your work and assistance.
pankaj says
I deleted contact form 7 and it is giving error like this [contact-form-7 404 “Not Found”] I don’t want to use the form again but want to remove this error I don’t know where to find that code or shortcode in template file
Sonik says
hi,
I have written a shortcode of a gallery plugin in wordpress visual editor, but it is not executing the shortcode, instead it displays the shortcode as it is written.
like if I write [test attr=’hello’], it echoes the same on webpage, not executing.
Thanks.
Michael says
This is a fantastic post, thank you, I am just exploring shortcuts now for a website I am doing
Art says
It doesn’t work in customizr theme. Anyone facing this issue?
Art says
Ok. managed to fix. Turned out the parentheses were breaking it.
Original:
Changed to:
DavidA says
Hello, I have two wordpress blogs on multisite.
Do you know, how to use the shortcode on the website 1 from the website 2 ?
Thx
WPBeginner Support says
You can create a Network Wide Plugin and then both blogs can use the shortcode.
Admin
Riaz Kahn says
Thanks, Its Working Well.
Dean says
Sorry here is the code:
CODE: ——————————————————————————————
echo do_shortcode(“[tabset tab1=”tab 1 title” tab2=”tab 2 title”]
[tab]tab 1 content[/tab]
[tab]tab 2 content[/tab]
[/tabset]”);
—————————————————————————————————-
Michael Atkins says
It may be more efficient to use the method outlined by Konstantin Kovshenin at http://kovshenin.com/2013/dont-do_shortcode/
Nate Rouch says
That’s good information. I’ve been searching for a way to simply add these, I appreciate it.
Tim says
Great info. Thanks! However, it’s not working for me in WordPress 3.5.1 using the Avada theme.
Do you need to add anything to functions.php for the code above to work? Could this be a theme-specific issue? Thanks, just learning wordpress templating.
Editorial Staff says
Sounds like a theme specific issue. do_shortcode works just fine.
http://codex.wordpress.org/Function_Reference/do_shortcode
Admin
Anthony says
thanks loads man! this saved me hours of internet searching
Tyron says
This is a great little tip. How would this work if your content needs to be wrapped in a shortcode?
Like [shortcode-name]Content here[/shortcode-name].
Jonathon Harris says
Tyron,
This a late answer as I’m just seeing it, but to include wrapped content, you could do the following:
echo do_shortcode(‘[example_shortcode]’.$text_to_be_wrapped_in_shortcode.'[/example_shortcode]’);
Cheers,
J
pratik.chourdia says
Wow.. worked
thanks
Homepage Kasugai says
sfg
Homepage Kasugai says
This is exactly what I was looking for. Helpful. Thank you.
krushna says
yes..i am also interested to know ..where to write the code. if there will be example that wud be great.
Editorial Staff says
You add it anywhere you want to display the shortcode in your theme files. It can be in your sidebar, footer, or wherever you want.
Admin
aminraisy says
can we add it after product description in the page of a product in woocommerce ?
WPBeginner Support says
Yes sure
Keith Davis says
Hi boys
Where do you add the code…
What file do you add it to and where abouts in the file?
My theme already uses shortcodes but it would still be interesting to know.
Jim says
I came across the need for this just the other day – to add a shortcode outside of the loop. Thanks!