WordPressコメント欄のカスタマイズ

WordPressブログ

今回はWordPressのコメント欄のカスタマイズをしてみようと思います。WordPressのコメント欄には「名前」「メールアドレス」「ウェブサイト」を記入する欄がありますよね、実際にはこんな表示になります。

コメント欄-1

これは好みによりますが、「ウェブサイト」の記入欄とかいらなくね?と思う人もいると思います。私の場合は「メールアドレス」「ウェブサイト」の記入欄を撤去して、「名前」と「コメント」だけでコメント投稿できるように設定しています。

必要な項目を考えておく

まずはコメント欄に必要な項目を考えてみましょう。私のように「名前」と「コメント」だけにしているとコメントされやすい環境になりますが、「スパムコメント」や「いたずらコメント」とか増えそうですよね。

コメントしてもらいやすい環境を優先するかどうかというのが意見の分かれ目になると思います。とりあえずコメント欄をカスタマイズする前にこの部分はよく考えておくべきと思います。

設定で必須項目を確認しておく

メールアドレスの入力を必須にするかどうかはWordPressの管理画面から設定できます。先にこれも確認しておきましょう。WordPressの管理画面から「設定」⇒「ディスカッション」と進んで下さい。

コメント欄-2

ここに「名前とメールアドレスの入力を必須にする」という項目がありますので、必須にする場合はここにチェックを入れます。また、後ほどメールアドレスの記入欄を撤去したいという方はこの項目にチェックを入れないようにしておきます。

一応基本的な設定に関しては別記事でも紹介していますので、参考に。
WordPressのディスカッション設定を解説

コメント欄の項目をカスタマイズする方法

コメント欄の各項目を非表示もしくは削除する方法は2通りあります。

  1. スタイルシート (style.css)で非表示にする。
  2. 子テーマのcomments.phpを編集して削除する。

簡単なのは1番目のスタイルシートで非表示にする方法ですが、「見せたくない物を隠す」という感じがするので個人的には好きではありません。2番目のcomments.phpを編集する方法の場合はやや手間がかかりますが、細かいテキストの部分等の変更も自分でできるので私はこの方法をしています。

スタイルシートで各項目を非表示にする場合

さて、設定ができたらコメント欄をカスタマイズをしていきますが、今回は幾つかサンプルを紹介しますので、最後まで読んでからカスタマイズしてみて下さい。まずは先ほど紹介した1番目のスタイルシートでこの項目を隠す(非表示)にする方法です。これは子テーマのスタイルシートにこのように記述してください。

/* コメント欄の項目を非表示 */
.comment-form-email {display: none;}
.comment-form-url {display: none;}
.form-allowed-tags {display: none;}
  • メールアドレス非表示。
  • ウェブサイト非表示。
  • コメント下のタグを非表示。

これで各項目を非表示にする事ができます。これがスタイルシートを使った場合です。

子テーマの「comments.php」を使って編集する場合

スタイルシートではなくファイルを書き換えてカスタマイズする場合は「comments.php」を使いますので、子テーマにこのファイルを追加しておいて下さいね。

追加できたら子テーマの「comments.php」を開いてみて下さい。一番下の方に次の記述があります。

<?php comment_form(); ?>

この1行の記述がコメント欄を表示させるコードです。この部分を「削除」して同じ場所に次のコードを入れます(この部分を削除しておかないとコメント欄が2つ表示されます)。

<?php
$comments_args = array(
    'fields' => array(
        'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
                    '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
        'email'  => '',
        'url'    => '',
    ),
    'title_reply'          => 'コメントをどうぞ',
    'comment_notes_before' => '',
    'comment_notes_after'  => '<p class="form-allowed-tags">内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。</p>',
    'label_submit'         => 'コメントを送信する',
);
 
comment_form($comments_args);
?>

これでメールアドレスとウェブサイトの表示が消えます。途中の「コメントをどうぞ」等の表示もここで変更する事ができます。そしてコメント下の「次のHTMLタグと属性が使えます」という部分もテキストに変更してみました。ログアウトして表示を確かめてみます。

