Comprendere gli shortcode di WordPress

Se utilizzi WordPress da molto tempo, probabilmente hai già utilizzato alcuni shortcode.

Gli shortcode sono piccoli frammenti utili che ti consentono di inserire nei tuoi contenuti una sorta di funzionalità speciale che altrimenti non sarebbe possibile. Ad esempio: molte gallerie di immagini e plug-in di scorrimento ti forniscono uno shortcode che puoi semplicemente inserire nei tuoi contenuti ovunque tu voglia per far apparire le immagini corrette. Gli shortcode di solito hanno un aspetto simile a questo:

[example shortcode]

In altre parole: gli shortcode fanno accadere qualcosa di speciale ovunque siano inseriti nel testo.
Ma non sei limitato a codici brevi predefiniti; puoi definire codici brevi personalizzati per fare quello che vuoi! Possono essere semplici, complessi o qualsiasi altra via di mezzo.

In questa serie, inizieremo con un semplice shortcode e procederemo fino ad alcuni esempi più intricati (e ancora più utili!).

Nota: qui lavoreremo principalmente con PHP, in particolare nel file functions.php del tuo tema. Se non stai utilizzando un tema figlio (o un tema personalizzato/iniziale che può essere modificato senza timore che gli aggiornamenti sovrascrivano le modifiche), ti consigliamo di creare un tema figlio prima di iniziare.

Nota anche: non è necessaria alcuna conoscenza di PHP per leggere questo post, ma conoscere almeno le basi ti aiuterà. Il codice coinvolto qui è abbastanza semplice e ho cercato di renderlo il più semplice possibile da copiare e personalizzare. Spiegherò ogni parte del codice mentre procediamo, ma se sei completamente nuovo nel tema PHP di WordPress, tieni presente che un po' di codice errato nel tuo file functions.php può danneggiare il sito.

Un utile semplice esempio di shortcode

Diciamo che vogliamo uno shortcode che inserisca una speciale sezione di informazioni sull'autore in un post, come questo:

Invece di creare e definire lo stile della scatola, dell'immagine e del testo nell'editor visivo di WordPress (che nella migliore delle ipotesi sarebbe una seccatura, e forse anche impossibile), creeremo semplicemente uno shortcode per produrre l'intera cosa con un semplice snippet!

(Nota a margine: WordPress ha modi migliori di lavorare con i profili degli autori, ma ci atteniamo a questo esempio perché dimostra bene quanto sia facile utilizzare gli shortcode per inserire blocchi di contenuto specifici in una pagina.)

Passaggio 1: aggiungi lo shortcode nel file functions.php del tuo tema

Utilizzerai la funzione add_shortcode per dare un nome al tuo shortcode e dire a WordPress cosa dovrebbe fare ogni volta che viene utilizzato lo shortcode. Aggiungi questa riga al file functions.php del tuo tema:

add_shortcode( 'author_bio', 'create_author_bio' );

Non importa dove all'interno functions.php , ma per evitare conflitti, consiglierei di inserirlo alla fine. (Se il file termina con un tag ?> di chiusura, tuttavia, dovrebbe andare subito prima, non dopo.)

Prima di andare oltre, interrompiamo un po' quella linea, in modo da capire cosa sta effettivamente succedendo qui. I due frammenti di testo, o "argomenti", tra parentesi non sono speciali, in realtà; sono solo nomi. Esaminiamo cosa significa ciascuno:

Come aggiungere una mappa di Google reattiva in WordPress

Non importa dove stai andando, Google Maps ti mostrerà la strada. Essere in grado di ottenere immediatamente indicazioni stradali è diventato essenziale durante la navigazione nelle città. E come soluzione cartografica più popolare, ad...

1. Il primo argomento, in questo caso author_bio , dice a WordPress il nome effettivo del tuo shortcode. Questo sarà il testo che gli utenti possono digitare, tra parentesi, per utilizzare lo shortcode. Quindi, con questo codice come scritto, [author_bio] sarà il nostro shortcode per attivare la nostra casella bio dell'autore.
   Questo testo potrebbe essere qualsiasi cosa, ma è sempre meglio cercare di essere unico. In questo modo, non correrai il rischio che il tuo nome shortcode sia in conflitto con quello di qualcun altro da un altro plugin o tema installato.
2. Il secondo argomento, in questo caso create_author_bio , punta WordPress verso la funzione PHP effettiva che dovrebbe eseguire ogni volta che viene utilizzato questo shortcode. Creeremo quella funzione nel passaggio successivo; per ora, stiamo solo facendo sapere a WordPress quale sarà il suo nome. (Questo nome dovrebbe anche essere univoco, per evitare conflitti.)

Quindi, se aiuta, potresti pensare al codice in questo modo:

add_shortcode( 'when_you_see_THIS_shortcode', 'do_THIS' );

Se sei interessato a maggiori dettagli, controlla la voce del codice add_shortcode .

