検索キーワードを入力
カテゴリーを選択

WordPressコメント機能の使い方やテーマ開発で自作での実装方法を徹底解説(サンプルコード付き)

投稿日:2025年03月30日(日)
WordPressコメント機能の使い方やテーマ開発で自作での実装方法を徹底解説(サンプルコード付き)|UMENOKI|すぐに仕事で使えるIT技術情報メディア

みなさんこんにちは!エンジニアの高澤です!

今回はWordPressコメント機能の使い方やテーマ開発で自作での実装方法を徹底解説していきたいと思います。

WordPressでいうコメントとは、記事の感想や様々な情報を自由にコメントとして投稿できるフォーム機能のことを言います。各記事ページごとに設置されるのが一般的です。

基本的にはコメント本文やご自身の名前を入力し、入力した内容を送信するとその記事ページの下あたりに一覧として表示される挙動が一般的かと思います。

このコメントが設置されていることによって、記事の読者(ユーザー)が自由に意見交換や記事の誤った箇所の指摘、情報の共有などを行うことができ、ページの自由度が高まります。

WordPressであれば、このコメント機能が標準で搭載されており、WordPressで用意された専用のテンプレートタグやPHPテンプレートファイルを利用すれば、簡単に実装することが可能です。

当記事では、このコメントの使い方と合わせて、ご自身でテーマ開発におけるコメント機能を自作できる手順を解説しております。

開発者のみならず、ウェブサイト運営者の方などにも使える情報を解説しておりますので、よろしければお仕事やご自身のサイト構築にお役立ていただけました幸いです。

目次

WordPressのコメントとは

WordPressのコメントとは、WordPress標準で搭載されている、記事(投稿ページ)に対して読者が意見や感想を残せるコメント投稿フォーム機能のことを言います。

下図はコメントの一例になります。デザインはテーマによって変わってきます。

これにより、サイト運営者と訪問者の間でコミュニケーションを取ることができ、記事に対するフィードバックや議論が活発になります。

デフォルトでは、WordPressにコメント関連の設定機能などが備わっており、投稿ページごとにコメントを有効・無効にする設定が可能です。

WordPress管理画面左メニュー「設定」の「ディスカッション」へ進んでいただくと、下図のようにコメントの設定ページが表示されます。

また、下図のようにスパム対策やモデレーション機能も搭載されており、安全な運営がしやすいようになっています。

コメントの機能を適切に活用すれば、サイトのエンゲージメント(深い関係性や結びつき)を向上させ、訪問者の滞在時間を伸ばすことができます。

ただし、スパムコメントや荒らし行為の対策を行わないと、サイトの健全性を損なう可能性もあるため、管理体制をしっかり整えることが重要です。

コメントを設置するメリット・デメリット

コメントを設置することには、サイト運営者にとって多くのメリットがありますが、一方で管理の手間やスパム対策の必要性といったデメリットもあります。

メリットとデメリットを正しく理解することによって、ご自身のサイトの方針やテーマに沿って適切にコメントの設置をするかどうかを判断することが可能です。

ただ設置すれば良いというものでもありませんので、しっかり確認し事前に理解しておきましょう。

コメントを設置するメリット

まずはコメントを設置するメリットについて解説いたします。

コメントを設置するメリットとしては、以下があるかと思います。

  • コミュニケーションが取れることで有益性の向上につながる
  • SEO対策に貢献する
  • サイトの活性化・リピート率向上につながる

それぞれ解説いたします。

コミュニケーションが取れることで有益性の向上につながる

ページ訪問者が記事に対して感想や質問、コンテンツへのフィードバックなどを投稿できるため、サイト運営者との双方向のやり取りが可能になります。これにより、サイト運営者側もページの品質を向上させることができ、ユーザーはより質の高い情報を得られやすくなります。

SEO対策に貢献する

ユーザーからのコメントが増えることで、ページのコンテンツが充実し、Googleの検索エンジンに好影響を与える可能性があります。ページ内に有益な情報やキーワードが追加されることになるため、検索エンジンにも引っかかるようになります。

サイトの活性化・リピート率向上につながる

コメントが活発に交わされるサイトは、訪問者にとって魅力的に映ります。特にブログやニュースサイトでは、読者同士の意見交換が行われることで、より充実したコミュニティが形成されることもあります。これにより、ページ訪問者はウェブサイト自体に愛着を感じていただき、リピート率の向上にもつながる可能性があります。

