Editor Visual Wordpress Retirando Alterações HTML

Quando eu uso o editor HTML do WordPress para adicionar ícones icomoon como este:

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

e depois mude para o editor visual e, em seguida, volte para o editor HTML, os ícones desaparecem. Estou tentando incluir este bit de Javascript para corrigir isso. Eu olhei para wp_enqueue_scripts e coloquei isso em functions.php, mas ele ainda não resolve o 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' );

Como posso consertar isso?

fundo

Esse problema gira em torno da remoção de <span></span>elementos vazios no TinyMCE ao salvar uma postagem ou alternar entre as guias Visuale do Texteditor. O problema é inerente à funcionalidade principal (a partir da versão do tronco 4.0-alpha-20140602) e é imutável pelas APIs padrão do WordPress, conforme mencionado no ticket # 26986 . O ticket detalha o raciocínio por trás da configuração e é marcado como wont-fix, significando que sua melhor aposta é uma das "soluções alternativas" listadas abaixo.

Comportamento padrão do WordPress / TinyMCE

Por padrão, a instância TinyMCE do WordPress é configurada de forma que várias tags vazias ou que faltam em certos atributos sejam removidas na tentativa de eliminar a marcação que não faz nada.

Dos documentos da MDN<span> :

O elemento HTML é um contêiner interno genérico para o conteúdo de frases, que não representa nada inerentemente. Ele pode ser usado para agrupar elementos para fins de estilo (usando os atributos de classe ou id) ou porque eles compartilham valores de atributos, como lang. Deve ser usado apenas quando nenhum outro elemento semântico é apropriado.

Como <span>se destina a agrupar elementos / conteúdo em linha, os principais colaboradores do WordPress decidiram que o elemento deve ser irrelevante quando a tag está vazia e, assim, retirá-lo do conteúdo.

Trabalho-Arounds

Na maioria das vezes, a maneira correta de modificar a configuração do TinyMCE é conectar-se tiny_mce_before_inita um filtro, no entanto spano comportamento de remoção vazia não pode ser modificado dessa maneira. Para fazer isso, é provável que exija hacks nos arquivos principais e, como tal, não forneço nenhuma dessas soluções para consideração.

Ideal: Forneça <span>texto ao leitor de tela

Os leitores de tela são peças de software que tentam interpretar o conteúdo da tela para auxiliar os deficientes visuais. Ao processar uma página da Web, a maioria dos leitores de tela desabilita completamente o CSS (e Javascript) ou processa apenas um subconjunto, de modo que as coisas normalmente ocultas pelo CSS acabem sendo processadas como se estivessem visíveis. Os desenvolvedores da Web tradicionalmente exploram esse comportamento em nome da acessibilidade, criando uma classe CSS que pode ser aplicada a elementos que os ocultam de todos os que têm o CSS ativado, 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);
}

Com esta classe disponível (as folhas de estilo do seu tema provavelmente têm uma classe semelhante), dentro do período de ícone, você pode adicionar um segundo período de "leitor de tela" que não será (ou pelo menos parece) renderizado na tela, mas fornecerá aos leitores de tela uma alternativa acessível ao seu ícone, semelhante à maneira como o altatributo funciona em um <img>:

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

O texto acima exibirá seu ícone quando o CSS estiver ativado, e os leitores de tela interpretarão "Segurança" no lugar.

Forneça <span>conteúdo invisível

Para impedir que os <span>s sejam removidos, você pode adicionar conteúdo que não é exibido explicitamente:

• Adicionar um caractere de espaço entre as tags de abertura e fechamento será suficiente. No entanto, como o espaço em branco vazio é removido, você precisa adicionar o caractere através da  entidade HTML. Esse caractere será convertido para parecer um espaço normal depois que você alternar as guias ou salvar, no entanto, não será retirado da marcação. Observe que isso pode afetar o tamanho do seu período, exatamente como faria se você colocasse uma única letra no elemento:

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

• Supondo que você esteja trabalhando com um conjunto de caracteres UTF-8, é possível usar um caractere "hífen suave" por meio da entidade HTML ­. Ao contrário  , o caractere de hífen suave é renderizado como se não ocupasse espaço e não deveria afetar o tamanho da sua extensão:

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

Use um elemento alternativo

Enquanto o TinyMCE do WordPress está configurado para remover <span>elementos vazios , há várias outras tags configuradas por padrão para permitir a existência sem conteúdo. Nos comentários do ticket # 26986 , TobiasBg recomenda o uso<i> ( <em>, <b>e <strong>algumas outras possibilidades). Consulte esta questão do estouro de pilha para obter mais informações sobre a prática de usar <i>ícones.

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

Crie sua própria instância TinyMCE

Esta é provavelmente a solução mais complicada e geralmente absurda disponível e, como tal, não fornecerei uma implementação. Usando um plug-in, deve ser possível carregar uma instância separada dos scripts TinyMCE, configurá-los da maneira que desejar (além das opções expostas pelo WordPress) e substituir o editor padrão (ou ocultá-lo e adicionar um metabox de substituição). Embora você permita desativar a remoção de vãos vazios, a quantidade de tempo necessária para detalhar essa implementação provavelmente superaria muito os benefícios.