📷

カスタムブロックでWordPressの標準機能を活用してレスポンシブ画像を実装する方法

2025/09/22に公開

 🎯 はじめにカスタムブロック開発でMediaUploadコンポーネントを使って画像を選択し、その画像を表示するために<img>タグを手動で生成したところ、レスポンシブ属性（srcsetやsizes）が含まれていないことに気づきました。WordPressのコア機能は通常、投稿本文内の画像に自動的にレスポンシブ属性を付与してくれるのですが、カスタムブロック内で手動生成した<img>タグには適用されないということがわかりました。この問題を解決する方法を探していたところ、WordPressのthe_contentフィルターとwp-image-{ID}クラスを組み合わせた解決方法にたどり着きました。
wp-image-{ID}クラスは、WordPressが画像に自動的に付与するクラス名で、画像の識別に使用されます。WordPressで画像をアップロードすると、自動的にwp-image-{ID}というクラスが付与されます。IDの部分には画像のアタッチメントIDが入ります。
例えば、画像のIDが123の場合、wp-image-123というクラスが生成されます。

 ⚙️ WordPressのレスポンシブ画像機能の仕組みWordPressでは、the_contentフィルターを通じてコンテンツ内の<img>タグに対して自動的にレスポンシブ属性を付与します。カスタムブロックのsave関数で生成されたHTMLも、このフィルターを通ることでsrcsetやsizes属性が自動生成されます。

 💻 実際のコード例<!-- WordPressが自動生成する画像タグ -->
<img width="1216" 
     height="764" 
     src="http://localhost/wp-content/uploads/2025/09/sample-image.png" 
     alt="サンプル画像" 
     class="wp-image-123" 
     loading="lazy" 
     srcset="http://localhost/wp-content/uploads/2025/09/sample-image.png 1216w, 
             http://localhost/wp-content/uploads/2025/09/sample-image-300x188.png 300w, 
             http://localhost/wp-content/uploads/2025/09/sample-image-1024x643.png 1024w, 
             http://localhost/wp-content/uploads/2025/09/sample-image-768x483.png 768w" 
     sizes="auto, (max-width: 1216px) 100vw, 1216px">
このクラスは、WordPressのコア機能が画像を識別するために使用されます。

 ⚖️ wp-image-{ID}を使う場合と使わない場合の比較
 wp-image-{ID}を使う場合の注意点
 1. WordPressのメディアライブラリに依存// 画像IDが必須となるため、外部画像や動的画像で使用できない
const imageAttributes = getImageAttributes({
    id: image.id, // 必須パラメータ
    src: image.url,
    alt: image.alt
});
外部の画像や、動的に生成される画像には使用できません。WordPressのメディアライブラリに登録された画像のみが対象です。

 ❌ wp-image-{ID}を使わない場合のデメリット
 1. 他のプラグインと相性が悪くなる画像最適化プラグインなどがwp-image-{ID}クラスを前提に作られている場合、独自のクラス名では正しく動作しません。

 2. 画像を識別する仕組みを自分で作らないといけないWordPressの便利な機能（画像編集、メタデータ取得など）をそのまま使えなくなります。

 3. 開発が大変になるチーム開発での一貫性の維持や、WordPressのアップデート時の修正対応が必要になります。

 🛠️ カスタムブロックでの実装例WordPressカスタムブロック開発において、wp-image-{ID}クラスを活用した画像処理ユーティリティを実装してみました。カスタムブロックでは、エディター側とフロントエンド側の両方で画像を扱う必要があるので、このようなユーティリティがあると便利です。

 🔧 基本的な画像属性生成ユーティリティカスタムブロック開発で再利用可能なユーティリティとして、src/utils/image-attr.jsファイルを作成しました。このファイルは複数のカスタムブロックで共通して使用できます。
