Come creare shortcode WordPress e lavorare con loro

Gli shortcode di WordPress sono piccoli tag che vengono utilizzati come scorciatoie per eseguire funzionalità specifiche in articoli e pagine. Puoi riconoscere gli shortcode dalle parentesi quadre che racchiudono una semplice parola o una frase. Sono stati introdotti nella versione 2.5 con la missione di aiutare le persone a eseguire le funzioni nel modo più semplice.

Come forse già saprai, WordPress utilizza il linguaggio di programmazione PHP per potenziarsi. Quindi, quando vuoi aggiungere una funzionalità specifica direttamente a post e pagine, dovresti scrivere il codice nell'editor di testo. Invece, gli shortcode consentono agli utenti di sostituire l'intero blocco di codice con un semplice termine ed eseguirlo semplicemente pubblicando un post. Incredibile, vero?

Come usare gli shortcode di WordPress

Per utilizzare gli shortcode, non è necessario sapere come codificare o capire come funzionano nel backend. WordPress stesso, così come la maggior parte dei temi e dei plug-in di WordPress, utilizza diversi shortcode per consentire l'utilizzo di molte funzionalità avanzate.

Ad esempio, per visualizzare l'intera galleria di immagini, devi solo utilizzare lo shortcode [gallery] che viene installato con WordPress. La maggior parte degli shortcode può essere utilizzata nella loro forma base come nell'esempio precedente.

Parametri shortcode

Il più delle volte, gli shortcode possono avere parametri aggiuntivi . Aggiungendo loro ulteriori informazioni, puoi personalizzare e modificare l'output. Ad esempio, mentre il banale shortcode [gallery] mostra tutte le immagini allegate al post, è possibile cambiarlo. Lo shortcode della galleria ti consente di specificare le immagini in base al loro ID in modo da poter mostrare solo le immagini specifiche o persino includere immagini che non fanno parte di quel particolare post.

Inoltre, è possibile definire una dimensione della galleria e molte altre cose fornendo parametri aggiuntivi. Ecco un esempio:

La galleria di questo esempio mostrerebbe solo immagini con numeri ID specificati. In questo caso, la dimensione verrebbe automaticamente modificata in media. E ottieni tutto questo con un semplice shortcode. Ora immagina come sarebbe l'intera cosa se stessi per aggiungere manualmente il codice PHP che avrebbe decine se non centinaia di righe. Grazie, shortcode!

Tag di inizio e fine

Ad esempio, un plug-in di Google Maps può consentire di visualizzare una posizione sulle mappe tramite lo shortcode. La maggior parte di questi plugin avrà tag di inizio e fine, mentre l'indirizzo dovrebbe essere scritto in mezzo. Ecco un esempio:

[[maps]]New York, USA[[/maps]]

Come puoi vedere dall'esempio, il tag finale inizia sempre con un segno di barra "/". Avendo entrambi i tag, WordPress può identificare più facilmente le parti degli shortcode.

Lavora nell'editor di testo

Sebbene siano solo scorciatoie per le funzioni, gli shortcode sono in realtà crittogrammi specifici di WordPress da soli. Quindi, se provi a scrivere uno shortcode nell'editor visuale, WordPress ti mostrerà immediatamente l'output (o solo il segnaposto) di quello shortcode. Se hai seguito l'esempio della galleria e hai scritto lo shortcode nell'editor visuale, vedresti che WordPress ha immediatamente visualizzato i suoi contenuti (vedi la prima immagine in questo post per vedere come funziona).

Shortcode predefiniti di WordPress

Gli shortcode sono generalmente gestiti da temi e plugin. Ogni sviluppatore può registrare autonomamente gli shortcode, quindi ognuno è diverso. Cosa fa uno shortcode, quali sono i suoi parametri e le sue funzioni, dipendono esclusivamente dal plugin e dal tema specifici che stai utilizzando.

Ad esempio, un plug-in che ti aiuta a visualizzare una posizione su Google Maps potrebbe avere lo shortcode [[maps]], uno che visualizza i moduli di iscrizione utilizzerà [[form]] e così via.

Ma WordPress viene fornito con una serie di shortcode predefiniti che puoi utilizzare senza installare estensioni aggiuntive. Per impostazione predefinita, questi sono shortcode con cui puoi lavorare:

Escape degli shortcode (visualizza il testo degli shortcode senza eseguirlo)

A volte, potresti voler visualizzare del testo che rappresenta uno shortcode invece di eseguirlo. Se hai provato ad aggiungere uno shortcode sia all'editor di testo che a quello visivo, ti sei reso conto che è stato eseguito in entrambe le occasioni.

Se vuoi visualizzare uno shortcode con tag di inizio e fine, usa solo la prima e l'ultima parentesi doppia: [[maps]New York, USA[/maps]]

Quando lavori nell'editor di testo, puoi anche sostituire le parentesi quadre con i loro codici. Quindi, invece di "[" puoi usare "[", e invece "]" usa "]". Ad esempio: [codice corto&#93 ; visualizzerà anche lo shortcode senza eseguirlo.

Come creare un semplice shortcode

Quando scrivi articoli su WordPress su base giornaliera, ci sono momenti in cui ti ripeti e quando devi digitare qualcosa più e più volte. Non importa se si tratta dell'URL di un sito Web, una frase lunga o forse un pezzo di codice HTML che scrivi costantemente da zero, dovresti considerare di scrivere uno shortcode per questo.