Passaggio 2: crea la funzione per gestire lo shortcode

Ora dobbiamo effettivamente creare la funzione che abbiamo appena nominato!

Dato che abbiamo appena detto a WordPress nell'ultimo passaggio che il nome della nostra funzione è create_author_bio, il nostro codice ora dovrebbe apparire così, una volta aggiunta la nuova funzione:

add_shortcode( 'author_bio', 'create_author_bio' );

function create_author_bio(){
//Code goes here!
}

Potresti notare che questa funzione in realtà non fa ancora nulla; tutto quello che c'è dentro è un commento. Ce ne occuperemo nel passaggio successivo. Per ora, voglio solo sottolineare che ci sono davvero solo due pezzi qui: la registrazione dello shortcode e la funzione che si verifica ogni volta che viene utilizzato. WordPress PHP può sembrare intimidatorio, ma è davvero così semplice!

Nota a margine: non importa se la funzione create_author_bio viene dopo la funzione add_shortcode o prima di essa. L'ordine non è importante in questo caso.

Passaggio 3: fai in modo che la funzione faccia qualcosa

Ora non resta che fare in modo che la nostra funzione faccia ciò che vogliamo!

Una funzione come questa potrebbe fare qualsiasi cosa, ma alla fine dovrebbe restituire un singolo valore (come una stringa di testo o un numero). Quel valore potrebbe essere di qualsiasi lunghezza o complessità, ma qualunque cosa restituisca la funzione è ciò che apparirà ovunque venga utilizzato il nostro shortcode.

