WPBeginner - 初心者向けWordPressチュートリアル

信頼できるWordPressチュートリアル、必要な時に。
WordPress初心者ガイド
WPBカップ
2500万以上
当社のプラグインを使用しているウェブサイト
16+
年のWordPress経験
3000+
専門家によるWordPressチュートリアル

WordPressコメントフォームのスタイリング方法（究極ガイド）

編集スタッフ | | 読者開示

Shares 295 ChatGPT Perplexity X LinkedIn WhatsApp

デザイン性の高いコメントフォームは、実際にあなたのWordPressサイトにコメントを残す人の数に大きな違いをもたらします。

コメントフォームがクリーンでモダンで使いやすい場合、訪問者は会話に参加し、あなたのコンテンツとやり取りする可能性が高くなります。

しかし、デフォルトのWordPressコメントフォームは、サイトのデザインと一致しないことが多く、それが不親切に感じられ、コメントを控える原因となることがあります。

WPBeginnerでは、ユーザーエンゲージメントを高めるさまざまな方法を長年テストしてきましたが、コメントフォームのカスタマイズは、私たちが実施した最も効果的な変更の1つです。

この記事では、ウェブサイトでのエンゲージメントを高めるために、WordPressコメントフォームを簡単にスタイル設定する方法をご紹介します。

WordPressコメントフォームのスタイル設定

始める前に

WordPressテーマは、ウェブサイトの外観を制御します。各WordPressテーマには、テンプレートファイル、functionsファイル、JavaScript、スタイルシートなど、いくつかのファイルが付属しています。

スタイルシートには、WordPressテーマで使用されるすべての要素のCSSルールが含まれています。テーマのスタイルルールをオーバーライドするために、独自のカスタムCSSを追加できます。

これを行ったことがない場合は、初心者向けのWordPressにカスタムCSSを追加する方法に関する記事を参照してください。

CSS以外にも、WordPressコメントフォームのデフォルトの外観を変更するために、いくつかの関数を追加する必要がある場合があります。これを行ったことがない場合は、WordPressでコードをコピーして貼り付ける方法に関する記事を参照してください。

さて、WordPressコメントフォームのスタイル設定方法を見ていきましょう。

これはかなり包括的なガイドなので、ナビゲーションを容易にするために目次を作成しました。

SeedProdテーマビルダーを使用したWordPressコメントフォームのスタイル設定

この方法では、市場で最高のWordPressページおよびテーマビルダープラグインであるSeedProdが必要です。

コーディング経験のない初心者におすすめです。ただし、この方法の欠点は、既存のWordPressテーマをカスタムテーマに置き換えることです。

まず、SeedProdプラグインをインストールしてアクティブ化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。

📍 注：ダウンロード可能なSeedProdの無料バージョンがあります。ただし、テーマビルダー機能にアクセスするには、少なくともPROプランが必要です。

アクティブ化後、カスタムWordPressテーマのテンプレートを作成する必要があります。SeedProdを使用すると、組み込みのテーマのいずれかを使用してこれらのテンプレートを簡単に生成できます。

詳細な手順については、コーディングなしでカスタムWordPressテーマを作成する方法に関するチュートリアルを参照してください。

テーマテンプレートを生成したら、[シングル投稿]テンプレートの下にある[デザインを編集]リンクをクリックする必要があります。

シングル投稿テンプレートの編集

これにより、SeedProdテーマビルダーインターフェイスでシングル投稿プレビューが読み込まれます。プレビューの下部にあるコメントフォームブロックに気づくでしょう。

SeedProdでコメントフォームを編集する

コメントフォームをクリックするだけで、左側のパネルにそのプロパティが表示されます。

ここから、コメントノートまたはプライバシーポリシーを追加できます。また、[高度]タブに切り替えて、CSSコードを記述せずにコメントフォームのスタイルを編集することもできます。

SeedProdでのコメントフォームの高度なスタイリングオプション

完了したら、[保存]ボタンをクリックして変更を公開することを忘れないでください。

SeedProdを使用すると、コードを記述せずにウェブサイトの任意の要素のスタイルを簡単に変更できます。

