よく設計されたコメントフォームは、WordPressサイトにコメントを残す人の数に大きな違いをもたらす可能性があります。
コメントフォームがクリーンでモダンで使いやすい場合、訪問者は会話に参加し、コンテンツと対話する可能性が高くなります。
しかし、デフォルトのWordPressコメントフォームはサイトのデザインと一致しないことが多く、それが不親切に感じられ、コメントを控える原因となる可能性があります。
WPBeginnerでは、ユーザーエンゲージメントを高めるためのさまざまな方法を長年テストしてきましたが、コメントフォームのカスタマイズは、私たちがこれまでに行った最も効果的な変更の1つです。
この記事では、WordPressのコメントフォームを簡単にスタイル設定して、ウェブサイトのエンゲージメントを高める方法をご紹介します。
開始する前に
WordPressのテーマは、ウェブサイトの外観を制御します。各WordPressテーマには、テンプレートファイル、関数ファイル、JavaScript、スタイルシートなど、いくつかのファイルが付属しています。
スタイルシートには、WordPressテーマで使用されるすべての要素のCSSルールが含まれています。テーマのスタイルルールをオーバーライドするために、独自のカスタムCSSを追加できます。
これを行ったことがない場合は、初心者向けのWordPressにカスタムCSSを追加する方法に関する記事を参照してください。
CSS以外にも、WordPressコメントフォームのデフォルトの外観を変更するためにいくつかの関数を追加する必要がある場合があります。これを行ったことがない場合は、WordPressでコードをコピーして貼り付ける方法に関する記事を参照してください。
それでは、WordPressのコメントフォームのスタイル設定方法を見ていきましょう。
このガイドは非常に包括的であるため、ナビゲーションを容易にするために目次を作成しました。
SeedProdテーマビルダーを使用したWordPressコメントフォームのスタイリング
この方法では、市場で最高のWordPressページおよびテーマビルダープラグインであるSeedProdが必要です。
コーディング経験のない初心者におすすめです。ただし、この方法の欠点は、既存のWordPressテーマがカスタムテーマに置き換わることです。
まず、SeedProdプラグインをインストールしてアクティブ化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
📍 注：ダウンロード可能なSeedProdの無料版があります。ただし、テーマビルダー機能にアクセスするには、少なくともPROプランが必要です。
有効化したら、カスタムWordPressテーマ用のテンプレートを作成する必要があります。SeedProdを使用すると、組み込みテーマのいずれかを使用してこれらのテンプレートを簡単に生成できます。
詳細な手順については、コーディングなしでカスタムWordPressテーマを作成する方法に関するチュートリアルを参照してください。
テーマテンプレートの生成が完了したら、シングル投稿テンプレートの下にある「デザインを編集」リンクをクリックする必要があります。
これにより、SeedProdテーマビルダーインターフェイスに単一投稿のプレビューが読み込まれます。プレビューの下部にあるコメントフォームブロックに気づくでしょう。
コメントフォームをクリックするだけで、左側のパネルにそのプロパティが表示されます。
ここから、コメントノートまたはプライバシーポリシーを追加できます。また、「高度」タブに切り替えて、CSSコードを書かずにコメントフォームのスタイルを編集することもできます。
完了したら、「保存」ボタンをクリックして変更を公開することを忘れないでください。
SeedProd を使用すると、コードを書かずにウェブサイトのあらゆる要素のスタイルを簡単に変更できます。
ただし、これはテーマビルダーであり、すでに気に入っているWordPressテーマを使用している可能性があります。その場合は、次のヒントがWordPressでコメントフォームのスタイルを手動で変更するのに役立ちます。
WordPressでコメントフォームのスタイルを変更する
ほとんどのWordPressテーマには、comments.phpというテンプレートがあります。このファイルは、ブログ投稿にコメントとコメントフォームを表示するために使用されます。WordPressのコメントフォームは、次の関数を使用して生成されます：<?php comment_form(); ?>。
デフォルトでは、この関数は、3つのテキストフィールド（名前、メール、ウェブサイト）、コメントテキスト用のテキストエリアフィールド、GDPR準拠のチェックボックス、および送信ボタンを含むコメントフォームを生成します。
WordPressが各コメントフォームに追加するデフォルトのCSSクラスを調整するだけで、これらの各フィールドを簡単に変更できます。以下は、WordPressが各コメントフォームに追加するデフォルトのCSSクラスのリストです。
#respond { }
#reply-title { }
#cancel-comment-reply-link { }
#commentform { }
#author { }
#email { }
#url { }
#comment
#submit
.comment-notes { }
.required { }
.comment-form-author { }
.comment-form-email { }
.comment-form-url { }
.comment-form-comment { }
.comment-form-cookies-consent { }
.form-allowed-tags { }
.form-submit
これらのCSSクラスを少し変更するだけで、WordPressのコメントフォームの外観を完全に変えることができます。
いくつかの点を変更して、これがどのように機能するかをよく理解できるようにしましょう。
まず、アクティブなフォームフィールドをハイライト表示することから始めます。現在アクティブなフィールドをハイライト表示すると、特別なニーズを持つユーザーにとってフォームがよりアクセスしやすくなり、小さなデバイスでもコメントフォームが見栄えが良くなります。
#respond {
background: #fbfbfb;
padding:0 10px 0 10px;
}
/* Highlight active form field */
#respond input[type=text], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
}
#respond input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
margin: 5px 1px 3px 0px;
border: 2px solid rgba(81, 203, 238, 1);
}
こちらが、変更後のWordPress Twenty Sixteenテーマでのフォームの外観です。
これらのクラスを使用すると、入力ボックス内のテキストの表示方法の動作を変更できます。著者名とURLフィールドのテキストスタイルを変更します。
#author, #email {
font-family: "Open Sans", "Droid Sans", Arial;
font-style:italic;
color:#1d1d1d;
letter-spacing:.1em;
}
#url {
color: #1d1d1d;
font-family: "Luicida Console", "Courier New", "Courier", monospace;
}
下のスクリーンショットをよく見ると、名前とメールアドレスのフィールドのフォントがウェブサイトのURLと異なっていることがわかります。
WordPressコメントフォームの送信ボタンのスタイルも変更できます。デフォルトの送信ボタンを使用する代わりに、CSS3グラデーションとボックスシャドウを適用しましょう。
#submit {
background:-moz-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-webkit-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-o-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-ms-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
background-color:#44c767;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}
#submit:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cbf2a), color-stop(1, #44c767));
background:-moz-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-webkit-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-o-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-ms-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
background-color:#5cbf2a;
}
#submit:active {
position:relative;
top:1px;
}
WordPressコメントフォームを次のレベルへ
基本的すぎるとお思いかもしれませんが、全員が理解できるように、そこから始める必要があります。
ただし、フォームフィールドの並べ替え、ソーシャルログインの追加、コメント購読、コメントガイドライン、クイックタグなどを追加することで、WordPressのコメントフォームを次のレベルに引き上げることができます。
WordPressのコメントにソーシャルログインを追加する
WordPress コメントにソーシャルログインを追加することから始めましょう。
最初に行う必要があるのは、Super Socializerプラグインをインストールしてアクティブ化することです。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。
有効化したら、Super Socializer » Social Loginにアクセスし、「ソーシャルログインを有効にする」というチェックボックスにチェックを入れる必要があります。
これにより、ソーシャルログインオプションパネルが表示されます。まず、「Advanced Configuration」タブをクリックします。
次に、「コメントフォームで有効にする」ボックスがチェックされていることを確認してください。
次に、「基本設定」タブをクリックします。「ソーシャルネットワークを選択」セクションのチェックボックスをオンにすることで、追加したいソーシャルネットワークを選択できます。
この下に、ソーシャルプラットフォームと接続するためにプラグインにAPIキーが必要になります。各プラットフォームの取得方法の説明を表示するには、「疑問符」アイコンをクリックするだけです。
完了したら、「変更を保存」ボタンをクリックして、ソーシャルログイン設定を保存します。
これで、ウェブサイトにアクセスして、コメントフォームの上にソーシャルログインボタンが表示されていることを確認できます。
コメントフォームの前または後にコメントポリシーテキストを追加する
私たちはすべてのユーザーを愛しており、私たちのサイトにコメントを残すために数分を費やしてくれたことに本当に感謝しています。ただし、健全な議論環境を作成するためには、コメントをモデレートすることが重要です。
完全な透明性のために、コメントポリシーページを作成しましたが、このリンクをフッターに置くだけではいけません。
コメントを残すすべてのユーザーにコメントポリシーをわかりやすく表示したかったのです。そのため、WordPressのコメントフォームにコメントポリシーを追加することにしました。
コメントポリシーページを追加したい場合は、まずWordPressのページを作成し、コメントポリシーを定義する必要があります（私たちのものをコピーしてニーズに合わせて変更することもできます）。
その後、次のコードをテーマのfunctions.phpファイルまたはコードスニペットプラグインに追加できます。
function wpbeginner_comment_text_before($arg) {
$arg['comment_notes_before'] .= '<p class="comment-policy"">We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our <a href="http://www.example.com/comment-policy-page/">comment policy</a>.</p>';
return $arg;
}
add_filter('comment_form_defaults', 'wpbeginner_comment_text_before');
上記のコードは、メモの前にデフォルトのコメントフォームをこのテキストに置き換えます。また、CSS で通知をハイライトできるように、コードに CSS クラスを追加しました。以下は、使用したサンプル CSS です。
p.comment-policy {
border: 1px solid #ffd499;
background-color: #fff4e5;
border-radius: 5px;
padding: 10px;
margin: 10px 0px 10px 0px;
font-size: small;
font-style: italic;
}
テストサイトではこのように表示されました：
コメントテキストエリアの後にリンクを表示したい場合は、次のコードを使用してください。
function wpbeginner_comment_text_after($arg) {
$arg['comment_notes_after'] .= '<p class="comment-policy"">We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our <a href="http://www.example.com/comment-policy-page/">comment policy</a>.</p>';
return $arg;
}
add_filter('comment_form_defaults', 'wpbeginner_comment_text_after');
URLを適切に変更して、example.comではなくコメントポリシーページにアクセスするように忘れないでください。
コメント入力欄を下に移動
デフォルトでは、WordPressのコメントフォームは、コメントテキストエリアが最初に表示され、次に名前、メール、ウェブサイトのフィールドが表示されます。この変更はWordPress 4.4で導入されました。
それ以前は、WordPressのウェブサイトでは、まず名前、メール、ウェブサイトのフィールドが表示され、その後にコメント本文の入力欄が表示されていました。ユーザーは通常その順序でコメントフォームを見慣れていると感じたため、WPBeginnerでは古いフィールド順を使用しています。
それを行いたい場合は、次のコードをテーマのfunctions.phpファイルまたはコードスニペットプラグインに追加するだけです。
function wpb_move_comment_field_to_bottom( $fields ) {
$comment_field = $fields['comment'];
unset( $fields['comment'] );
$fields['comment'] = $comment_field;
return $fields;
}
add_filter( 'comment_form_fields', 'wpb_move_comment_field_to_bottom');
WordPressにコードを追加するには、WPCodeのようなコードスニペットプラグインを使用することを常にお勧めします。これにより、functions.phpファイルを編集せずにカスタムコードを簡単に追加できるため、サイトが壊れる心配がありません。
開始するには、無料のWPCodeプラグインをインストールしてアクティブ化する必要があります。手順については、WordPressプラグインのインストール方法に関するこの記事を参照してください。
有効化したら、WordPressダッシュボードからCode Snippets » + Add Snippetに移動します。
そこから、「カスタムコードを追加（新規スニペット）」オプションを見つけ、その下にある「+カスタムスニペットを追加」ボタンをクリックします。
その後、画面に表示されるオプションのリストから、コードの種類として「PHPスニペット」を選択する必要があります。
次に、ページの上部にあるスニペットのタイトルを追加します。これは、コードが何のためのものかを覚えておくのに役立つものであれば何でも構いません。
次に、上記のコードを「コードプレビュー」ボックスに貼り付けます。
最後に、スイッチを「非アクティブ」から「アクティブ」に切り替え、「スニペットを保存」ボタンをクリックするだけです。
このコードは、コメントのテキストエリアフィールドを単純に一番下に移動させます。
WordPressコメントフォームからウェブサイト（URL）フィールドを削除する
コメントフォームのウェブサイトフィールドは、多くのスパマーを引き付けます。これを削除してもスパマーを止めたり、スパムコメントを減らしたりすることはできませんが、不適切な著者ウェブサイトリンクを含むコメントを誤って承認してしまうことを確実に避けることができます。
これにより、コメントフォームのフィールドも減り、より簡単でユーザーフレンドリーになります。このトピックの詳細については、WordPressのコメントフォームからウェブサイトURLフィールドを削除する方法に関する記事をご覧ください。
コメントフォームからURLフィールドを削除するには、次のコードをfunctions.phpファイルまたはコードスニペットプラグインに追加するだけです。
function wpbeginner_remove_comment_url($arg) {
$arg['url'] = '';
return $arg;
}
add_filter('comment_form_default_fields', 'wpbeginner_remove_comment_url');
WPCodeプラグインを使用してWordPressにこのコードを安全に追加するには、前のセクションの同じ手順に従うことができます。
WordPressでコメント購読チェックボックスを追加する
ユーザーがあなたのウェブサイトにコメントを残したとき、そのスレッドをフォローして誰かが自分のコメントに返信したかどうかを確認したい場合があります。「コメント購読」チェックボックスを追加することで、投稿に新しいコメントが表示されるたびにユーザーが即座に通知を受け取れるようになります。
このチェックボックスを追加するには、まずSubscribe to Comments Reloadedプラグインをインストールしてアクティブ化する必要があります。アクティブ化後、プラグイン設定を構成するには、StCR » Comment Formページにアクセスする必要があります。
詳細なステップバイステップの説明については、WordPressでユーザーがコメントを購読できるようにする方法に関する記事をご覧ください。
WordPressコメントフォームにカスタムフィールドを追加する
WordPressのコメントフォームに追加フィールドを設けたいですか？例えば、ユーザーがTwitterハンドルを追加できるオプションフィールドなどです。
WordPress Comments Fields プラグインをインストールしてアクティブ化するだけです。アクティブ化後、「Comments Fields」ページに移動し、「Comment Fields」タブに切り替えます。
カスタムフィールドをドラッグアンドドロップし、タイトル、説明、データ名を付けます。
フィールドの追加が完了したら、「すべての変更を保存」ボタンをクリックすることを忘れないでください。
これで、コメントフォームを表示して、カスタムフィールドが機能していることを確認できます。
カスタムフィールドは、コメントモデレーションに表示され、コメントコンテンツの下に表示されます。
詳細については、WordPressのコメントフォームにカスタムフィールドを追加する方法に関するチュートリアルをご覧ください。
この記事が、WordPressのコメントフォームをスタイリングしてユーザーにとってより楽しくする方法を学ぶのに役立ったことを願っています。また、WordPressブログ投稿でコメントを増やすためのヒントや、WordPress向けの最高のソーシャルメディアプラグインの専門家による選び方もご覧ください。
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
デニス・ムトミ
追加の提案として、コメントモデレーションの作業負荷をさらに軽減するために、CAPTCHAのような簡単なスパム対策を実装することを検討してください。
ヒテシュ・パテル
現在、コメントフォームには1つのコメントテキストエリアフィールドと1つの投稿コメントボタンがあります。Twenty Twenty-Fourテーマには、名前、メール、ウェブサイトのフィールドが見つかりませんでした。
WPBeginnerサポート
サイトにログインしている場合、ログイン中のユーザーの情報が自動的に使用されます。シークレットブラウザでサイトにアクセスした場合、コメント投稿者の名前や情報を削除するカスタマイズが行われていない限り、フィールドが表示されるはずです。
管理者
ガブリエル・ピント＝ハサギブ
こんにちは。
この記事大好きです！とても分かりやすく説明されていました！
簡単な質問ですが、誰かがコメントに返信したときに、「↩」を自分のSVGアイコンに変更するにはどうすればよいですか？
WPBeginnerサポート
テーマによって異なります。すべてのテーマにコメントフォームにその記号があるわけではありません。
管理者
デヨ・オロボヨ
この記事を作成していただきありがとうございます。ウェブサイトの URL を削除するためにコードスニペットを使用しましたが、ここではうまく機能しないことに気づきました。その理由は、2つの投稿でしか機能せず、ウェブサイトの他の投稿のコメントセクションにはまだ URL ボックスが表示されているからです。
私だけがうまくいっていないのでしょうか？また、コード内の「wpbeginner」を私のドメイン名に置き換える必要がありますか？
WPBeginnerサポート
テーマの標準スタイルが上書きされている可能性があるため、テーマに確認することをお勧めします。コードからwpbeginnerを削除する必要はありません。動作します。
管理者
イジー・ヴァネック
Seed Prodを使用したチュートリアルをありがとうございます。現在WP Discuzを使用しており、それに満足しています。しかし、小規模なサイトでは、Seed Prodの方がはるかにエレガントなフォームになります。指示はかなり長いですが、Seed Prodがインストールされているテストサイトで試してみます。素晴らしい、非常に詳細なチュートリアルをありがとうございます。
モイヌディン・ワヒード
ウェブサイトで様々なコメント欄を見てきましたが、すべて同じWordPressのコメント機能を使用しているのに、なぜ見た目が異なるのか疑問に思っていました。
見た目の良いコメント欄は、コメントする際のユーザーエクスペリエンスを向上させるために不可欠です。
私は2年間使用してきたWordPressのコメント機能であるDisqusプラットフォームについて質問があります。
引き続き使用するのは良い考えでしょうか、それとももっと良い代替手段はありますか？
また、WPBeginnerがコメント機能に何を使用しているのか、単に知りたいです。
WPBeginnerサポート
Disqusに関する当社の意見は、以下の記事でご覧いただけます。現在、コメントにはWordPressの組み込みコメントシステムを使用しています。
https://www.wpbeginner.com/wp-tutorials/how-to-disable-disqus-on-custom-post-types-in-wordpress/
管理者
イジー・ヴァネック
私の意見では、WP Discuzは素晴らしいプラグインです。ブログでほぼ2年間使用していますが、これまでのところ問題なく動作しています。ですので、もしあなたも使用しているなら、このプラグインを必ずしも変更する必要はないでしょう。開発者とサポートチームは素晴らしい仕事をしています。ただし、このプラグインはかなり大きく複雑なので、ウェブサイトの種類やサイズにも依存するでしょう。
ヴェラ・コフヤン
素晴らしいチュートリアルをありがとうございました。
一点だけうまくいかなかったことがあります：テキストエリアを一番下に移動させることです。コードスニペットにスクリプトを追加しましたが、何も変わりませんでした。あなたが書いた時から何か変更はありましたか？
ありがとうございます。
Vera
WPBeginnerサポート
スニペットは引き続き正しく機能するはずです。使用中のテーマがコメントフォームにスタイルを追加し、一部の表示を変更している可能性があります。お使いの特定のテーマのサポートに確認すれば、チェックと確認の助けを得られます。
管理者
Arischvaran Puvanesvaran
共有ありがとうございます
WPBeginnerサポート
どういたしまして、私たちのガイドがお役に立てば幸いです！
管理者
アリ・カリーム
このブログは非常に有益です。
WPBeginnerサポート
当サイトがお役に立てて嬉しいです！
管理者
アストシュ・サフー
非常に知識が豊富です。更新を続けてください。ありがとうございます。
WPBeginnerサポート
ガイドがお役に立てて嬉しいです！
管理者
サイクル
良いチュートリアルです。気に入りました。
WPBeginnerサポート
ありがとうございます。気に入っていただけて嬉しいです！
管理者
サミヤック・シャルマ
ありがとうございます。とても良い記事です。
WPBeginnerサポート
お役に立てて嬉しいです
管理者
ヴィンセント・ニャガカ
WordPressフォームのスタイル設定方法についてご指導いただきありがとうございます。しかし、コメントフォームからURLフィールドを削除する方法について、ほとんどすべてのコードを試しましたが、残念ながらどれも機能しませんでした。別のコードを教えていただけますでしょうか。
WPBeginnerサポート
当社の推奨事項のいずれも役に立たなかった場合は、お使いの特定のテーマのサポートに連絡することをお勧めします。彼らはコメントの特定のターゲットを支援できるはずです。
管理者
アムル
こんにちは
著者名と日付からURLを削除するにはどうすればよいですか？
ありがとう
WPBeginnerサポート
コメントからという意味であれば、以下の記事をご覧ください。
https://www.wpbeginner.com/plugins/how-to-remove-website-url-field-from-wordpress-comment-form/
管理者
ラール
良いチュートリアル、気に入りました
WPBeginnerサポート
私たちのチュートリアルを気に入っていただき嬉しいです
管理者
Adam Rees
ありがとうございます。コメントセクションのカスタマイズに大いに役立ちました。
WPBeginnerサポート
どういたしまして
管理者
フレッド
こんにちは、チュートリアルは素晴らしいです！しかし、投稿コメントを編集する正しい.phpファイルを見つけるのに問題があります。OceanWPテーマとElementor Proを使用しています。functions.phpまたはcomments.phpに移動しても、コマンドラインが見つかりません。コードを追加してみましたが、何も起こりません。どこか別の場所にあると思いますが、どこですか？
WPBeginnerサポート
ページビルダーを使用している場合、コメントフォームの編集方法や利用可能なツールについては、そのページビルダーのサポートに問い合わせる必要があります。
管理者
ムハンマド・シャーザド
コメントボックスをすべてのコメントの一番上、および投稿の後に表示する方法。
WPBeginnerサポート
テーマがそのように設定されていない場合は、残念ながらそれを実行するためにテーマのコードを変更する必要があります。各テーマのコードは非常に異なるため、現時点では具体的なガイドはありません。
管理者
ヒエウ・ブイ
どうもありがとうございます
WPBeginnerサポート
どういたしまして
管理者