Wordpress Visual EditorがHTMLの変更を取り除く

WordPress HTMLエディターを使用して、次のようなicomoonアイコンを追加すると、

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

ビジュアルエディターに切り替えてから、HTMLエディターに戻ると、アイコンが消えます。これを修正するためにこのJavaScriptのビットを含めようとしています。私はwp_enqueue_scriptsを見て、これをfunctions.phpに入れましたが、それでも問題は解決しません。

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

どうすれば修正できますか？

バックグラウンド

空の除去の周りにこの問題が公転<span></span>ポストを保存するか、間の切り替えのTinyMCEの要素VisualとTextエディタのタブ。チケット＃26986に4.0-alpha-20140602記載されているように、この問題はコア機能に固有であり（トランクバージョン以降）、標準のWordPress APIを介して変更することはできません。チケットは設定の背後にある理由を詳しく説明し、としてマークされています。つまり、最善の策は以下にリストされた「回避策」の1つであることを意味します。wont-fix

デフォルトのWordPress / TinyMCEの動作

デフォルトでは、WordPressのTinyMCEインスタンスは、何もしないマークアップを排除するために、空のタグや特定の属性がないタグが削除されるように構成されています。

MDNの<span>ドキュメントから：

HTML要素は、フレージングコンテンツ用の一般的なインラインコンテナーであり、本質的に何も表現しません。（classまたはid属性を使用して）スタイル設定の目的で要素をグループ化したり、langなどの属性値を共有するために使用できます。他の意味要素が適切でない場合にのみ使用してください。

<span>グループインライン要素/コンテンツに意図され、ワードプレスコア貢献要素は、タグが空の場合は無関係であるので、コンテンツからそれを除去しなければならないことを決定しました。

回避策

ほとんどの部分については、TinyMCEをの設定を変更するための適切な方法をすることであるにフックtiny_mce_before_initフィルタをただしspanの空の除去動作は、このように変更することはできません。そのためには、コアファイルへのハックが必要になる可能性が高いため、検討するソリューションは提供していません。

理想：<span>スクリーンリーダーにテキストを与える

スクリーンリーダーは、視覚障害者を支援するために画面上のコンテンツを解釈しようとするソフトウェアです。Webページを処理するとき、ほとんどのスクリーンリーダーは、CSS（およびJavaScript）を完全に無効にするか、サブセットのみを処理するため、通常はCSSによって非表示になっているものが、表示されているかのように処理されます。ウェブ開発者は、伝統的に、CSSが有効になっているすべての人からそれらを非表示になります要素に適用可能なCSSクラスを作成することにより、アクセシビリティの名前で、この動作を利用するの線に沿って何かを：

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

このクラスが利用できる場合（テーマのスタイルシートには類似のクラスが含まれている可能性があります）、アイコンスパン内に、画面に表示されない（または少なくとも表示されるように見える）2番目の「スクリーンリーダー」スパンを追加できます。は、alt属性がどのように機能するかと同様に、スクリーンリーダーにアイコンのアクセス可能な代替を提供します<img>。

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

上記は、CSSが有効になっているときにアイコンを表示し、スクリーンリーダーが代わりに「セキュリティ」を解釈します。

<span>目に見えないコンテンツを与える

<span>が削除されないようにするために、明示的に表示されていないコンテンツを追加できます。

• 開始タグと終了タグの間にスペース文字を追加するだけで十分です。ただし、空の空白が削除されるため、 HTMLエンティティを介して文字を追加する必要があります。この文字は、タブを切り替えるか保存すると通常のスペースに見えるように変換されますが、マークアップから削除されません。これは、要素に単一の文字を配置した場合と同様に、スパンのサイズに影響を与える可能性があることに注意してください。

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

• UTF-8文字セットを使用していると想定すると、HTMLエンティティを介して「ソフトハイフン」文字を使用できます­。とは異なり 、ソフトハイフンキャラクターは、スペースを取らないかのようにレンダリングされ、スパンのサイズに影響を与えません。

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

代替要素を使用する

WordPressのTinyMCEは空の<span>要素を取り除くように構成されていますが、コンテンツなしで存在できるようにデフォルトで構成されている他の多くのタグがあります。コメントではチケット＃26986、TobiasBgは、使用することをお勧めします<i>（<em>、<b>、および<strong>いくつかの他の可能性あり）。アイコンの使用方法の詳細については、このスタックオーバーフローの質問を参照してください<i>。

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

独自のTinyMCEインスタンスを作成する

これはおそらく、最も複雑で一般的にばかげた解決策であるため、実装は提供しません。プラグインを使用すると、TinyMCEスクリプトの個別のインスタンスをロードし、（WordPressが公開するオプション以外に）必要に応じてそれらを構成し、デフォルトのエディターを置き換える（または非表示にして代わりのメタボックスを追加する）ことができるはずです。空のスパンの削除を無効にすることはできますが、そのような実装を具体化するために必要な時間は、メリットをはるかに上回ります。