ただし、これはテーマビルダーであり、すでに気に入ったWordPressテーマを使用している可能性があります。その場合は、次のヒントがWordPressでコメントフォームのスタイルを手動で変更するのに役立ちます。

WordPressでコメントフォームのスタイルを変更する

WordPressのほとんどのテーマには、comments.phpという名前のテンプレートがあります。このファイルは、ブログ投稿にコメントやコメントフォームを表示するために使用されます。WordPressのコメントフォームは、次の関数を使用して生成されます: <?php comment_form(); ?>。

デフォルトでは、この関数はコメントフォームを3つのテキストフィールド（名前、メール、ウェブサイト）、コメントテキスト用のテキストエリアフィールド、GDPR準拠のためのチェックボックス、および送信ボタンで生成します。

これらのフィールドは、デフォルトの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
Hosted with ❤️ by WPCode
1-click Use in WordPress

これらの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);
}
Hosted with ❤️ by WPCode
1-click Use in WordPress

変更後の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;
}
Hosted with ❤️ by WPCode
1-click Use in WordPress

下のスクリーンショットをよく見ると、名前とメールフィールドのフォントがウェブサイトのURLとは異なることがわかります。

WordPressコメントフォームの入力スタイル

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;
}
Hosted with ❤️ by WPCode
1-click Use in WordPress
コメントフォーム送信ボタン

WordPressコメントフォームを次のレベルへ

あまりにも基本的な内容だと思ったかもしれません。しかし、全員が理解できるように、そこから始める必要があります。

しかし、フォームフィールドの並べ替え、ソーシャルログインの追加、コメント購読、コメントガイドライン、クイックタグなどを追加することで、WordPressコメントフォームを次のレベルに引き上げることができます。

WordPressコメントにソーシャルログインを追加する

WordPressコメントにソーシャルログインを追加することから始めましょう。

まず最初に行う必要があるのは、Super Socializerプラグインをインストールして有効化することです。詳細は、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

有効化したら、Super Socializer » Social Loginにアクセスし、「Social Loginを有効にする」というチェックボックスをオンにします。

ソーシャルログインを有効にするチェックボックス

これにより、ソーシャルログインオプションパネルが表示されます。まず、「Advanced Configuration」タブをクリックします。

次に、「Enable at comment form」ボックスがチェックされていることを確認します。

コメントフォームでソーシャルログインを有効にする

次に、「Basic Configuration」タブをクリックします。ここでは、「Select Social Networks」セクションのチェックボックスをオンにすることで、追加したいソーシャルネットワークを選択できます。

ログイン用のソーシャルネットワークを選択する

この下では、プラグインはソーシャルプラットフォームと接続するためにAPIキーを必要とします。各プラットフォームでこれを入手する方法の説明を表示するには、単に「疑問符」アイコンをクリックしてください。

ソーシャルネットワークAPIキーを入力する

完了したら、「Save Changes」ボタンをクリックしてソーシャルログイン設定を保存します。

これで、コメントフォームの上にソーシャルログインボタンが表示されているか、ウェブサイトで確認できるようになりました。 

ソーシャルログインコメントフォームの例

コメントフォームの前または後にコメントポリシーテキストを追加する

私たちはすべてのユーザーを愛しており、サイトにコメントを残すために数分を費やしていただくことに感謝しています。しかし、健全な議論環境を作成するためには、コメントを moderating することが重要です。

完全な透明性を確保するために、コメントポリシーページを作成しましたが、このリンクをフッターに置くだけではいけません。

コメントを残すすべてのユーザーにとって、コメントポリシーを目立たせ、分かりやすくしたいと考えました。そのため、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');
Hosted with ❤️ by WPCode
1-click Use in WordPress

上記のコードは、デフォルトのコメントフォームの注釈をこのテキストに置き換えます。また、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;
}
Hosted with ❤️ by WPCode
1-click Use in WordPress

テストサイトではこのように表示されました。

コメントポリシーに関する注記

