WordPress

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

投稿日:2017年12月27日 更新日:

1. はじめに

この Webサイトは WordPress で作っているのですが、記事の中に画像を挿入する手順と、その画像をうまく表示させるために追加している設定について紹介したいと思います。

まずは、追加している設定からです。

2018年4月現在、この方法は使っていません。

2. 事前の追加設定

この Webサイトでは、WordPress が自動的に img タグに追加する srcset 及び sizes 属性値のうち、sizes だけ上書きするようにしてあります。

なぜこんなことをするのかというと、自動的に追加される sizes 属性値が、現在使用している自作テーマの画面サイズに合っていなかったためです。

元々、img タグは以下のように出力されていました(一例です)。

<img src="/wp-content/uploads/2017/12/foo-1024x696.png"
  alt="" class="alignnone size-medium wp-image-nnnn"
  srcset="
    https://example.com/wp-content/uploads/2017/12/foo-300x204.png 300w,
    https://example.com/wp-content/uploads/2017/12/foo-768x522.png 768w,
    https://example.com/wp-content/uploads/2017/12/foo-1024x696.png 1024w"
  sizes="(max-width: 1024px) 100vw, 1024px">

srcset 属性はこれで問題ありませんが、sizes 属性は問題があります。

ここで 1024px となっている値は、WordPress が内部で保存されている画像などからひっぱってきた値であり、現在使用しているテーマに合っていませんし、100vw というのも同じくテーマにフィットしていませんでした。

現在のテーマにあう値を出力するために、wp_calculate_image_sizes フィルターフックを使い、以下のように変更しています(functions.php)。

/**
 * img タグの sizes 属性値を上書きする
 */
function custom_wp_calculate_image_sizes( $sizes, $size ) {
    // テーマにフィットする幅を指定する
    return "(max-width: 767px) 70vw, (max-width: 991px) 350px, 500px";
}
add_filter('wp_calculate_image_sizes', 'custom_wp_calculate_image_sizes', 10 , 2);

この処理により、出力される img タグは 以下のようになります。

<img src="/wp-content/uploads/2017/12/foo-1024x696.png"
  alt="" class="alignnone size-medium wp-image-nnnn"
  srcset="
    https://example.com/wp-content/uploads/2017/12/foo-300x204.png 400w,
    https://example.com/wp-content/uploads/2017/12/foo-768x522.png 868w,
    https://example.com/wp-content/uploads/2017/12/foo-1024x696.png 1124w"
  sizes="(max-width: 767px) 70vw, (max-width: 991px) 350px, 500px">

sizes 属性値が変わっていることが分かります。

ちなみに、ここでの sizes 属性では以下を指定しています。

  1. viewport の幅が 767px 以下の場合は、70vw の幅で画像を表示する。
    • 簡単に言うと、ウィンドウ幅の70%の大きさで表示するということです。
    • この Webサイトはこのサイズの時、1カラムになりますので この指定にしました。
  2. それ以外の場合で、viewport の幅が 991px 以下の場合は、350px の幅で画像を表示する。
  3. それ以外の場合は、500px の幅で画像を表示する。

あとは Webブラウザが srcset の中の画像から一番適したものを選んでくれます。

3. 投稿記事を作成する時に、画像を挿入する手順

[メディアを追加] ボタンから画像を挿入

記事の中に画像を貼る際には、[メディアを追加] というボタンから画像を挿入しています。

[メディアを追加] ボタン

この時、[添付ファイルの表示設定] というウィンドウで指定したサイズが、img タグの src, width, height 属性としてセットされます。

添付ファイルの表示設定

ここで src に指定された画像は、srcset 属性値に非対応のブラウザで使用されますので、一番表示して欲しいサイズを選んでおく必要があります。

挿入された HTMLコードは、こんな感じです。

<a href="xxxx.png"><img src="xxxx.png" alt="" class="alignnone size-full wp-image-nnnn" width="787" height="277" /></a>

※ 先ほどのウィンドウで、[リンク先] として「メディアファイル」を選択しましたので、a タグで囲まれています。

やることはこれだけです。あとは、WordPress が srcsetsizes 属性を追加してくれます。Webブラウザは、sizes 属性値で決定されるサイズで画像を表示するため、srcset に指定された画像ファイルの中から最適なものを選んでダウンロード・表示してくれます。

4. 参考

📂-WordPress
-

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

WordPress

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

WordPressの投稿ページに画像を貼った場合、その img タグに自動的に追加される属性について説明します。

WordPress

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

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

WordPress

【WordPress】特定の画像には Easy FancyBox を適用させない方法

目次1. WordPress の Easy FancyBox プラグインについて問題点2. 特定の画像リンクで、Easy FancyBox を適用させない方法3. デモ 1. WordPress の …

WordPress

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

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

WordPressサイトで現在表示しているページの編集ページを開くブックマークレットを作りました

目次概要編集ページへのURL作成したブックマークレットまとめ 概要 WordPressにログインした後、通常のページ(管理ページではなく)を表示すると、画面上部に管理ツールバーが表示されます。このツー …