コメントセクションは、コミュニティが生き生きとする場所です。つながり、会話、読者のエンゲージメントにとって重要なスペースです。
著者として、あなたの返信はそのインタラクションの重要な部分です。さらに多くの議論を奨励するために、あなたの声が読者に見つけやすいようにしたいはずです。
コメントをハイライトすると、それらにふさわしい注目が集まります。このシンプルなタッチにより、ディスカッションエリア全体がよりプロフェッショナルで、整理され、 魅力的なものになります。
私たちは、小さなデザインの選択がユーザーエクスペリエンスに大きな影響を与えることができると信じています。そして、これはあなたがすることができる最も簡単で最も効果的な変更の1つです。
この記事では、WordPressで投稿者のコメントを簡単にハイライトする方法をご紹介します。
WordPressで投稿者のコメントをハイライト表示する理由
コメントは、ウェブサイトでユーザーエンゲージメントを構築するための優れた方法です。記事でより多くのコメントを得たい場合は、ディスカッションに積極的に参加することでそれを奨励できます。
新しいWordPressブログでは、読者からのコメントに簡単に返信したり、ディスカッションに参加したりできます。マルチオーサーブログを運営している場合は、著者にコメントのモデレーションを手伝ってもらうことも奨励できます。
ただし、ほとんどのWordPressテーマではコメントを区別しておらず、同じスタイルでリストされています。
読者は、投稿者が議論に貢献した追加コンテンツに気づかないまま、コメントをスクロールする可能性があります。
著者のコメントをハイライトすることは、その問題を解決するのに役立ち、著者のコメントを目立たせ、より目立つようにします。
ここでの最終的な目標は、新しいユーザーがコメントに参加し、最終的にニュースレターを購読するか、顧客になることを奨励することです。
それでは、WordPressで著者のコメントを簡単にハイライトする方法を見ていきましょう。
WordPressでコメント投稿者をハイライト表示する
投稿者のコメントを強調する最も簡単な方法は、WordPressテーマにカスタムCSSを追加することです。これにより、必要なコードを簡単に追加し、ウェブサイトにどのように表示されるかのライブプレビューを保存せずに確認できます。
まず、WordPress管理画面の外観 » カスタマイズにアクセスする必要があります。これにより、WordPressテーマカスタマイザーインターフェースが起動します。左側の列に多くのオプションが表示され、ウェブサイトのライブプレビューが表示されます。
ここから、「追加CSS」タブをクリックする必要があります。
これにより、カスタムCSSを追加するテキストエリアが開きます。
ただし、カスタムCSSが適用されたときにどのように見えるかを確認したいでしょう。
そのためには、投稿者のコメントが含まれるブログ記事に移動する必要があります。
コメントセクションまでスクロールダウンし、左側のカスタムCSSボックスに以下のカスタムCSSを追加します。
.bypostauthor {
background-color: #e7f8fb;
}
入力したカスタムCSSに合わせて、投稿者のコメントがすぐに変更されるのがわかります。
では、これはどのように機能するのでしょうか？
WordPressは、ウェブサイトのさまざまな領域にデフォルトのCSSクラスを追加します。これらのCSSクラスは、使用しているWordPressテーマに関係なく存在します。
このサンプルコードでは、投稿の著者が追加したすべてのコメントに追加される.bypostauthor CSSクラスを使用しました。
さらに多くのCSSスタイルを追加して、さらに目立たせましょう。以下は、投稿者のコメントに小さな「Author」ラベルを追加し、投稿者のアバター画像に境界線を追加するサンプルコードです。
.bypostauthor:before {
content:"Author";
float:right;
background-color:#FF1100;
padding:5px;
font-size:small;
font-weight:bold;
color:#FFFFFF;
}
.bypostauthor .avatar {
border:1px dotted #FF1100;
}
テストウェブサイトではこのように表示されました。
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;
テーマのfunctions.phpファイルを編集する代わりに、このコードをWPCodeで追加することをお勧めします。
このコードスニペットプラグインを使用すると、WordPressにカスタムコードを安全かつ簡単に追加できます。
開始するには、無料の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;
}
これはテストサイトでの表示です。お使いのテーマの色やスタイルに合わせてコードを自由に修正してください。
詳細については、WordPressコメントにユーザーロールラベルを追加する方法に関する記事をご覧ください。
この記事がWordPressで著者のコメントをハイライトする方法を学ぶのに役立ったことを願っています。また、WordPressで訪問者にとって新しい投稿をハイライトする方法や、WordPress向けの最高の著者バイオボックスプラグインの専門家による選び方に関するチュートリアルも参照してください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
イジー・ヴァネック
ユーザーコメントと投稿者のコメントを視覚的に分離することは非常に重要だと感じています。特に、記事の投稿者が返信していることが明確に示され、そのトピックについて最も知識がある可能性が高いからです。実装がこれほど簡単であれば、それは素晴らしいことです！
デニス・ムトミ
コメントについて質問があります。コメントはユーザー生成コンテンツですが、検索エンジンにインデックスされる方法はありますか？
フォーラムやコミュニティの投稿が検索結果に表示されることが多いのは知っているので、WordPressのコメントでも同様のことが機能するかどうか気になっています。
WPBeginnerサポート
Normally if you check with your SEO plugin they may have a tool or setting to add markup for your comments
管理者
ラファエル
Not work for me
私はtwenty Twenty Thirteenのcomments.phpを使用したカスタムテーマを使用しています。
追加のCSSクラスはどこに追加できますか？
WPBeginnerサポート
ラファエルさん、こんにちは。
WordPressにカスタムCSSを追加する方法に関するガイドをご覧ください。
管理者
Irfan Ali
どうもありがとうございます。
Haina
こんにちは！ウェブサイトに誰かがコメントを残すと、投稿者の名前がグレーで表示されます。これを黒に変更するにはどうすればよいですか？また、「パーマリンク」という単語が常にコメントの日時下に表示されます。これを削除するにはどうすればよいですか？どんな助けでも大変感謝します。ありがとう。
WPBeginnerサポート
Hainaさん、こんにちは。
WordPressコメントのスタイル設定方法に関するガイドをご覧ください。
管理者
Haina
早速のご返信ありがとうございます。しかし、私のCSSの理解度は「まあまあ」以下です。コメント投稿者の名前を黒く表示するには、直接的な指示をいただけますでしょうか。もし無理であれば、理解いたします。ありがとうございます。
Martin
著者のコメントへの返信をスタイリングから除外するにはどうすればよいですか？
Peter Huan
試しましたが、できませんでした。自分でテーマのオプションに追加されました。
「div」を変更したのかもしれません…
トピックをありがとうございます。
Fahad
コメントの作成者がコメントの作成者であり、他の誰かが返信した場合、背景を変更する際に問題が発生します。ネストされた返信も同じハイライトされた背景を持つことになるからです！
deven
良い投稿です…しかし、同じことをするためのプラグインはありますか？（いくつかありますが、2〜3年前のものです）もっとカスタマイズオプションのある新しいものを探しています。
char
各投稿者（主要な投稿者）に異なる色のコメントを付ける方法はありますか？
編集スタッフ
はい、登録ユーザーに異なる色のコメントを割り当てることは可能です。クラスは .comment-author-username のようになります。username を投稿者のユーザー名に置き換えてください。
管理者
アーマド・ラザ
あなたが説明した方法で進みましたが、comments.php で <li id=”comment-“> テンプレートが見つかりませんでした。
何か解決策はありますか？
編集スタッフ
記事を更新し、より最新の状態にしました。
管理者
グレッチェン・ルイーズ
I’d love to see this tutorial updated to apply to Genesis and multi-author blogs!
キース・デイビス
役立つヒントです。
投稿のコメントを読むとき、著者のコメントはより権威があるという前提で読む傾向があります。
CSS は問題ありませんが、PHP については自信がありません。
PHP をいじり始めるきっかけを与えてくれたかもしれません！
joyoge bookmark
素晴らしいチュートリアルです、ありがとうございます
janghuan
私のWordPressバージョンでは、WordPressが生成する既存のクラスを追加するだけで済みます。それは「comment-author-admin」です。WordPressが生成する「bypostauthor」クラスも機能するかもしれません。
ブレイク・イーメソン
この方法はマルチオーサーブログではうまくいかないのではないでしょうか？
編集スタッフ
カンマを追加してユーザーIDをさらに追加できるかもしれませんが、その場合、すべてのエディターのコメントがハイライト表示されるため、そのように見ると失敗となります。
管理者