クラシックエディターでメディア配置時に属性を削除する方法

はじめに

クラシックエディターでメディアを挿入すると、<img>タグに多くの属性が付き、さらに画像が自動的に<a>タグで囲まれます。

そこで、メディアを投稿本文に挿入する際に、<img>タグから不要な属性を削除する処理を加えます。

この記事では、この方法について説明します。

完成イメージ

<a href="画像URL">
  <img src="画像URL" alt="" width="450" height="300" class="alignnone size-full wp-image-101751" />
</a>

<img src="画像URL" />

実装手順

以下のコードをfunctions.phpに追加します。

 * 画像HTMLから不要な属性とaタグを削除
 *
 * @param string $html 画像HTML
 * @return string  不要な属性を削除した画像HTML
 */
function remove_image_attribute($html) {
  // aタグを削除
  $html = preg_replace('/<a\s[^>]*>|<\/a>/', '', $html);

  // imgタグの属性を削除
  $html = preg_replace('/(width|height|class|title|alt)="[^"]*"\s*/', '', $html);

  return $html;
}


add_filter('image_send_to_editor', 'remove_image_attribute', 10);

参考：サムネイルから不要な属性を削除する方法

エントリーカードなどのサムネイルの<img>タグから不要な属性を削除します。
だし、NO IMAGE（サムネイル未設定時に表示される画像）は対象外です。

完成イメージ

<img width="450" height="300" src="画像URL" class="entry-card-thumb-image card-thumb-image wp-post-image" alt="" decoding="async" fetchpriority="high">

<img alt="" src="画像URL" decoding="async" fetchpriority="high">

実装手順

以下のコードをfunctions.phpに追加します。

add_filter('post_thumbnail_html', 'remove_image_attribute', 10);

さいごに

今回紹介した方法を使えば、クラシックエディターでメディアを配置する際に、<img>タグから不要な属性を削除し、スッキリとしたHTMLを出力できます。
また、サムネイル画像の不要な属性も除去できるため、ページの軽量化やコードの整理にも役立ちます。