コメントテキストエリアの後にリンクを表示したい場合は、以下のコードを使用してください。

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');
Hosted with ❤️ by WPCode
1-click Use in WordPress

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');
Hosted with ❤️ by WPCode
1-click Use in WordPress

WordPressにコードを追加する際は、WPCodeのようなコードスニペットプラグインを使用することを常にお勧めします。これにより、functions.phpファイルを編集せずにカスタムコードを簡単に追加できるため、サイトを壊す心配がありません。

開始するには、無料のWPCodeプラグインをインストールして有効化する必要があります。手順については、WordPressプラグインのインストール方法に関するこのガイドを参照してください。

有効化したら、WordPressダッシュボードからCode Snippets » + Add Snippetに移動します。 

そこから、「Add Your Custom Code (New Snippet)」オプションを見つけて、その下にある「+ Add Custom Snippet」ボタンをクリックします。

「カスタムコードを追加（新規スニペット）」オプションを選択します

その後、画面に表示されるオプションのリストから、コードの種類として「PHP Snippet」を選択する必要があります。

PHPスニペットオプションを選択します

次に、ページの上部にあるスニペットのタイトルを追加します。これは、コードが何のためのものかを思い出すのに役立つものであれば何でも構いません。

次に、上記のコードを「Code Preview」ボックスに貼り付けます。

スニペットにタイトルを追加し、コードを「コードプレビュー」ボックスに貼り付けます

最後に、スイッチを「非アクティブ」から「アクティブ」に切り替え、「スニペットを保存」ボタンをクリックするだけです。

WPCodeでスニペットをアクティブ化して保存します

このコードは、コメントテキストエリアフィールドを一番下に移動させるだけです。

コメントフィールドを一番下に移動する

WordPressコメントフォームからウェブサイト（URL）フィールドを削除する

コメントフォームのウェブサイトフィールドは、多くのスパマーを引き付けます。これを削除してもスパマーを止めたり、スパムコメントを減らしたりすることはできませんが、不適切なウェブサイトリンクを持つコメントを誤って承認してしまうことを確実に防ぐことができます。

これにより、コメントフォームのフィールドが1つ減り、より簡単でユーザーフレンドリーになります。このトピックの詳細については、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');
Hosted with ❤️ by WPCode
1-click Use in WordPress
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でもフォローしてください。

WPBeginnerで人気 今すぐ！

開示：当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、手数料が発生する可能性があることを意味します。WPBeginnerがどのように資金提供されているか、それがなぜ重要なのか、そしてどのように私たちをサポートできるかをご覧ください。こちらが当社の編集プロセスです。

究極のWordPressツールキット

ツールキットへの無料アクセスを入手してください - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです！

今すぐダウンロード

読者の皆様からのコメント

