2024年10月21日公開

2025年03月24日更新

WordPressのコメント欄のアイコンを任意の画像でランダムに割り当てる。

ソフトウェアパソコン

こんすが、夏加よすがです。

WordPressで作ったホームページにて、プラグイン無しで投稿記事のコメントをこちら側で任意のアバター(アイコン)をランダムに割り当てたくなったので、その備忘録を残します。

プラグインを使わないのでサイトのプラグイン欄が増えずに済みます。

まず最初に用意するもの

自分が使っているテーマフォルダ内に「images」というフォルダを用意します。

そしてその中に、「commentavatar1.png」～「commentavatar5.png」までの5枚の画像を用意します。

そして「images」フォルダ内に画像をアップロードしておきます。

画像設置場所のパス例：wp-content/themes/[あなたのテーマ名]/images

※後述のコードを自力で書き換えられるなら各ファイル名や画像枚数は任意で構いません。

ここまで準備が出来たら次へ。

①管理者以外のコメントにランダムでカスタムアバター

次の条件で動くコードを用意しました。

コメント一つ一つにランダムにアバターを割り当てる
WordPressにログインし管理者権限を持つ人は通常アバター
アバターはページ更新ごとにランダム割り当てが発生
コメント投稿者を個別に識別しない

functions.phpに次のコードを書き加えます。

functions.php (php)

// カスタムアバターをランダムに表示するフィルター
function custom_comment_avatar($avatar, $id_or_email, $size, $default, $alt) {
    $user = false;
    if (is_object($id_or_email)) {
        if (isset($id_or_email-&gt;user_id)) {
            $user = get_user_by('id', $id_or_email-&gt;user_id);
        }
    } elseif (is_numeric($id_or_email)) {
        $user = get_user_by('id', (int)$id_or_email);
    } elseif (is_email($id_or_email)) {
        $user = get_user_by('email', $id_or_email);
    }
    if ($user &amp;&amp; user_can($user, 'administrator')) {
        return $avatar;
    }

    // カスタムアバターの画像ファイル名を1～5の数字で指定
    $avatar_number = rand(1, 5);  // 画像ファイルの枚数分の数字を入れる
    $random_avatar = get_template_directory_uri() . "/images/commentavatar{$avatar_number}.png";

    $custom_avatar_html = "<img class="avatar avatar-{$size} photo" src="{$random_avatar}" alt="{$alt}" width="{$size}" height="{$size}" />";
    return $custom_avatar_html;
}

add_filter('get_avatar', 'custom_comment_avatar', 10, 5);

これで、コメント欄のアバターがこちらで用意した任意のアバターになります。

もしアバターの数を増やして「commentavatar10.png」まで増やしたとしたら、「$avatar_number = rand(1, 5); //画像ファイルの枚数分の数字を入れる」ところのコードを「$avatar_number = rand(1, 10);」に書き換えて下さい。

「rand(1, 5)」というのは「1から5の数字をランダムに選択」という意味です。

上手く反映されない時は、画像ファイルの名前や場所が間違ってないか確認して下さい。

でもこれだと、同じ投稿者が複数のコメントをした際に毎回違うアバターになってしまいますね。

別にランダムでも全然いい！という場合はこのままでいいですが、個人を識別してして欲しい場合はまた別のアプローチを行います。

②アバター適用を個人を識別して行う

個人を識別するとなると、先述のコード以上の用意が必要になります。

今回は、コメントが投稿された際にJSONファイルに「投稿者のIPアドレス」「割り当てるアバター番号」を記録して、コメント欄を読み込む際にはJSONファイルから情報を引き出して該当のアバターを割り当てる処理をする方法を取るため、次の条件で動くコードを用意しました。

コメント投稿された際に投稿者のIPアドレスを元にランダムにアバターを割り当てる
割り当てたアバター番号はJSONファイルに記録する
WordPressにログインし管理者権限を持つ人は通常アバター
アバターはページ更新ごとにJSONファイルからデータ(アバターの番号)を取り出して表示
IPアドレスを元にコメント投稿者を個別に識別する

