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コメントを改善するベストプラグイン16選に関するガイドもご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。