TinyMCEエディターが私の美しいHTMLを壊してしまう

これはほぼ同じです。WordpressとTinyMCEで、HTML5で許可されているブロックレベルの要素をラップする<a>タグを受け入れるにはどうすればよいですか。とHTML5、WordPress、Tiny MCEの問題-アンカータグをdivで囲むとファンキーな出力になる

私の問題は、提案された解決策（tiny_mce_before_initフィルター）が私の問題を解決していないように見えることです。次のようなHTMLがあります。

<a href="#">
    <img src="path/to/file.jpg" />
    <p>Some amazing descriptive text</p>
</a>

HTML5ではこれは完全に合法です。ただし、WPエディターはそれを気に入らず、次のように変換します。

<a href="#">
    <img src="path/to/file.jpg" />
</a>
<p>Some amazing descriptive text</p>

もちろん、これは私のレイアウトを壊します。この動作を防ぐ方法を誰かが知っていますか？エディターのビジュアルコンポーネントをあきらめて、プレーンテキストに固執することはできません。どんな提案でも大歓迎です。

明確にするために、以下のコード（ここで提案）を使用すると、<p>タグはアンカー内にとどまることができますが 、ビジュアルモードとテキストモードを切り替えるたびに増加するエンティティとともに、多くの余分なスペースが追加されます。

add_filter('tiny_mce_before_init', 'modify_valid_children');

function modify_valid_children($settings){
    $settings['valid_children']="+a[div|p|ul|ol|li|h1|h2|h3|h4|h5|h5|h6]";
    return $settings;
}

有効な子として何を構成したかに関係なく、WordPressはpタグと改行を非常にユニークな方法で処理します。最終的には、テキストエディターからビジュアルエディターに切り替え<p>て、フロントエンドで発生するのと同じようにタグが取り除かれていることに気付くでしょう。これを防ぐには、<p>タグにカスタムクラスを指定します。

<p class="text">This p tag won't get removed"</p>。

一方で↑これは↑取り除か得ることからあなたのpタグを維持するフロントエンド上のマークアップはまだアップマックにつれて、それはあなたの問題を解決しません。wpautopを無効にすることができます。それを行い、pが有効な子に含まれている場合、これはあなたの問題を修正します。

オプション1：Autopを無効にし、有効な子を設定する

remove_filter( 'the_content', 'wpautop' );
add_filter('tiny_mce_before_init', 'modify_valid_children', 99);
function modify_valid_children($settings){     
    $settings['valid_children']="+a[div|p|ul|ol|li|h1|span|h2|h3|h4|h5|h5|h6]";
    return $settings;
}

ただし、HTMLエディターからTinyMCEに切り替えると、HTMLが破壊されることに注意してください。回避策は、以下のオプション2のように、特定の投稿タイプに対してTinyMCEを完全に無効にすることです。

オプション2：Auto P、TinyMCEを無効にし、有効な子を設定する

remove_filter( 'the_content', 'wpautop' );
add_filter('tiny_mce_before_init', 'modify_valid_children', 99);
function modify_valid_children($settings){     
    $settings['valid_children']="+a[div|p|ul|ol|li|h1|span|h2|h3|h4|h5|h5|h6]";
    return $settings;
}
add_filter('user_can_richedit', 'disable_wyswyg_to_preserve_my_markup');
function disable_wyswyg_to_preserve_my_markup( $default ){
  if( get_post_type() === 'post') return false;
  return $default;
}

ほとんどの人にとって ↑これ↑ はオプションではありません。

それで、他にどのようなオプションがありますか？私が気付いた1つの回避策は、クラスでspanタグを使用し、HTMLタグの間に空白がないことを確認することです。これを行う場合、上記のオプション1を使用して、TinyMCEをすべて無効にする必要を回避できます。スパンを正しく表示するには、CSSをスタイルシートに追加する必要があることも覚えておいてください。

オプション3：オプション1 +スタイル付きスパンタグ

HTML

<a href="#"><img src="https://placehold.it/300x200?text=Don%27t+P+On+Me" alt="" /><span class="noautop">Some amazing descriptive text</span></a>

スタイルシートのCSS

.noautop {
    display: block;
}

オプション4：組み込みのメディアアップローダーショートコードを使用する

最初はこれを忘れていましたが、[キャプション]ショートコードは次のようになります。

