イメージが削除された後に、WordPressビジュアルエディタがimage_send_to_editorフィルタを介してデフォルトのimg html出力に追加した追加のコードを削除しない

Question

WordPressエディタのデフォルトイメージhtml出力をレスポンシブイメージ画像タグに置き換えようとしています。 私はデフォルトのimg HTMLを置き換えるカスタム関数を作成し、image_send_to_editorフィルタを介してエディタに夢中：

function mystic_responsive_insert_image($html, $id, $caption, $title, $align, $url) { 
    $image_url = wp_get_attachment_url($id); 
    $attachment_id = attachment_url_to_postid($image_url); 
    $alt_text = get_post_meta($attachment_id, '_wp_attachment_image_alt', true); 
    if (!$alt_text) { $alt_text = esc_html(get_the_title($post_id)); }  
    $thumb_xl_hpt1 = wp_get_attachment_image_src($attachment_id, 'xl-thumb-hpt1'); 
    $thumb_lg_hpt1 = wp_get_attachment_image_src($attachment_id, 'lg-thumb-hpt1'); 
    $thumb_md_hpt1 = wp_get_attachment_image_src($attachment_id, 'md-thumb-hpt1'); 
    $thumb_sm_hpt1 = wp_get_attachment_image_src($attachment_id, 'sm-thumb-hpt1'); 
    $thumb_xs_hpt1 = wp_get_attachment_image_src($attachment_id, 'xs-thumb-hpt1');    
    $thumb_xl_hpt1_2x = wp_get_attachment_image_src($attachment_id, 'xl-thumb-hpt1-2x'); 
    $thumb_lg_hpt1_2x = wp_get_attachment_image_src($attachment_id, 'lg-thumb-hpt1-2x'); 
    $thumb_md_hpt1_2x = wp_get_attachment_image_src($attachment_id, 'md-thumb-hpt1-2x'); 
    $thumb_sm_hpt1_2x = wp_get_attachment_image_src($attachment_id, 'sm-thumb-hpt1-2x'); 
    $thumb_xs_hpt1_2x = wp_get_attachment_image_src($attachment_id, 'xs-thumb-hpt1-2x');  
    $thumb_data = array(     
     'thumb_xl_hpt1_2x'   => $thumb_xl_hpt1_2x[0], 
     'thumb_large_hpt1_2x' => $thumb_lg_hpt1_2x[0], 
     'thumb_medium_hpt1_2x' => $thumb_md_hpt1_2x[0], 
     'thumb_small_hpt1_2x' => $thumb_sm_hpt1_2x[0], 
     'thumb_xs_hpt1_2x'  => $thumb_xs_hpt1_2x[0],      
     'thumb_xl_hpt1'    => $thumb_xl_hpt1[0], 
     'thumb_large_hpt1' => $thumb_lg_hpt1[0], 
     'thumb_medium_hpt1' => $thumb_md_hpt1[0], 
     'thumb_small_hpt1' => $thumb_sm_hpt1[0], 
     'thumb_xs_hpt1'   => $thumb_xs_hpt1[0], 
     'thumb_alt'      => $alt_text 
    ); 

    $html = '<picture>'; 
    $html .= '<!--[if IE 9]><video style="display: none;"><![endif]-->'; 
    $html .= '<source srcset="' . $thumb_data['thumb_xl_hpt1'] . ', ' . $thumb_data['thumb_xl_hpt1_2x'] . ' 2x" media="(min-width: 1200px)">'; 
    $html .= '<source srcset="' . $thumb_data['thumb_large_hpt1'] . ', ' . $thumb_data['thumb_large_hpt1_2x'] . ' 2x" media="(min-width: 992px)">'; 
    $html .= '<source srcset="' . $thumb_data['thumb_medium_hpt1'] . ', ' . $thumb_data['thumb_medium_hpt1_2x'] . ' 2x" media="(min-width: 768px)">'; 
    $html .= '<source srcset="' . $thumb_data['thumb_small_hpt1'] . ', ' . $thumb_data['thumb_small_hpt1_2x'] . ' 2x" media="(min-width: 576px)">'; 
    $html .= '<!--[if IE 9]></video><![endif]-->'; 
    $html .= '<img srcset="' . $thumb_data['thumb_xs_hpt1'] . ', ' . $thumb_data['thumb_xs_hpt1_2x'] . ' 2x" alt="' . $thumb_data['thumb_alt'] . '">'; 
    $html .= '</picture>'; 
    return $html; 
} 
add_filter('image_send_to_editor', 'mystic_responsive_insert_image', 10, 9); 

私は、テストのポストを作成し、自分のコードが動作するかどうかを確認するために、それに画像を挿入します。します。しかし、イメージを削除して別のイメージを挿入した後、クロム・インスペクタの中で、削除されたイメージの追加のHTMLコードがまだページに残っていることがわかりました。画像タグの中に置かれたimgタグを除くすべてがまだそこにあります。エディタからイメージを削除すると、imgタグだけが削除されました。 私はhtmlに精通していない人のためにこれを作っています。なぜなら、投稿の画像を編集する場合、残ったコードをテキストエディタから削除できないことがあるからですこれが起こっていると私はそれを修正する方法はありますか？

Answer 1

画像を削除する際、ビジュアルエディタはimgタグ内の画像のみを削除し、残りのHTMLはまだそこに残っているからです。更新時に、データベース内のHTMLを更新します。 また、以前のHTMLに新しいHTMLを追加します。

保存する前にデータをフィルタリングするだけで済みます。画像がない「画像」タグを削除しなければならない。このために 'wp_insert_post_data'フックを使用することができます。