WordPressのメディアアップローダーでファイルアップロード機能を自作する実装する方法(サンプルコード付き)

WordPress

投稿日：2025年03月08日(土)

みなさんこんにちは！エンジニアの高澤です！

今回はWordPressのメディアアップローダーでファイルアップロード機能を自作する実装する方法をわかりやすく解説していきたいと思います。

メディアアップローダーとは、WordPressに画像や動画などのメディアファイルをドラッグ＆ドロップでアップロードするUIを提供してくれる機能のことを言います。

メディアアップローダーはWordPressでファイルを扱う場合は大体必要になる機能であり、ユーザーにとって使いやすくするための重要であり基本的な機能とも言えるので、WordPressエンジニアであれば知っておきたい機能と言っても過言ではありません。

今回は、このメディアアップローダーをご自身のWebサイト制作や運営、テーマ・プラグイン開発などで使えるように構成しておりますので、よろしければご活用ください。

1 メディアアップローダーとは
2 メディアアップローダーの実装方法
3 まとめ

メディアアップローダーとは

WordPressの管理画面からドラッグ＆ドロップで直感的にファイルをアップロードでき、編集や管理も簡単に行えます。

下図が、メディアアップローダーになります。

WordPressでは、管理画面の「メディア」や「投稿」、「固定ページ」、またプラグインの設定ページなどで画像をアップロードする際にこのメディアアップローダーが使われています。

アップロードしたファイルはWordPressに保存されます。つまり、管理画面左メニュー「メディア」に保存されます。（WordPressコアのディレクトリ的には「wp-content/uploads」に保存されます）

メディアアップローダーは、投稿や固定ページなどでファイルを簡単にアップロードできるだけでなく、プラグインやテーマを開発する際にも応用可能ですし、ファイルアップロード機能としてしばしば利用されます。

メディアアップローダーの実装方法

それでは早速、メディアアップローダーの実装方法について解説いたします。

実装する前に、事前に実装する内容をおさらいしておきましょう。

今回は、WordPress管理画面「設定」のサブメニューに新たに「メディアアップロード」という項目を追加します。設定ページの内容は割と下図のようにシンプルな構成としております。

「画像を選択」ボタンと「削除」ボタンを用意し、「画像を選択」ボタンをクリックしたら、メディアアップローダーが起動するようにします。

画像を選択して、メディアアップローダーの右下の「画像を使用」ボタンをクリックすると、設定ページへ画像がセッティングされます。

セッティングしたら、「変更を保存」をクリックすることで設定を保存します。

また、今回実装するメディアアップローダーの機能は、動画ファイルや音声ファイルにも対応しております。

動画ファイルをアップロードすると、下図のように反映されます。

音声ファイルをアップロードすると、下図のように反映されます。

今回実装する内容としてはこんな感じですが、基本的なことはカバーしておりますので、開発現場などのお仕事やご自身のブログのカスタマイズなどに応用しやすいようにいたしました。

内容を把握できたら、早速まずは機能を作ってみましょう。

以下のコードを、functions.phpへコピー＆ペーストしてください。

<?php
// メディアアップローダーのスクリプトを読み込む
function my_enqueue_media_uploader() {
    if ( ! did_action( 'wp_enqueue_media' ) ) {
        wp_enqueue_media();
    }
}
add_action( 'admin_enqueue_scripts', 'my_enqueue_media_uploader' );

// 管理画面に設定のサブメニューを追加
function my_custom_menu() {
    add_options_page(
        'メディアアップロード設定', // ページタイトル
        'メディアアップロード', // メニュータイトル
        'manage_options', // 権限
        'my-media-upload', // スラッグ
        'my_media_upload_page' // コールバック関数
    );
}
add_action('admin_menu', 'my_custom_menu');

// 設定ページのHTML
function my_media_upload_page() {
    ?>
    <div class="wrap">
        <h2>メディアアップロード設定</h2>
        <form method="post" action="options.php">
            <?php
            settings_fields('my_media_upload_group');
            do_settings_sections('my-media-upload');
            submit_button();
            ?>
        </form>
    </div>
    <?php
}