Per i nostri scopi, questo sarà solo un semplice HTML. Ecco il markup per aggiungere la nostra immagine dell'autore e la biografia all'interno di un elemento <aside> con una classe personalizzata (ma non inserirlo ancora da nessuna parte; lo stiamo solo guardando come un'anteprima per il momento):

<aside class="author-bio-box"></span>

<img src="https://upload.wikimedia.org/wikipedia/en/1/1f/Bilbo_Baggins_Tolkien_illustration.jpg">

<p>Bilbo Baggins is the author of <cite>The Hobbit</cite>, translator of various works from the elvish, and author of a number of poems and songs.</p>

<p>He is the oldest Hobbit ever in Middle Earth, and spends his days in his Tol Eressea home across the sea.</p>

</aside>

Alla fine, useremo quella classe author-bio-box sulla prima riga per definire lo stile della biografia con CSS. (Utilizzeremo una classe invece di un ID, nel caso tu voglia aggiungere più di un autore shortcode per il contenuto scritto da più autori.) Ma ricorda, questo potrebbe essere qualsiasi cosa vogliamo inserire nella pagina!

Ora, tutto ciò che dobbiamo fare è fare in modo che la funzione del nostro shortcode restituisca l'HTML sopra!

Dal momento che il file functions.php dovrebbe contenere solo... beh, funzioni PHP (e anche per ordine), ho rimosso le interruzioni di riga e gli spazi tra quegli elementi HTML che abbiamo appena guardato e li ho nascosti in una stringa (tra virgolette singole) . Ma funzionalmente, è sempre lo stesso snippet HTML che abbiamo appena visto sopra, ed è così che dovrebbe apparire il nostro codice PHP finale:

add_shortcode( 'author_bio', 'create_author_bio' );

function create_author_bio(){
return '<aside class="author-bio-box"><img src="https://upload.wikimedia.org/wikipedia/en/1/1f/Bilbo_Baggins_Tolkien_illustration.jpg"><p>Bilbo Baggins is the author of <cite>The Hobbit</cite>, translator of various works from the elvish, and author of a number of poems and songs.</p><p>He is the oldest Hobbit ever in Middle Earth, and spends his days in his Tol Eressea home across the sea.</p></aside>';

}

Abbiamo finito con PHP! Dopo aver salvato il nostro file functions.php con il codice finale sopra, qualsiasi autore può semplicemente inserire [author_bio] in qualsiasi pagina o post, e l'HTML sopra apparirà al posto dello shortcode!

Semplici personalizzazioni per il tuo tema figlio Genesis

Come web designer, non vediamo l'ora di lavorare in modo più efficiente. Quando ho iniziato un compito atteso da tempo per ridisegnare il mio portfolio, mi sono ricordato di quanto amo WordPress e quanto velocemente...

Inoltre, la cosa davvero interessante è: se dovessimo aggiornare la nostra biografia, non dovremo modificare ogni singolo punto in cui appare! Invece, tutto ciò che dobbiamo fare è modificare il codice nel nostro file functions.php e verrà aggiornato ovunque tutto in una volta. Pulito, eh?

Tuttavia, per ottenere il massimo da questo, probabilmente vorremo aggiungere uno stile speciale alla bio box...

Passaggio 4: aggiungi alcuni CSS

Lo shortcode non è eccezionale senza un po' di stile, quindi aggiungiamolo! Potrebbe essere necessario regolare un po' alcuni valori, a seconda dei caratteri del tuo sito (quello nell'immagine sopra è Fanwood Text) e delle regole CSS già in atto. Oppure potresti semplicemente voler provare qualcosa di diverso!

Questo CSS potrebbe essere copiato nel file style.css del tuo tema (figlio), oppure se stai utilizzando WordPress 4.7 o versioni successive (cosa che dovresti essere!), puoi semplicemente incollare questo CSS nella casella "CSS aggiuntivo" in Personalizza schermo:

.author-bio-box {
background: #d4ead9;
padding: 2em;
overflow: auto;
font-family: Fanwood Text;
font-size: 1.2em;
line-height: 1.4em;
}

.author-bio-box img {
float: left;
max-width: 128px;
height: auto;
margin: 0 1em 0 0;
}

.author-bio-box > p:first-of-type:first-letter {
font-size: 3.1em;
line-height: 1;
float: left;
margin-bottom: -.2em;
}

.author-bio-box > p:last-of-type {
margin: 0;
}

Ora le cose dovrebbero andare molto meglio. Ma sentiti libero di giocare con il CSS per rendere tuo il box dell'autore e farlo sentire a casa sul tuo sito!

Consigliato: rendere la funzione “pluggable”

Questo non è specifico per gli shortcode e non è strettamente necessario per il funzionamento del codice, ma è una buona pratica e questo è un buon momento per menzionarlo.

Come utilizzare i punti di interruzione CSS per creare design reattivi

Il successo di un sito web dipende molto dall'esperienza dell'utente. Al giorno d'oggi, gli utenti accedono a un sito Web da molti dispositivi diversi e fornire un'esperienza utente uguale su ciascun dispositivo può essere una sfida....

Innanzitutto, un piccolo background su come funziona PHP :

Ricordi come siamo riusciti a nominare noi stessi la nostra funzione create_author_bio ? Bene, non c'è niente di speciale nel nome create_author_bio; avremmo potuto facilmente nominare la nostra funzione come volevamo (anche se è meglio se il nome della funzione ti dia almeno un piccolo suggerimento su cosa fa, motivo per cui ho scelto create_author_bio ).

Ma ecco il punto: se due funzioni PHP hanno lo stesso nome, il risultato sarà un errore fatale che impedirà il caricamento del sito, poiché PHP non avrà idea di quale funzione sia quella giusta. PHP non indovina, quindi si ferma.

E non è solo il nostro codice di cui dobbiamo preoccuparci; un sito WordPress potrebbe utilizzare il codice di dozzine o forse anche centinaia di sviluppatori diversi, a seconda dei plugin e dei temi installati. Se lo stesso nome di funzione viene utilizzato due volte, tutto si interrompe!

Non è male e, ovviamente, vogliamo assicurarci che non accada mai.

Possiamo farlo rendendo la nostra funzione "collegabile"; in altre parole, dicendo a WordPress di non creare la nostra funzione se ne esiste già un'altra con lo stesso nome. È elegantemente semplice; avvolgiamo semplicemente il nostro codice esistente all'interno di questa semplice istruzione condizionale:

if( !function_exists( 'create_author_bio' ) ){

//Our existing PHP goes here!

}

Quell'espressione condizionale se verifica semplicemente che una funzione denominata create_author_bio non esista già. Tutto il codice PHP che abbiamo utilizzato finora può essere spostato all'interno di tale istruzione, tra le parentesi { } .

Tuttavia, è comunque meglio nominare le funzioni nel modo più univoco possibile! Rendere la nostra funzione collegabile evita solo un errore fatale. Quindi, se ci fosse un conflitto di nomi, il nostro shortcode non funzionerebbe ancora, ma almeno il sito sarebbe ancora attivo e nient'altro sarebbe rotto.

Conclusione

Questo è tutto! Spero che ti sia piaciuto creare uno shortcode personalizzato per l'autore! Se hai seguito, tutto ciò che devi fare è digitare [author_bio] ovunque in una pagina o in un post e il tuo codice apparirà!

Questo shortcode può essere facilmente adattato per produrre qualsiasi cosa su una pagina. Una gif, un blocco personalizzato di HTML e/o JavaScript, un'immagine o un video... tutto quello che vuoi!

Tuttavia, sebbene questo esempio sia utile se hai solo bisogno di produrre un singolo valore statico sulla pagina da qualche parte, non è molto flessibile. Restituirà sempre la stessa identica cosa ogni volta e spesso abbiamo bisogno di codici brevi per essere più adattabili di così.

Buone notizie: abbiamo trattato solo le basi degli shortcode e sono in grado di fare molto, molto di più! Nella prossima puntata tratteremo gli shortcode "avvolti" - codici brevi che possono avvolgere blocchi di testo o contenuti per consentirti una maggiore flessibilità!