コメントを設置するデメリット

次はコメントを設置するデメリットについて解説いたします。

コメントを設置するデメリットとしては、以下があるかと思います。

  • スパムコメントのリスク対策が必要
  • 管理の手間がかかる可能性がある
  • サイトの表示速度に影響を与える

それぞれ解説いたします。

スパムコメントのリスク

WordPressのコメント機能を開放すると、自動投稿のスパムコメントが大量に届く可能性があります。これを防ぐためには、Akismetなどのスパムフィルタープラグインを導入することが推奨されます。

管理の手間がかかる

コメントが増えると、それらを適切に承認・削除する管理作業が発生します。特に荒らしコメントや不適切な発言が増えると、モデレーションに多くの時間を取られてしまうこともあります。

サイトの表示速度に影響を与える

コメントが増えすぎると、ページの読み込み速度が遅くなる可能性があります。これを防ぐためには、コメントのページネーション機能を活用したり、キャッシュプラグインを導入したりする対策が必要です。

WordPressのコメント実装方法

それでは早速、コメントの実装方法を解説したいと思います。

ここから解説する手順通りに実装を進めていただければ、無理なく実装することができるので、ご安心して進めてみてください。

まず実装の前に、どのようなイメージのコメントを実装するのかをご説明しておきたいと思います。

当記事で作成するのは下図のようなデザインのコメントになります。

まず、コメントフォームの上にコメントとして送信された内容が一覧で表示されるようになっています。

コメント一覧の下に、下図のようなコメント投稿フォームが設置されるようにします。

基本的な実装後の段階として、「コメント入力欄」「名前」「メールアドレス」「サイトURL」「各情報を保存するチェックボックス」の4点となります。

コメントを実装する手順は割とシンプルで、以下のような流れになります。

  • comments.phpを作成する
  • single.phpにcomments_template()関数で出力する
  • CSSでデザインする

それぞれ上から進める形になりますので、手順通りに解説いたします。

comments.phpを作成する

まずは下図のようにcomments.phpを作成します。

デスクトップなどにて手動でcomments.phpというPHPファイルを作成するか、ターミナルなどから以下のコマンドでcomments.phpを作成してください。

touch comments.php

comments.phpとは、wp_list_comments()関数でコメントの表示したり、comment_form()関数でコメント投稿フォームを表示するなどするための専用のPHPテンプレートファイルのことを言います。

ファイル名は、header.phpやsidebar.phpなどのように、WordPressの仕様に通りに必ず「comments.php」というファイル名にしてください。

comments.phpを作成できたら、下図のようなイメージでテーマを構成するディレクトリのトップ階層に配置してください。

配置が完了したら、今度はコードを記述していきます。

以下のコードをcomments.phpにそのままコピー&ペーストしてください。

<?php if (comments_open() && !post_password_required()) : ?>
<div id="comments" class="comments-area">

    <?php if (have_comments()) : ?>
        <h3 class="comments-title">この記事へのコメント</h3>
        <ul class="comment-list">
            <?php
            wp_list_comments([
                'style'      => 'ul',
                'short_ping' => true,
            ]);
            ?>
        </ul>

        <!-- コメントのページネーション -->
        <div class="comment-navigation">
            <?php paginate_comments_links(); ?>
        </div>

    <?php endif; ?>

    <?php
    $comment_form_args = [
        'title_reply'          => 'コメントを残す',
        'title_reply_before'   => '<h3 class="comment-reply-title">',
        'title_reply_after'    => '</h3>',
        'comment_notes_before' => '<p class="comment-notes">コメントは承認後に公開されます。</p>',
        'label_submit'         => 'コメントを送信する',
        'class_form'           => 'comment-form',
    ];

    comment_form($comment_form_args);
    ?>

</div>
<?php endif; ?>

上記のコードは、WordPressの標準コメント機能を実装したものです。

まず、comments_open()関数でコメントが許可されているかを確認し、さらに post_password_required()関数で記事がパスワード保護されていない場合のみ、コメントエリアを表示します。

次に、have_comments()関数を使用し、投稿にコメントがあるかどうかをチェックします。

コメントが存在する場合、<h3 class=”comments-title”>で見出しを表示し、wp_list_comments()関数を使ってコメントリストを生成します。この関数には「’style’ => ‘ul’」というオプションが指定されており、コメントを <ul>タグでのリストとして出力します。

