ある読者から、各 WordPress コメントの横にユーザーの役割を強調表示できるかどうか尋ねられました。 ユーザーの役割ラベルを表示すると、登録ユーザーがあなたの サイトのWeb、特に著者、発行者、および管理者。 このチュートリアルでは、WordPress のコメントの横にユーザー ロールのラベルを簡単に追加する方法を紹介します。
WordPressのコメントの横にユーザーロールラベルを表示するのはなぜですか？
ユーザー登録を許可している場合 サイトのWeb または、 サイトのWeb マルチオーサー WordPress、ユーザー ラベルは、ユーザーの役割に基づいてユーザーを相互に紹介できます。
たとえば、「編集者」ユーザーロールを持つユーザーには、コメントの名前の横にバッジが表示されます。これにより、このコメントが編集者によって作成されたことが他のユーザーに通知されます。
それはユーザーの信頼を構築し、あなたのウェブサイト上のコメントへのユーザーの関与を高めます。
多くの WordPressテーマ 投稿の作成者によるコメントのみを強調表示します。 他のコメントが登録ユーザーまたはサイト管理者によって作成された場合でも、他のユーザー ロールのラベルは表示されません。
そうは言っても、WordPressのコメントの横にユーザーロールタグを簡単に追加する方法を見てみましょう。
コメントの横にユーザーロールラベルを追加する
このチュートリアルでは、ファイルにコードを追加する必要があります。 ワードプレスのテーマ. これまでにこれを行ったことがない場合は、カスタマイズ方法をご覧ください。 ワードプレスのテーマ .
最初に行うことは、テーマのfunctions.phpファイルまたはサイト上のアクティブなプラグインに次のコードを追加することです。
if（！class_exists（ 'BPC_Comment_Author_Role_Label'））：class BPC_Comment_Author_Role_Label {public function __construct（）{add_filter（ 'get_comment_author'、array（$ this、 'bpc_get_comment_author_role）;）、10 add_filter（ 'get_comment_author_link'、array（$ this、 'bpc_comment_author_role'））; } //コメント作成者の役割を取得するfunctionbpc_get_comment_author_role（$ author、$ comment_id、$ comment）{$ authoremail = get_comment_author_email（$ comment）; //ユーザーが登録されている場合if（email_exists（$ authoremail））{$ commet_user_role = get_user_by（ 'email'、$ authoremail）; $ comment_user_role = $ commet_user_role->ロール[3]; //名前の横に追加するコンテンツ$ this-> comment_user_role = ' '。 ucfirst（$ comment_user_role）。 ' '; } else {$ this-> comment_user_role = ''; } return $ author; } //コメント関数の作成者を表示しますbpc_comment_author_role（$ author）{return $ author。= $ This-> comment_user_role; }}新しいBPC_Comment_Author_Role_Label; endif;
上記のこの短いコードは、コメント作成者の名前を表示してユーザーロールラベルを含めるために使用されるWordPressフィルターに接続します。
これで、コメント付きの投稿にアクセスして、実際の動作を確認できます。 登録ユーザーによるコメントは、コメント作成者の名前の横にユーザーロールが表示されます。 未登録のユーザーによるコメントには、コメントの作成者の名前のみが表示されます。
ユーザーロールを追加したので、次はスタイルを設定してクリーンにします。
このコードでは、ユーザーロールごとにCSSクラスを追加したので、これらのCSSクラスを使用して、各ユーザーバッジを異なる方法でカスタマイズできます（つまり、異なる色を使用するなど）。
次のCSSの例を開始点として使用できます。
.comment-author-label {パディング：5px; font-size：14px; ボーダー半径：3px; } .com-author-label-editor {背景色：#efefef; } .com-author-label-author {背景色：#faeeee; } .com-author-label-contributor {背景色：#f0faee; } .comment-author-label-subscriber {背景色：#eef5fa; } .com-author-label-administrator {背景色：#fde9ff; }
お好みに合わせてCSSを自由に調整してください。 デモサイトは次のようになりました。
このチュートリアルは以上です。スタッフのテキストの横にバッジを追加できるようになることを願っています。