// 設定登録
function my_media_upload_settings() {
    register_setting('my_media_upload_group', 'my_uploaded_media');
    add_settings_section('my_media_section', 'メディア設定', null, 'my-media-upload');
    add_settings_field('my_media_field', 'メディアを選択', 'my_media_field_callback', 'my-media-upload', 'my_media_section');
}
add_action('admin_init', 'my_media_upload_settings');

// フィールドのHTML
function my_media_field_callback() {
    $media = get_option('my_uploaded_media');
    $media_type = '';

    if ($media) {
        $file_ext = pathinfo($media, PATHINFO_EXTENSION);
        if (in_array($file_ext, ['jpg', 'jpeg', 'png', 'gif', 'webp'])) {
            $media_type = 'image';
        } elseif (in_array($file_ext, ['mp3', 'wav', 'ogg'])) {
            $media_type = 'audio';
        } elseif (in_array($file_ext, ['mp4', 'webm', 'ogg', 'mov'])) {
            $media_type = 'video';
        }
    }
    ?>
    <input type="text" id="my_uploaded_media" name="my_uploaded_media" value="<?php echo esc_url($media); ?>" style="width:60%;" />
    <button type="button" class="button" id="upload_media_button">メディアを選択</button>
    <button type="button" class="button" id="remove_media_button">削除</button>
    <br>

    <div id="preview_wrapper" style="margin-top:10px;">
        <?php if ($media_type === 'image'): ?>
            <img id="preview_media" src="<?php echo esc_url($media); ?>" style="max-width:300px; display:block;">
        <?php elseif ($media_type === 'audio'): ?>
            <audio id="preview_media" controls style="display:block;">
                <source src="<?php echo esc_url($media); ?>">
            </audio>
        <?php elseif ($media_type === 'video'): ?>
            <video id="preview_media" controls style="max-width:300px; display:block;">
                <source src="<?php echo esc_url($media); ?>">
            </video>
        <?php endif; ?>
    </div>

    <script>
        jQuery(document).ready(function($){

            // メディアアップローダー
            $('#upload_media_button').click(function(e) {
                e.preventDefault();
                var custom_uploader = wp.media({
                    title: 'メディアを選択',
                    button: { text: 'メディアを使用' },
                    multiple: false
                }).on('select', function() {
                    var attachment = custom_uploader.state().get('selection').first().toJSON();
                    $('#my_uploaded_media').val(attachment.url);

                    var file_ext = attachment.url.split('.').pop().toLowerCase();
                    var preview_html = '';

                    if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(file_ext)) {
                        preview_html = '<img id="preview_media" src="' + attachment.url + '" style="max-width:300px; display:block;">';
                    } else if (['mp3', 'wav', 'ogg'].includes(file_ext)) {
                        preview_html = '<audio id="preview_media" controls style="display:block;"><source src="' + attachment.url + '"></audio>';
                    } else if (['mp4', 'webm', 'ogg', 'mov'].includes(file_ext)) {
                        preview_html = '<video id="preview_media" controls style="max-width:300px; display:block;"><source src="' + attachment.url + '"></video>';
                    }

                    $('#preview_wrapper').html(preview_html);
                }).open();
            });

            // メディア削除
            $('#remove_media_button').click(function() {
                $('#my_uploaded_media').val('');
                $('#preview_wrapper').html('');
            });
        });
    </script>
    <?php
}

ペーストが完了したら、管理画面を更新してください。

WordPress管理画面左メニュー「設定」に「メディアアップロード」という項目が追加され、設定ページを開けたのが、確認できたかと思います。

これで実装は完了です。お疲れ様でした！

念の為、サンプルコードのポイントとなるコードごとに解説いたします。

メディアアップローダースクリプトの読み込み

以下のコードは、WordPressのメディアアップローダーを管理画面に読み込むためのものです。

