Editor visual de Wordpress Eliminación de cambios de HTML

Cuando uso el editor HTML de WordPress para agregar iconos icomoon como este:

<span class="icon-shield"></span>

y luego cambiar al editor visual y luego volver al editor HTML, los iconos desaparecen. Estoy tratando de incluir este bit de Javascript para solucionarlo. Miré wp_enqueue_scripts y puse esto en functions.php, pero aún así no soluciona el problema.

function oakwood_tinymcefix() {
    wp_enqueue_script( 'tiny_mce' );
    echo '<script type="text/javascript">'
   , 'tinymce.init({
            ...
            extended_valid_elements : "img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]"
        });'
   , '</script>';
}
add_action( 'admin_enqueue_scripts', 'oakwood_tinymcefix' );

¿Cómo puedo arreglar esto?

Antecedentes

Este problema gira en torno a la eliminación de <span></span>elementos vacíos en TinyMCE al guardar una publicación o cambiar entre las pestañas Visualy Texteditor. El problema es inherente a la funcionalidad principal (a partir de la versión troncal 4.0-alpha-20140602) y no se puede cambiar a través de las API estándar de WordPress, como se menciona en el ticket # 26986 . El boleto detalla el razonamiento detrás de la configuración y está marcado como wont-fix, lo que significa que su mejor apuesta es una de las "soluciones" que se enumeran a continuación.

Comportamiento predeterminado de WordPress / TinyMCE

De forma predeterminada, la instancia de TinyMCE de WordPress está configurada de tal manera que se eliminan una serie de etiquetas vacías o que faltan ciertos atributos en un intento de eliminar el marcado que no hace nada.

De los <span>documentos de MDN :

El elemento HTML es un contenedor genérico en línea para redactar contenido, que no representa nada inherentemente. Se puede usar para agrupar elementos con fines de estilo (usando los atributos de clase o id), o porque comparten valores de atributo, como lang. Debe usarse solo cuando ningún otro elemento semántico sea apropiado.

Como <span>se pretende agrupar elementos / contenido en línea, los contribuyentes principales de WordPress han decidido que el elemento debe ser irrelevante cuando la etiqueta está vacía y, por lo tanto, despojarlo del contenido.

Work-Arounds

En su mayor parte, la forma correcta de modificar la configuración de TinyMCE es conectarlo tiny_mce_before_initcon un filtro, sin embargo span, el comportamiento de eliminación vacía no se puede modificar de esta manera. Para hacerlo, es probable que se requieran hacks en los archivos principales y, como tal, no he proporcionado ninguna solución para su consideración.

Ideal: dar <span>texto al lector de pantalla

Los lectores de pantalla son piezas de software que intentan interpretar el contenido en pantalla para ayudar a las personas con discapacidad visual. Al procesar una página web, la mayoría de los lectores de pantalla desactivan CSS (y Javascript) por completo o solo procesan un subconjunto, de modo que las cosas que normalmente oculta CSS terminarán siendo procesadas como si fueran visibles. Los desarrolladores web explotan tradicionalmente este comportamiento en nombre de la accesibilidad al crear una clase CSS que se puede aplicar a elementos que los ocultarán de todos los que tienen CSS habilitado, algo como :

.screen-reader-text {
    position: absolute !important;
    height: 1px;
    width: 1px; 
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

Con esta clase disponible (las hojas de estilo de su tema probablemente tengan una clase similar), dentro de su intervalo de iconos puede agregar un segundo intervalo de "lector de pantalla" que no se mostrará (o al menos parecerá) en pantalla, pero proporcionará a los lectores de pantalla una alternativa accesible a su icono, similar a cómo funciona el altatributo en un <img>:

<span class="icon-shield"><span class="screen-reader-text">Security</span></span>

Lo anterior mostrará su icono cuando CSS esté habilitado, y los lectores de pantalla interpretarán "Seguridad" en su lugar.

Dar <span>contenido invisible

Para evitar que los <span>correos electrónicos se eliminen, puede agregar contenido que no se muestre explícitamente:

• Agregar un carácter de espacio entre la etiqueta de apertura y cierre será suficiente. Sin embargo, como el espacio en blanco vacío se elimina, debe agregar el carácter a través de la  entidad HTML. Este carácter se convertirá para que parezca un espacio normal una vez que cambie de pestaña o guarde, sin embargo, no se eliminará del marcado. Tenga en cuenta que esto puede afectar el tamaño de su lapso, tal como lo haría si colocara una sola letra en el elemento:

  <span class="icon-shield">&nbsp;</span>

• Suponiendo que está trabajando con un juego de caracteres UTF-8, puede usar un carácter de "guión suave" a través de la entidad HTML ­. A diferencia  , el carácter de bombo suave se representa como si no ocupara espacio y no debería afectar el tamaño de su lapso:

  <span class="icon-shield">&shy;</span>

Use un elemento alternativo

Si bien TinyMCE de WordPress está configurado para eliminar <span>elementos vacíos , hay una serie de otras etiquetas que están configuradas de manera predeterminada para permitir la existencia sin contenido. En los comentarios del boleto # 26986 , TobiasBg recomienda utilizar<i> ( <em>, <b>y <strong>algunas otras posibilidades). Consulte esta pregunta sobre el desbordamiento de pila para obtener más información sobre la práctica del uso <i>de iconos.

<i class="icon-shield"></i>

Cree su propia instancia de TinyMCE

Esta es probablemente la solución más complicada y generalmente absurda disponible, y como tal no proporcionaré una implementación. Usando un complemento, debería ser posible cargar una instancia separada de los scripts de TinyMCE, configurarlos como desee (más allá de las opciones que expone WordPress) y reemplazar el editor predeterminado (u ocultarlo y agregar un metabox de reemplazo). Si bien le permite deshabilitar la eliminación de tramos vacíos, la cantidad de tiempo requerida para desarrollar dicha implementación probablemente supere en gran medida el beneficio.