[caption id="attachment_167" align="alignnone" width="169"]
    <img class="size-medium wp-image-167" src="http://example.com/example.png" alt="" width="169" height="300" />
    awesome caption
[/caption]

出力は次のようになります。

<figure id="attachment_167" style="width: 169px" class="wp-caption alignnone">
    <img class="size-medium wp-image-167" src="http://example.com/example.png" alt="" width="169" height="300" />
    <figcaption class="wp-caption-text">Some amazing descriptive text</figcaption>
</figure>

図のタグが不要な場合は、カスタムコンテンツのショートコードのようなプラグインを使用して、これを行うことができます。

[raw] <p>this content will not get filtered by wordpress</p> [/raw]

なぜエディタが思い通りに機能しないのですか？

私はこれを過去数年間にわたってうまく機能させるために無数の時間を費やしました。時々、完璧に機能する解決策を思いつきますが、WordPressはすべてを再び混乱させる更新をプッシュします。私がこれまでに完全に機能することがわかった唯一の解決策は、私が持っている最良の答えに導きます。

オプション5：保存されたHTMLエディターマークアッププラス

したがって、頭痛の種を省いて、これで十分です。デフォルトでは、Preserved HTML Editor Markup Plusは新しいページにのみ影響します。すでに作成されているページを変更する場合は、www.example.com / wp-admin / options-writing.phpにアクセスしてプラグイン設定を編集する必要があります。また、デフォルトの改行動作を変更することもできます。

注：これを使用する場合は、新しいWordPressの更新が開始されたときにサポートスレッドを確認してください。場合によっては、変更によって混乱が生じるため、プラグインが新しいバージョンで動作することを確認するのが最善です。

追加クレジット：問題のデバッグ/その他のTinyMCEオプションの編集

フィルターを使用する場合のように、手動でTinyMCE構成を検査して簡単に編集する場合は、高度なTinyMCE構成をインストールできます。それはあなたが見ることができますALLシンプルなインタフェースから構成されTinyMCEのオプションおよび編集しての。フィルターの場合と同じように、新しいオプションを追加することもできます。それは物事をずっと理解しやすくします。

たとえば、私はそれとPreserved HTML Editor Markup Plusの両方を持っています。以下のスクリーンショットは、高度なTinyMCE構成管理ページです。スクリーンショットは実際に存在するものの90％をカットしていますが、編集可能な有効な子と、保存されたHTMLエディターマークアッププラスが追加した子が示されています。

これは、エディターを完全にカスタマイズするだけでなく、何が起こっているかを確認するための非常に役立つ方法です。その場合、問題の原因を突き止めることさえできるかもしれません。プリザーブドHTMLエディターマークアップが有効になっているときに自分でパラメーターを確認した後、カスタムフィルターに追加できるいくつかの追加オプションが表示されました。

function fix_tiny_mce_before_init( $in ) {

    // You can actually debug this without actually needing Advanced Tinymce Config enabled:
    // print_r( $in );
    // exit();

  $in['valid_children']="+a[div|p|ul|ol|li|h1|span|h2|h3|h4|h5|h5|h6]";
    $in[ 'force_p_newlines' ] = FALSE;
    $in[ 'remove_linebreaks' ] = FALSE;
    $in[ 'force_br_newlines' ] = FALSE;
    $in[ 'remove_trailing_nbsp' ] = FALSE;
    $in[ 'apply_source_formatting' ] = FALSE;
    $in[ 'convert_newlines_to_brs' ] = FALSE;
    $in[ 'verify_html' ] = FALSE;
    $in[ 'remove_redundant_brs' ] = FALSE;
    $in[ 'validate_children' ] = FALSE;
    $in[ 'forced_root_block' ]= FALSE;

    return $in;
}
add_filter( 'tiny_mce_before_init', 'fix_tiny_mce_before_init' );

残念ながら、この方法は機能しませんでした。投稿を更新したり、エディタを切り替えたりするときに発生する正規表現またはJavaScriptがおそらく存在します。プリザーブドHTMLエディターのソースコードを見ると、管理側で一部のJavaScriptが機能していることがわかります。私の最後のアドバイスは、この機能をテーマに追加する場合のプラグインの動作を確認することです。

とにかく、私の答えでこれまでにこれを得た人は申し訳ありません。WordPressエディターに関する私の経験を共有したいと思ったので、他の人が私のようにこれを理解するために何時間も費やす必要がないことを願っています。