E con questa semplice funzione, non devi essere un programmatore o non ne assumerai nemmeno uno per semplificarti le cose. Segui i prossimi passaggi e crea uno shortcode personalizzato:

1. Apri il file function.php nel menu Aspetto -> Editor
2. Inserisci il seguente codice alla fine del file:

 funzione fsg_shortURL() {
 restituire 'http://www.firstsiteguide.com';
 }
 add_shortcode('fsg', 'fsg_shortURL');

3. Vai all'editor di testo e digita [fsg] per ottenere l'URL invece dello shortcode

Non è stato così difficile, vero?

Esempio più avanzato: aggiungi shortcode immagine

Inserendo il seguente codice in functions.php, puoi creare lo shortcode per posizionare un'immagine con attributi di larghezza e altezza personalizzati:

1. Vai al file functions.php
2. Incolla il seguente codice:

 function img_shortcode( $atts , $content = null ) {

	estratto( shortcode_atts(
		Vettore(
			'larghezza' => '',
			'altezza' => '',
		), $atts )
	);
Restituzione '';
}
add_shortcode('img', 'img_shortcode');

3. Apri editor di testo:

Qui puoi usare [img width='x' height='y'] http://… [/img] shortcode dove “x” e “y” sono numeri che rappresentano larghezza e altezza in pixel.

Puoi facilmente aggiungere altri attributi dell'immagine se ne hai bisogno; controlla l'elenco di tutti gli attributi dell'immagine su W3 Schools.

Come usare gli shortcode in Text Widget

Gli shortcode possono contenere diverse funzionalità che puoi aggiungere al tuo sito Web WordPress. Sia che tu ne abbia creato uno per te o che sia fornito con un tema o un plug-in che hai appena installato, probabilmente utilizzerai sempre gli shortcode. Dal momento che puoi davvero risparmiare tempo e trarne vantaggio, non c'è motivo per non usare gli shortcode.

Se hai appena iniziato a creare il tuo sito Web WordPress, potresti aver utilizzato gli shortcode solo nell'editor dei post. Ma la verità è che puoi usare gli shortcode praticamente ovunque .

Ad esempio, se stai utilizzando il plug-in Google Maps PRO da 5 secondi che ti consente di creare facilmente mappe con innumerevoli pin, potresti voler inserire la mappa tramite shortcode direttamente nel tuo widget di testo e mostrare la tua posizione sulla barra laterale invece di un singolo inviare. Ma se il tuo tema non supporta gli shortcode nei widget, dovrai abilitare la funzione da solo ed è quello che mostreremo in questo articolo.

Se hai bisogno di utilizzare uno shortcode nei tuoi file PHP (ad esempio, se vuoi eseguire il codice nel tuo file header.php ed eseguire lo shortcode ovunque sia presente l'intestazione), puoi farlo facilmente avvolgendo il codice attorno ad esso . Ma se hai provato a utilizzare uno shortcode nel tuo widget di testo come nell'esempio che abbiamo menzionato sopra, sei rimasto deluso perché semplicemente non funziona e il widget ha visualizzato lo shortcode invece del suo contenuto. A meno che il tuo tema non abbia già la funzione registrata, dovrai abilitarla da solo.

Quindi, se vuoi essere in grado di inserire uno shortcode in un widget di testo e farlo funzionare, non preoccuparti; puoi realizzarlo in pochi secondi:

1. Apri functions.php
2. Copia e incolla le seguenti due righe:

 add_filter( 'widget_text', 'shortcode_unautop');
 add_filter( 'widget_text', 'do_shortcode');

3. Salvare le modifiche

Mentre in realtà è sufficiente utilizzare solo la seconda riga che fa funzionare lo shortcode, vorrai la prima riga per evitare l'inserimento automatico del paragrafo e dei tag di interruzione da parte di WordPress in cui crei inconsciamente interruzioni di riga formattando il testo in un widget . Nel caso in cui metti uno shortcode su una riga separata, unautop rimuoverà quei tag di paragrafo e lo shortcode funzionerà come un incantesimo.

Ora puoi navigare in Aspetto -> Widget e trascinare il widget di testo dove vuoi che sia. Dopo tutto questo, quando scrivi uno shortcode direttamente nel tuo widget di testo (che è registrato sul tuo sito, ovviamente) verrà eseguito proprio come è stato digitato nell'editor dei post.

Allo stesso modo, puoi eseguire il codice PHP dal tuo widget di testo. È stato abbastanza facile, no? Goditi i tuoi codici brevi.

Gli shortcode sono ovunque

Se stai appena iniziando un blog WordPress, gli shortcode potrebbero sembrare ridondanti e difficili da capire. La maggior parte delle volte sarà possibile evitare gli shortcode utilizzando un'interfaccia user-friendly fornita da un plugin. Ma quando sarai più coinvolto con il blog e quando inizierai a utilizzare più plugin, capirai il vero potere degli shortcode.

Usarli diventerà una routine e ti abituerai rapidamente a scrivere parentesi quadre in ogni nuovo post che crei. Quindi prenditi qualche minuto e usa questo articolo per imparare le basi.