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

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

関連記事

WordPress の Attitude テーマに日本語翻訳ファイルを使用する(子テーマ利用)

WordPress の Attitude テーマに日本語翻訳ファイルを追加する方法です。 子テーマを利用していることを前提としており、子テーマのディレクトリ側に翻訳ファイルを追加します。 目次前置き( …

WordPress

WordPress に関する srcset と sizes 属性値の簡単な説明

目次1. はじめに2. srcset と sizes の仕組み3. WordPress での srcset と sizes3-1. sizes 属性3-2. srcset 属性3-3. [設定] &# …

WordPress

【WordPress】Table of Contents Plus が生成した目次の直前に、ウィジェット(広告など)を表示するコードを自分で書く

Table of Contents Plus (TOC+) という WordPressプラグインが生成した目次の直前に、ウィジェット を表示する方法について説明します。 ※ 2018年6月6日: 目次 …

WordPress

【WordPress】Gutenberg をカスタマイズするための情報

WordPress の Gutenberg をカスタマイズするための情報を紹介します。

WordPress

WordPress の機能を使って独自のPHPファイルにヘッダーとフッターを追加するサンプルページを作成しました

WordPress の持つ get_header(), get_footer() 関数を利用して、独自のPHPファイルにヘッダとフッターを表示するサンプルページを作成しました。 サンプルページのURL …