Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

最近、ある読者から、WordPressの各コメントの横にユーザーの権限グループをハイライト表示できないかという質問を受けました。これはよくある質問で、私たちは多くのサイトオーナーがこの機能を追加し、より強力なコミュニティ感覚を構築できるようお手伝いしてきました。

ユーザーの権限グループラベルを表示することで、投稿者、エディター、管理者など、サイトで信頼されているユーザーからのコメントであることを即座に知らせることができます。

この投稿では、WordPressでコメントの横にユーザー権限グループを簡単に追加する方法を紹介します。

Add user role next to comments in 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フィルターにフックし、ユーザー権限グループのラベルを含めます。

WordPressに最適なコードスニペットプラグインであるWPCodeを使用して、このコードを追加することをお勧めします。テーマのfunctions.phpファイルを編集せずにコードを追加する最も安全で簡単な方法です。

WPCode

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

プラグインを有効化したら、WordPressダッシュボードからCode Snippets ” + Add Snippetに移動します。そこから、「カスタムコードを追加(新規スニペット)」設定の下にある「スニペットを使用」ボタンをクリックします。

Add a new custom code snippet in WPCode

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

次に、上記のコードを「コードプレビュー」ボックスに貼り付け、右側のドロップダウンリストからコードタイプとして「PHPスニペット」を選択します。

Paste code snippet into the Code Preview box and select PHP Snippet

その後、スイッチを’Inactive’から’Active’に移動し、’Save Snippet’ボタンをクリックするだけです。

Activate and save your custom code snippet

コメントする投稿にアクセスし、その動きを見ることができる。

登録ユーザーによって投稿されたコメントには、コメント作成者名の横にユーザー権限が表示されます。非登録ユーザーによって投稿されたコメントは、コメント作成者名のみが表示されます。

User role label shown next to their comment

ユーザー権限グループを追加したので、次はそれをスタイルしてきれいに見せましょう。

私たちのコードでは、各ユーザー権限に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はご自由に調整してください。デモサイトではこのように表示されました:

User role badges displayed with their comments

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

この投稿が、WordPressでコメントの横にユーザー権限グループのラベルを追加する方法を学ぶのにお役に立てば幸いです。また、WordPressのコメントでグラビアを遅延ロードする方法や、WordPressのコメントを改善するプラグインもご紹介しています。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

11件のコメント返信を残す

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jack

    What if a user has multiple roles? Let say, I have a user with “verified” and “subscriber” roles. I need to put verified badge next to the comment author with “verified” role. How can I do this?

    • WPBeginner Support

      By default WordPress only allows a user to have 1 role at a time, if you’re using a plugin to allow for multiple roles then it would depend on the specific plugin that you are using :)

      管理者

  3. John

    How to integrate it in Profile Page or lets say, i want to add a code in about Me widget.

  4. Matt

    Hey,

    Great tutorial.

    Is there anyway to customize the text within the badge?

    Instead of the user role, displaying something like “Post Author”? I feel like displaying ‘Administrator’ for some blogs is a bit of a buzz kill and too serious.

  5. Kelly

    Instead of saying “Administrator” or whatever their role beside their name, if I wanted to show an icon based on user role, how could I do that? I’ve tried playing with your code but cannot figure out how to display a different icon based on user role.

    • Eddie

      That would be great. I’m looking for this so I can show an icon only for contributors

  6. Mahmudul Hasan

    where put the css code..?

  7. javad

    Hi this code is wrong and when I put it on functions.php my website got 500 error!!!

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。