Il editor TinyMCE sta rompendo il mio bellissimo HTML

Indipendentemente da ciò che hai configurato come elementi figli validi, WordPress gestisce i tag p e gli a capo in modo molto particolare. Probabilmente ti accorgerai prima o poi, se non l'hai già fatto, che quando passi dall'editor di testo all'editor visuale e viceversa, i tuoi tag <p> vengono rimossi, simile a ciò che accade sul frontend. Un modo per evitare che ciò accada è assegnare ai tag <p> una classe personalizzata.

<p class="text">Questo tag p non verrà rimosso"</p>.

Sebbene ↑ questo ↑ impedirà la rimozione del tuo tag p, non risolverà il problema poiché il tuo markup sul frontend verrà comunque alterato. Potresti DISABILITARE wpautop. Se lo fai E includi p tra gli elementi figli validi, questo RISOLVERÀ IL TUO PROBLEMA.

OPZIONE 1: Disabilita Autop e Imposta Elementi Figli Validi

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;
}

Devo avvertirti però che nel momento in cui passi dall'editor HTML a TinyMCE, il tuo HTML verrà distrutto. Una soluzione alternativa è disabilitare completamente TinyMCE per determinati tipi di post come nell'opzione 2 qui sotto.

OPZIONE 2: Disabilita Auto P, TinyMCE e Imposta Elementi Figli Validi

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;
}

Per la maggior parte delle persone però ↑ questa ↑ non è un'opzione.

Quindi quali altre opzioni ci sono? Un'altra soluzione che ho notato funzionare è usare un tag span con una classe e assicurarsi che non ci siano spazi bianchi tra i tuoi tag HTML. Se fai così, puoi usare l'opzione uno sopra ed evitare di dover disabilitare TinyMCE del tutto. Ricorda solo che dovrai anche aggiungere del CSS al tuo foglio di stile per visualizzare correttamente lo span.

OPZIONE 3: Opzione 1 + Tag Span Stilizzati

HTML

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

CSS nel Foglio di Stile

.noautop {
    display: block;
}

Opzione 4: Usa lo shortcode integrato per il caricamento dei media

Inizialmente mi ero dimenticato di questa, ma lo shortcode [caption] apparirà così:

[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" />
    didascalia fantastica
[/caption]

L'output sarà questo:

<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">Testo descrittivo fantastico</figcaption>
</figure>

Se non vuoi i tag figure, potresti usare un plugin come custom content shortcode che ti permette di fare questo:

[raw] <p>questo contenuto non verrà filtrato da wordpress</p> [/raw]

Perché l'editor non può semplicemente funzionare come voglio io?

Ho passato innumerevoli ore cercando di far funzionare bene questa cosa negli ultimi anni. Ogni tanto trovo una soluzione che funziona perfettamente, ma poi WordPress rilascia un aggiornamento che scombina di nuovo tutto. L'unica soluzione che ho trovato funzionare completamente come dovrebbe, mi porta alla migliore risposta che ho.

Opzione 5: Preserved HTML Editor Markup Plus

Quindi risparmiati il mal di testa e usa semplicemente questo. Di default, Preserved HTML Editor Markup Plus influisce solo sulle nuove pagine. Se vuoi modificare pagine già create, devi andare su www.example.com/wp-admin/options-writing.php e modificare le impostazioni del plugin. Potrai anche cambiare il comportamento predefinito degli a capo.

Nota: Se decidi di usarlo, assicurati di controllare il thread di supporto quando viene lanciato un nuovo aggiornamento di WordPress. A volte, un cambiamento può scombussolare le cose, quindi è meglio assicurarsi che il plugin funzioni sulle versioni più recenti.

Extra: Debug del Tuo Problema / Modifica di Altre Opzioni TinyMCE

Se vuoi ispezionare e facilmente modificare le tue configurazioni TinyMCE manualmente, come fai con i filtri, puoi installare advanced TinyMCE config. Ti permette di vedere TUTTE le opzioni configurate di TinyMCE e modificarle da una semplice interfaccia. Puoi anche aggiungere nuove opzioni proprio come faresti con i filtri. Rende le cose molto più facili da capire.

Ad esempio, ho entrambi quello e Preserved HTML Editor Markup Plus. Lo screenshot qui sotto è della pagina di amministrazione di Advanced TinyMCE Config. Sebbene lo screenshot tagli il 90% di ciò che c'è realmente, puoi vedere che mostra gli elementi figli disponibili da modificare e quali sono stati aggiunti da Preserved HTML Editor Markup Plus.

Questo è un modo estremamente utile non solo per personalizzare completamente il tuo editor, ma anche per vedere cosa sta succedendo. Potresti persino riuscire a capire cosa stava causando il tuo problema. Dopo aver esaminato i parametri mentre Preserved HTML Editor Markup era abilitato, ho visto alcune opzioni aggiuntive che potrebbero essere aggiunte a un filtro personalizzato.

function fix_tiny_mce_before_init( $in ) {

    // Puoi effettivamente fare debug di questo senza bisogno di avere Advanced Tinymce Config abilitato:
    // 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' );

Sfortunatamente questo metodo non ha funzionato. Probabilmente c'è qualche regex o JavaScript che entra in gioco quando aggiorni il post e/o passi da un editor all'altro. Se dai un'occhiata al codice sorgente di Preserved HTML Editor puoi vedere che fa del lavoro JavaScript sul lato amministrativo, quindi il mio ultimo consiglio sarebbe di controllare come funziona il plugin se vuoi aggiungere questa funzionalità nel tuo tema.

Comunque, mi dispiace per chiunque sia arrivato fino a qui nella mia risposta. Ho solo pensato di condividere le mie esperienze nell'affrontare l'editor di WordPress, così che altri non debbano passare ore a cercare di capire questa cosa come ho fatto io!