2026年6月17日

WordPressのGutenbergブロックにMediaUploadを使う方法

カスタマイズ

はじめに

ここでは、WordPressのGutenbergエディタをより効果的に活用するために、MediaUploadという機能を使用する方法について紹介します。MediaUploadは、カスタムブロック内でメディアファイルを選択したりアップロードしたりするための便利なオプションです。これは、ユーザーがウェブサイト上の画像や動画を簡単に管理でき、記事の作成と編集に役立ちます。

症状・背景

このテーマが必要になる主な場面:

<カスタムブロック内でメディアファイルを選択する必要がある場合>
<既存のGutenbergブロックを拡張してメディア管理機能を追加したい場合>
<ウェブサイト上で動画や画像を簡単にアップロード・編集したい場合>
<ユーザーがコンテンツ作成時にメディアファイルへのアクセスを容易にしたい場合>

手順・設定方法

ステップ1: MediaUploadを使用するためのセットアップ

# WordPressプロジェクトディレクトリに移動します
cd /var/www/html/wordpress

# 任意のカスタムブロックファイルを開きます（例：src/block.js）
nano src/block.js

# MediaUploadを使用するための基本的なJavaScriptコードを追加します
import { MediaUpload } from '@wordpress/editor';

ステップ2: メディアアップロード機能を追加

# カスタムブロック内でMediaUploadを使用してメディアファイルを選択できるようにします
const onSelectImage = ( media ) => {
    setAttributes( { imageId: media.id } );
};

return (
    <MediaUpload
        onSelect={onSelectImage}
        allowedTypes={['image']}
        render={({ open }) => (
            <button onClick={open}>画像をアップロード</button>
        )}
    />
);

ステップ3: カスタムブロックの機能拡張

# 任意のカスタムブロックファイルを開きます（例：src/block.json）
nano src/block.json

# ブロック定義にMediaUploadを使用するための追加設定を追加します
{
    "apiVersion": 2,
    "name": "my-block",
    "title": "My Custom Block",
    "category": "widgets",
    "icon": "smiley",
    "keywords": [
        "custom",
        "block"
    ],
    "attributes": {
        "imageId": {
            "type": "number",
            "default": 0
        }
    },
    "supports": {
        "html": false,
        "align": ["wide", "full"]
    }
}

ステップ4: カスタムブロックの機能テスト

# WordPressプロジェクトディレクトリに移動します
cd /var/www/html/wordpress

# ブロックをビルドし、ウェブサイトで使用可能にする
npm run build
wp plugin activate my-custom-block-plugin

注意事項

<実践的な注意点1>: MediaUploadを使用する際は、必要なJavaScriptライブラリや依存関係をインストールしておくことが重要です。
<実践的な注意点2>: カスタムブロック内でMediaUploadを使用する際には、ユーザーインターフェースが直感的で使いやすいようデザインすることが大切です。
<セキュリティ上の注意>: メディアファイルのアップロードや管理機能を追加する際は、適切な認証とアクセス制御を確保することを忘れないでください。
<パフォーマンス/運用上の注意>: あまりにも多くのメディアファイルを一度にアップロードすると、ウェブサイトのパフォーマンスが低下することがあります。適切な管理策を講じてください。

まとめ

1. MediaUploadのインポート: MediaUploadを使用するには、@wordpress/editorからimportする必要があります。

2. onSelectメソッド: メディアファイルを選択したときに呼び出されるメソッドを定義します。

3. ブロックのJSON設定: カスタムブロック内でMediaUploadを使用するための属性とサポート機能を追加します。

4. ビルドとアクティベーション: ブロックをビルドし、WordPressプラグインとして有効にすることで、ウェブサイトで使用可能になります。

Post Views: 4