コメント欄-3

メールアドレス記入欄は残したい場合

メールアドレス入力欄は残したいという方は先ほどと同じ要領です。

<?php comment_form(); ?>

先ほど同様この記述を削除して同じ場所に次のコードを入れます。

<?php
$comments_args = array(
    'fields' => array(
        'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
                    '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
        'email'  => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
                    '<input id="email" name="email" ' . ( $html5 ? 'type="email"' : 'type="text"' ) . ' value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
        'url'    => '',
    ),
    'title_reply'          => 'コメントをどうぞ',
    'comment_notes_before' => '<p class="comment-notes">メールアドレスが公開されることはありません。 * が付いている欄は必須項目です</p>',
    'comment_notes_after'  => '<p class="form-allowed-tags">内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。</p>',
    'label_submit'         => 'コメントを送信する',
);
 
comment_form($comments_args);
?>

とこのように記述する事でウェブサイトの記入欄を消し、コメント下の「次のHTMLタグと属性が使えます」という部分も別のテキストにしてみました。

コメント欄-4

またコメント欄内の「コメントをどうぞ」や「メールアドレスが公開される事はありません」等の記述もここで変更してみてもいいと思います。以上がコメント欄のカスタマイズです。

参考にさせて頂いたサイト様

今回コメント欄のカスタマイズするに当たり「NxWorld」様のサイトの記事「コメントフォームをカスタマイズする方法」を参考にさせて頂きました。ありがとうございます。参考サイトの方がもっと細かく詳しく書かれてますのでそちらも参考にしてみて下さいね。

それでは次回はメタ情報のカスタマイズを紹介していきます。

コメント

  1. ななし より:

    参考になりました!!

  2. ひさお より:

    参考になりました!
    ありがとうございます!!

  3. 匿名 より:

    test

  4. kita より:

    >しげぞう様

    ご返答ありがとうございます。こちらも無事解決致しました。
    いろいろとありがとうございます。

  5. しげぞう より:

    kita様

    返信ありがとうございます。各コメントの下の「返信」のボタンですが、スタイルシートの次の記述を入れて非表示にすればOKと思います。

    .reply {
        display: none;
    }

    これで一度試して貰えますか?

  6. kita より:

    >しげぞう様

    ご回答ありがとうございます。ご教授してくださったコードを変更・追加したところ無事反映されました。助かりました。

    ここで、また質問があります。すいません。
    各コメントの下に「返信 ↓」というボタンがありますが、これを削除したいと思っています。調べても有力な情報が見当たらなかったので、またご教授頂ければと思います。よろしくお願い致します。

  7. しげぞう より:

    kita様

    コメントありがとうございます。まず、コメント欄の上部の部分はコメントタイトルという事になってますので、スタイルシートで調整が可能です。

    .comments-title {
        font-size: 14px;
    }

    文字の大きさはお好みで調整して下さい。

    それから「「○○○○○○」への13件のフィードバック」という文言を変更する場合には子テーマのcomments.phpを編集します。comments.phpの次の部分を探して下さい。

    <h2 class="comments-title">
    			<?php
    				printf( _n( 'One thought on “%2$s”', '%1$s thoughts on “%2$s”', get_comments_number(), 'twentytwelve' ),
    					number_format_i18n( get_comments_number() ), '<span>' . get_the_title() . '</span>' );
    			?>
    		</h2>

    この部分を削除して次のように書き換えます。

    <h2 class="comments-title">
    			<?php
    				printf( _n( '“%2$s”に1件のコメントがあります。', '“%2$s”に%1$s件のコメントがあります。', get_comments_number(), 'twentytwelve' ),
    					number_format_i18n( get_comments_number() ), '<span>' . get_the_title() . '</span>' );
    			?>
    		</h2>

    張替えたら保存でOKです。これ翻訳する関数が入っていて本当は翻訳の関数の部分は外しても良いと思うのですが、あまり詳しくないので、必要な部分だけ書き換えてます。表示には問題はありません。

タイトルとURLをコピーしました