web-dev-qa-db-fra.com

Comment empêcher l'éditeur HTML d'ajouter des balises <p> à des codes courts, des images, etc.

Je sais que cela est couvert en tant que sujets individuels, mais ce que je recherche, c’est une fonction unique qui empêche les balises <p> de s’enrouler via l’éditeur Wordpress vers les codes courts et les images et supprime également les tapes <p> vides, par exemple:

  • supprime les étiquettes <p> qui s’enroulent autour des codes courts, c.-à-d. <p>[shortcode]</p>
  • supprimer les balises <p></p> vides
  • supprime les balises <p> avec des espaces, c.-à-d. <p> </p> ou <p> </p> etc.
  • supprime les balises <p> entourées de balises <img>, c.-à-d. <p><img blabla /></p>

J'ai utilisé quelques fonctions différentes qui prennent $content et supprime les balises <p> via preg_replace() mais je ne peux pas comprendre comment obtenir les quatre exigences pour qu'elles fonctionnent dans une seule fonction.

Cela semble trop lourd pour exécuter $content à travers quatre fonctions différentes avant que $content ne soit affiché.

Aussi, pouvez-vous recommander une bonne source pour apprendre à utiliser tous les accords de preg_replace ()?

the-contenthtml-editor
4
Jason

1. Filtrer le contenu

Voici un filtre de contenu à une fonction répondant aux quatre exigences ci-dessus:

add_filter( 'the_content', 'strip_some_paragraphs', 20 );
function strip_some_paragraphs( $content ) {

    $content = preg_replace(
        '/<p>(([\s]*)|[\s]*(<img[^>]*>|\[[^\]]*\])[\s]*)<\/p>/',
        '$3',
        $content
    );

    return $content;
}

2. Ressources pour les expressions régulières

3. Le RegEx en 1. expliqué

La regex actuelle est <p>(([\s]*)|[\s]*(<img[^>]*>|\[[^\]]*\])[\s]*)<\/p> - ' indique le début et la fin d'une chaîne, comme d'habitude, / est le délimiteur de motif.

Vous avez mentionné 4 cas dans lesquels vous souhaitez supprimer les balises <p>. Alors tout d'abord, notre modèle doit commencer par l'une de ces balises <p> et se terminer par son compagnon de fermeture </p>. Cela vaut pour les quatre cas. À l'intérieur, nous voulons permettre à quatre options différentes d'être des correspondances valides. Nous regroupons ces options entre parenthèses et utilisons le caractère pipe | pour les séparer. | correspond à chaque côté et peut être enchaîné. Vous pouvez penser à cela comme "OU".

Maintenant pour les options:

Commençons par les espaces blancs. \s indique la classe de caractères d'espaces (espaces, tabulations et sauts de ligne). Nous utilisons le quantificateur en étoile [\s]* pour faire correspondre à zéro ou plus de la classe de caractères précédente.
Nous associons donc maintenant toutes les balises de paragraphe vides. Et par chance, le nombre de cas correspondant à 3 - zéro ou plus s’occupe à la fois de <p></p> et de <p> </p>. Agréable.

En ce qui concerne les deux autres, nous allons envelopper les deux dans plus de [\s]*, de sorte que non seulement <p>[shortcode]</p>, mais aussi par exemple

<p>
    [shortcode] </p>

est apparié.
Ce qu'il nous reste à faire maintenant, c'est de trouver des modèles pour faire correspondre les codes courts et les balises img. Ici, nous utilisons la négation de classe de caractères. Le caret ^ au début d'une classe de caractères le nie. Par conséquent, [^>] correspond à tout caractère autre que >.
Nous commençons le motif pour les images avec une balise d'ouverture <img et pour le shortcode avec un crochet \[. Ce dernier doit être échappé par une barre oblique, car il s’agit d’un caractère spécial regex.
Nous utilisons maintenant la classe de caractères annulée mentionnée ci-dessus avec le quantificateur en étoile. [^>]* pour img et [^\]]* pour le shortcode, correspondant à tout sauf au caractère de fermeture respectif. Ensuite, nous associons ce personnage très proche une fois et nous avons terminé.

Nous obtenons donc <img[^>]* pour les images et \[[^\]]*\] pour le shortcode.
Nous encapsulons ceux-ci dans plusieurs espaces: [\s]*<img[^>]*>[\s]* et [\s]*\[[^\]]*\][\s]*
En regroupant ces deux éléments et en n’ajoutant que des espaces, la première option permet de placer l’intérieur des crochets et d’en finir avec les balises de paragraphe.

Pour le remplacement, nous utilisons la référence $3 qui gère l’image réelle et les balises shortcode qui ne disparaissent pas. Pour que les espaces ne restent pas, nous avons créé deux sous-groupes d'options possibles. Seuls img et shortcode sont ciblés par la référence arrière.

4. Sidenote

Cette question est à la limite du domaine d'application de WPSE - car elle concerne principalement les expressions PHP & Regular. On aurait peut-être mieux posé la question sur StackOverflow. Quoi qu'il en soit, maintenant c'est répondu.

3
Johannes Pille

Je pense que supprimer complètement les balises p est une mauvaise pratique. Pour les balises p vides, il existe une règle CSS que vous pouvez utiliser qui fonctionne bien. p: empty {display: none} devrait fonctionner.

0
Jamie

vous pouvez utiliser le filtre shortcode_unautop: https://developer.wordpress.org/reference/functions/shortcode_unautop/

0
paramir