// メディアアップローダーのスクリプトを読み込む
function my_enqueue_media_uploader() {
    if ( ! did_action( 'wp_enqueue_media' ) ) {
        wp_enqueue_media();
    }
}
add_action( 'admin_enqueue_scripts', 'my_enqueue_media_uploader' );

wp_enqueue_media()関数を実行することで、WordPressのメディアライブラリ機能を利用できるようになります。

did_action(‘wp_enqueue_media’) をチェックし、すでにロードされている場合は重複しないようにしています。admin_enqueue_scripts フックを使用して、管理画面でこのスクリプトが適用されるように設定されています。

設定メニューの追加

以下のコードは、WordPressの管理画面の「設定」メニューに「メディアアップロード」サブメニューを追加します。（※メディアアップローダーの実装に必須ではありません）

// 管理画面に設定のサブメニューを追加
function my_custom_menu() {
    add_options_page(
        'メディアアップロード設定', // ページタイトル
        'メディアアップロード', // メニュータイトル
        'manage_options', // 権限
        'my-media-upload', // スラッグ
        'my_media_upload_page' // コールバック関数
    );
}
add_action('admin_menu', 'my_custom_menu');

add_options_page()関数の第一引数はページのタイトル、第二引数はメニューのタイトル、第三引数は管理者権限 (manage_options)、第四引数はスラッグ (URLの識別名)、第五引数はこの後解説する設定ページの表示を担当するコールバック関数「my_media_upload_page」です。

設定ページのHTML

以下のコードは、管理画面にメディアアップロードの設定ページを表示するためのものです。（※メディアアップローダーの実装に必須ではありません）

// 設定ページのHTML
function my_media_upload_page() {
    ?>
    <div class="wrap">
        <h2>メディアアップロード設定</h2>
        <form method="post" action="options.php">
            <?php
            settings_fields('my_media_upload_group');
            do_settings_sections('my-media-upload');
            submit_button();
            ?>
        </form>
    </div>
    <?php
}

settings_fields(‘my_media_upload_group’)関数はフォームの認証トークンを設定し、do_settings_sections(‘my-media-upload’)関数で設定フィールドを挿入します。

最後に submit_button()関数で「変更を保存」ボタンを表示し、ユーザーが設定を保存できるようにしています。

設定の登録

以下のコードは、WordPressの設定APIを使用してカスタム設定を登録します。

// 設定登録
function my_media_upload_settings() {
    register_setting('my_media_upload_group', 'my_uploaded_media');
    add_settings_section('my_media_section', 'メディア設定', null, 'my-media-upload');
    add_settings_field('my_media_field', 'メディアを選択', 'my_media_field_callback', 'my-media-upload', 'my_media_section');
}
add_action('admin_init', 'my_media_upload_settings');

register_setting()関数を使い、「my_uploaded_media」というオプションを保存できるようにします。

また、add_settings_section()関数で「メディア設定」というセクションを作成し、add_settings_field() で「メディアを選択」というフィールドを追加します。管理画面の設定ページにメディアアップロード用のUIを追加する役割を担っています。

メディアアップロードの入力フィールド

以下の関数の部分は、設定ページでメディアファイルを選択するための入力フィールドを作成します。

