Wordpress Visual Editor Suppression des modifications HTML

Lorsque j'utilise l'éditeur HTML WordPress pour ajouter des icônes icomoon comme ceci:

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

puis passez à l'éditeur visuel, puis revenez à l'éditeur HTML, les icônes disparaissent. J'essaie d'inclure ce morceau de Javascript pour résoudre ce problème. J'ai regardé wp_enqueue_scripts et l'ai mis dans functions.php, mais cela ne résout toujours pas le problème.

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' );

Comment puis-je réparer cela?

Contexte

Ce problème concerne la suppression des <span></span>éléments vides dans TinyMCE lors de l'enregistrement d'une publication ou du basculement entre les onglets Visualet l' Textéditeur. Le problème est inhérent aux fonctionnalités de base (à partir de la version trunk 4.0-alpha-20140602) et est immuable via les API WordPress standard, comme mentionné dans le ticket # 26986 . Le ticket détaille le raisonnement derrière le paramètre et est marqué comme wont-fix, ce qui signifie que votre meilleur pari est l'un des «contournements» répertoriés ci-dessous.

Comportement WordPress / TinyMCE par défaut

Par défaut, l'instance TinyMCE de WordPress est configurée de telle sorte qu'un certain nombre de balises vides ou de balises manquant de certains attributs sont supprimées afin d'éliminer le balisage qui ne fait rien.

À partir des <span>documents de MDN :

L'élément HTML est un conteneur générique en ligne pour le contenu de phrasé, qui ne représente rien en soi. Il peut être utilisé pour regrouper des éléments à des fins de style (à l'aide des attributs class ou id) ou parce qu'ils partagent des valeurs d'attribut, telles que lang. Il ne doit être utilisé que si aucun autre élément sémantique n'est approprié.

Comme il <span>est prévu de regrouper les éléments / contenus en ligne, les principaux contributeurs de WordPress ont décidé que l'élément doit être hors de propos lorsque la balise est vide et donc la retirer du contenu.

Solutions de contournement

Pour la plupart, la bonne façon de modifier la configuration de TinyMCE est de se connecter tiny_mce_before_initavec un filtre, mais spanle comportement de suppression à vide ne peut pas être modifié de cette manière. Pour ce faire, il faut probablement des hacks dans les fichiers de base, et en tant que tel, je n'ai pas fourni de telles solutions pour examen.

Idéal: donner du <span>texte au lecteur d'écran

Les lecteurs d'écran sont des logiciels qui tentent d'interpréter le contenu à l'écran afin d'aider les malvoyants. Lors du traitement d'une page Web, la plupart des lecteurs d'écran désactivent entièrement CSS (et Javascript) ou ne traitent qu'un sous-ensemble, de sorte que les choses normalement cachées par CSS finiront par être traitées comme si elles étaient visibles. Les développeurs Web exploitent traditionnellement ce comportement au nom de l'accessibilité en créant une classe CSS qui peut être appliquée à des éléments qui les cacheront à tous ceux qui ont activé CSS, quelque chose comme :

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

Avec cette classe disponible (les feuilles de style de votre thème ont probablement une classe similaire), à ​​l'intérieur de votre étendue d'icônes, vous pouvez ajouter une deuxième plage de "lecteur d'écran" qui ne sera pas (ou du moins semble être) rendue à l'écran mais fournira aux lecteurs d'écran une alternative accessible à votre icône, semblable au fonctionnement de l' altattribut sur <img>:

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

Ce qui précède affichera votre icône lorsque CSS est activé, et les lecteurs d'écran interpréteront "Sécurité" à sa place.

Donner du <span>contenu invisible

Pour éviter que les <span>s soient supprimés, vous pouvez ajouter du contenu qui n'est pas affiché explicitement:

• L'ajout d'un caractère espace entre les balises d'ouverture et de fermeture suffira. Cependant, comme les espaces vides sont supprimés, vous devez ajouter le caractère via l'  entité HTML. Ce caractère sera converti pour apparaître comme un espace normal une fois que vous aurez changé d'onglet ou enregistré, mais il ne sera pas supprimé du balisage. Notez que cela peut affecter la taille de votre étendue, tout comme si vous placiez une seule lettre dans l'élément:

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

• En supposant que vous travaillez avec un jeu de caractères UTF-8, vous pouvez utiliser un caractère "trait d'union" via l'entité HTML ­. À la différence  , le caractère soft-hypen est rendu comme s'il ne prend pas de place et ne devrait pas affecter la taille de votre span:

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

Utiliser un élément alternatif

Alors que TinyMCE de WordPress est configuré pour éliminer les <span>éléments vides , il existe un certain nombre d'autres balises qui sont configurées par défaut pour permettre d'exister sans contenu. Dans les commentaires du billet # 26986 , TobiasBg recommande d' utiliser<i> ( <em>, <b>et <strong>quelques autres possibilités). Consultez cette question sur le dépassement de capacité pour en savoir plus sur la pratique de l'utilisation <i>des icônes.

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

Créez votre propre instance TinyMCE

C'est probablement la solution la plus compliquée et généralement absurde disponible, et en tant que telle, je ne fournirai pas d'implémentation. À l'aide d'un plugin, il devrait être possible de charger une instance distincte des scripts TinyMCE, de les configurer comme vous le souhaitez (au-delà des options exposées par WordPress) et de remplacer l'éditeur par défaut (ou de le masquer et d'ajouter une métabox de remplacement). Tout en vous permettant de désactiver la suppression des plages vides, le temps nécessaire pour étoffer une telle implémentation serait probablement largement supérieur à l'avantage.