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 ti consentono di aggiungere molte funzionalità diverse al tuo sito web senza scrivere codice complesso. Ecco alcuni dei modi più comuni per utilizzarli:

• Gallerie di immagini: Visualizzazione di foto in una griglia o in uno slider.
• Moduli: Aggiunta di moduli di contatto, moduli di pagamento o sondaggi.
• Feed social: Visualizzazione dei tuoi ultimi post da Instagram, Facebook o Twitter.
• Pulsanti Call-to-Action: Creazione di pulsanti per collegarsi ad altre pagine.

WordPress è dotato di alcuni shortcode integrati. Inoltre, i plugin WordPress popolari forniscono i propri shortcode per aiutarti a visualizzare contenuti.

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)
• Method 2: Editing Your WordPress Theme Files (Works With Any WordPress Theme)
  • Risoluzione dei problemi: Cosa fare quando do_shortcode non funziona
• Metodo 3: Aggiunta di uno shortcode con un page builder (temi personalizzati)
• Domande frequenti sugli shortcode di WordPress

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

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

Tuttavia, questo metodo funziona solo con temi basati su blocchi come Twenty Twenty-Five.

Se non vedi il menu Aspetto » Editor nella tua bacheca, allora stai probabilmente usando un tema classico. Salta al Metodo 2 qui sotto.

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 modificando direttamente i file del tuo tema. Questo funziona sia per temi classici che basati su blocchi, ma è più avanzato.

Poiché stai modificando il codice, ti consigliamo vivamente di creare prima un tema figlio. Questo evita che le tue modifiche vengano perse quando aggiorni il tuo tema.

WordPress non esegue automaticamente gli shortcode all'interno dei file di template PHP. Invece, devi dire esplicitamente a WordPress di eseguire il codice utilizzando la funzione do_shortcode. Per maggiori informazioni, consulta la nostra guida su come aggiungere facilmente codice personalizzato.

Importante: Devi inserire questo codice all'interno di tag PHP (<?php ?>) nel tuo file di template.

Ecco un esempio del codice che dovresti aggiungere:

echo do_shortcode('[gallery]');

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

Se stai aggiungendo uno shortcode con parametri aggiuntivi, come un ID modulo specifico, il codice appare leggermente diverso.

Ad esempio, se stai usando WPForms, useresti questo snippet:

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

Risoluzione dei problemi: cosa fare quando do_shortcode non funziona

Se l'output non viene visualizzato, assicurati che il plugin che fornisce lo shortcode sia effettivamente attivo andando alla pagina Plugin » Plugin installati.

Puoi anche usare la funzione shortcode_exists() per verificare se lo shortcode è disponibile prima di eseguirlo. Questo previene errori se il plugin viene accidentalmente disattivato.

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 layout del tema WordPress completamente personalizzato.

Questo ti dà il pieno controllo su dove appaiono esattamente i tuoi shortcode senza modificare i file PHP.

Il modo migliore per farlo è con SeedProd. È il miglior page builder di WordPress che ti permette di progettare visivamente il tuo tema, sostituendo la necessità dei tuoi file di tema esistenti.

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.

Domande frequenti sugli shortcode di WordPress

Ecco alcune domande che i nostri lettori hanno posto frequentemente riguardo agli shortcode:

Qual è lo scopo di uno shortcode di WordPress?

Lo scopo principale di uno shortcode è permetterti di aggiungere funzionalità dinamiche al tuo sito senza scrivere codice. Agiscono come segnaposto che WordPress sostituisce con contenuti come moduli, gallerie o pulsanti quando la pagina viene caricata.

Come funziona uno shortcode?

Quando un visitatore visualizza una pagina, WordPress cerca nel contenuto gli shortcode registrati tra parentesi quadre, come . Esegue quindi automaticamente il codice PHP associato a quel tag per visualizzare la funzionalità corretta sullo schermo.

Come si usa uno shortcode in un menu di WordPress?

Per impostazione predefinita, WordPress non esegue gli shortcode all'interno dei menu di navigazione. Per abilitare questa funzione, devi aggiungere un filtro specifico al file functions.php del tuo tema o utilizzare un plugin come WPCode che aggiunge il supporto per gli shortcode ai menu.

Come si crea uno shortcode in WordPress senza plugin?

Puoi creare uno shortcode personalizzato aggiungendo codice direttamente al file functions.php del tuo tema o utilizzando WPCode. Dovrai utilizzare la funzione integrata add_shortcode() per definire il nome del tuo shortcode e il contenuto che dovrebbe produrre.

Quali sono i problemi comuni con gli shortcode?

Il problema più comune è che il testo dello shortcode appare sulla pagina invece della funzionalità effettiva. Questo di solito accade perché il plugin che gestisce lo shortcode è disattivato o c'è un errore di battitura nel tag dello shortcode.

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.