プラグインなしでコメントに画像を追加投稿する方法

はじめに

プラグイン「Comment Image」などを使用せずに、コメントに画像を追加します。

この記事では、この方法について説明します。

完成イメージ

実装手順

以下のコードをfunctions.phpに追加します。

コメント画像は1コメントにつき1ファイルとし、以下のフォルダーに保存されます。

/wp-content/uploads/comments/2026/01/sample-image.jpg

また、コメントを削除すると、紐づくコメント画像も自動的に削除されます。

// コメント欄の入力フォームを追加
add_action('comment_form', function () {
  ?>
  <script>
  jQuery(document).ready(function ($) {
    // コメントフォームのenctypeを設定
    $('#commentform').attr('enctype', 'multipart/form-data');
  });
  </script>
  <?php
});


/**
 * コメントフォームに画像アップロード用フィールドを追加
 *
 * @return void
 */
if (!function_exists('add_comment_image_field')):
function add_comment_image_field() {
  ?>
  <p class="comment-image__field">
    <label for="comment_image" style="font-size: 0.8em; margin: 0.2em;">画像をアップロード</label>
    <input type="file" name="comment_image" id="comment_image" accept="image/jpeg,image/png,image/gif" />
  </p>
  <?php
}
endif;


// ログアウト時のコメントフォームに画像フィールドを追加
add_action('comment_form_after_fields', 'add_comment_image_field');


// ログイン時のコメントフォームに画像フィールドを追加
add_action('comment_form_logged_in_after', 'add_comment_image_field');


// コメント投稿時のみアップロード先を変更
add_filter('upload_dir', function ($dirs) {
  // コメント投稿外は処理対象外
  if (!isset($_POST['comment'])) {
    return $dirs;
  }

  // コメント用アップロード先を設定
  $subdir = '/comments' . $dirs['subdir'];

  return [
    'path'    => $dirs['basedir'] . $subdir,
    'url'     => $dirs['baseurl'] . $subdir,
    'subdir'  => $subdir,
    'basedir' => $dirs['basedir'],
    'baseurl' => $dirs['baseurl'],
    'error'   => false,
  ];
});


// コメント送信時に画像を保存
add_action('comment_post', function ($comment_id) {
  // 画像ファイルが送信されていない場合は処理対象外
  if (
    empty($_FILES['comment_image']['name']) ||
    empty($_FILES['comment_image']['tmp_name'])
  ) {
    return;
  }

  // WordPressアップロード関数を読み込む
  require_once ABSPATH . 'wp-admin/includes/file.php';

  // ファイルアップロードを実行
  $upload = wp_handle_upload(
    $_FILES['comment_image'],
    ['test_form' => false]
  );

  // アップロードエラー時は処理対象外
  if (isset($upload['error'])) {
    return;
  }

  // 画像URLをコメントメタに登録
  add_comment_meta(
    $comment_id,
    'my_comment_image_url',
    esc_url_raw($upload['url'])
  );
});


// コメント本文の下に画像を表示
add_filter('comment_text', function ($comment_text, $comment) {
  // コメントメタから画像URLを取得
  $image_url = get_comment_meta(
    $comment->comment_ID,
    'my_comment_image_url',
    true
  );

  // 画像が存在しない場合は処理対象外
  if ($image_url) {
    $comment_text .= '<p class="comment-image__content">
      <img src="' . esc_url($image_url) . '" style="max-width: 100%; height: auto;" />
    </p>';
  }

  return $comment_text;
}, 10, 2);


// コメント削除時に画像も削除
add_action('delete_comment', function ($comment_id) {
  // コメントメタから画像URLを取得
  $image_url = get_comment_meta($comment_id, 'my_comment_image_url', true);

  // 画像URLが存在しない場合は処理対象外
  if (!$image_url) {
    return;
  }

  // uploadsディレクトリ情報を取得
  $upload_dir = wp_get_upload_dir();

  // 画像URLを実ファイルパスへ置換
  $file_path = str_replace(
    $upload_dir['baseurl'],
    $upload_dir['basedir'],
    $image_url
  );

  // ファイルが存在する場合は削除
  if (file_exists($file_path)) {
    unlink($file_path);
  }

  // コメントメタを削除
  delete_comment_meta($comment_id, 'my_comment_image_url');
});

さいごに

今回紹介した方法を使えば、プラグインを使わずに、コメント画像アップロード機能を実装できます。
画像の保存先や削除挙動も自由に制御できるため、カスタマイズ性を重視したいサイトには特におすすめです。