WP Shortcode

Grazie agli shortcode abbiamo la scusa per parlare un attimo della differenza tra il testo che scriviamo tramite un interfaccia grafica (tipo l’editor di un articolo) e il codice che scriviamo in un file (in php nel caso di WP).

Nel primo caso, il testo che abbiamo scritto deve essere salvato da qualche parte (un database solitamente); da un punto di vista tecnico (farò un articolo di approfondimento sugli attacchi XSS) tutti i simboli che inseriamo (tipo <p>) vengono codificati (ad esempio il simbolo < diventa &lt;).

Mentre quando scriviamo direttamente nel file di codice, abbiamo esattamente quello che scriviamo, che verrà interpretato in base al linguaggio di programmazione (se scrivo <p>...</p> verrà interpretato come un paragrafo)

Spesso sarebbe utile avere la possibilità di integrare queste due, e inserire elementi più complessi di semplici paragrafi, utilizzando delle funzionalità dei linguaggi di programmazione (tipo i loop) o modificare dinamicamente gli elementi.

In questo ci vengono in aiuto gli shortcode, dei codici che inseriamo negli editor di testo e che verranno interpretati dal nostro framework o libreria di turno. Solitamente (anche su WP è così) vengono utilizzati tramite la sintassi [nome_shortcode], con un tag uguale di chiusura se lo shortcode lo prevede.

Shortcode WordPress

Per aggiungere shortcode su WP si usa la funzione add_shortcode, che accetta come primo argomento il nome dello shortcode (quello usato tra le parentesi quadre), e secondo argomento una funzione che torna l’output HTML dello shortcode. La documentazione WP ha una pagina dedicata di approfondimento.

La funzione che si occupa di tornare l’output riceve 3 parametri iniettati da WP:

  • $atts – contiene gli attributi che passiamo allo shortcode
  • $content – contiene il contenuto che passiamo tra i tag dello shortcode
  • $tag – nome dello shortcode

Questa semplice funzione ci crea uno shortcode [myshortcode] che si occupa di mostrare una variabile (foo) in una struttura html complessa. Qui vediamo due elementi importanti:

La funzione shortcode_atts, che si occupa di dare dei valori di default agli attributi (Pagina del codex).

L’utilizzo di ob_start; come suggerito dalla documentazione, se dobbiamo fare l’output di una porzione considerevole di codice, è buona norma aprire un buffer di output (Codex e Php manual).

Enclosing – Self closing

Gli shortcode si distinguono in self-closing (come lo shortcode che abbiamo creato prima) e gli Enclosing; questi funzionano come tag HTML, quindi utilizzano anche un contenuto racchiuso tra lo shortcode:

[second_shortcode] contenuto… [/second_shortcode]

In questo caso la funzione dello shortcode riceverà come argomento la variabile $content, con il nostro contenuto da poter modificare o utilizzare semplicemente. È importante notare che possiamo anche passare del contenuto HTML qui, che non verrà parsasto. Il codex wp ha tutto un paragrafo dedicato a questa differenza e alle varie modalità di combinazione tra queste due tipologie.