Rimuovere i paragrafi intorno agli shortcode di WordPress

In alcuni casi nell’utilizzo degli shortcode di WordPress possiamo imbatterci in un problema che, nel mio caso, mi ha fatto impazzire per diversi pomeriggi, prima di trovare la soluzione.

A causa della formattazione automatica di wordpress, infatti, il codice html generato dagli shortcode nel frontend viene talvolta fastidiosamente annidato  nei paragrafi. Questo, oltre ad invalidare il codice html della pagina, può produrre anche degli spazi indesiderati nel layout.

La soluzione più veloce consiste nel rimuovere il filtro wpautop dalla funzione the_content() che si occupa di stampare il contenuto principale delle pagine e dei post di WordPress.

remove_filter('the_content', 'wpautop');

Senza il filtro wpauto, viene disabilitata del tutto la formattazione automatica del testo, impedendo a WordPress l’aggiunta di <p> e <br> in corrispondenza delle interruzioni di riga così come erano stati disposti nell’editor visuale. Effetto non proprio desiderabile, perchè di fatto rovina l’aspetto e la formattazione dei nostri contenuti testuali.

Per visualizzare correttamente gli snippet di codice degli shortcode  abbiamo bisogno di trovare un modo per risolvere questo problema senza disattivare la formattazione su tutti i contenuti.

Rimozione selettiva dei paragrafi con un filtro custom

È necessario predisporre una apposita funzione che si occuperà di eliminare i tag di apertura dei paragrafi che si trovano direttamente prima o dopo le parentesi quadre degli shortcode, applicandola prima di stampare i contenuti. Il codice seguente va inserito nel file functions.php del nostro tema:

function shortcode_empty_paragraph_fix($content){   
    $array = array (
        '<p>[' => '[', 
        ']</p>' => ']', 
        ']<br />' => ']'
    );

    $content = strtr($content, $array);
    return $content;
}

add_filter('the_content', 'shortcode_empty_paragraph_fix');

Possiamo anche applicare il filtro su altre funzioni, delegate a stampare l’output nel template, come ad esempio in the_excerpt.

Shortcode e Advanced Custom fields

Per chi utilizza il comodo plugin Advanced Custom fields Il metodo che abbiamo appena visto non ha efficacia, quando utilizziamo gli shortcode in un custom field con l’editor WYSIWYG: i paragrafi continuano fastidiosamente a circondare gli snippet di codice generati. Questo perchè ACF utilizza una diversa funzione per filtrare l’output del contenuto del campo custom: acf_the_content. Ecco il codice completo che ci metterà definitivamente al riparo da questi fastidi:

function shortcode_empty_paragraph_fix($content){   
	
	$array = array (
        '<p>[' => '[', 
        ']</p>' => ']', 
        ']<br />' => ']',
        ']<br>' => ']'
    );

    $content = strtr($content, $array);
    return $content;
	
}

add_filter('the_content', 'shortcode_empty_paragraph_fix');
add_filter( "the_excerpt", "shortcode_empty_paragraph_fix" );
add_filter('acf_the_content', 'shortcode_empty_paragraph_fix', 11);

In questo caso dobbiamo anche specificare la priorità (11) come terzo argomento del filtro quando lo applichiamo, per assicurarci che sia eseguito per ultimo e produca il suo effetto.

Io ho trovato il punto esatto in cui era opportuno eseguire il filtro, ispezionando la variabile globale $filter.

Conoscere l’ordine di esecuzione dei filtri

global $wp_filter;
print_r($wp_filter['the_content']);

Se inserito nella pagina del template (a scopo di debug), il codice precedente stampa tutti i filtri applicati alla funzione specificata e ci consente di conoscerne l’ordine di esecuzione, nel nostro caso il filtro shortcode_empty_paragraph_fix deve avere una priorità maggiore di wpautop.