【WordPress】コメントに画像投稿を追加する

ユーザーがコメントから画像をメディアに投稿し、リサイズされた画像をコメントに表示してみます。
基本的なコメントの修正は以下の記事を参考にしてください。
WordPressのコメントを意のままにカスタマイズする方法

ページの一番下にfunction.phpに貼り付けると動作するコード記載してます。

【WordPress】コメントに星の5段階評価をつけるプラグイン(Comment Star Rating)作りました
こちらのプラグインもよかったら使ってみてください。

フォーム要素にinput[type=file]タグ、encodingを追加する

function sample_comment_form( $fields ) {
	$fields['image'] = null;
	$fields['image'] = '<p class="comment-form-image"><label for="image">投稿画像 </label><input type="file" name="image"></p>';
	return $fields;
}
add_filter( 'comment_form_default_fields', 'sample_comment_form' );

enctype=”multipart/form-data”を指定しない場合、添付ファイルの情報を送信できていないので、formタグに追加します。
今回はjavascriptで追加しました。

<script>
document.addEventListener('DOMContentLoaded', function() {
	for (i=0; i<document.forms.length; i++) {
		var f = document.forms[i];
		if (f.image) {
			f.encoding = "multipart/form-data";
		}
	}
});
</script>

コメントより送信された画像データを処理

エラーチェック処理

以下の記事を参考にエラー処理を追加しました。
ファイルアップロードの例外処理はこれぐらいしないと気が済まない

画像をアップロード、リサイズ

アップロードにはmove_uploaded_fileを使いました。

// 一時ファイルパス -> 保存先パス
move_uploaded_file( $old_file, $new_file['path'] );

メディアライブラリの登録にwp insert attachmentを使い、

$attachment_id = wp_insert_attachment( $attachment, $new_file['path'] );

$img_path = get_attached_file( $attachment_id );
$metadata = wp_generate_attachment_metadata( $attachment_id, $img_path );

if (!empty( $metadata ) ) {
	wp_update_attachment_metadata( $attachment_id, $metadata );
}

ここまででフォームから送信した画像が、メディアライブラリから参照可能です。
リサイズもされていますね。

comment_metaテーブルに保存する

コメント保存時に、先ほどメディアライブラリへ保存した画像のidを保存します。

function sample_comment_post( $comment_id ) {
	$image_id = sample_upload_image();
	add_comment_meta( $comment_id, 'sample_image', $image_id );
	return $comment_id;
}
add_action( 'comment_post', 'sample_comment_post' );

コメントに画像を表示

function sample_comment_display( $comment ) {
	$image_id = get_comment_meta( get_comment_ID(), 'sample_image', true);
	$image = wp_get_attachment_image_src( $image_id, 'pic640' );
	$output = '<div class="comment-image"><img src="'. $image[0] .'"></div>';
	return $comment.$output;
}
add_action( 'comment_text', 'sample_comment_display');

管理画面上で表示

コメント一覧上での表示

まとめ

動作は確認したので、function.phpに追加していただければ、動くはずですが、自己責任でご利用ください。関数名や、アップロードサイズ、テーブルへの保存名などはお好きな値に変更してください。

/**
 * コメントに画像投稿機能を追加する
 */
function sample_add_script() {
echo <<<EOF
<script>
document.addEventListener('DOMContentLoaded', function() {
	for (i=0; i<document.forms.length; i++) {
		var f = document.forms[i];
		if (f.image) {
			f.encoding = "multipart/form-data";
		}
	}
});
</script>
EOF;
}
function sample_comment_form( $fields ) {
	$fields['image'] = null;
	$fields['image'] = '<p class="comment-form-image"><label for="image">投稿画像 </label><input type="file" name="image"></p>';
	return $fields;
}
function sample_check_image() {
	if(!isset($_FILES['image']['error']) || !is_int($_FILES['image']['error'])) {
		throw new RuntimeException('パラメータが不正です');
	}
	if ($_FILES['image']['size'] > 1000000) {
	    throw new RuntimeException('ファイルサイズが大きすぎます');
	}
	if (!$ext = array_search(
		mime_content_type($_FILES['image']['tmp_name']),
		array(
			'gif' => 'image/gif',
			'jpg' => 'image/jpeg',
			'png' => 'image/png',
		),
		true
	)) {
		throw new RuntimeException('ファイル形式が不正です');
	}
	$name = sprintf('%s.%s', sha1_file($_FILES['image']['tmp_name']), $ext);
	return $name;
}
function sample_upload_image() {
	$image_name = sample_check_image();
	$old_file = $_FILES['image']['tmp_name'];
	$new_file_path_objects = wp_upload_dir();
	$new_file = array(
		'path' => $new_file_path_objects['path'] . '/' . $image_name,
		'url' => $new_file_path_objects['url'] . '/' . $image_name,
		'name' => $_FILES['image']['name'],
		'type' => $_FILES['image']['type'],
	);
	move_uploaded_file( $old_file, $new_file['path'] );
	$attachment = array(
		'guid'           => $new_file['url'], 
		'post_mime_type' => $new_file['type'],
		'post_title'     => preg_replace( '/\.[^.]+$/', '', basename( $new_file['name'] ) ),
		'post_content'   => '',
		'post_status'    => 'inherit'
	);
	$attachment_id = wp_insert_attachment( $attachment, $new_file['path'] );

	$img_path = get_attached_file( $attachment_id );
	$metadata = wp_generate_attachment_metadata( $attachment_id, $img_path );

	if (!empty( $metadata ) ) {
		wp_update_attachment_metadata( $attachment_id, $metadata );
	}
	return $attachment_id;
}
function sample_comment_post( $comment_id ) {
	$image_id = sample_upload_image();
	add_comment_meta( $comment_id, 'sample_image', $image_id );
	return $comment_id;
}
function sample_comment_display( $comment ) {
	$image_id = get_comment_meta( get_comment_ID(), 'sample_image', true);
	$image = wp_get_attachment_image_src( $image_id, 'pic640' );
	$output = '<div class="comment-image"><img src="'. $image[0] .'"></div>';
	return $comment.$output;
}
add_action( 'wp_head', 'sample_add_script' );
add_filter( 'comment_form_default_fields', 'sample_comment_form' );
add_action( 'comment_post', 'sample_comment_post' );
add_action( 'comment_text', 'sample_comment_display');
スポンサーリンク
RESAD
RESAD

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
RESAD

コメント

5.0 rating based on 2 ratings

5つ星のうち5.0

  1. ざき より:

    コメントに画像を挿入したく調べていたところ、
    こちらの記事を発見いたしました。
    無事に画像の挿入ができるようになりました!
    ありがとうございます。
    1点、最初にコードを挿入したところ、エラーが発生いたしました。。。
    65行目の「$metadata = wp_generate_attachment_metadata( $attachment_id, $img_path );」を「$metadata = wp_update_attachment_metadata( $attachment_id, $img_path );」に変更したところ、正常に動きました。
    念のため、共有させていただきます。

    5.0 rating

  2. ロト君 より:

    非常に参考になりました!

    5.0 rating