Come utilizzare gli shortcode nei tuoi temi WordPress

Utilizziamo gli shortcode nei temi di WordPress da anni e sono diventati una parte standard di come costruiamo i siti.

Risolvono un problema semplice: come aggiungere la stessa funzionalità in più punti senza duplicare il codice o rendere più difficile la gestione dei file del tema.

Gli shortcode ti consentono di creare snippet di codice semplici e riutilizzabili che funzionano ovunque sul tuo sito.

Sia che tu debba visualizzare contenuti personalizzati, aggiungere moduli o creare elementi interattivi, gli shortcode forniscono un modo pulito per aggiungere tale funzionalità e utilizzarla ovunque sia necessario.

In questa guida, ti mostreremo come utilizzare gli shortcode nei tuoi temi utilizzando diversi metodi.

Perché utilizzare gli shortcode nei tuoi temi di WordPress?

Gli shortcode possono aggiungere ogni tipo di funzionalità al tuo sito web, incluse 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 tuo sito.

Ad esempio, WPForms ha blocchi facili da usare, ma fornisce anche shortcode in modo da poter aggiungere moduli ad altre aree del tuo sito web.

La maggior parte delle volte, aggiungerai shortcode all'interno di aree di contenuto come post e pagine.

Per saperne di più, consulta la nostra guida completa su come aggiungere uno shortcode in WordPress.

Tuttavia, a volte, potresti voler utilizzare uno shortcode all'interno dei file del tuo tema WordPress.

Questo ti permette di aggiungere elementi dinamici ad aree che non puoi modificare utilizzando l'editor standard dei post di WordPress, come la tua pagina degli archivi. È anche un modo semplice per utilizzare lo stesso shortcode su più pagine.

Ad esempio, potresti aggiungere uno shortcode al modello di Pagina o Articolo del tuo tema.

Tenendo presente questo, vediamo come puoi utilizzare gli shortcode nel tuo tema WordPress. Utilizza semplicemente i collegamenti rapidi qui sotto per passare direttamente al metodo che desideri utilizzare:

• Metodo 1: Utilizzo dell'Editor Completo del Sito (Solo temi a blocchi)
• Metodo 2: Modifica dei file del tuo tema WordPress (funziona con qualsiasi tema WordPress)
• Metodo 3: Aggiunta di uno shortcode con un page builder (temi personalizzati)

Metodo 1: Utilizzo dell'Editor Completo del Sito (Solo temi a blocchi)

Il modo più semplice per aggiungere uno shortcode WordPress al tuo tema è utilizzare l'editor completo del sito. Questo ti permette di aggiungere un blocco Shortcode a qualsiasi parte del tuo sito web.

Tuttavia, questo metodo funziona solo con temi basati su blocchi come Hestia Pro. Se non stai utilizzando un tema abilitato ai blocchi, dovrai utilizzare un metodo diverso.

Per iniziare, vai su Aspetto » Editor nella dashboard di WordPress.

Per impostazione predefinita, l'editor del sito completo mostra il modello della home page del tuo tema, ma puoi aggiungere shortcode a qualsiasi modello.

Per vedere tutte le opzioni disponibili, seleziona 'Modelli'.

Ora puoi fare clic sul modello di pagina personalizzato che desideri modificare.

Come esempio, aggiungeremo uno shortcode al modello della pagina 404, ma i passaggi saranno esattamente gli stessi indipendentemente dal modello che selezioni.

WordPress mostrerà ora un'anteprima del modello.

Per aggiungere uno shortcode, fai clic sulla piccola icona a forma di matita.

Fatto ciò, fai clic sull'icona blu '+' nell'angolo in alto a sinistra dell'editor a blocchi.

Nella barra di ricerca, devi digitare 'Shortcode'.

Quando appare il blocco giusto, trascinalo sul modello del tema.

Ora puoi incollare o digitare lo shortcode che desideri utilizzare.

Dopodiché, procedi e fai clic sul pulsante 'Salva'.

Ora, visita semplicemente il tuo blog WordPress per vedere lo shortcode in azione.

Metodo 2: Modifica dei file del tuo tema WordPress (funziona con qualsiasi tema WordPress)

Puoi anche aggiungere shortcode al tuo tema WordPress modificando i file del tema. Questo metodo è più avanzato, ma funziona sia con temi classici che con temi a blocchi.

Se non hai mai aggiunto codice al tuo sito prima, consulta la nostra guida passo passo su come copiare e incollare codice in WordPress.

Puoi modificare direttamente i singoli file del tema, ma questo rende difficile aggiornare il tuo tema WordPress senza perdere le personalizzazioni. Per questo motivo, consigliamo di sovrascrivere i file del tema creando un tema child.

Se stai creando un tema personalizzato, puoi aggiungere o modificare il codice nei tuoi file del tema esistenti.