まずは自分が使っているテーマフォルダ内に「json」というフォルダを用意し、その中に「commentavatar.json」という名前のファイルをアップロードします。

このJSONファイルの中身は、以下のように{}だけを記述しておきます。

commentavatar.json (JSON)

{}

次に、先述のアバターランダム割り当てのコードを一旦削除し、次のコードをfunctions.phpに書き加えます。

functions.php (php)

// コメントが投稿された際にIPアドレスとアバター番号を紐づける
function assign_avatar_to_ip($comment_id, $comment_approved) {
    if ('approve' !== $comment_approved) {
        return;
    }
    $ip_address = $_SERVER['REMOTE_ADDR'];
    $json_file = get_template_directory() . '/json/commentavatar.json';
    if (file_exists($json_file)) {
        $avatars = json_decode(file_get_contents($json_file), true);
    } else {
        $avatars = [];
    }
    if (isset($avatars[$ip_address])) {
    } else {
        $avatar_number = rand(1, 5);  // 1～5のランダムな数字
        $avatars[$ip_address] = $avatar_number;
        file_put_contents($json_file, json_encode($avatars, JSON_PRETTY_PRINT));
    }
}
add_action('wp_insert_comment', 'assign_avatar_to_ip', 10, 2);

// カスタムアバターを表示するフィルター
function custom_comment_avatar($avatar, $id_or_email, $size, $default, $alt) {
    $user = false;
    if (is_object($id_or_email)) {
        if (isset($id_or_email->user_id)) {
            $user = get_user_by('id', $id_or_email->user_id);
        }
    } elseif (is_numeric($id_or_email)) {
        $user = get_user_by('id', (int)$id_or_email);
    } elseif (is_email($id_or_email)) {
        $user = get_user_by('email', $id_or_email);
    }
    if ($user && user_can($user, 'administrator')) {
        return $avatar;
    }
    $ip_address = get_comment_author_IP($id_or_email);
    if (!$ip_address) {
        return $avatar; 
    }
    $json_file = get_template_directory() . '/json/commentavatar.json';
    if (file_exists($json_file)) {
        $json_contents = file_get_contents($json_file);
        if ($json_contents === false) {
            return $avatar;
        }
        $data = json_decode($json_contents, true);
        if (json_last_error() !== JSON_ERROR_NONE) {
            return $avatar; 
        }
        if (isset($data[$ip_address])) {
            $avatar_number = $data[$ip_address];
        } else {
            $avatar_number = rand(1, 5); // 画像ファイルの枚数分の数字を入れる
        }
    } else {
        $avatar_number = rand(1, 5); // 画像ファイルの枚数分の数字を入れる
    }
    $random_avatar = get_template_directory_uri() . "/images/commentavatar{$avatar_number}.png";
    $custom_avatar_html = "<img src='{$random_avatar}' alt='{$alt}' class='avatar avatar-{$size} photo' height='{$size}' width='{$size}' loading='lazy'>";
    return $custom_avatar_html;
}
add_filter('get_avatar', 'custom_comment_avatar', 10, 5);

さっきと同じように、画像ファイルの数を増やしたい場合は「// 画像ファイルの枚数分の数字を入れる」の部分の数字を書き換えて下さいね。

これでIPアドレスごとに決まったアバターを割り当てることができます。

ただし、この方法はデメリットがあって、記事の更新頻度が高くコメント欄が賑わう(投稿者が多い)場合はJSONファイルの容量がどんどん重くなることでしょう。

その場合は、個人ごとにアバターを割り当てるの諦めて①の手法を取って頂くか、JSONファイルの記録が一定期間過ぎたデータは自動で削除するなどの手法が必要になるかもしれません。

当ブログはそこまでコメント欄での交流に重きはおいていないので、この手法でもJSONファイルが大きくなることはあまり無いと見込んでの採用です。

ここまで読んでくれたら「いいね」やSNS共有してね！