web-dev-qa-db-ja.com

HTMLの変更を取り除くWordpressのビジュアルエディタ

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

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

phpjavascripttinymcevisual-editorhtml-editor
8
mcography

バックグラウンド

この問題は、投稿を保存するとき、またはVisualとTextエディタータブを切り替えるときに、TinyMCEで空の<span></span>要素を削除することを中心に展開されます。この問題は、コア機能（トランクバージョン4.0-alpha-20140602時点）に固有のものであり、標準のWordPress AP​​Iを介して ticket＃26986 で説明されているように変更できません。チケットには、設定の背後にある理由が詳しく説明されており、wont-fixとしてマークされています。つまり、最善策は、以下に示す「回避策」の1つです。

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

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

MDNの<span> docs から：

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

<span>はインライン要素/コンテンツをグループ化することを目的としているため、WordPressコアコントリビューターは、タグが空の場合、要素は無関係である必要があると判断しました。

回避策

ほとんどの場合、TinyMCEの構成を変更する適切な方法は フィルターを使用してtiny_mce_before_initにフックする ですが、spanのempty-removal動作はこの方法では変更できません。そのためには、コアファイルへのハッキングが必要になる可能性が高いため、検討のためのソリューションを提供していません。

理想：<span>スクリーンリーダーテキストを提供する

スクリーンリーダーは、視覚障害者を支援するために画面上のコンテンツを解釈しようとするソフトウェアです。 Webページを処理するとき、ほとんどのスクリーンリーダーはCSS（およびJavascript）を完全に無効にするか、サブセットのみを処理するため、CSSによって通常隠されているものは、まるで表示されているかのように処理されます。 Web開発者は、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>sが削除されないようにするには、明示的に表示されないコンテンツを追加できます。

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

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

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

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

代替要素を使用する

WordPressのTinyMCEは空の<span>要素を取り除くように設定されていますが、コンテンツなしで既存のものを許可するためにデフォルトで設定されている他のタグがいくつかあります。 チケット＃26986 のコメントで、 TobiasBgは<i> （<em>、<b>、および<strong>の使用を推奨しています他のいくつかの可能性）。アイコンに<i>を使用する方法の詳細については、 このStack Overflowの質問 を参照してください。

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

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

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

8
bosco