119 CommentsLeave a Reply

  1. コメントモデレーションの作業負荷をさらに軽減するために、CAPTCHAのような簡単なスパム対策を実装することを検討するという提案を1つ追加します。

    Reply

  2. 現在、コメントフォームには「コメント」テキストエリアフィールドが1つと、「コメントを投稿」ボタンが1つあります。Twenty Twenty-Fourテーマには、名前、メール、ウェブサイトのフィールドが見つかりません。

    Reply

    • サイトにログインしている場合、ログイン中のユーザーの情報が自動的に使用されます。シークレットウィンドウでサイトにアクセスした場合、コメント投稿者の名前と情報を削除するようにカスタマイズされていない限り、フィールドが表示されるはずです。

      Reply

      管理者

  3. こんにちは、
    この記事が大好きです！とてもよく説明されています！

    簡単な質問ですが、誰かがコメントに返信したときに、「↩」を自分のSVGアイコンに変更するにはどうすればよいですか？

    Reply

    • それは、すべてのテーマにコメントフォームにその記号があるわけではないため、特定のテーマによって異なります。

      Reply

      管理者

  4. この記事をまとめるお時間をいただきありがとうございます。ウェブサイトのURLを削除するためのコードスニペットを使用しましたが、ここではうまく機能しないことに気づきました。そう言った理由は、2つの投稿でしか機能せず、ウェブサイトの他の投稿ではコメントセクションにURLボックスがまだ表示されているからです。

    私が間違っているのでしょうか？また、コード内の「wpbeginner」を私のドメイン名に置き換える必要がありますか？

    Reply

    • 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. :)

      Reply

      管理者

  5. Seed Prod を使用したチュートリアルをありがとうございます。現在 WP Discuz を使用しており、それに満足しています。しかし、小規模なサイトでは、Seed Prod の方がはるかにエレガントなフォームになります。指示はかなり長いですが、Seed Prod がインストールされているテストサイトで試してみます。素晴らしい、本当に詳細なチュートリアルをありがとうございます。

    Reply

  6. ウェブサイトでさまざまなコメントセクションを見てきましたが、すべて同じ WordPress コメントを使用しているのに、なぜ見た目が異なるのか疑問に思っていました。
    コメントする際のユーザーエクスペリエンスを向上させるためには、見栄えの良いコメントセクションが必要です。
    2年間使用している WordPress コメント用の Disqus プラットフォームについて質問があります。
    使い続けるのは良い考えでしょうか、それともより良い代替手段がありますか？
    また、WPBeginner がコメントに何を使用しているか知りたいです。

    Reply

    • 私の意見では、WP Discuz は素晴らしいプラグインです。ブログでほぼ 2 年間使用していますが、これまでのところ問題はありません。したがって、もしあなたがそれを使用しているなら、このプラグインを必ずしも変更する必要はないでしょう。開発者とサポートチームは素晴らしい仕事をしています。ただし、このプラグインはかなり大きく複雑であるため、ウェブサイトの種類とサイズにも依存するでしょう。

      Reply

  7. 素晴らしいチュートリアルをありがとうございます。
    私にとってうまくいかなかったことが 1 つあります。テキストエリアを下に移動することです。コードスニペットにスクリプトを追加しましたが、何も変わりませんでした。あなたがそれを書いてから何か変更がありましたか？
    ありがとうございます。
    Vera

    Reply

    • スニペットは引き続き正しく機能するはずです。お使いのテーマがコメントフォームにスタイルを追加しており、それが一部のものを変更している可能性があります。お使いの特定のテーマのサポートに確認すると、確認と検証に役立ちます。

      Reply

      管理者

  13. WordPressフォームのスタイル設定方法をご案内いただきありがとうございます。しかし、コメントフォームからURLフィールドを削除する方法について、ほとんどすべてのコードを試しましたが、残念ながらどれも機能しませんでした。別のコードを教えていただけますか？

    Reply

    • 当社の推奨事項のいずれも役に立たなかった場合は、お使いの特定のテーマのサポートに連絡することをお勧めします。彼らはあなたのコメントの特定のターゲットを支援できるはずです。

      Reply

      管理者

  17. こんにちは、素晴らしいチュートリアルです！しかし、投稿コメントを編集する正しいPHPファイルの場所を見つけるのに問題があります。OceanWPテーマとElementor Proを使用しています。functions.phpまたはcomments.phpにアクセスしても、コマンドラインが見つかりません。あなたのコードを追加しようとしましたが、何も起こりませんでした。どこか別の場所にあると思いますが、どこでしょうか？

    Reply

    • ページビルダーを使用している場合は、コメントフォームの編集方法と利用可能なツールについて、そのページビルダーのサポートに問い合わせる必要があります。

      Reply

      管理者

  18. コメントボックスをすべてのコメントの一番上、投稿の後ろに表示するにはどうすればよいですか？

    Reply

    • テーマがそのように設定されていない場合は、残念ながらテーマのコードを編集する必要があります。各テーマのコードは非常に異なる可能性があるため、現時点ではその方法に関する具体的なガイドはありません。

      Reply

      管理者

  22. こんにちは。素晴らしいチュートリアルです。一部のユーザーにクラッシュが発生する（理由は不明）ため、コメントセクションにウェブサイトのURLを追加することをユーザーに控えさせたいと思いました。成功しましたが、それでも「次回コメントするときは、名前、メールアドレス、ウェブサイトを記憶しておいてください」という通常のメッセージが表示されます。これを修正する方法を知っていますか？

    Reply

    • テーマのサポートに問い合わせて、クラッシュとメッセージの編集について知らせることをお勧めします。

      Reply

      管理者

  24. このような記事を共有していただきありがとうございます。私と私のウェブサイトにとって役立ちます。

    Reply

  25. こんにちは

    素晴らしい記事です。提案された内容をいくつか試しましたが、「コメントフォームの前または後にコメントポリシーテキストを追加する」の下にコードエラーが見つかりました。修正が必要です。

    フィルターを関数内に配置しているため、実行されません。関数の外に移動する必要があります。

    ルーベル

    Reply

    • Both filters should be outside the function but we will certainly take another look and update if we can see the error :)

      Reply

      管理者

  26. あなたのウェブサイトの投稿は素晴らしいです。共有ありがとうございます。毎日あなたのブログを読んでいます。正直に言うと少し面倒ですが、また必ず戻ってきます。このトピックについてもっと書いてください。

    Reply

  27. ここに提供された情報は非常に良いです。素晴らしいチュートリアルです。共有ありがとうございます。長い間これを探していました。WordPressに慣れるのに本当に役立ちます！

    Reply

  28. WordPressテーマで #respond { }
    #reply-title { }
    #cancel-comment-reply-link { }
    #commentform { }
    #author { }
    #email { }
    #url { }
    #comment
    #submit
    が見つかりません。

    Reply

    • こんにちは、この非常に役立つ記事をありがとうございます。「送信」ボタンの前にテキストを追加することに興味があります。ここで提供されているコードでは、「wpbeginner」という単語を自分のサイトに関連するものに変更する必要がありますか？

      Reply

      • パウリナ様、
        コメントフォームのフィールドに機能するシンプルなフィルターフックを使用すると、送信ボタンの前にテキストなどを追加できます。

        Reply

  31. こんにちは！いつものように素晴らしい記事です。しかし、コメントセクションの「says」という単語をどのように変更できるか疑問に思っています。ハイチクレオール語の「di」に翻訳したいのですが。何か助けはありますか？

    よろしくお願いします。

    —ウールカー

    Reply

  32. Is it possible to copy the code to blogger?. Because I want to make Wordpress style comment in my Blogger blog. Thanks for your help. :)

    Reply

  33. こんにちは！

    素晴らしい記事です！「Leave a Reply」の部分を変更する解決策を探していました。どのように変更できるか何かアイデアはありますか？

    Reply

  34. これは、コメントセクションの最適化について、私に詳細なガイダンスを与えてくれた役立つガイドです。

    Reply

  36. こんにちは
    あなたのチュートリアルが大好きです！まだ質問があります。コメントフォーム全体の灰色がかった背景色を別のものに変更することは一般的ですか？もしかしたら、単色ではなく画像にすることもできますか？

    Reply

  37. あなたのチュートリアルが大好きです。非常に理解しやすく、どこでもより役立ちます。

    共有していただきありがとうございます、サー。

    Reply

  39. 最初からコメントを作成するファイル（comments.php）の作成まで、すべてを含む完全なチュートリアルはありますか？ いつもの素晴らしいチュートリアル、ありがとうございます。

    Reply

  40. WordPressの子テーマをカスタマイズしていて、ポリシーテキストをコメントフォームの上に配置することができました。しかし、ログアウトしているユーザーにしか表示されません。ログインしているユーザーにも表示させるにはどうすればよいですか？

    Reply

  41. こんにちは、素晴らしいチュートリアルです。ありがとうございます！

    あなたのレッスンのおかげで、WordPressに関する知識を向上させ続けています。PHPについてはあまり知らないのですが、質問があります。コメントポリシーテキストを送信ボタンの前に追加することに成功しました。しかし、「返信」をクリックしてコードを見ると、PHPの出力が「commentpolicy」というクラス名の段落タグの中にありました。どのようにしてそれを達成しましたか（例：HTMLウェブページ上のPHP出力を、CSSでスタイル設定できるタグとクラスでどのようにスタイル設定しますか）？

    うまく説明できていて、私の質問が意味をなすことを願っています。

    すべてのチュートリアルに改めて感謝いたします。

    Luca

    Reply

      • 私も同じ質問があります。少し明確にしようとしています。
        コメントフィールドの前にコメントポリシーテキストを取得するためのスニペットを追加しました。しかし、これは単なるテキストであり、そのテキストには特別なdivクラスは追加されていません。そのため、CSSでスタイル設定できません（テキストを小さくしたい、または境界線ボックスに入れたい）。私たちを導いてください。これで意味が通じることを願っています。本当にありがとうございます。

        Reply

  43. ありがとうございます。FacebookコメントやDisqusのような他のサービスよりも組み込みコメントの方が好きなので、組み込みコメントをより良くする方法を長い間探していました。

    Reply

  44. ご存知のとおり、WPの最新バージョン（4.4）では、名前とメールフォームがテキストボックスの下に表示されますが、古いスタイル（名前とメールボックスがテキストボックスの上にある）に戻す方法はありますか？
    ありがとうございます。

    Reply

  45. こんにちは、素晴らしいチュートリアルです！
    でも、もう一つ知りたいことがあります。プライバシーポリシーのチェックボックスを追加することは可能ですか？WordPressシステムはIPアドレスを収集するため、ユーザーにはメッセージを送信する前にチェックボックスにチェックを入れてほしいのです。何か提案はありますか？よろしくお願いします！

    Reply

  46. コメント入力フィールドをコメント自体の上に配置したいです。そうすれば、お客様はページを一番下までスクロールしなくてもコメントを残すことができます。

    これを達成する簡単な方法はありますか？

    ありがとうございます。

    Reply

  47. コメント投稿者が編集ボタンを追加する方法はありますか？タイプミスなどを修正できるように。また、サイトがコメント投稿者に画像をアップロードする機能を提供したい場合はどうなりますか？それは可能ですか？

    Reply

  48. 良いチュートリアルです。これを使って、コメントフォームフィールドの$argsを再定義する独自のカスタムコンタクトフォームプラグインを開発しました。

    しかし、テスト中に、一部のテーマが独自の「textarea」フィールドを作成し、それが私の「textarea」フィールドに追加されて、2つのコメントテキストフィールドができてしまうことが判明しました。これは良くありません。

    「ページビルド」（テーマがcomment_form_default_fieldsを実行した後）が後になるように、add_filter( ‘comment_form_default_fields’…. に高い優先度（99）を設定しましたが、重複するコメントテキストボックスはまだ存在します。優先度8も試しましたが、うまくいきませんでした。

    したがって、コメントフィールドがすでに定義されているかどうかを判断できる汎用的な方法（どのテーマでも機能する）を思いつきますか？そして、重複が見つかった場合、テーマ内のものを削除して、私のものに置き換えることはできますか？

    問題はテーマのコーディングが悪いことが原因であることは理解していますが、回避策を見つけたいです。

    よろしくお願いします…リック…

    Reply

  49. ありがとうございます！

    フォーラムやGoogleでこれを検索しましたが、まだ少し混乱しています。投稿に表示されるコメント/返信リンクの場所だけを変更したい場合はどうすればよいですか？非表示にしたり、言葉を変えたりしたいわけではありません。ただ、一番上ではなく、投稿の一番下に表示したいだけです。

    Twenty-Twelveテーマでは、これをどのように行いますか？

    Reply

返信する

コメントいただきありがとうございます。コメントはすべて弊社のコメントポリシーに従ってモデレーションされますので、ご了承ください。メールアドレスは公開されません。名前のフィールドにキーワードを使用しないでください。個人的で意味のある会話をしましょう。

Copyright © 2009 - 2026 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround

WordPress®の商標はWordPress Foundationの知的財産です。このウェブサイトでのWordPress®の名前の使用は、識別の目的のみであり、WordPress Foundationによる承認を意味するものではありません。WPBeginnerはWordPress Foundationによって承認、所有、または提携されていません。

ヘルプが必要なこと…

人気の検索:

ブログの開始 WordPress SEO WordPressのパフォーマンス WordPressのエラー WordPressセキュリティ オンラインストアの構築