WordPress

【WordPress】img タグに自動的に追加される属性について

投稿日:

1. はじめに

WordPress で投稿ページ画像を貼った場合、その画像を表す <img> タグにどのような属性が自動的に追加されるかについて調べたので簡単に紹介します。

2. 環境

WordPress 5.6.1

3. img タグに自動追加される属性

コンテンツに対する処理

重要なのは、wp_filter_content_tags() 関数です。ここで、渡されたコンテンツ内の <img> タグに対していろいろ処理を行っています。

抽出した <img> タグに対して主にやっている処理は以下になります。

  1. width, height 属性を追加する。
  2. srcset, sizes 属性を追加する。
  3. loading 属性を追加する(デフォルトの値は lazy)。

実際はそれぞれ実行する条件があるのですが、できるだけ追加される方向で処理されます。

実行されるタイミング

wp_filter_content_tags() 関数は、default-filters.php ファイル内で the_content というフィルターに登録されています。

add_filter( 'the_content', 'wp_filter_content_tags' );

この the_content というフィルターは、投稿ページの本文を出力する関数 the_content 内で実行されます。

4. おわりに

意外とシンプルでした。

ただ、このあたりの処理はまた変わりそうなので、注意してないといけません。

5. 参考

📂-WordPress

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

Web Vitals

WordPress: 特定の記事に特定のCSSを出力する方法

WordPress: 特定の記事に特定のCSSを出力する方法

WordPress

WordPress テーマ STINGER 8 で、style.css の変更をすぐに反映させる方法

WordPress の無料テーマである STINGER 8 のカスタマイズのお話です。 スポンサードリンク 目次1. 問題点2. 対策準備作業style.css に変更を加えた後に必要な作業3. まと …

WordPress

【WordPress】Failed to load plugin url: /wp-content/plugins/post-snippets/tinymce/langs/ja.js というエラーが表示されました

WordPressで、Failed to load plugin url: /wp-content/plugins/post-snippets/tinymce/langs/ja.js というエラーが発生しました。

WordPress の投稿記事に画像を貼る手順と sizes 属性値の変更

目次1. はじめに2. 事前の追加設定3. 投稿記事を作成する時に、画像を挿入する手順[メディアを追加] ボタンから画像を挿入4. 参考 1. はじめに この Webサイトは WordPress で作 …

WordPress

WordPress: サイトヘルスの特定のチェック項目を無効にする方法

WordPress: サイトヘルスの特定のチェック項目を無効にする方法について説明します。