L'éditeur TinyMCE brise mon beau HTML

C'est à peu près un doublon exact de: Comment faire pour que Wordpress et TinyMCE acceptent les balises <a> enveloppant les éléments de niveau bloc comme autorisé en HTML5? et HTML5, WordPress et Tiny MCE - envelopper la balise d'ancrage autour des résultats div en sortie géniale

Mon problème est que la solution suggérée ( tiny_mce_before_initfiltre) ne semble pas résoudre mon problème. J'ai du HTML qui ressemble à ceci:

<a href="#">
    <img src="path/to/file.jpg" />
    <p>Some amazing descriptive text</p>
</a>

Le est parfaitement légal en HTML5. Cependant, l'éditeur WP ne l'aime pas et le transforme en:

<a href="#">
    <img src="path/to/file.jpg" />
</a>
<p>Some amazing descriptive text</p>

Bien sûr, cela rompt ma disposition. Quelqu'un connaît-il un moyen d'empêcher ce comportement? Je ne peux pas abandonner le composant visuel de l'éditeur et m'en tenir au texte brut. Toutes suggestions sont les bienvenues.

Juste pour être clair, lorsque j'utilise le code ci-dessous ( suggéré ici ), les <p>balises sont autorisées à rester à l'intérieur des ancres, mais beaucoup d'espace supplémentaire est ajouté avec une  entité qui se multiplie chaque fois que vous basculez entre le mode visuel et texte.

add_filter('tiny_mce_before_init', 'modify_valid_children');

function modify_valid_children($settings){
    $settings['valid_children']="+a[div|p|ul|ol|li|h1|h2|h3|h4|h5|h5|h6]";
    return $settings;
}

Indépendamment de ce que vous avez configuré en tant qu'enfants valides, WordPress gère les balises p ainsi que les sauts de ligne d'une manière très unique. Vous remarquerez probablement éventuellement, si vous ne l'avez pas déjà fait, qu'en passant de l'éditeur de texte à l'éditeur visuel et vice- <p>versa, vos balises sont supprimées, comme ce qui se produit sur le frontend. Un moyen d'empêcher cela de se produire est de donner aux <p>balises une classe personnalisée.

<p class="text">This p tag won't get removed"</p>.

Bien que ↑ cette ↑ empêche la suppression de votre balise p, cela ne résoudra pas votre problème car votre balisage sur le frontend est toujours encrassé. Vous pouvez DÉSACTIVER wpautop. Si vous faites cela ET que p est inclus dans les enfants valides, cela FIXERA VOTRE PROBLÈME .

OPTION 1: Désactiver la fonction Autop et définir des enfants valides

remove_filter( 'the_content', 'wpautop' );
add_filter('tiny_mce_before_init', 'modify_valid_children', 99);
function modify_valid_children($settings){     
    $settings['valid_children']="+a[div|p|ul|ol|li|h1|span|h2|h3|h4|h5|h5|h6]";
    return $settings;
}

Je dois cependant vous avertir que la seconde où vous basculerez de l' éditeur HTML vers TinyMCE, votre code HTML sera détruit. Une solution de contournement consiste à désactiver complètement TinyMCE pour certains types de publication, comme dans l'option 2 ci-dessous.

OPTION 2: désactiver Auto P, TinyMCE et définir des enfants valides

remove_filter( 'the_content', 'wpautop' );
add_filter('tiny_mce_before_init', 'modify_valid_children', 99);
function modify_valid_children($settings){     
    $settings['valid_children']="+a[div|p|ul|ol|li|h1|span|h2|h3|h4|h5|h5|h6]";
    return $settings;
}
add_filter('user_can_richedit', 'disable_wyswyg_to_preserve_my_markup');
function disable_wyswyg_to_preserve_my_markup( $default ){
  if( get_post_type() === 'post') return false;
  return $default;
}

Pour la plupart des gens, cependant, ↑ cette ↑ n'est pas une option.

Alors, quelles sont les autres options? Une solution de contournement que j'ai remarquée fonctionne est d'utiliser une balise span avec une classe et de vous assurer qu'il n'y a pas d'espace blanc entre vos balises HTML . Si vous faites cela, vous pouvez utiliser l'option 1 ci-dessus et éviter d'avoir à désactiver TinyMCE tous ensemble. N'oubliez pas que vous devrez également ajouter du CSS à votre feuille de style pour afficher correctement la plage.

OPTION 3: Option 1 + étiquettes de portée stylisées

HTML

<a href="#"><img src="https://placehold.it/300x200?text=Don%27t+P+On+Me" alt="" /><span class="noautop">Some amazing descriptive text</span></a>

CSS dans la feuille de style

.noautop {
    display: block;
}

Option 4: utilisez le shortcode de téléchargement de média intégré

J'ai d'abord oublié celui-ci, mais le shortcode [caption] ressemblera à ceci:

[caption id="attachment_167" align="alignnone" width="169"]
    <img class="size-medium wp-image-167" src="http://example.com/example.png" alt="" width="169" height="300" />
    awesome caption
