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

WSL + Homestead で WordPress のプラグイン開発環境を作る

目次1. はじめに2. 環境3. 作業1. 今回 WordPress をインストールするディレクトリを用意します2. Homestead に Webアプリケーションの設定を追加します3. Window …

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

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

WordPress

JP Markdown と Classic Editor をやめ、Gutenberg を利用することにしました

JP Markdown と Classic Editor をやめ、Gutenberg を利用することにしました。かなり便利そうです。

WordPress

【WordPress】Gutenberg の 画像ブロック(core/image)で相対URLをセットする

WordPress の Gutenberg において、「 画像ブロック (core/image)」で相対URLを使用するプラグインを作りましたので紹介します。

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 というエラーが発生しました。