Tutto sugli shortcode di WordPress

Se hai mai lavorato con un tema WordPress, probabilmente ti sei imbattuto in uno shortcode di WordPress... qualcosa che assomiglia un po' a questo:

 [button type="twitter"]

Se hai capito cos'è uno shortcode e come funzionano è un'altra questione! Gli autori di temi utilizzano ampiamente gli shortcode, ma a volte semplicemente "presumono" che gli utenti sappiano cosa sono e come funzionano quando in realtà possono essere piuttosto confusi!

La buona notizia è che gli shortcode sono facili da capire e da usare. In questo articolo daremo un'occhiata agli shortcode per scoprire come sfruttarli al meglio prima di vedere come creare il tuo shortcode!

Entriamo!

Cosa sono gli shortcode di WordPress?

WordPress ha introdotto gli shortcode molto tempo fa quando hanno rilasciato la v2.5 di WordPress (che era nel 2008) e da allora sono stati ampiamente utilizzati nella maggior parte dei temi e dei plugin.

Quindi, cosa sono esattamente gli shortcode? Bene, in breve (scusate, non ho resistito), gli shortcode sono un po' di codice che può essere utilizzato praticamente ovunque sul tuo sito Web per inserire una funzionalità o una funzione. Quindi, invece di dover codificare laboriosamente, ad esempio, un'icona di social media utilizzando HTML, puoi invece inserire uno shortcode che "dice" a WordPress di inserire un'icona di social media ogni volta che inserisci un determinato shortcode. Lo stile e la funzione (in questo esempio) dell'icona dei social media sono predefiniti dallo sviluppatore del tema, quindi tutto il lavoro pesante dal punto di vista della programmazione è stato fatto per te.

Quindi, forse vuoi mettere un'icona di Facebook in fondo a un post del blog. Invece di inserirlo manualmente, aggiungere un collegamento ipertestuale, aggiornare la dimensione dell'icona e così via, tutto ciò che potresti dover fare è inserire uno shortcode che è stato "preprogrammato" dall'autore del tema che potrebbe assomigliare a questo:

 social icon="facebook"]

È importante ribadire a questo punto che non puoi semplicemente aggiungere codici brevi di tua ideazione e aspettarti che funzionino. Devono essere stati aggiunti come opzione al tuo tema. In genere, i temi vengono forniti con molti codici brevi predefiniti e le istruzioni del tema includeranno un elenco di codici brevi disponibili tra cui scegliere.

Gli shortcode sono un'ottima scorciatoia per i non sviluppatori per visualizzare molti tipi di contenuto senza scrivere codice e uno strumento che può far risparmiare tempo anche agli sviluppatori.

Cosa puoi fare con gli shortcode di WordPress?

Gli shortcode vengono utilizzati per inserire un'ampia gamma di contenuti da un pulsante di invito all'azione (CTA), una casella di pubblicità dinamica, un modulo di contatto, gallerie di immagini, slider e molto altro ancora... ma, come accennato in precedenza, quali sono le opzioni shortcode a tua disposizione dipenderà dal tema e dai plugin che stai utilizzando.

Un esempio di shortcode utilizzando il plug-in Contact Form 7

Non sono solo i temi che fanno uso di codici brevi. Uno dei plug-in per moduli di contatto più popolari oggi disponibili, Contact Form 7, utilizza codici brevi per consentire agli utenti di incorporare rapidamente e facilmente un modulo di contatto in una posizione a loro scelta.

Per fare ciò, una volta installato Contact Form 7, tutto ciò che devi fare per aggiungere un modulo a una pagina o un post sul tuo sito Web è quanto segue.

Primo passo:

Vai al menu Contatti > Moduli di contatto e crea un nuovo modulo o usa quello esistente fornito con il plugin.

Copia lo shortcode [contact-form-7 title="Contact form 1"] che corrisponde al modulo.

Passo due:

Incolla lo shortcode nella posizione in cui desideri visualizzare il modulo come mostrato di seguito:

Salva la pagina e dovresti quindi vedere questo:

E questo è tutto! Hai appena utilizzato con successo uno shortcode per incorporare un modulo di contatto sul tuo sito web. Come puoi vedere, gli shortcode sono incredibilmente facili da usare e possono accelerare attività che altrimenti potrebbero essere complesse e richiedere molto tempo.

Utilizzo degli shortcode predefiniti di WordPress

Sebbene la maggior parte degli shortcode che probabilmente utilizzerai verranno introdotti come risultato dell'installazione di un tema o di un plug-in. Lo stesso WordPress, tuttavia, ha una manciata di codici brevi "predefiniti" che puoi utilizzare. Questi includono:

• Audio
• Didascalia
• Incorporare
• Galleria
• elenco di riproduzione
• video

Questi codici brevi possono essere utilizzati in tutto il tuo sito per aggiungere una serie di contenuti, ad esempio un lettore audio. Nell'immagine qui sotto lo mostriamo usato in un widget Piè di pagina.

Per scoprire come utilizzare questi codici brevi in ​​modo più dettagliato, consulta l'articolo di supporto di WordPress su questi.

Quindi, cosa fai quando WordPress o il tema/plugin che stai utilizzando non forniscono lo shortcode di cui hai bisogno per il tuo scopo specifico? Facile... creane uno tuo!

Crea il tuo shortcode WordPress