// フィールドのHTML
function my_media_field_callback() {
    $media = get_option('my_uploaded_media');
    $media_type = '';

    if ($media) {
        $file_ext = pathinfo($media, PATHINFO_EXTENSION);
        if (in_array($file_ext, ['jpg', 'jpeg', 'png', 'gif', 'webp'])) {
            $media_type = 'image';
        } elseif (in_array($file_ext, ['mp3', 'wav', 'ogg'])) {
            $media_type = 'audio';
        } elseif (in_array($file_ext, ['mp4', 'webm', 'ogg', 'mov'])) {
            $media_type = 'video';
        }
    }

... 以下省略　...

get_option(‘my_uploaded_media’)関数で保存されているメディアのURLを取得し、ファイルの拡張子をチェックします。その拡張子に応じて、image、audio、video のどれかのタイプを判別し、プレビュー表示に活用します。

メディアのプレビューとボタン

以下のコードの部分では、<input>フィールドでURLを表示し、メディアを選択・削除するためのボタンを設置します。

    <input type="text" id="my_uploaded_media" name="my_uploaded_media" value="<?php echo esc_url($media); ?>" style="width:60%;" />
    <button type="button" class="button" id="upload_media_button">メディアを選択</button>
    <button type="button" class="button" id="remove_media_button">削除</button>
    <br>

    <div id="preview_wrapper" style="margin-top:10px;">
        <?php if ($media_type === 'image'): ?>
            <img id="preview_media" src="<?php echo esc_url($media); ?>" style="max-width:300px; display:block;">
        <?php elseif ($media_type === 'audio'): ?>
            <audio id="preview_media" controls style="display:block;">
                <source src="<?php echo esc_url($media); ?>">
            </audio>
        <?php elseif ($media_type === 'video'): ?>
            <video id="preview_media" controls style="max-width:300px; display:block;">
                <source src="<?php echo esc_url($media); ?>">
            </video>
        <?php endif; ?>
    </div>

メディアの種類に応じてプレビューを表示します。画像なら<img>、音声なら<audio>、動画なら <video>を使い、それぞれのメディアを適切にプレビューできるようにします。

JavaScriptによるメディア選択とプレビュー更新

以下のコードの部分は、メディアを選択するとURLを取得し、適切なプレビューを表示する機能を提供します。また、削除ボタンを押すとURLがクリアされ、プレビューも消えます。

    <script>
        jQuery(document).ready(function($){

            // メディアアップローダー
            $('#upload_media_button').click(function(e) {
                e.preventDefault();
                var custom_uploader = wp.media({
                    title: 'メディアを選択',
                    button: { text: 'メディアを使用' },
                    multiple: false
                }).on('select', function() {
                    var attachment = custom_uploader.state().get('selection').first().toJSON();
                    $('#my_uploaded_media').val(attachment.url);

                    var file_ext = attachment.url.split('.').pop().toLowerCase();
                    var preview_html = '';

                    if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(file_ext)) {
                        preview_html = '<img id="preview_media" src="' + attachment.url + '" style="max-width:300px; display:block;">';
                    } else if (['mp3', 'wav', 'ogg'].includes(file_ext)) {
                        preview_html = '<audio id="preview_media" controls style="display:block;"><source src="' + attachment.url + '"></audio>';
                    } else if (['mp4', 'webm', 'ogg', 'mov'].includes(file_ext)) {
                        preview_html = '<video id="preview_media" controls style="max-width:300px; display:block;"><source src="' + attachment.url + '"></video>';
                    }

                    $('#preview_wrapper').html(preview_html);
                }).open();
            });

            // メディア削除
            $('#remove_media_button').click(function() {
                $('#my_uploaded_media').val('');
                $('#preview_wrapper').html('');
            });
        });
    </script>

上記コードについて解説いたします。

まず、「wp.media」を利用してメディアライブラリを開くダイアログを作成し、ボタンのラベルを「メディアを使用」に設定しています。さらに、「multiple: false」にすることで、1つのファイルのみ選択可能に制限しています。

メディアが選択されると、「first().toJSON()」を用いて選択されたファイルの情報を取得し、そのURLをテキスト入力フィールドに格納します。その後、ファイルの拡張子を判別し、画像なら<img>、音声なら<audio>、動画なら<video>を用いて適切なプレビューを表示するようになっています。

また、「削除」ボタンを押すと、入力フィールドの値をクリアし、プレビューエリアの内容も削除する処理が実行されます。これにより、ユーザーは選択したメディアを簡単に変更することができます。

まとめ

今回は、WordPressのメディアアップローダーを活用してファイルアップロード機能を自作する実装する方法を解説しました。

メディアアップローダーは、画像や動画、音声ファイルなどを簡単にアップロード・管理できる便利な機能であり、WordPressの開発において欠かせない要素の一つです。

