Shortcode visualizzati in una posizione non corretta.
Se abbiamo scritto una funzione richiamabile via shortcode, ma abbiamo un problema di posizionamento del codice ritornato, allora la soluzione è questa breve guida.
Per capire cosa sono e come si utilizzano gli shortcode possiamo leggere questa guida: Utilizzare gli shortcode.
Quando la funzione dello shortcode deve effettuare un output come il seguente
//[mio_shortcode]
function il_mio_shortcode( $atts ){
<ul>
<li>Elenco 1</li>
<li>Elenco 2</li>
</ul>
}
add_shortcode( 'mio_shortcode', 'il_mio_shortcode' );
e nell’editor di wordpress lo andiamo ad inserire in questo modo:
Questo è un articolo WP con il mio primo shortcode
[mio_shortcode]
ci ritroveremo, invece di visualizzare prima il testo e poi l’elenco puntato dello shortcode, nella situazione opposta cioè come esempio seguente:
<ul>
<li>Elenco 1</li>
<li>Elenco 2</li>
</ul>
Questo è un articolo WP con il mio primo shortcode
Questo è dovuto al fatto che lo shortcode effettua un output a video dei dati, in questo caso l’elenco puntato, immediatamente ed erroneamente non abbiamo utilizzato il return nella funzione per, appunto, effettuare il return della variabile che verrà elaborata da WP nell’esecuzione del the_content().
Per risolvere il problema abbiamo bisogno di utilizzare le funzioni che PHP ci mette a disposizione come ob_start che serve per attivare il buffer, quindi inserire il contenuto html o testo semplice che sia in una variabile (buffer), e visualizzarla tramite ob_get_contents. Nel nostro caso, possiamo anche utilizzare direttamente la funzione ob_end_clean che serve a pulire e disattivare il buffer. La funzione sopra descritta la modificheremo in questo modo:
//[mio_shortcode]
function il_mio_shortcode( $atts ){
ob_start()
<ul>
<li>Elenco 1</li>
<li>Elenco 2</li>
</ul>
return ob_get_clean();
}
add_shortcode( 'mio_shortcode', 'il_mio_shortcode' );
Ed ecco che il codice dello shortcode sarà visualizzato in maniera corretta come noi lo avevamo posizionato nell’editor
Questo è un articolo WP con il mio primo shortcode
<ul>
<li>Elenco 1</li>
<li>Elenco 2</li>
</ul>