Vuoi utilizzare gli shortcode nel tuo sito WordPress? Sei nel posto giusto. In questa guida, ti mostreremo come aggiungere WordPress shortcode e ti mostreremo alcuni esempi in modo che tu possa sfruttarli al meglio.
Da quando gli shortcode sono stati aggiunti a WordPress nella versione 2.5, gli utenti li hanno utilizzati per ottenere tutti i tipi di personalizzazionepossibili . Gli shortcode sono molto utili e ci consentono di eseguire un pezzo di codice specifico in post, pagine e quasi ovunque sui nostri siti web. Inoltre, sono molto facili da usare anche per gli utenti più inesperti.
Invìcominciamo!
Cosa sono gli shortcode?
Uno shortcode attiva una parte di codice specificata dal nome dello shortcode, che è sempre racchiuso tra parentesi quadre come questa: [shortcode-nome]
Il codice eseguito da ogni WordPress shortcode dipende da come è stato creato lo shortcode. Molti plugin forniscono i propri shortcode e WordPress ne include anche alcuni per impostazione predefinita. E la parte migliore è che l’API shortcode WP ti consente di creare i tuoi shortcode personalizzati.
Gli shortcode sono un ottimo strumento per gli sviluppatori perché ti consentono di inserire qualsiasi script in qualsiasi punto del tuo sito. Quando usi lo stesso script molte volte, puoi semplicemente usare lo stesso shortcode senza dover ripetere il codice. Questo ti aiuta a risparmiare tempo e a mantenere pulito il tuo codice.
Inoltre, uno shortcode può assumere alcuni valori, che funzionano in modo simile ai parametri delle funzioni.
[shortcode val1=’ciao’ val2=’ok’]
E può anche essere usato come tag HTML quando si aprono e si chiudono shortcode come questo [shortcode]testo[/shortcode].
In sintesi, uno shortcode ti consente di eseguire uno script PHP sul frontend senza dover scrivere alcun codice (se si tratta di uno shortcode esistente). WordPress e alcuni plugin hanno alcuni shortcode per impostazione predefinita, ma puoi anche crearne di tuoi a seconda delle tue esigenze.
Esistono infine diversi tipi di shortcode: per inserire gallerie, prodotti WooCommerce, form, immagini e molto altro. Ogni shortcode è diverso e fa cose diverse.
Ora che abbiamo capito meglio cosa sono, vediamo come aggiungere shortcode al tuo sito WordPress .
Come aggiungere shortcode in WordPress
Prima di iniziare, è importante notare che, poiché ogni shortcode è costruito in modo diverso, può avere valori o meno. Questi valori sono specifici per ogni shortcode e passano i valori al codice per ottenere il risultato desiderato.
Come accennato in precedenza, esistono diversi tipi di shortcode e gli shortcode di WooCommerce sono tra i più comuni. Ad esempio, lo shortcode [woocommerce_cart] mostrerà il carrello di WooCommerce ovunque lo incolli.
Per testarlo, incolla semplicemente lo shortcode su un articolo o una pagina o digitalo in questo modo:[woocommerce_cart] . Quindi, dai un’occhiata al frontend e vedrai il carrello di WooCommerce proprio dove hai inserito lo shortcode.
NOTA : poiché prima di iniziare modificheremo alcuni file principali ti consigliamo di eseguire un backup completo del tuo sito e creare un child theme. Puoi creare un child theme utilizzando il codice o utilizzare un plugin come il seguente.
Aggiungi uno shortcode WordPress con valori
Ora usiamo lo shortcode WordPress della galleria predefinita per imparare come aggiungere shortcode con valori.
Lo shortcode della galleria mostra una galleria di immagini e supporta diversi valori. È necessario includere il valore dell’ID per specificare quali immagini si desidera visualizzare nella galleria. Questo parametro prende gli ID e visualizza quelle immagini specifiche.
Ad esempio, se vogliamo visualizzare le immagini con ID 720, 729, 731 e 732, aggiungiamo lo shortcode a un articolo o a una pagina come segue: 
Per testarlo, incolla semplicemente lo shortcode sostituendo gli ID immagine con i tuoi ID. Se non conosci i tuoi ID immagine, aprili nell’editor della libreria multimediale e vedrai l’ID sull’URL del browser e il permalink stampato sui dettagli dell’immagine.
Se stai utilizzando l’editor di testo classico, puoi semplicemente incollare lo shortcode nel contenuto. Su utilizzi Gutemberg, invece, puoi usare il blocco shortcode. Inoltre, molti page builder e temi includono alcune altre soluzioni di gestione degli shortcode che puoi utilizzare.
Gutenberg
Editor classico
Utilizzo degli shortcode nei file template
Un altro modo per utilizzare gli shortcode di WordPress è aggiungerli ai file template. Se vuoi sviluppare una soluzione personalizzata, questa è un’opzione interessante.. Ad esempio, questo ti consente di eseguire uno shortcode su logica condizionale o di modificare i valori dello shortcode in modo dinamico, tra molte altre possibilità.
Puoi utilizzare gli shortcode su un file template con la funzione PHP do_shortcode(). Questa è una funzione predefinita di WordPress che puoi utilizzare in qualsiasi file.
Per eseguire uno shortcode da un file, aggiungi semplicemente quanto segue:
echo do_shortcode(‘’);
Ora personalizza l’header ed esegui lo shortcode della galleria sul file header.php. Per fare ciò, devi sovrascrivere questo file usando un child theme.
Nella dashboard di WordPress, aggiungi lo shortcode all’intestazione, andando su Aspetto > Editor del tema e aprendo il file header.php . Vai alla fine del file e incolla il codice come mostrato di seguito:
Dopo aver incluso lo script sopra nel file, vedrai la galleria nell’header.
Utilizzo degli shortcode con gli hook di WordPress
Un altro modo per aggiungere shortcode a WordPress a livello di programmazione è utilizzarli in combinazione con gli hook.
Per utilizzare uno shortcode con hook è necessaria la funzione do_shortcode(), proprio come abbiamo visto nella sezione precedente.
Il seguente script funzionerà sul file functions.php del tema child. Usiamo l’hook wp_footer() quindi questo verrà stampato nel footer del sito.
/* Shortcode with wp_footer hook*/
add_action('wp_footer','CM_footer_shortcode');
function CM_footer_shortcode(){
echo do_shortcode('[products ids="623"]');
}
Questo shortcode viene fornito con WooCommerce per impostazione predefinita ed è utilizzato per visualizzare i prodotti. In questo caso, lo usiamo per visualizzare un singolo prodotto, con ID = 623.
Come creare shortcode personalizzati in WordPress
Un’altra alternativa interessante è creare i propri shortcode personalizzati. Non è difficile, ma richiede alcune competenze di base per gli sviluppatori e alcune conoscenze di programmazione. Se non sei un utente avanzato, non preoccuparti. Anche i programmatori più inesperti lo troveranno abbastanza facile.
WordPress ci fornisce la funzione add_shortcode() per creare e aggiungere i nostri shortcode. Vediamo come utilizzare questa funzione per creare uno shortcode personalizzato con alcuni script di esempio.
Visualizza un messaggio diverso per gli utenti connessi e disconnessi
Il seguente script creerà uno shortcode e stamperà un messaggio per gli utenti. Per renderlo più interessante, abbiamo applicato una condizione per visualizzare messaggi diversi per gli utenti connessi e disconnessi.
/* Shortcode logged-in*/
add_shortcode('logedin','CM_shortcode_logedin');
function CM_shortcode_logedin($atts){
if(is_user_logged_in()==true){
$response='you are logged in';
}
else{
$response='you are logged out';
}
return $response;
}
Utilizzando un if, controlliamo se l’utente ha effettuato l’accesso e mostriamo il messaggio “Sei loggato” se è vero e “Sei disconnesso” in caso contrario.
Visualizza un singolo post per ID
Un’altra opzione è aggiungere uno shortcode di WordPress che mostri un post specificato che passeremo come valore nello shortcode.
add_shortcode('get-post','CM_shortcode_post');
function CM_shortcode_post($atts) {
$a = shortcode_atts( array('id' => '',), $atts );
$args = array('post_type' => 'post','p' => $a['id']);
$query = new WP_Query($args);
$query->the_post();
$string = '<h3>'.get_the_title().'</h3>' ;
$string.=the_post_thumbnail();
$string .= get_the_content();
return $string;
}
Esegui diversi shortcode su una condizione logica
In questo esempio, creeremo uno shortcode personalizzato per eseguire diversi shortcode su una condizione logica.
Il nostro shortcode personalizzato visualizzerà diversi moduli che sono stati creati con un plugin per moduli di contatto. Quindi stamperemo un modulo diverso per gli utenti registrati e disconnessi.
add_shortcode('show-form','CM_custom_shortcode');
function CM_custom_shortcode(){
if(is_user_logged_in()==true){
$response='<h3>Contact us</h3>';
$response.='[wpforms id="1374"]';
}
else{
$response='<h3>Subscribe to our newsletter</h3>';
$response.='[wpforms id="1373"]';
}
echo do_shortcode($response);
}
Ancora una volta, usiamo un condizionale if per verificare se l’utente ha effettuato l’accesso o meno e visualizzare un determinato modulo basato su quello.
Appunti
- La funzione do_shortcode(); lavora alla grande nella maggior parte dei file template, ma poiché deve essere riprodotta, potrebbe anche causare problemi
- Molti plugin forniscono shortcode che puoi usare liberamente. Tuttavia, alcuni shortcode potrebbero non funzionare su post, pagine o quando si tenta di utilizzarli nell’header, nel footer o nei widget della sidebar. Dipende da quanto è complesso lo shortcode e da come è stato costruito
- Se vedi degli errori quando usi uno shortcode personalizzato nell’editor Gutenberg, significa che il tuo shortcode non è compatibile con Gutenberg. Funzionerà comunque sul frontend e puoi provare a passare all’editor WordPress predefinito per eliminare questo errore
Conclusione
In sintesi, gli shortcode sono strumenti utili che ti consentono di eseguire uno snippet di codice specifico ovunque sul tuo sito. Quando usi lo stesso script più volte, puoi creare uno shortcode e usarlo per evitare di ripetere il codice più e più volte. Gli shortcode sono facili da usare anche per i principianti e ti fanno risparmiare tempo.
In questa guida, abbiamo visto diversi modi per aggiungere shortcode in WordPress. Abbiamo imparato a usare gli shortcode con i valori, nei file template e con gli hook. Inoltre, abbiamo visto come creare shortcode personalizzati e ti abbiamo fornito un paio di script di esempio che puoi regolare in base alle tue esigenze.
Buon lavoro.
