WordPressのコメントフォームに自作で画像アップロード機能を実装する方法を徹底解説(プラグインなし)

<?php
// コメントフォームにファイルアップロードを許可するためenctype追加
function add_comment_form_enctype() {
    echo ' <script>
        document.addEventListener("DOMContentLoaded", function() {
            var form = document.getElementById("commentform");
            if (form) {
                form.setAttribute("enctype", "multipart/form-data");
            }
        });
    </script>';
}
add_action('comment_form', 'add_comment_form_enctype');

function add_comment_image_upload_field() {
    echo '<p class="comment-form-image">
        <label for="comment_image">画像をアップロード:</label>
        <input type="file" name="comment_image" id="comment_image" accept="image/*">
    </p>';
}

// ログイン・ログアウトどちらの状態でも画像アップロードフィールドを表示
add_action('comment_form_after_fields', 'add_comment_image_upload_field'); // ログアウト時
add_action('comment_form_logged_in_after', 'add_comment_image_upload_field'); // ログイン時

function save_comment_image_upload($comment_id) {
    if (
        !empty($_FILES['comment_image']['name']) &&
        !empty($_FILES['comment_image']['tmp_name'])
    ) {
        require_once(ABSPATH . 'wp-admin/includes/file.php');
        require_once(ABSPATH . 'wp-admin/includes/image.php');
        require_once(ABSPATH . 'wp-admin/includes/media.php');

        $uploadedfile = $_FILES['comment_image'];
        $upload_overrides = ['test_form' => false];

        // アップロード前にユーザー権限をチェック
        $user_id = get_current_user_id();
        $requires_moderation = !current_user_can('moderate_comments');

        // ファイルをアップロード
        $movefile = wp_handle_upload($uploadedfile, $upload_overrides);

        if ($movefile && !isset($movefile['error'])) {
            $file_path = $movefile['file'];
            $file_name = basename($file_path);
            $file_type = $movefile['type'];

            // メディアライブラリに登録するための配列を準備
            $attachment = array(
                'post_mime_type' => $file_type,
                'post_title' => preg_replace('/\.[^.]+$/', '', $file_name),
                'post_content' => '',
                'post_status' => 'inherit'
            );

            // メディアライブラリに画像を登録
            $attach_id = wp_insert_attachment($attachment, $file_path);

            // 添付ファイルのメタデータを生成
            $attach_data = wp_generate_attachment_metadata($attach_id, $file_path);
            wp_update_attachment_metadata($attach_id, $attach_data);

            // 承認状態に関係なく、まずは画像を保存
            add_comment_meta($comment_id, 'comment_image_url', esc_url_raw($movefile['url']));
            add_comment_meta($comment_id, 'attachment_id', $attach_id);
            
            // 承認待ちの場合は、その情報も保存
            if ($requires_moderation) {
                add_comment_meta($comment_id, 'pending_image', true);
            }
        }
    }
}

// コメント承認時に画像の表示を有効化
function handle_comment_approval($new_status, $old_status, $comment) {
    if ($old_status !== $new_status && $new_status === 'approved') {
        $pending_image = get_comment_meta($comment->comment_ID, 'pending_image', true);
        if ($pending_image) {
            delete_comment_meta($comment->comment_ID, 'pending_image');
        }
    }
}
add_action('transition_comment_status', 'handle_comment_approval', 10, 3);
add_action('comment_post', 'save_comment_image_upload');

function my_custom_comments($comment, $args, $depth) {
    // コメントの承認状態をチェック
    $comment_approved = $comment->comment_approved;
    
    // 承認待ちの画像かどうかを確認
    $pending_image = get_comment_meta($comment->comment_ID, 'pending_image', true);
    
    // 現在のユーザーが管理者権限を持っているかチェック
    $is_admin = current_user_can('moderate_comments');
    
    // コメント投稿者のIPアドレスを取得（未承認コメントの表示権限チェック用）
    $comment_author_IP = isset($_SERVER['REMOTE_ADDR']) ? $_SERVER['REMOTE_ADDR'] : '';
    $is_comment_author = ($comment_author_IP === $comment->comment_author_IP);
    
    // 承認機能が有効な場合の表示条件：
    // 1. コメントが承認済み、または
    // 2. 管理者が見ている、または
    // 3. コメント投稿者本人が見ている（moderation-hashで確認）
    $show_image = get_option('comment_moderation') ? 
        ($comment_approved === '1' || $is_admin || 
         (isset($_GET['moderation-hash']) && $is_comment_author)) : 
        true;
    
    // カスタムフィールド 'comment_image_url' を取得
    $image_url = get_comment_meta($comment->comment_ID, 'comment_image_url', true);
    
    // コメント表示の開始タグ
    $tag = ($args['style'] == 'div') ? 'div' : 'li';
?>
    <<?php echo $tag ?> <?php comment_class(empty($args['has_children']) ? '' : 'parent') ?> id="comment-<?php comment_ID() ?>">

        <article id="div-comment-<?php comment_ID() ?>" class="comment-body">

            <div class="comment-meta">
                <div class="comment-author vcard">
                    <?php if (0 != $args['avatar_size']) echo get_avatar($comment, $args['avatar_size']); ?>
                    <?php printf(__('<b class="fn">%s</b> <span class="says">says:</span>'), get_comment_author_link()); ?>
                </div>

                <div class="comment-metadata">
                    <a href="<?php echo esc_url(get_comment_link($comment->comment_ID, $args)); ?>">
                        <time datetime="<?php comment_time('c'); ?>">
                            <?php printf(
                                _x('%1$s at %2$s', '1: date, 2: time'),
                                get_comment_date(),
                                get_comment_time()
                            ); ?>
                        </time>
                    </a>
                    <?php edit_comment_link(__('(Edit)'), '<span class="edit-link">', '</span>'); ?>
                </div>
            </div>

            <div class="comment-content">
                <?php comment_text(); ?>

                <?php if ($image_url && $show_image) : ?>
                    <p class="comment-image">
                        <img src="<?php echo esc_url($image_url); ?>" alt="コメント画像" style="max-width: 100%; height: auto;">
                    </p>
                <?php endif; ?>
            </div>

            <?php
            comment_reply_link(array_merge($args, array(
                'add_below' => 'div-comment',
                'depth'     => $depth,
                'max_depth' => $args['max_depth'],
                'before'    => '<div class="reply">',
                'after'     => '</div>'
            )));
            ?>

        </article>
    </<?php echo $tag ?>>
<?php
}

<?php
wp_list_comments(array('callback' => 'my_custom_comments'));

<?php
// 管理画面のコメント一覧にカスタム列を追加
function add_comment_image_column($columns) {
    $columns['comment_image'] = '添付画像';
    return $columns;
}
add_filter('manage_edit-comments_columns', 'add_comment_image_column');

// カスタム列に画像のサムネイルを表示
function custom_comment_column($column, $comment_ID) {
    if ($column === 'comment_image') {
        $image_url = get_comment_meta($comment_ID, 'comment_image_url', true);
        $attachment_id = get_comment_meta($comment_ID, 'attachment_id', true);
        
        if ($image_url && $attachment_id) {
            // 画像のサムネイルを取得
            $thumbnail = wp_get_attachment_image($attachment_id, [100, 100]);
            if ($thumbnail) {
                echo '<a href="' . esc_url($image_url) . '" target="_blank">';
                echo $thumbnail;
                echo '</a>';
            }
        }
    }
}
add_action('manage_comments_custom_column', 'custom_comment_column', 10, 2);