[/caption]

La sortie ressemblera à ceci:

<figure id="attachment_167" style="width: 169px" class="wp-caption alignnone">
    <img class="size-medium wp-image-167" src="http://example.com/example.png" alt="" width="169" height="300" />
    <figcaption class="wp-caption-text">Some amazing descriptive text</figcaption>
</figure>

Si vous ne voulez pas de balises graphiques, vous pouvez utiliser un plugin comme un shortcode de contenu personnalisé qui vous permet de faire ceci:

[raw] <p>this content will not get filtered by wordpress</p> [/raw]

Pourquoi l'éditeur ne peut-il pas travailler comme je le souhaite?

J'ai passé d'innombrables heures à essayer de bien faire fonctionner ces dernières années. Parfois, je proposerai une solution qui fonctionne parfaitement, mais WordPress poussera ensuite une mise à jour qui gâchera tout à nouveau. La seule solution que j'ai jamais trouvée pour fonctionner complètement comme cela devrait me conduire à la meilleure réponse que j'ai.

Option 5: balisage HTML Editor préservé Plus

Alors, évitez les maux de tête et allez-y. Par défaut, Préservé HTML Editor Markup Plus affecte uniquement les nouvelles pages. Si vous souhaitez modifier des pages déjà créées, vous devez vous rendre sur www.example.com/wp-admin/options-writing.php et modifier les paramètres du plugin. Vous pourrez également modifier le comportement par défaut de la nouvelle ligne.

Remarque: Si vous décidez de l'utiliser, assurez-vous de vérifier le fil de support lors du lancement d'une nouvelle mise à jour WordPress. Parfois, un changement gâchera les choses, il est donc préférable de s'assurer que le plugin fonctionne sur les nouvelles versions.

Crédit supplémentaire: débogage de votre problème / modification d'autres options TinyMCE

Si vous souhaitez inspecter et modifier facilement vos configurations TinyMCE manuellement, comme vous le faites avec les filtres, vous pouvez installer la configuration avancée de TinyMCE . Il vous permet de visualiser TOUTES les options TinyMCE configurées et de les modifier à partir d'une interface simple. Vous pouvez également ajouter de nouvelles options comme vous le feriez avec les filtres. Cela rend les choses beaucoup plus faciles à comprendre.

Par exemple, j'ai à la fois cela et Préservé HTML Editor Markup Plus. La capture d'écran ci-dessous représente la page d'administration Advanced TinyMCE Config. Alors que la capture d'écran supprime 90% de ce qui est vraiment là, vous pouvez voir qu'elle montre les enfants valides disponibles pour la modification et ceux qui ont été ajoutés à Préservation du HTML Editor Markup Plus .

C'est un moyen extrêmement utile non seulement de personnaliser complètement votre éditeur, mais également de voir ce qui se passe. Vous pourriez même être en mesure de déterminer la cause de votre problème à ce moment-là. Après avoir examiné les paramètres moi-même alors que le balisage de l'éditeur HTML préservé était activé, j'ai vu des options supplémentaires qui pouvaient être ajoutées à un filtre personnalisé.

function fix_tiny_mce_before_init( $in ) {

    // You can actually debug this without actually needing Advanced Tinymce Config enabled:
    // print_r( $in );
    // exit();

  $in['valid_children']="+a[div|p|ul|ol|li|h1|span|h2|h3|h4|h5|h5|h6]";
    $in[ 'force_p_newlines' ] = FALSE;
    $in[ 'remove_linebreaks' ] = FALSE;
    $in[ 'force_br_newlines' ] = FALSE;
    $in[ 'remove_trailing_nbsp' ] = FALSE;
    $in[ 'apply_source_formatting' ] = FALSE;
    $in[ 'convert_newlines_to_brs' ] = FALSE;
    $in[ 'verify_html' ] = FALSE;
    $in[ 'remove_redundant_brs' ] = FALSE;
    $in[ 'validate_children' ] = FALSE;
    $in[ 'forced_root_block' ]= FALSE;

    return $in;
}
add_filter( 'tiny_mce_before_init', 'fix_tiny_mce_before_init' );

Malheureusement, cette méthode n'a pas fonctionné. Il y a probablement des expressions rationnelles ou JavaScript qui se produisent lors de la mise à jour de la publication et / ou du basculement entre les éditeurs. Si vous jetez un coup d'œil au code source de l'éditeur HTML préservé, vous pouvez voir qu'il fait du travail JavaScript du côté administrateur, donc mon dernier conseil serait de vérifier le fonctionnement du plug-in si vous souhaitez ajouter cette fonctionnalité dans votre thème.

Quoi qu'il en soit, désolé pour quiconque est allé aussi loin dans ma réponse. Je pensais juste partager mes propres expériences avec l'éditeur WordPress, alors j'espère que d'autres n'auront pas à passer des heures à essayer de comprendre cela comme moi!