WordPress でコメントの横にユーザーロールラベルを追加する方法

最近、読者から「WordPressでコメントごとにユーザーの役割をハイライト表示することは可能か？」という質問がありました。これはよくある質問で、特に忙しいブログやコミュニティサイトでは、コメントがすぐに分かりにくくなるため、もっともなことです。

各コメントの横にユーザーの役割ラベルを表示することで、訪問者は著者、編集者、管理者などの信頼できるユーザーからのコメントをすぐに確認できます。これにより、文脈が追加され、信頼性が高まり、コミュニティでのより有意義なやり取りを促進することもできます。

私たちは多くのサイトオーナーがこの機能を追加するのを支援してきました。これは、コメントセクションをより整理され、プロフェッショナルに見せるための簡単な方法です。

この記事では、WordPressでコメントの横にユーザーの役割ラベルを簡単に追加する方法を紹介します。これにより、読者は誰が貢献しているかをすぐに認識できるようになります。

WordPressでコメント投稿者の名前の横にユーザーの役割ラベルを表示する理由

ウェブサイトでユーザー登録を許可している場合や、マルチ著者対応のWordPressウェブサイトを運営している場合は、ユーザーの役割ラベルを表示することで、訪問者は誰がコメントしているのか、またそのユーザーの役割が何であるかを素早く理解するのに役立ちます。

たとえば、エディターのユーザー役割を持つユーザーは、コメント内で名前の横にバッジを表示でき、コメントがエディターからのものであることを他の人に知らせることができます。

これは、オーディエンスとの信頼関係を築くだけでなく、サイトでのより有意義なやり取りやエンゲージメントを促進します。

多くのWordPressテーマでは、投稿著者のコメントのみをハイライトします。登録ユーザー、管理者、またはエディターによってコメントが作成されていても、他のユーザー役割のラベルは表示されません。これらのラベルを追加することで、サイトのすべての主要な貢献者が簡単に認識されるようになります。

メリットを理解したところで、WordPressでコメントの横にユーザーロールラベルを簡単に追加する方法を見てみましょう。

WordPressでコメント投稿者の名前の横にユーザーロールラベルを追加する

このチュートリアルでは、WordPressのテーマファイルにコードを追加する必要があります。以前にこれを行ったことがない場合は、WordPressにコードスニペットをコピーして貼り付ける方法に関するガイドをご覧ください。

まず、テーマのfunctions.phpファイル、サイト固有のプラグイン、またはコードスニペットプラグインに以下のコードを追加する必要があります。

if ( ! class_exists( 'WPB_Comment_Author_Role_Label' ) ) :
class WPB_Comment_Author_Role_Label {
public function __construct() {
add_filter( 'get_comment_author', array( $this, 'wpb_get_comment_author_role' ), 10, 3 );
add_filter( 'get_comment_author_link', array( $this, 'wpb_comment_author_role' ) );
}
 
// Get comment author role 
function wpb_get_comment_author_role($author, $comment_id, $comment) { 
$authoremail = get_comment_author_email( $comment); 
// Check if user is registered
if (email_exists($authoremail)) {
$commet_user_role = get_user_by( 'email', $authoremail );
$comment_user_role = $commet_user_role->roles[0];
// HTML output to add next to comment author name
$this->comment_user_role = ' <span class="comment-author-label comment-author-label-'.$comment_user_role.'">' . ucfirst($comment_user_role) . '</span>';
} else { 
$this->comment_user_role = '';
} 
return $author;
} 
 
// Display comment author                   
function wpb_comment_author_role($author) { 
return $author .= $this->comment_user_role; 
} 
}
new WPB_Comment_Author_Role_Label;
endif;

上記の関数コードは、コメント作成者の名前にユーザー役割ラベルを含めるために使用されるWordPressフィルターにフックします。

WPBeginnerでは、WordPress用の最高のコードスニペットプラグインであるWPCodeを使用してこのコードを追加することを常にお勧めしています。

WPCodeを使用すると、テーマのfunctions.phpファイルを直接編集するよりも安全で簡単です。これにより、サイトを壊す可能性のあるエラーを防ぎ、カスタマイズを整理し、テーマを更新しても変更が失われないようにします。

開始するには、無料のWPCodeプラグインをインストールして有効化する必要があります。詳細な手順については、WordPressプラグインのインストール方法に関するこのチュートリアルを参照してください。

プラグインが有効化されたら、WordPressダッシュボードからコードスニペット » + スニペットを追加に移動します。

そこから、「カスタムコードを追加（新規スニペット）」オプションの下にある「+ カスタムスニペットを追加」ボタンをクリックします。

次に、画面に表示されるオプションのリストから、コードタイプとして「PHPスニペット」を選択する必要があります。

これにより、カスタムスニペットの作成ページが表示されます。

ここで、コードスニペットのタイトルを追加する必要があります。これは、コードが何のためかを覚えておくのに役立つものであれば何でも構いません。

次に、上記のコードを「コードプレビュー」ボックスに貼り付けます。

その後、ページの上部にあるスイッチを「非アクティブ」から「アクティブ」に移動するだけです。

最後に、「スニペットを保存」ボタンをクリックします。

これで、コメントのある投稿にアクセスして、それが機能していることを確認できます。

登録ユーザーが行ったコメントには、コメント投稿者の名前の横にユーザーロールが表示されます。登録されていないユーザーが行ったコメントには、コメント投稿者の名前のみが表示されます。

ユーザーロールを追加したので、それをスタイル設定してきれいに表示する時間です。

コードでは、各ユーザー役割にCSSクラスを追加したので、これらのCSSクラスを使用して、各ユーザーバッジを個別にカスタマイズできます（つまり、異なる色を使用するなど）。

開始点として、次のサンプルCSSを使用できます：

.comment-author-label {
    padding: 5px;
    font-size: 14px;
    border-radius: 3px;
}
 
.comment-author-label-editor {  
background-color:#efefef;
}
.comment-author-label-author {
background-color:#faeeee;
}
 
.comment-author-label-contributor {
background-color:#f0faee;   
}
.comment-author-label-subscriber {
background-color:#eef5fa;   
}
 
.comment-author-label-administrator { 
background-color:#fde9ff;
}

CSSはお好みで調整してください。これはデモサイトでの表示例です：

詳細については、WordPress サイトにカスタム CSS を簡単に追加する方法に関するガイドをご覧ください。

この記事がお役に立ち、WordPressでコメントの横にユーザー役割ラベルを追加する方法を学べたことを願っています。また、WordPressコメントでGravatarを遅延読み込みする方法に関するガイドや、WordPressコメントを改善するための最高のプラグインの専門家による選び方もご覧ください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。