Wordpress Visual Editor Stripping delle modifiche HTML

Quando uso l'editor HTML di WordPress per aggiungere icone icomoon come questa:

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

e quindi passare all'editor visivo e quindi all'editor HTML, le icone scompaiono. Sto cercando di includere questo bit di Javascript per risolvere questo problema. Ho guardato wp_enqueue_scripts e l'ho inserito in Functions.php, ma non risolve ancora il 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' );

Come posso risolvere questo problema?

sfondo

Questo problema ruota attorno alla rimozione di <span></span>elementi vuoti in TinyMCE quando si salva un post o si passa tra le schede dell'editor Visuale Text. Il problema è inerente alla funzionalità principale (a partire dalla versione trunk 4.0-alpha-20140602) ed è immutabile tramite le API WordPress standard, come menzionato nel ticket n . 26986 . Il biglietto indica in dettaglio il ragionamento dietro l'impostazione ed è contrassegnato come wont-fix, il che significa che la tua scommessa migliore è una delle "soluzioni alternative" elencate di seguito.

Comportamento WordPress / TinyMCE predefinito

Per impostazione predefinita, l'istanza TinyMCE di WordPress è configurata in modo tale che un numero di tag vuoti o tag che mancano determinati attributi vengano rimossi nel tentativo di eliminare il markup che non fa nulla.

Dai documenti di MDN<span> :

L'elemento HTML è un contenitore inline generico per il contenuto del fraseggio, che non rappresenta intrinsecamente nulla. Può essere utilizzato per raggruppare elementi per scopi di stile (usando gli attributi class o id) o perché condividono valori di attributi, come lang. Dovrebbe essere usato solo quando nessun altro elemento semantico è appropriato.

Poiché <span>si intende raggruppare elementi / contenuti incorporati, i collaboratori principali di WordPress hanno deciso che l'elemento deve essere irrilevante quando il tag è vuoto e quindi eliminarlo dal contenuto.

Work-Arounds

Per la maggior parte, il modo corretto di modificare la configurazione di TinyMCE è collegarsi tiny_mce_before_initcon un filtro, tuttavia spanil comportamento di rimozione del vuoto non può essere modificato in questo modo. Per fare ciò è probabile che occorra hackerare i file core e come tale non ho fornito tali soluzioni a titolo oneroso.

Ideale: Fornisci <span>testo al lettore di schermo

Gli screen reader sono software che tentano di interpretare il contenuto sullo schermo per aiutare i non vedenti. Durante l'elaborazione di una pagina Web, la maggior parte degli screen reader disabilita completamente CSS (e Javascript) o elabora solo un sottoinsieme, in modo che le cose normalmente nascoste dai CSS finiscano per essere elaborate come se fossero visibili. Gli sviluppatori Web sfruttano tradizionalmente questo comportamento in nome dell'accessibilità creando una classe CSS che può essere applicata agli elementi che li nasconderanno a tutti coloro che hanno abilitato CSS, qualcosa del tipo di :

.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 questa classe disponibile (i fogli di stile del tuo tema probabilmente hanno una classe simile), all'interno della tua gamma di icone puoi aggiungere un secondo, "intervallo di lettura dello schermo" che non verrà (o almeno sembrerà essere) reso sullo schermo ma fornirà agli screen reader un'alternativa accessibile alla tua icona, simile a come funziona l' altattributo su un <img>:

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

Quanto sopra mostrerà la tua icona quando CSS è abilitato e gli screen reader interpreteranno "Sicurezza" al suo posto.

Dai <span>contenuti invisibili

Per evitare che le " <span>s" vengano rimosse, puoi aggiungere contenuti che non sono esplicitamente visualizzati:

• L'aggiunta di uno spazio tra il tag di apertura e chiusura sarà sufficiente. Tuttavia, poiché gli spazi vuoti vengono eliminati, è necessario aggiungere il carattere tramite l'  entità HTML. Questo personaggio verrà convertito in uno spazio normale una volta cambiate le schede o salvato, tuttavia non verrà rimosso dal markup. Si noti che ciò può influire sulla dimensione della campata, proprio come farebbe se si inserisse una singola lettera nell'elemento:

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

• Supponendo che si stia lavorando con un set di caratteri UTF-8, è possibile utilizzare un carattere "trattino dolce" tramite l'entità HTML ­. A differenza  del personaggio soft-hypen, il rendering viene eseguito come se non occupasse spazio e non dovrebbe influire sulla dimensione dell'intervallo:

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

Usa un elemento alternativo

Mentre TinyMCE di WordPress è configurato per eliminare <span>elementi vuoti , ci sono una serie di altri tag configurati per impostazione predefinita per consentire l'esistenza senza contenuto. Nei commenti del biglietto # 26986 , TobiasBg consiglia di utilizzare<i> ( <em>, <b>, e <strong>sono poche altre possibilità). Vedi questa domanda Stack Overflow per ulteriori informazioni sulla pratica dell'uso <i>delle icone.

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

Crea la tua istanza TinyMCE

Questa è probabilmente la soluzione più complicata e generalmente assurda disponibile, e come tale non fornirò un'implementazione. Utilizzando un plug-in, dovrebbe essere possibile caricare un'istanza separata degli script TinyMCE, configurarli come desiderato (oltre le opzioni che WordPress espone) e sostituire l'editor predefinito (o nasconderlo e aggiungere un metabox sostitutivo). Pur consentendo di disabilitare la rimozione di span vuoti, la quantità di tempo necessaria per concretizzare tale implementazione probabilmente supererebbe notevolmente il vantaggio.