WordPress ha un'API Shortcode che può essere sfruttata per sviluppare i propri shortcode in modo relativamente semplice. Esaminiamo ora i passaggi di base che devi eseguire per creare il tuo shortcode.

Primo passo:

In questo esempio creeremo un pulsante CTA (Call to Action) su cui il lettore può fare clic per essere reindirizzato a un modulo di contatto.

Per aiutare a mantenere le cose organizzate, ti suggeriamo di conservare tutti i tuoi shortcode in un file separato (piuttosto che aggiungere codice a un file esistente). Per fare ciò, crea un nuovo file vuoto nella stessa cartella del file functions.php del tuo tema e chiamalo come my-shortcodes.php . Dopo questo includi questo file nel tuo file functions.php in questo modo:

 include('my-shortcodes.php');

Mentre, come abbiamo appena detto, ti consigliamo di creare i tuoi shortcode in un file separato, ai fini di questo articolo andremo avanti e aggiungeremo il nostro nuovo codice direttamente nel nostro file functions.php per aiutare a mantenere l'esempio il più chiaro possibile.

Useremo la funzione add_shortcode introdotta nel file wp-includes/shortcodes.php . Questa funzione necessita di due parametri, il tag shortcode e la funzione di callback.

 add_shortcode( string $tag, callable $callback )

Passo due:

Ecco il pezzo di codice che puoi inserire nel tuo file functions.php :

 add_shortcode( 'my_cta_button', 'my_cta_function' ); function my_cta_function() { return '<span class="cta_button"><a href="THE_CONTACT_FORM_URL">Let us know you are interested</a></span>'; }

Si noti che i nomi dei tag e delle funzioni includono solo lettere minuscole e caratteri di sottolineatura.

Non dimenticare di sostituire "THE_CONTACT_FORM_URL" con l'URL del modulo di contatto a cui desideri reindirizzare l'utente.

Inoltre, puoi opzionalmente utilizzare questo codice CSS nel tuo file style.css per rendere il pulsante visivamente più accattivante:

 .cta_button a { color: white; text-decoration: none; } .cta_button { text-align: center; color: #fff !important; text-transform: uppercase; text-decoration: none; background: #ed3330; padding: 20px; border-radius: 5px; display: inline-block; border: none; transition: all 0.4s ease 0s; } .cta_button:hover { background: #434343; letter-spacing: 1px; -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); box-shadow: 5px 40px -10px rgba(0,0,0,0.57); transition: all 0.4s ease 0s; }

Fase tre:

La visualizzazione del tuo shortcode nel contenuto del sito Web viene eseguita come faresti per qualsiasi altro shortcode. In questo esempio il nostro shortcode sarebbe [my_cta_button] . Aggiungi questo a un post o a una pagina e dovresti vedere qualcosa di simile quando visualizzi la pagina:

Questo esempio restituisce il contenuto che è predefinito nel codice PHP che abbiamo fornito. Vediamo come è possibile consentire all'utente amministratore di personalizzare l'output dello shortcode, se necessario.

Uno shortcode che accetta gli attributi dell'utente

Per creare uno shortcode con attributi modificabili dall'utente, devi definire un array di attributi che desideri consentire all'utente di modificare all'interno della tua funzione di callback. Ad esempio, potresti voler modificare il titolo predefinito e l'URL del pulsante.

 add_shortcode( 'my_cta_button', 'my_cta_function' ); function my_cta_function( $atts ) { $params = shortcode_atts( array( 'title' => 'Let us know you are interested', 'url' => 'THE_CONTACT_FORM_URL' ), $atts ); return '<span class="cta_button"><a href="' . $params['url'] .'">' . $params['title'] .'</a></span>'; }

Nel codice sopra abbiamo utilizzato la funzione shortcode_atts per combinare gli attributi definiti dall'utente con gli attributi noti. In questo modo devi creare una funzione shortcode diversa per ogni pulsante CTA di cui avrai bisogno, ma solo uno che reindirizza a qualsiasi punto specificato dall'utente ogni volta.

L'uso di questo codice deve essere specificato in questo modo: [my_cta_button title='My Custom Title' url='MY_URL']

Aggiungi uno shortcode in un file modello

Dal punto di vista degli sviluppatori, c'è anche un modo rapido per forzare l'inclusione dello shortcode in una posizione predefinita nel tuo sito web richiamandolo nel file modello corrispondente. Ad esempio, se vogliamo che il pulsante CTA venga visualizzato nella parte inferiore di ogni singolo Post o Pagina, possiamo modificare il singolo template e utilizzare la funzione do_shortcode . Nel tema Twenty Twenty, abbiamo modificato il file singular.php e inserito questa riga sotto la chiusura del contenitore div principale:

 <?php echo do_shortcode('[my_cta_button]'); ?>

Il risultato verrà visualizzato sotto il contenuto del post e prima dei widget a piè di pagina.

Conclusione

Prima di concludere questo articolo, ricorda che se usi gli shortcode forniti dal tuo tema o da un plugin e successivamente disabiliti quel tema/plugin, quegli shortcode smetteranno di funzionare (rimarrai solo con la parentesi dello shortcode mostrata su front-end del tuo sito web).

Con quell'unico piccolo avvertimento, gli shortcode sono una funzionalità davvero utile quando si tratta di creare un sito web. Sono ampiamente utilizzati in WordPress e, se non hai ancora accettato di usarli, forse ora è il momento di dare un'altra occhiata agli shortcode!