特に、テーマやプラグイン開発を行う際には、ユーザーにとって使いやすいメディア管理機能を提供するために、適切に活用することが重要です。

当記事の内容を参考に、ご自身のWebサイト制作や運営、カスタム機能開発などに役立てていただければ幸いです。

執筆者

UMENOKI編集部高澤翔汰

歴5年目（2024年8月以降から5年目です）のエンジニアです！
CMSでのサイト構築とWebデザイン制作を兼任して5年目になります。
自作のiOSアプリ（iPhoneアプリ）やWordPressプラグインを開発することもあり、まだまだ現在進行形で勉強中です！

詳しく見る

お気軽に皆さんのご要望をお聞かせください！

どんなに些細なことでも構いません！よろしければ記事や当サイトへの「こんな記事があったら仕事とかで役に立つな〜」や「こうだったらもっと役に立つのに！」といったようなご要望等をお気軽にお聞かせください！今後のサービス改善にお役立てさせていただきます！

例1）Reactの技術記事を書いてほしい！
例2）WordPressの使い方とかを初心者向けに解説してほしい！...など

WordPressのメディアアップローダーでファイルアップロード機能を自作する実装する方法(サンプルコード付き)

メディアアップローダーとは

メディアアップローダーの実装方法

メディアアップローダースクリプトの読み込み

設定メニューの追加

設定ページのHTML

設定の登録

メディアアップロードの入力フィールド

メディアのプレビューとボタン

JavaScriptによるメディア選択とプレビュー更新

まとめ

UMENOKI編集部高澤翔汰

関連する記事

WordPressでアップロードした元の画像サイズ以外の画像自動生成を無効化する方法やメリットを解説

WordPressでログイン履歴の監視機能を実装してセキュリティ強化する方法や対策を徹底解説(プラグインなし)

プラグインなしでGTM(Googleタグマネージャー)のタグをfunctions.phpのフックで設定する方法

WordPress投稿一覧画面にカスタムフィールドなどの独自の項目を追加する実装方法

実務で使える！WordPressプラグインまとめチートシート（仕事で使えるものだけ厳選）

WordPressのブロック開発で古いブロックの非推奨(deprecated)を利用して互換性を維持する方法

お気軽に皆さんのご要望をお聞かせください！

無料でできる！CSVで大量の投稿データを一括でWordPressにインポートする方法

仕事で使える！WordPressでパンくずリストを実装する方法（自作＋プラグイン）

WordPressのリライトルールとは？URLをカスタマイズ方法を徹底解説！

初心者必見！WordPressでページネーションを実装する方法を徹底解説（自作コード付き）

初心者必見！WordPressでカスタムタクソノミーを実装する方法

WordPressのメディアアップローダーでファイルアップロード機能を自作する実装する方法(サンプルコード付き)

メディアアップローダーとは

メディアアップローダーの実装方法

メディアアップローダースクリプトの読み込み

設定メニューの追加

設定ページのHTML

設定の登録

メディアアップロードの入力フィールド

メディアのプレビューとボタン

JavaScriptによるメディア選択とプレビュー更新

まとめ

UMENOKI編集部 高澤 翔汰

関連する記事

WordPressでアップロードした元の画像サイズ以外の画像自動生成を無効化する方法やメリットを解説

WordPressでログイン履歴の監視機能を実装してセキュリティ強化する方法や対策を徹底解説(プラグインなし)

プラグインなしでGTM(Googleタグマネージャー)のタグをfunctions.phpのフックで設定する方法

WordPress投稿一覧画面にカスタムフィールドなどの独自の項目を追加する実装方法

実務で使える！WordPressプラグインまとめチートシート（仕事で使えるものだけ厳選）

WordPressのブロック開発で古いブロックの非推奨(deprecated)を利用して互換性を維持する方法

お気軽に皆さんのご要望をお聞かせください！

UMENOKI編集部高澤翔汰