Quando modifichi i file del tuo tema, non puoi aggiungere lo shortcode nello stesso formato che usi con le aree di contenuto standard. Invece di vedere l'output dello shortcode, vedrai lo shortcode stesso sullo schermo.

Questo accade perché WordPress non esegue gli shortcode all'interno dei file del template del tema. Invece, dovrai dire esplicitamente a WordPress di eseguire lo shortcode utilizzando la funzione do_shortcode.

Per maggiori informazioni, consulta la nostra guida su come aggiungere facilmente codice personalizzato.

Ecco un esempio del codice che aggiungerai ai file del tuo tema WordPress:

echo do_shortcode('[gallery]');

Sostituisci semplicemente 'gallery' con lo shortcode che desideri utilizzare.

Se non sei sicuro di dove aggiungere lo shortcode, consulta la nostra guida per principianti alla gerarchia dei modelli di WordPress.

Se stai aggiungendo uno shortcode con parametri aggiuntivi, dovrai utilizzare uno snippet di codice leggermente diverso.

Immagina di aver creato un modulo di contatto utilizzando WPForms. In questo caso, dovrai utilizzare lo shortcode standard di WPForms più l'ID del modulo:

echo do_shortcode("[wpforms id='92']");

Risoluzione dei problemi: cosa fare quando do_shortcode non funziona

A volte, potresti aggiungere uno shortcode a un file del tema, ma l'output del codice non appare sul tuo sito web WordPress. Ciò significa solitamente che lo shortcode dipende da un plugin di WordPress o da qualche altro codice sul tuo sito web.

Se la funzione do_shortcode non funziona, assicurati 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 funzionerà.

Puoi anche verificare se uno shortcode è disponibile aggiungendo la funzione shortcode_exists() al tuo file index.php.

Nello snippet seguente, stiamo verificando se lo snippet di WPForms è disponibile per l'uso sul nostro sito web:

if ( shortcode_exists( 'wpforms' ))  {
  echo do_shortcode("[[wpforms id='147']]");
}

Se ancora non vedi l'output dello shortcode sul tuo sito web, prova a svuotare la cache di WordPress, poiché potresti vedere una versione obsoleta del tuo sito.

Metodo 3: Aggiunta di uno shortcode con un page builder (temi personalizzati)

Un'altra opzione è creare un tema WordPress personalizzato. Questo è un metodo più avanzato, ma ti consente di aggiungere quanti shortcode desideri in qualsiasi area del tuo tema WordPress. Puoi anche apportare altre modifiche per creare esattamente le funzionalità e il design che desideri.

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

SeedProd è il miglior page builder di WordPress e include anche un theme builder, insieme a interi site kit e template. Ti permette di progettare i tuoi temi usando un editor drag-and-drop.

Diversi dei nostri brand partner hanno progettato interi siti web con esso, e i loro team hanno apprezzato quanto sia facile da usare e intuitivo per i principianti.

Per istruzioni passo passo, consulta la nostra guida su come creare un tema WordPress personalizzato (senza codice).

Dopo aver creato un tema, puoi aggiungere shortcode a qualsiasi parte del tuo sito WordPress andando su SeedProd » Theme Builder.

Qui, trova il template in cui vuoi usare lo shortcode.

Quindi, passa il mouse sopra quel template e fai clic su ‘Edit Design’ quando appare.

Questo aprirà il template nel theme builder di SeedProd.

Nel menu a sinistra, scorri fino alla sezione ‘Advanced’. Qui, trova il blocco Shortcode e trascinalo sul tuo layout.

Nell'anteprima live, fai semplicemente clic per selezionare il blocco Shortcode.

Ora puoi aggiungere il tuo shortcode nella casella ‘Shortcode’.

Per impostazione predefinita, SeedProd non mostra l'output dello shortcode nell'anteprima live.

Per vedere il tuo shortcode in azione, fai clic sull'interruttore ‘Show Shortcode Option’.

Dopodiché, potresti voler aggiungere dello stile all'output dello shortcode selezionando la scheda ‘Advanced’.

Qui, puoi modificare lo spazio, aggiungere CSS personalizzato e persino aggiungere effetti di animazione CSS.

Quando sei soddisfatto dell'aspetto della pagina, fai semplicemente clic sul pulsante ‘Save’.

Dopodiché, seleziona ‘Publish’ per rendere lo shortcode live.

Ora puoi visitare il tuo sito web per vedere lo shortcode personalizzato in azione.

Speriamo che questo tutorial ti abbia aiutato a imparare come usare gli shortcode di WordPress nei tuoi temi. Potresti anche voler consultare la nostra guida su come creare una landing page in WordPress e la nostra guida definitiva agli elementi di design più efficaci per WordPress.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.