El editor TinyMCE está rompiendo mi hermoso HTML - Soluciones

Independientemente de lo que hayas configurado como hijos válidos, WordPress maneja las etiquetas p y los saltos de línea de una manera muy particular. Probablemente te hayas dado cuenta, al cambiar del editor de texto al editor visual y viceversa, que tus etiquetas <p> se eliminan, similar a lo que ocurre en el frontend. Una forma de evitar esto es asignando una clase personalizada a las etiquetas <p>.

<p class="text">Esta etiqueta p no será eliminada"</p>.

Mientras que ↑ esto ↑ evitará que se elimine tu etiqueta p, no solucionará tu problema ya que el markup en el frontend seguirá alterándose. Podrías DESACTIVAR wpautop. Si haces eso Y además incluyes p como hijo válido, esto SOLUCIONARÁ TU PROBLEMA.

OPCIÓN 1 : Desactivar Autop y Establecer Hijos Válidos

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

Sin embargo, debo advertirte que en el momento en que cambies del editor HTML de vuelta a TinyMCE, tu HTML será destruido. Una solución alternativa es desactivar TinyMCE completamente para ciertos tipos de contenido, como en la opción 2 a continuación.

OPCIÓN 2 : Desactivar Auto P, TinyMCE, y Establecer Hijos Válidos

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

Para la mayoría de las personas, ↑ esto ↑ no es una opción.

¿Qué otras opciones existen? Una solución alternativa que he notado que funciona es usar una etiqueta span con una clase y asegurarse de que no haya espacios en blanco entre tus etiquetas HTML. Si haces esto, puedes usar la opción uno anterior y evitar tener que desactivar TinyMCE por completo. Solo recuerda que también tendrás que agregar algo de CSS a tu hoja de estilos para mostrar el span correctamente.

OPCIÓN 3: Opción 1 + Etiquetas Span con Estilo

HTML

<a href="#"><img src="https://placehold.it/300x200?text=Don%27t+P+On+Me" alt="" /><span class="noautop">Texto descriptivo increíble</span></a>

CSS en la hoja de estilos

.noautop {
    display: block;
}

Opción 4: Usar el shortcode integrado del cargador de medios

Inicialmente olvidé esta, pero el shortcode [caption] se verá así:

[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" />
    pie de foto increíble
[/caption]

El resultado se verá así:

<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">Texto descriptivo increíble</figcaption>
</figure>

Si no quieres etiquetas figure, podrías usar un plugin como custom content shortcode que te permite hacer esto:

[raw] <p>este contenido no será filtrado por WordPress</p> [/raw]

¿Por qué el editor no puede simplemente funcionar como yo quiero?

He pasado incontables horas intentando que esto funcione bien a lo largo de los últimos años. Ocasionalmente encuentro una solución que funciona perfectamente, pero luego WordPress lanza una actualización que vuelve a estropear todo. La única solución que he encontrado que funciona completamente como debería, me lleva a la mejor respuesta que tengo.

Opción 5 : Preserved HTML Editor Markup Plus

Así que ahórrate el dolor de cabeza y simplemente usa esto. Por defecto, Preserved HTML Editor Markup Plus solo afecta a nuevas páginas. Si quieres cambiar páginas ya creadas, tienes que ir a www.example.com/wp-admin/options-writing.php y editar los ajustes del plugin. También podrás cambiar el comportamiento predeterminado de los saltos de línea.

Nota: Si decides usar esto, asegúrate de revisar el hilo de soporte cuando se lance una nueva actualización de WordPress. Ocasionalmente, un cambio puede estropear las cosas, así que es mejor asegurarse de que el plugin funciona en las versiones más recientes.

Crédito Extra: Depuración de tu Problema / Edición de Otras Opciones de TinyMCE

Si quieres inspeccionar y editar fácilmente tus configuraciones de TinyMCE manualmente, como lo haces con los filtros, puedes instalar advanced TinyMCE config. Te permite ver TODAS las opciones configuradas de TinyMCE y editarlas desde una interfaz simple. También puedes agregar nuevas opciones, igual que con los filtros. Hace que todo sea mucho más fácil de entender.

Por ejemplo, yo tengo ambos, ese y Preserved HTML Editor Markup Plus. La captura de pantalla a continuación es de la página de administración de Advanced TinyMCE Config. Aunque la captura corta el 90% de lo que realmente hay, puedes ver que muestra los hijos válidos disponibles para editar y cuáles fueron agregados por Preserved HTML Editor Markup Plus.

Esta es una manera extremadamente útil no solo para personalizar completamente tu editor, sino también para ver qué está pasando. Incluso podrías averiguar qué estaba causando tu problema. Después de revisar los parámetros mientras Preserved HTML Editor Markup estaba activado, vi algunas opciones adicionales que podrían agregarse a un filtro personalizado.

function fix_tiny_mce_before_init( $in ) {

    // Puedes depurar esto sin necesidad de tener Advanced Tinymce Config activado:
    // 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' );

Desafortunadamente, este método no funcionó. Probablemente haya algún regex o JavaScript que se ejecuta al actualizar la entrada y/o cambiar entre editores. Si echas un vistazo al código fuente de Preserved HTML Editor, puedes ver que hace algún trabajo de JavaScript en el lado del administrador, así que mi último consejo sería revisar cómo funciona el plugin si quieres agregar esta funcionalidad en tu tema.

De todos modos, lo siento por cualquiera que haya llegado hasta aquí en mi respuesta. Solo pensé en compartir mis propias experiencias lidiando con el editor de WordPress, para que otros no tengan que pasar horas intentando resolver esto como yo lo hice.