Retirer les balises paragraphes dans le custom field d’ACF

Retirer les balises paragraphes dans ACF

Cet article fait suite au précédent, où j’indique des fonctions pour Retirer les balises paragraphes de ses images dans wordpress

Mise en garde

Avant d’aller plus loin, je dois vous mettre en garde : n’utilisez pas ces fonctions directement sur un site en live. Faites le d’abord sur un site de test pour voir quelle fonction marche pour vous.

Je pars de l’exemple sur un de mes sites:

Dans l’Éditeur WYSIWYG d’ACF j’ai des images qui sont entourées d’une balise <p></p> . Ces balises s’insèrent toutes seules au moment de l’enregistrement de l’article.

Sur mon site, j’ai bien un espace entre chaque image, comme ci-dessous

Si j’applique une des fonctions décrites ci-dessous, comme par exemple:

remove_filter('acf_the_content', 'wpautop');

Je vois un effet immédiat dans mes articles, l’espace entre chaque image disparait, comme ci-dessous:

Ca casse donc complètement le visuel de mes articles, c’est assez moche, et ca se répercute sur tout le site. Si vous avez des centaines d’articles avec des photos alignées les unes en dessous des autres, ca risque de poser un gros problème.

Dans l’inspecteur du navigateur, je vois bien que les balises paragraphes ont disparues

Pourtant, même si le changement est immédiatement visible sur le site, dans l’Éditeur WYSIWYG d’ACF en version texte, j’ai toujours mes balises <p></p> autour de mes images!!

Et même si je double l’espace entre les images, avec le remove_filter, rien ne se passe en front, mes images restent collées.

Pour annuler ce changement, il faut revenir en arrière, et supprimer la fonction.

Pour ma part, ce qui me pose problème, c’est surtout pour les vidéos Youtube intégrées en début d’article sur chaque page.

J’applique le code suivant:

function remove_acf_ptags($content)
{
   
  $content = preg_replace('/<p>\s*(<iframe.*>*.<\/iframe>)\s*<\/p>/iU', '', $content);
  return $content;
}
add_filter('acf_the_content', 'remove_acf_ptags');

Dans l’inspecteur du navigateur, je vois bien que la balise paragraphe a disparu autour de ma vidéo

Pourtant,  là encore, dans l’WYSIWYG d’ACF en version texte, j’ai toujours mes balises. Si je les supprime et enregistre, elles réaparaissent à nouveau

.

Ces balises inutiles sont donc bien dans le code, mais invisibles pour le navigateur.

Le problème avec ce bug, car c’est un gros bug, c’est que lorsqu’on utilise SEO by Yoast, on trouve dans les erreurs SEO la mention « Le mot-clé principal n’apparaît pas dans le premier paragraphe du texte. Assurez-vous que le sujet soit clair immédiatement. ». Le premier élément de ma page article est une vidéo. Officiellement j’ai supprimé les balises paragraphes autour de mes vidéos, mais apparemment Yoast SEO voit cette balise qui est bien dans l’éditeur. Mon mot clé qui est pourtant bien dans le premier paragraphe du texte n’est jamais reconnu par SEO By Yoast. Esc-ce que Google aussi ne le voit pas?

On peut bien sûr passer outre les recommandations du plugin, mais cela soulève quand même un gros bug. ACF pointe du doigt l’éditeur de wordpress, mais même si leurs propres fonctions ne résolvent pas ce problème, c’est que par nature, et de manière générale, wordpress a de grosses lacunes a ce niveau là.

J’énumère quand même ici toutes les solutions trouvées ici ou là pour supprimer ces balises inutiles qui s’insèrent toutes seules. Cela pourra certainement en aider certains.

Retirer les balises paragraphes avec des expressions régulières

Pour retirer toute balise de paragraphe inutile dans les champs additionnels ACF, on peut reproduire le même code utilisé pour supprimer les balises <p></p> dans the_content() en utilisant le hook acf_the_content comme suit: ici on supprimer les balises paragraphes qui entourent les images, iframes et script.

function remove_acf_ptags($content)
{
    $content = preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '', $content);
     $content = preg_replace('/<p>\s*(<script.*>*.<\/script>)\s*<\/p>/iU', '', $content);
  $content = preg_replace('/<p>\s*(<iframe.*>*.<\/iframe>)\s*<\/p>/iU', '', $content);
  return $content;
}
add_filter('acf_the_content', 'remove_acf_ptags');

Le paramètre de formatage

Selon le support d’ACF, on peut supprimer le formatage dans le paramètre de la fonction d’affichage du champs additionnel

the_field($selector, [$post_id], [$format_value]);

et pour la variable format_value, mettre false pour indiquer qu’on ne veut pas de formatage

the_field('votre_champs_acf', false, false);

Remove filter

Une autre option est simplement d’utiliser un filtre pour supprimer le formatage dans ACF

remove_filter('acf_the_content', 'wpautop');

Remove filter sur l’acf/init

Pour d’autres, le fait d’annuler le formatage sur l’init d’acf et d’appliquer une priorité semble fonctionner

function acf_wysiwyg_remove_wpautop() {
    remove_filter('acf_the_content', 'wpautop' );
}
add_action('acf/init', 'acf_wysiwyg_remove_wpautop', 15);

Utiliser Strip_tag

Une autre solution consiste à utiliser la fonction php strip_tags()

strip_tags( get_sub_field( 'field_name' ) );

Conserver le formatage pour un champs particulier

Enfin dernière solution, utilisant le même filtre acf. Ici supprime le formatage, on affiche le champs additionnel, et on remet le formatage.

function the_field_without_filters( $the_field=null ) {
    remove_filter('acf_the_content', 'wpautop');
    if( $the_field ) {
      the_field( $the_field );
    } else {
      the_field();
    }
    add_filter('acf_the_content', 'wpautop');
}

Voici une version plus simple, fournie par le support d’ACF

<?php 

function the_field_without_wpautop( $field_name ) {
	
	remove_filter('acf_the_content', 'wpautop');
	
	the_field( $field_name );
	
	add_filter('acf_the_content', 'wpautop');
	
}

 ?>

Essayez l’une de ces solutions, il se peut qu’aucune ne marche !! Tous ces bouts de code doivent être placés quelque part dans votre fichier functions.php

Les options d’ACF

A savoir, si vous utilisez un champs de type « zone de texte » dans ACF, vous avez l’option directement dans les options d’édition du champs additionnel. Parmi les trois choix proposés, il suffit de sélectionner « Aucun formatage ».