「WordPressのコメントフォームに画像をアップロードしたい。」
「クチコミと一緒に画像をアップできたら内容を伝えやすいのに。」
コメントフォームを活用する機会が多いブログメディアや、商品レビューやサービスのクチコミで実際の写真を一緒に投稿できると、情報の信頼性がぐっと高まりますよね。
ただ、WordPressのコメントフォームには、通常テキストしか入力できません。そこで今回は、プラグイン無しで、コメントフォームに画像アップロード機能を実装する方法をご紹介します。
基本的にコピペで試せるようにしているので、ぜひトライしてみてください。
目次
コメントフォームに画像アップロード機能を実装する手順
今回は、WordPressのデフォルトテーマ（Twenty Twenty-One）のコメントフォームに「画像ファイルを1枚アップロードできる」最低限の仕組みを実装していきます。
仕組み自体を理解することを目的としているため、セキュリティ対策や管理機能は簡略化しています。
comments.phpを編集する
まずは、コメントフォームに画像を添付するための入力欄を追加します。
以下の記述を、comments.php内にコピペします。
comment_form(
array(
// ★ 画像アップロードに必須
'form_attributes' => array(
'enctype' => 'multipart/form-data',
),
// コメント本文＋画像アップロード
'comment_field' =>
'<p class="comment-form-image">' .
'<label for="comment_image">画像をアップロード</label>' .
'<input type="file" name="comment_image" id="comment_image" accept="image/jpeg,image/png,image/gif">' .
'</p>' .
'<p class="comment-form-comment">' .
'<label for="comment">Comment</label>' .
'<textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea>' .
'</p>',
)
);
また、以下のようにwp_list_comments()にコールバックを追加してください。
wp_list_comments(
array(
'callback' => 'my_comment_with_image',
)
);
functions.phpを編集する
ここで行うのは主に次の処理です。
- コメントフォームから送信された画像ファイルを取得
- 画像ファイルをアップロードディレクトリに保存
- ファイル形式は、JPEG、PNG、GIFのみ許可
- ファイルサイズは1MBまで
- アップロードした画像をコメントの下に表示する
以下の2つの処理を加えるため、functions.phpの最下部にそれぞれ追加してください。
コメント投稿時に画像を保存
add_action( 'comment_post', function ( $comment_id ) {
if ( empty( $_FILES['comment_image']['name'] ) ) {
return;
}
$file = $_FILES['comment_image'];
// MIMEタイプ制限
$allowed_types = array(
'image/jpeg',
'image/png',
'image/gif',
);
// サイズ制限（1MB）
if ( $file['size'] > 1024 * 1024 ) {
return;
}
if ( ! in_array( $file['type'], $allowed_types, true ) ) {
return;
}
require_once ABSPATH . 'wp-admin/includes/file.php';
$upload = wp_handle_upload( $file, array( 'test_form' => false ) );
if ( isset( $upload['error'] ) ) {
return;
}
// コメントメタに保存
add_comment_meta(
$comment_id,
'comment_image_url',
esc_url_raw( $upload['url'] )
);
});
コメント表示用コールバック
function my_comment_with_image( $comment, $args, $depth ) {
$img = get_comment_meta( $comment->comment_ID, 'comment_image_url', true );
?>
<li <?php comment_class(); ?> id="comment-<?php comment_ID(); ?>">
<article class="comment-body">
<footer class="comment-meta">
<b><?php comment_author(); ?></b>
</footer>
<div class="comment-content">
<?php comment_text(); ?>
<?php if ( $img ) : ?>
<p class="comment-image">
<img src="<?php echo esc_url( $img ); ?>" alt="" style="max-width:100%; height:auto;">
</p>
<?php endif; ?>
</div>
</article>
</li>
<?php
}
ここまでの変更で、コメント投稿時にテキストと一緒に、画像ファイルを送信できるようになります。この例では画像は1枚のみアップロード可能です。
こんな風に、「画像をアップロード」するという項目が表示されているはずです。
お手元の画像をアップロードすると、次のようにコメントの下部に表示される仕組みです。
画像がアップロードされた例
今回は最低限の仕様で実装しましたが、実際に画像アップロード機能を導入するとなると、次のような点も考慮する必要が出てきます。
- スパム投稿やBot対策
- 複数画像への対応
- アップロード画像の管理
- セキュリティ対策
ただ、これらすべてを自作するのは、それ相応の知識や工数が必要になってきます。
REHUBの画像アップロード機能
ここからは手前味噌になってしまいますが、クチコミレビューサイトがつくれるWordPressテーマ「REHUB」の画像アップロード機能についてご紹介いたします。
基本仕様は、次のとおりです。
- 画像を複数枚アップロードできる
- 投稿された画像はクリックで拡大表示できる
- セキュリティ対策もあらかじめ実装済み
すでにREHUBをお使いの方は、 バージョンを4.0以降にアップデートするだけで、利用可能です。
基本的な使い方
使い方はかんたんで、TCDテーマ > オーベルジュ > クチコミ投稿フォームに追加されている「添付画像フィールド」にチェックを入れるだけです。
REHUBの添付画像フィールド設定箇所
ラベルや補足説明を登録すれば、サイト上には次のように表示されます。
これでクチコミ投稿と同時に画像をアップロードできるようになります。1つのクチコミにつき、最大6枚までアップロード可能です。
たとえば、3枚の写真と共に投稿すれば、こんな風に表示されます。
画像は、クリックすると拡大表示される仕組みになっていますので、他のユーザーさんもしっかりと写真をご覧いただけます。
クチコミの画像をクリックすると拡大表示される
セキュリティ対策
以下のようなセキュリティ対策もあらかじめ施してあります。
| 対策内容 | 概要 |
|---|---|
| nonce認証 | 正規の画面から送信されたかどうかを検証し、不正な直接アクセスを防止 |
| ハニーポット | ユーザーには見えない入力欄を設置し、Botによる自動投稿を判別してブロック |
| 短時間送信の制限 | フォーム表示直後（数秒以内）の投稿を制限し、機械的なスパム送信を防止 |
一般的なスパムコメントやBot投稿を想定した、ベースラインとして十分現実的な対策です。
REHUBをお使いの方は、ぜひ安心して画像アップロード機能をご活用ください。
まとめ
WordPressのコメントフォームに、画像アップロード機能を実装する方法をご紹介しました。
本記事で紹介した方法で実装できるのは、以下のシンプルな仕組みです。あくまで仕組み理解を目的とした、最小構成の実装になります。
- コメントと一緒に画像を1枚投稿できる
- 画像はWordPressのアップロードディレクトリに保存される
- 保存した画像をコメント下に表示できる
これらに加えて、より本格的な仕組みを実装するには、それなりの知識や工数が必要になってきます。
クチコミサイトなどで、複数画像のアップロードやスパム対策まで含めて運用したい場合は、REHUBのようなテーマを活用するのも、ひとつの選択肢です。
コメント