Come utilizzare gli shortcode nei temi WordPress

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 possono aggiungere ogni tipo di caratteristica al vostro sito web, tra cui gallerie di immagini, moduli, feed dei 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, gli shortcode vengono aggiunti all’interno di aree di contenuto come le pagine e i post.

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 sui 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 capita di aggiungere uno shortcode a un file di tema, ma l’output del codice non compare sul sito web di WordPress. Questo di solito significa che lo shortcode dipende da un plugin di WordPress o da qualche altro codice presente sul 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 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 consente di aggiungere tutti gli shortcode che si desidera a qualsiasi area del tema WordPress. Potete anche apportare altre modifiche per creare esattamente le caratteristiche e il design che desiderate.

In passato, per creare un tema personalizzato per WordPress era necessario seguire un complicato tutorial o scrivere codice personalizzato. Tuttavia, ora è possibile creare un tema personalizzato senza scrivere una sola riga di codice utilizzando SeedProd.

SeedProd è il miglior costruttore di pagine per WordPress ed è dotato anche di un builder di temi, oltre a interi kit di siti e template. Questo vi permette di progettare i vostri temi usando la trascina e rilascia.

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 template nel builder 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 voler selezionare la nostra guida su come creare una landing page in WordPress e le nostre verifiche sui widget più utili per il vostro sito.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.