ウェブサイトのWordPressコメントフォームのスタイルを変更したいですか？ WPBeginnerでは、ユーザーエンゲージメントを高めるためのさまざまな方法を長年試しており、見た目が良く、使いやすいコメントフォームが 大きな 違いを生むことを発見しました。
コメントは、ウェブサイトでのユーザーエンゲージメントを構築する上で重要な役割を果たします。ユーザーがコメントを残しやすく、視覚的に魅力的にすることで、ウェブサイトでのさらなる議論とインタラクションを促進します。
この記事では、WordPressのコメントフォームを簡単にスタイル設定して、ウェブサイトのエンゲージメントを高める方法をご紹介します。
開始する前に
WordPressテーマはウェブサイトの外観を制御します。各WordPressテーマには、テンプレートファイル、functionsファイル、JavaScript、スタイルシートなど、いくつかのファイルが含まれています。
スタイルシートには、WordPressテーマが使用するすべての要素のCSSルールが含まれています。テーマのスタイルルールを上書きするために、独自のカスタムCSSを追加できます。
これが初めての場合は、初心者向けのWordPressでカスタムCSSを追加する方法に関する記事をご覧ください。
CSS以外にも、WordPressのコメントフォームのデフォルトの外観を変更するためにいくつかの関数を追加する必要がある場合があります。以前にこれを行ったことがない場合は、WordPressにウェブ上のスニペットを貼り付けるための初心者ガイドに関する記事をご覧ください。WordPressでコードをコピーして貼り付ける方法。
それでは、WordPressのコメントフォームのスタイル設定方法を見ていきましょう。
このガイドは非常に包括的であるため、ナビゲーションを容易にするために目次を作成しました。
- SeedProdテーマビルダーを使用したWordPressコメントフォームのスタイリング
- Change WordPress Comments with Default CSS Classes
- WordPressコメントへのソーシャルログインの追加
- WordPressコメントフォームにコメントポリシーテキストを追加する
- コメント入力欄を下に移動
- WordPressコメントフォームからウェブサイト（URL）フィールドを削除する
- WordPressでコメント購読チェックボックスを追加する
- WordPressコメントフォームにカスタムフィールドを追加
SeedProdテーマビルダーを使用したWordPressコメントフォームのスタイリング
この方法では、市場でSeedProdが必要となります。これは市場で最高のWordPressページおよびテーマビルダープラグインです。
コーディング経験のない初心者におすすめです。ただし、この方法の欠点は、既存のWordPressテーマがカスタムテーマに置き換わることです。
まず、SeedProd プラグインをインストールして有効化する必要があります。詳細については、WordPress プラグインのインストール方法に関するステップバイステップガイドをご覧ください。
注意：テーマビルダー機能にアクセスするには、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）フィールドを削除する
コメントフォームのウェブサイトフィールドは、多くのスパマーを引き付けます。これを削除してもスパマーを止めたり、スパムコメントを減らしたりすることはできませんが、不適切な著者ウェブサイトリンクを含むコメントを誤って承認してしまうことを確実に避けることができます。
コメントフォームからフィールドが1つ減り、より簡単で使いやすくなります。このトピックの詳細については、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のような簡単なスパム対策を実装することを検討してください。
Hitesh Patel
現在、コメントフォームには1つのコメントテキストエリアフィールドと1つの投稿コメントボタンがあります。Twenty Twenty-Fourテーマには、名前、メール、ウェブサイトのフィールドが見つかりませんでした。
WPBeginnerサポート
サイトにログインしている場合、ログイン中のユーザーの情報が自動的に使用されます。シークレットブラウザでサイトにアクセスした場合、コメント投稿者の名前や情報を削除するカスタマイズが行われていない限り、フィールドが表示されるはずです。
管理者
ガブリエル・ピント＝ハサギブ
こんにちは。
この記事大好きです！とても分かりやすく説明されていました！
Quick question, how can i change the “↩” with my svg icon when someone replays a comment?
WPBeginnerサポート
テーマによって異なります。すべてのテーマにコメントフォームにその記号があるわけではありません。
管理者
Dayo Olobayo
この記事を作成していただきありがとうございます。ウェブサイトの URL を削除するためにコードスニペットを使用しましたが、ここではうまく機能しないことに気づきました。その理由は、2つの投稿でしか機能せず、ウェブサイトの他の投稿のコメントセクションにはまだ URL ボックスが表示されているからです。
私だけがうまくいっていないのでしょうか？また、コード内の「wpbeginner」を私のドメイン名に置き換える必要がありますか？
WPBeginnerサポート
You may want to check with your theme to see if they have something in their styling that could be overriding the standard styling. You do not need to remove wpbeginner from the code for it to work.
管理者
イジー・ヴァネック
Seed Prodを使用したチュートリアルをありがとうございます。現在WP Discuzを使用しており、それに満足しています。しかし、小規模なサイトでは、Seed Prodの方がはるかにエレガントなフォームになります。指示はかなり長いですが、Seed Prodがインストールされているテストサイトで試してみます。素晴らしい、非常に詳細なチュートリアルをありがとうございます。
モイヌディン・ワヒード
ウェブサイトで様々なコメント欄を見てきましたが、すべて同じWordPressのコメント機能を使用しているのに、なぜ見た目が異なるのか疑問に思っていました。
見た目の良いコメント欄は、コメントする際のユーザーエクスペリエンスを向上させるために不可欠です。
私は2年間使用してきたWordPressのコメント機能であるDisqusプラットフォームについて質問があります。
引き続き使用するのは良い考えでしょうか、それとももっと良い代替手段はありますか？
また、WPBeginnerがコメント機能に何を使用しているのか、単に知りたいです。
WPBeginnerサポート
Disqusに関する当社の意見は、以下の記事でご覧いただけます。現在、コメントにはWordPressの組み込みコメントシステムを使用しています。
https://014.leahstevensyj.workers.dev/wp-tutorials/how-to-disable-disqus-on-custom-post-types-in-wordpress/
管理者
イジー・ヴァネック
私の意見では、WP Discuzは素晴らしいプラグインです。ブログでほぼ2年間使用していますが、これまでのところ問題なく動作しています。ですので、もしあなたも使用しているなら、このプラグインを必ずしも変更する必要はないでしょう。開発者とサポートチームは素晴らしい仕事をしています。ただし、このプラグインはかなり大きく複雑なので、ウェブサイトの種類やサイズにも依存するでしょう。
Vera Kofyan
素晴らしいチュートリアルをありがとうございました。
一点だけうまくいかなかったことがあります：テキストエリアを一番下に移動させることです。コードスニペットにスクリプトを追加しましたが、何も変わりませんでした。あなたが書いた時から何か変更はありましたか？
ありがとうございます。
Vera
WPBeginnerサポート
スニペットは引き続き正しく機能するはずです。使用中のテーマがコメントフォームにスタイルを追加し、一部の表示を変更している可能性があります。お使いの特定のテーマのサポートに確認すれば、チェックと確認の助けを得られます。
管理者
Arischvaran Puvanesvaran
共有ありがとうございます
WPBeginnerサポート
どういたしまして、私たちのガイドがお役に立てば幸いです！
管理者
アリ・カリーム
このブログは非常に有益です。
WPBeginnerサポート
当サイトがお役に立てて嬉しいです！
管理者
Asutosh sahoo
非常に知識が豊富です。更新を続けてください。ありがとうございます。
WPBeginnerサポート
ガイドがお役に立てて嬉しいです！
管理者
saikul
良いチュートリアルです。気に入りました。
WPBeginnerサポート
ありがとうございます。気に入っていただけて嬉しいです！
管理者
サミヤック・シャルマ
ありがとうございます。とても良い記事です。
WPBeginnerサポート
Glad you found it helpful
管理者
ヴィンセント・ニャガカ
WordPressフォームのスタイル設定方法についてご指導いただきありがとうございます。しかし、コメントフォームからURLフィールドを削除する方法について、ほとんどすべてのコードを試しましたが、残念ながらどれも機能しませんでした。別のコードを教えていただけますでしょうか。
WPBeginnerサポート
当社の推奨事項のいずれも役に立たなかった場合は、お使いの特定のテーマのサポートに連絡することをお勧めします。彼らはコメントの特定のターゲットを支援できるはずです。
管理者
amr
こんにちは
著者名と日付からURLを削除するにはどうすればよいですか？
ありがとう
WPBeginnerサポート
コメントからという意味であれば、以下の記事をご覧ください。
https://014.leahstevensyj.workers.dev/plugins/how-to-remove-website-url-field-from-wordpress-comment-form/
管理者
lal
良いチュートリアル、気に入りました
WPBeginnerサポート
Glad you liked our tutorial
管理者
Adam Rees
ありがとうございます。コメントセクションのカスタマイズに大いに役立ちました。
WPBeginnerサポート
You’re welcome
管理者
fred
こんにちは、チュートリアルは素晴らしいです！しかし、投稿コメントを編集する正しい.phpファイルを見つけるのに問題があります。OceanWPテーマとElementor Proを使用しています。functions.phpまたはcomments.phpに移動しても、コマンドラインが見つかりません。コードを追加してみましたが、何も起こりません。どこか別の場所にあると思いますが、どこですか？
WPBeginnerサポート
ページビルダーを使用している場合、コメントフォームの編集方法や利用可能なツールについては、そのページビルダーのサポートに問い合わせる必要があります。
管理者
ムハンマド・シャーザド
コメントボックスをすべてのコメントの一番上、および投稿の後に表示する方法。
WPBeginnerサポート
テーマがそのように設定されていない場合は、残念ながらそれを実行するためにテーマのコードを変更する必要があります。各テーマのコードは非常に異なるため、現時点では具体的なガイドはありません。
管理者
HieuBui
どうもありがとうございます
WPBeginnerサポート
You’re welcome
管理者