コメントが複数ページに渡る場合、paginate_comments_links()関数を使用してページネーションを追加し、過去のコメントや新しいコメントに簡単にアクセスできるようにしています。

その後、comment_form()関数を使ってコメント投稿フォームを表示します。

この関数には、カスタム引数$comment_form_args変数が指定されており、「’title_reply’」で「コメントを残す」というタイトルを設定し、「’title_reply_before’」と「’title_reply_after’」で <h3>タグで囲んでいます。

また、「’comment_notes_before’」で「コメントは承認後に公開されます。」という注意書きを追加し、「’label_submit’」で送信ボタンのラベルを「コメントを送信する」にカスタマイズしています。

(※コメントフォームにて「コメントは承認後に公開されます。」と記述がありますが、WordPress管理画面左メニュー「設定」の「ディスカッション」にて「コメント表示条件」で「コメントの手動承認を必須にする」にチェックをしてない場合は即座に公開されますので、ご注意ください。)

このコードにより、WordPressの標準的なコメント機能が実装され、コメントの表示、ページネーション、投稿フォームが適切に動作するようになっています。

はい、これでcomments.phpの作成は完了です。

single.phpとpage.phpにcomments_template()関数で出力する

ここまでで、コメントの表示したりコメント投稿フォームを表示するなどするための専用のPHPテンプレートファイルであるcomments.phpを作成することができている状態かと思います。

ただこのままだと、コメント投稿フォーム自体のファイルを作成したにとどまるので、次は作成したcomments.phpを読み込むテンプレートタグを記述していきたいと思います。

以下のテンプレートタグをsingle.phpとpage.phpのコメントリストとコメントフォームを表示させたい箇所にコピー&ペーストしてください。

<?php comments_template(); ?>

これで先ほど作成したcomments.phpを読み込むことができ、記述したコードの内容が表示されていることと思います。

これでコメントリストとコメントフォームを出力して表示することができました。

CSSでデザインする

ここまでで、WordPressのコメントリストとコメントフォームを表示することができました。

コメントも機能はしているかと思います。

ただ、このままだと何もデザインされておらずHTMLがブラウザでのデフォルトの状態で見た目が表示されているので、CSSコードを追加してデザインを整えていきましょう。

以下のCSSコードを、テーマのデザインを構成する任意のCSSファイルやPHPファイルにコピー&ペーストしてください。

/* CSSリセット */

/* すべての要素のデフォルトのマージンとパディングをリセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* リストのスタイルをリセット */
ul, ol {
  list-style: none;
}

/* スタイルをカスタマイズ */

.comments-title {
    margin-bottom: 10px;
}

/* コメントセクション全体のスタイル */
#comments {
    max-width: 800px;
    margin: 20px auto 80px;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* コメントリストのスタイル */
.comment-list {
    list-style: none;
    padding: 0;
}

.comment-list li {
    padding: 15px 0 0;
}

.comment-list li ul li {
    padding-left: 25px;
}

.comment-list li ul li ul li {
    padding-left: 35px; /* 25px + 10px */
}

.comment-list li ul li ul li ul li {
    padding-left: 45px; /* 35px + 10px */
}

.comment-list li ul li ul li ul li ul li {
    padding-left: 55px; /* 45px + 10px */
}

.comment-list li ul li ul li ul li ul li ul li {
    padding-left: 65px; /* 55px + 10px */
}

.comment-list li ul li ul li ul li ul li ul li ul li {
    padding-left: 75px; /* 65px + 10px */
}

.comment-list li ul li ul li ul li ul li ul li ul li ul li {
    padding-left: 85px; /* 75px + 10px */
}

.comment-list li ul li ul li ul li ul li ul li ul li ul li ul li {
    padding-left: 95px; /* 85px + 10px */
}

.comment-list li ul li ul li ul li ul li ul li ul li ul li ul li ul li {
    padding-left: 105px; /* 95px + 10px */
}

.comment-list li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li {
    padding-left: 115px; /* 105px + 10px */
}