// src/utils/image-attr.js
export const getImageAttributes = ({
    id,           // 画像のアタッチメントID（wp-image-{ID}クラス生成に必要）
    src,          // 画像のURL
    alt = '',     // alt属性（デフォルトは空文字）
    className = '' // 追加のCSSクラス名
} = {}) => {
    // 必須パラメータの検証：IDとsrcが両方とも存在する場合のみ処理を続行
    if (!id || !src) {
        return {};
    }

    // wp-image-{ID}クラスを自動付与
    // 追加のクラス名が指定されている場合は結合、そうでなければwp-image-{ID}のみ
    const baseClassName = className ? 
        `wp-image-${id} ${className}`.trim() : 
        `wp-image-${id}`;

    return {
        src,
        alt,
        className: baseClassName
    };
};
このユーティリティを使うと、カスタムブロック内で画像の属性を簡単に生成できます。wp-image-{ID}クラスも自動で付与されるので、WordPressのthe_contentフィルターがレスポンシブ属性を自動生成してくれて、後からスタイルを適用するのも楽になります。
!重要: 実際の動作は、カスタムブロックのsave関数で生成されたHTMLがthe_contentフィルターを通ることで実現されます。

 🎨 画像ごとの属性設定// 画像の用途に応じて属性を変更
const heroImageAttributes = getImageAttributes({
    id: image.id,
    src: image.url,
    alt: image.alt,
    className: 'wp-block-cb-gallery__hero'
  
});

const thumbnailAttributes = getImageAttributes({
    id: image.id,
    src: image.url,
    alt: image.alt,
    className: 'wp-block-cb-gallery__thumbnail'
});

 📝 カスタムブロックでの使用例// カスタムブロックのEditコンポーネント内での使用例
import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
import { Button } from '@wordpress/components';
import { getImageAttributes } from '../utils/image-attr';

const Edit = ({ attributes, setAttributes }) => {
    // ブロックの属性から画像情報を取得
    const { imageId, imageUrl, imageAlt } = attributes;
    
    // 画像選択時のコールバック関数
    const onSelectImage = (media) => {
        setAttributes({
            imageId: media.id,      // 画像のアタッチメントID
            imageUrl: media.url,    // 画像のURL
            imageAlt: media.alt     // 画像のalt属性
        });
    };
    
    // ユーティリティ関数を使って画像属性を生成
    const imageAttributes = getImageAttributes({
        id: imageId,
        src: imageUrl,
        alt: imageAlt,
        className: 'wp-block-cb-image-gallery__item'
    });
    
    return (
        <div className="wp-block-cb-image-gallery">
            {/* 画像選択用のメディアアップローダー */}
            <MediaUploadCheck>
                <MediaUpload
                    onSelect={onSelectImage}        // 画像選択時のコールバック
                    allowedTypes={['image']}        // 画像ファイルのみ許可
                    value={imageId}                 // 現在選択されている画像ID
                    render={({ open }) => (
                        <Button onClick={open}>
                            {imageId ? '画像を変更' : '画像を選択'}
                        </Button>
                    )}
                />
            </MediaUploadCheck>
            
            {/* 画像が選択されている場合のみ画像を表示 */}
            {imageId && (
                <img {...imageAttributes} />
            )}
        </div>
    );
};

 ✨ まとめカスタムブロック開発において、wp-image-{ID}クラスを付与することで、WordPressの標準機能を活用してレスポンシブ画像を実装できます。the_contentフィルターを通じて自動的にsrcsetやsizes属性が生成されるため、手動での実装が不要になることがわかりました😄
この方法を知ってから、カスタムブロックでの画像処理がずいぶん楽になりました。ぜひ試してみてください！

 📚 参考資料
WordPress Developer Resources - wp_filter_content_tags() - コンテンツ内の画像タグにレスポンシブ属性を付与する関数

WordPress Developer Resources - wp_img_tag_add_srcset_and_sizes_attr() - 画像タグにsrcsetとsizes属性を追加する関数

WordPress Developer Resources - wp_get_attachment_image() - WordPressが自動的に画像に付与するクラス名について

Responsive Images in WordPress 4.4 — Make WordPress Core - WordPress 4.4で導入されたレスポンシブ画像機能について

カスタムブロックでWordPressの標準機能を活用してレスポンシブ画像を実装する方法

🎯 はじめに

⚙️ WordPressのレスポンシブ画像機能の仕組み

💻 実際のコード例

⚖️ `wp-image-{ID}`を使う場合と使わない場合の比較

`wp-image-{ID}`を使う場合の注意点

1. WordPressのメディアライブラリに依存

❌ `wp-image-{ID}`を使わない場合のデメリット

1. 他のプラグインと相性が悪くなる

2. 画像を識別する仕組みを自分で作らないといけない

3. 開発が大変になる

🛠️ カスタムブロックでの実装例

🔧 基本的な画像属性生成ユーティリティ

🎨 画像ごとの属性設定

📝 カスタムブロックでの使用例

✨ まとめ

📚 参考資料

Discussion