/* アバター画像のスタイル */
.comment-author {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.comment-author .avatar {
    margin-right: 12px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.comment-author .says {
    display: inline-block;
    margin-left: 4px;
}

/* コメント本文のスタイル */
.comment-body {
    flex: 1;
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* コメントメタ情報のスタイル */
.comment-meta {
    margin-bottom: 7px;
}

.comment-meta a {
    font-size: 11px;
    color: #777;
}

/* 返信ボタンのスタイル */
.reply a {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 10px;
    font-size: 0.9rem;
    color: #fff;
    background: #0073aa;
    border-radius: 3px;
    text-decoration: none;
    transition: 0.3s;
}

.reply a:hover {
    background: #005f8b;
}

/* コメントフォームのスタイル */
#respond {
    margin-top: 20px;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.comment-respond a{
    display: inline-block;
    margin-right: 4px;
}

.comment-reply-title{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.comment-form label {

}

.comment-form textarea {
    width: 100%;
    min-height: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

.comment-notes {
    margin-bottom: 10px;
}

.comment-form-comment {
    margin-bottom: 10px;
}

#comment {
    margin-top: 10px;
}

.comment-form-author {
    margin-bottom: 10px;
}

.comment-form-email {
    margin-bottom: 10px;
}

.comment-form-url {
    margin-bottom: 10px;
}

.comment-form-author input[type="text"],
.comment-form-email input[type="text"],
.comment-form-url input[type="text"] {
    padding: 8px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.comment-form-author label,
.comment-form-email label,
.comment-form-url label {
    margin-right: 4px;
}


.comment-form-cookies-consent {
    margin-bottom: 10px;
}

.form-submit {

}

.form-submit input[type="submit"] {
    background: #0073aa;
    color: #fff;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}
.form-submit input[type="submit"]:hover {
    background: #005f8b;
}

#cancel-comment-reply-link {
    display: inline-block;
    font-weight: 400;
    padding: 2px 6px;
    font-size: 12px;
    border-radius: 3px;
    margin-left: 1px;
}

/* コメントナビゲーションのスタイル */
.comment-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding: 10px;
}

/* ページネーションのリンクスタイル */
.comment-navigation .page-numbers {
    display: inline-block;
    padding: 8px 12px;
    background-color: #f5f5f5;
    color: #333;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}

/* 現在のページのスタイル */
.comment-navigation .page-numbers.current {
    background-color: #0073aa;
    color: #fff;
    font-weight: bold;
    border-color: #0073aa;
}

/* ホバー時のスタイル */
.comment-navigation .page-numbers:hover {
    background-color: #0073aa;
    color: #fff;
}

/* 前へ・次へボタンのスタイル */
.comment-navigation .prev, 
.comment-navigation .next {
    font-weight: bold;
}

/* ログイン中 */
.logged-in-as {
    margin-bottom: 10px;
}

@media screen and (max-width: 768px) {
    #comments {
        max-width: 100%;
        padding: 20px;
    }    
}

完了したら、ページをご確認いただくと下図のように見た目が整った形で表示されていることと思います。

コメントフォームは下図のように表示されていることと思います。

これでコメントを実装する方法の解説は以上になります。お疲れ様でした!

あとは、図にあるようなデザインになっているため、もしご自身のサイトのデザインや色合いに合わせたかったら、CSSコードを自由にカスタマイズしていただければと思います。

また、当記事では詳しく取り上げませんが、functions.phpに記述して機能をカスタマイズするフックを利用することで、WordPress管理画面の設定ページよりもより柔軟にカスタマイズすることができ、例えば入力項目やテキストなどの様々な機能面を自由にカスタマイズすることができますので、ご確認いただければと思います。

WordPressのコメントの仕様

WordPressでコメントの実装ができるようになったところで、WordPressのコメントの仕様を確認しておきましょう。

ざっくりでも仕様を知っていれば、コメントを開発する際やカスタマイズする際などに、例えば「設定ページから制御できることなのに、コードで制御してしまい無駄な実装をしてしまった」などといった問題などを未然に防ぐことができます。

WordPressのコメントの標準仕様は、以下のようなポイントがあります。

  • コメントの投稿・表示・管理ができる
  • スレッド化(返信機能)やページネーションに対応している
  • スパム対策や承認制の設定が可能
  • 管理者が承認・削除・通知設定を変更できる
  • デフォルトのままでも使えるが、カスタマイズも簡単

上記以外に、執筆者がメモしておきたい内容としてまとめたものを解説していきたいと思います。

ログイン中の場合とそうでない場合でフォームの一部が切り替わる

まず初見の方が最初に戸惑う部分ではありますが、WordPressのコメントフォームの入力部分では、ログイン中の場合とそうでない場合でフォームの一部が切り替わる仕様となっております。

まず切り替わる箇所としては、下図の部分「名前」「メールアドレス」「サイト」の部分となります。

下図はログアウトしている状態(ログインしていない状態)の場合に表示されます。

ログインしている場合(ログイン中の場合)は、下図のように「名前」「メールアドレス」「サイト」が非表示になり、「〇〇 としてログインしています。プロフィールを編集します。ログアウトしますか ? ※ が付いている欄は必須項目です」という文言が表示されます。

これは、そもそもログイン中であれば、「名前」「メールアドレス」などの情報を入力する必要がないということで非表示になっているのだと思います。

ここでは、ログイン中とログアウト中で挙動が違う部分があるという部分がポイントです。

comments.phpを作らなくてもcomments_template()関数だけでコメントフォームを作れる

実は、comments.phpを作成しなくても、comments_template()関数を使用するだけでコメントフォームを表示できます。

comments_template()関数は、WordPressがデフォルトで用意しているコメントテンプレートを呼び出す関数になります。つまり、テーマディレクトリ内に自作したcomments.phpが存在しない場合、自動的にWordPressの標準コメントフォームを出力してくれます。

そのため、シンプルなコメント機能を実装するだけなら、テーマのsingle.phpやpage.phpにcomments_template();を追加するだけでOKです。

ちなみに、読み込むファイルはWordPressコアの以下のcomments.phpになります。

wp-includes/theme-compat/comments.php

wp-includes/theme-compat/comments.phpのファイルのコード内容は以下になります。

<?php
/**
 * @package WordPress
 * @subpackage Theme_Compat
 * @deprecated 3.0.0
 *
 * This file is here for backward compatibility with old themes and will be removed in a future version
 */
_deprecated_file(
	/* translators: %s: Template name. */
	sprintf( __( 'Theme without %s' ), basename( __FILE__ ) ),
	'3.0.0',
	null,
	/* translators: %s: Template name. */
	sprintf( __( 'Please include a %s template in your theme.' ), basename( __FILE__ ) )
);

// Do not delete these lines.
if ( ! empty( $_SERVER['SCRIPT_FILENAME'] ) && 'comments.php' === basename( $_SERVER['SCRIPT_FILENAME'] ) ) {
	die( 'Please do not load this page directly. Thanks!' );
}

if ( post_password_required() ) { ?>
		<p class="nocomments"><?php _e( 'This post is password protected. Enter the password to view comments.' ); ?></p>
	<?php
	return;
}
?>

<!-- You can start editing here. -->

<?php if ( have_comments() ) : ?>
	<h3 id="comments">
		<?php
		if ( '1' === get_comments_number() ) {
			printf(
				/* translators: %s: Post title. */
				__( 'One response to %s' ),
				'“' . get_the_title() . '”'
			);
		} else {
			printf(
				/* translators: 1: Number of comments, 2: Post title. */
				_n( '%1$s response to %2$s', '%1$s responses to %2$s', get_comments_number() ),
				number_format_i18n( get_comments_number() ),
				'“' . get_the_title() . '”'
			);
		}
		?>
	</h3>

	<div class="navigation">
		<div class="alignleft"><?php previous_comments_link(); ?></div>
		<div class="alignright"><?php next_comments_link(); ?></div>
	</div>

	<ol class="commentlist">
	<?php wp_list_comments(); ?>
	</ol>

	<div class="navigation">
		<div class="alignleft"><?php previous_comments_link(); ?></div>
		<div class="alignright"><?php next_comments_link(); ?></div>
	</div>
<?php else : // This is displayed if there are no comments so far. ?>

	<?php if ( comments_open() ) : ?>
		<!-- If comments are open, but there are no comments. -->

	<?php else : // Comments are closed. ?>
		<!-- If comments are closed. -->
		<p class="nocomments"><?php _e( 'Comments are closed.' ); ?></p>

	<?php endif; ?>
<?php endif; ?>

<?php comment_form(); ?>

上記コードは、WordPressのバージョン6.7.2時点のコードになりますので、今後変更される可能性があることだけご注意ください。

ただし、柔軟にカスタマイズを行いたい場合はcomments.phpを作成し、wp_list_comments()関数や comment_form()関数を使用して独自のCSSコードでデザインを調整するのが良いでしょう。

筆者的には、特に理由がなければ自作でcomments.phpを作成して対応する方法をおすすめいたします。

WordPressのコメントのよくある使い方

WordPressのコメントのよくある使い方について解説します。

ここでの内容は、筆者的に実際のウェブサイト運用などで必要だろうなと厳選したものを掲載しておりますので、ご確認いただくことですぐに役立つ内容となっていることと思います。

コメントの反映を手動で承認できるようにする

コメントの反映を手動で承認できるようにする方法を解説します。

まず、WordPress管理画面左メニュー「設定」の「ディスカッション」へ進んでください。

そして「コメント表示条件」の「コメントの手動承認を必須にする」にチェックをつけていただき、設定を保存してください。

完了したら、ログアウトした上でコメントフォームから内容を入力して送信してください。

すると、下図のように「あなたのコメントは管理者の承認待ちです。これはプレビューで、コメントは承認後に表示されます。」という文言が表示された上でコメントリストに追加されます。

この状態の場合、サイト管理者によって承認されない限り、他のユーザーはこのコメントを閲覧できない状態となっております。

承認する場合、WordPress管理画面へログインしていただき、管理画面左メニュー「コメント」から対象のコメントの「承認」をクリックしてください。

これで、下図のように「あなたのコメントは管理者の承認待ちです。こ〜…」の文言はなくなり、通常通りコメントが公開されます。

このように承認制にすることで、コメントの内容を安全に管理することができます。ただし、承認する手間が発生するので、サイトの方針やコンセプトなどに従って検討してみてください。

コメントフォームの「名前」と「メールアドレス」の入力を任意にする

コメントフォームの「名前」と「メールアドレス」の入力を任意にする方法を解説します。

まず、WordPress管理画面左メニュー「設定」の「ディスカッション」へ進んでください。

そして「他のコメント設定」の「コメントの投稿者の名前とメールアドレスの入力を必須にする」にチェックを外していただき、設定を保存してください。

完了したら実際に表示を確認してみましょう。

下図のように、もともと「名前」と「メールアドレス」に必須マーク「※」が表示されつつ入力が必須の挙動となっていたかと思いますが…

設定後、下図のように必須マークは消え、コメント文のみ入力するだけで送信が可能となったかと思います。

これにより、ユーザーは匿名で気軽にコメントできるようになり、入力の手間も減らすことができます。ご自身のサイトに沿って設定を検討しましょう。

コメントのスレッド (入れ子) の階層数を変更する

コメントのスレッド (入れ子) の階層数を変更する方法を解説します。

まず、WordPress管理画面左メニュー「設定」の「ディスカッション」へ進んでください。

そして「他のコメント設定」の「コメントのスレッド (入れ子) を有効にする」にチェックを入れてください。

「スレッド (入れ子) にするコメントの階層数」は「2」を選択し、設定を保存してください。

すると、下図のようにもともと階層が3つ以上レイアウトされていたコメントリストが…

設定後、下図のように2階層以降はすべて同じ並びとなり、「返信」ボタンが非表示になって1階層目のコメントに対してのみ返信できるようになりました。

これにより、コメントリストのレイアウトの調整や、返信できる範囲を制御することができます。

ログイン中のみコメントで可能にする

ログイン中のみコメントで可能にする方法を解説します。

まず、WordPress管理画面左メニュー「設定」の「ディスカッション」へ進んでください。

そして「他のコメント設定」の「ユーザー登録してログインしたユーザーのみコメントをつけられるようにする」にチェックを入れていただき、設定を保存してください。

設定後、ログアウトしていただき、コメントフォームをご確認いただくと下図のように「コメントを投稿するにはログインしてください」という文言が表示され、入力欄が非表示になります。

ログインすれば、下図のように通常通りコメントフォームが表示されます。

これは、ご自身のサイトを会員制サイトとしてログインを必要とするサイトなどにおすすめの設定となります。

特定のキーワードを含むコメントはモデレーション待ちにする

特定のキーワードを含むコメントはモデレーション待ちにする方法を解説します。

まず、WordPress管理画面左メニュー「設定」の「ディスカッション」へ進んでください。

そして「コメントモデレーション」のキーワード入力欄に、コメントフォームから送信後にモデレーション待ちにしたい特定のキーワードを入力し、設定を保存してください。(複数キーワードを設定する場合は一つのキーワードごとに改行してください)

そして、コメントフォームからコメント文に「wordpress」と入力した上で送信していただくと、「ゴミ箱行き」となります。

また、例えば「CMSであるwordpressはただただ最高」のように「wordpress」のキーワードを含む文章も、もちろん適用されます。

ちなみに「管理者」権限のWordPressユーザーアカウントでログイン中に当てはまるキーワードでコメントした場合は、普通に投稿できる仕様となっておりますのでご注意ください。

特定のキーワードを含むコメントはゴミ箱行きにする

特定のキーワードを含むコメントはゴミ箱行きにする方法を解説します。

まず、WordPress管理画面左メニュー「設定」の「ディスカッション」へ進んでください。

そして「コメント内で許可されないキーワード」のキーワード入力欄に、コメントフォームから送信後に即座にゴミ箱行きにしたい特定のキーワードを入力し、設定を保存してください。(複数キーワードを設定する場合は一つのキーワードごとに改行してください)

そして、コメントフォームからコメント文に「PHP」と入力した上で送信していただくと、「ゴミ箱行き」となります。

また、例えば「ちなみにPHPはすごく便利です!」のように「PHP」のキーワードを含む文章も、もちろん適用されます。

ちなみに「管理者」権限のWordPressユーザーアカウントでログイン中に当てはまるキーワードでコメントした場合は、普通に投稿できる仕様となっておりますのでご注意ください。

「モデレーション待ち」と「ゴミ箱行き」の両方に同一のキーワードを設定した場合

前述で、「モデレーション待ち」と「ゴミ箱行き」にしたいキーワードの設定方法を解説しましたが、「モデレーション待ち」と「ゴミ箱行き」の両方に同一のキーワードを設定した場合はどうなるのか?について、メモとして残しておきたいと思います。

まず「コメントモデレーション」にて「wordpress」と入力していただき…

「コメント内で許可されないキーワード」にも「wordpress」と入力してください。

完了したら、設定を保存してください。

そして、コメントフォームからコメント文に「wordpress」と入力した上で送信していただくと、「モデレーション待ち」とはならず、「ゴミ箱行き」となることが確認できました。

これに関して知っておくと、「モデレーション待ちに設定したのに見当たらない!」という際にテンパらずに済みます。

ちなみに「管理者」権限のWordPressユーザーアカウントでログイン中に当てはまるキーワードでコメントした場合は、普通に投稿できる仕様となっておりますのでご注意ください。

アバターのアイコンを自動生成させる

アバターのアイコンを自動生成させる方法を解説します。

まず、WordPress管理画面左メニュー「設定」の「ディスカッション」へ進んでください。

そして「デフォルトのアバター」のいずれかのロゴ設定を選択していただき、設定を保存してください。

設定後、コメントしたユーザーごとに別々のアイコンが設定されて、視覚的にコメントしたユーザーを識別しやすくなります。

ロゴのデザインは、ご自身のサイトに合わせて設定してください。

筆者的には「ミステリーパーソン」が一番好みです。笑

まとめ

今回は、WordPressコメント機能の使い方やテーマ開発で自作での実装方法について詳しく解説しました。

WordPressのコメント機能は、読者が記事に対して意見を述べたり、情報を共有したりできる便利な機能です。標準のコメントシステムを利用することで簡単に導入できますが、独自のカスタマイズを加えることで、サイトに合ったコメント機能を作成することも可能です。

記事内では、WordPressの標準機能を活用した基本的なコメントの実装方法から、自作テーマでのカスタマイズまで解説しました。開発者の方はもちろん、サイト運営者の方にも役立つ内容になっているかと思います。

ぜひ、今回の内容を参考にして、ご自身のWordPresサイトに最適なコメント機能を実装してみてください。

執筆者

UMENOKI編集部 高澤 翔汰

歴5年目(2024年8月以降から5年目です)のエンジニアです!
CMSでのサイト構築とWebデザイン制作を兼任して5年目になります。
自作のiOSアプリ(iPhoneアプリ)やWordPressプラグインを開発することもあり、まだまだ現在進行形で勉強中です!

お気軽に皆さんのご要望をお聞かせください!

どんなに些細なことでも構いません!よろしければ記事や当サイトへの「こんな記事があったら仕事とかで役に立つな〜」や「こうだったらもっと役に立つのに!」といったようなご要望等をお気軽にお聞かせください!今後のサービス改善にお役立てさせていただきます!

例1)Reactの技術記事を書いてほしい!
例2)WordPressの使い方とかを初心者向けに解説してほしい!...など

送信と同時にプライバシーポリシーに同意したものとします。