韓国留学、ベルリン短期ワーホリ、転職、Webデザイン、英語勉強、旅行、食べ物、ディズニーなど

WordPressでブログ作り14(コメント欄)

WordPress

投稿記事の詳細ページに、コメント欄を追加したいと思います。

1、comments.phpを作成

まず、「comments.php」というファイルを新規作成し、以下のコードを記述します。

<?php if(have_comments()): ?>
<h2 id="comments">コメント</h2>
<ol class="commets-list">
    <?php wp_list_comments('callback=mytheme_comment'); ?>
</ol>
<?php endif; ?>

olタグで書いていますが、好きなタグで大丈夫です。
h2タグで囲っているところは、なくても大丈夫です。この辺りは好きなようにHTMLを組めます。
ちなみに、「wp_list_comments(‘callback=mytheme_comment’)」は、これからカスタマイズする前提で「()」の中に引数を入れていますが、デフォルトのまま使う場合は、「wp_list_comments()」で大丈夫です。そして2以降の作業も必要ありません。

そして、コメント欄を表示させたい、投稿記事の詳細ページのテンプレートファイル、「single.php」に、以下の一文を記述して、comments.phpを呼び出します。

<?php comments_template(); ?>

スポンサーリンク

2、フォーム部分をカスタマイズ

まずは、フォーム部分のカスタマイズします。
comments.phpの、1で書いた記述の下に、以下のコードを追記します。

<?php $args = array(
    'title_reply' => '',
    'label_submit' => '送 信',
    'comment_notes_before' => '<p class="commentNotesBefore">※入力エリアすべてが必須項目です。</p>',
    'comment_notes_after'  => '<p class="commentNotesAfter">内容をご確認の上、「送信」ボタンを押してください。</p>',
    'fields' => array(
            'author' => '<p class="comment-form-author">' .
                        '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' placeholder="お名前" /></p>',
            'email'  => '',
            'url'    => '',
            ),
    'comment_field' => '<p class="comment-form-comment">' . '<textarea id="comment" name="comment" cols="50" rows="6" aria-required="true"' . $aria_req . ' placeholder="コメントする..." /></textarea></p>',
    );
comment_form( $args ); ?>

左側がパラメータで、右側に変更したい文言やHTMLなどを書いていきます。
表示したくない場合は、空にします。
このブログの場合は、E-mailと、URLは非表示にしたかったので、空にしました。

こちらのソースコードは、以下のサイト様の記事を見ながら作成しました。
その他のパラメータについても記載があります。
【参考サイト】
WordPress:コメントフォームをカスタマイズする方法

ブラウザでクラス名を調べて、CSSで好きなようにデザインを変更します。

【2016/8/12 追記】
さらに、テキストエリアにコメントが入力された時だけ、「送信」ボタンが押せるように手を加えます。
このままだと、入力されていない状態で送信ボタンを押すと、ボタンを押すことはできますが、「エラーです」と表示されたページに遷移します。
ですが、入力されていない時は、もともと押せない方が便利です。

まず、JSで以下のように記述します。

$(function() {
  if ($('#comment').val().length == 0) {
    $('#submit').prop('disabled', true);
  }
  $('#comment').on('keydown keyup keypress change', function() {
    if ($(this).val().length > 0) {
      $('#submit').prop('disabled', false);
      $("#submit").addClass('submit--on');
    } else {
      $('#submit').prop('disabled', true);
      $("#submit").removeClass('submit--on');
    }
  });
});

これで、テキストエリアに入力された時だけ、送信可能になり、またボタンの見た目も変えるためにクラス名「submit–on」を追加しています。テキストエリアに文字がないときは、送信不可で、クラス名「submit–on」もはずします。

そして、CSSでクラス名「submit–on」を設定します。

まず、未入力時のCSSは、以下のとおりです。
ボタンの透明度を0.5にしておきます。

.comment-area input#submit {
  opacity: .5;
}

そして、テキストエリアに入力されたときのCSSは、このようにしました。
透明度を1に戻し(透明ではない)、カーソルをポインタにします。

.comment-area input#submit.submit--on {
  opacity: 1;
  cursor: pointer;
}

こちらのサイト様の記事を参考にさせていただきました。
【参考サイト】
jQuery:チェックされたら or 入力されたら送信可能にするボタンを実装する方法

3、コメントの表示部分をカスタマイズ

次は、投稿されたコメントが表示される部分をカスタマイズします。
完成例はこちらです。このように、アバターと吹き出しを作り、管理者(私)のコメントだけ逆向きになるようにしたいと思います。管理者のコメントだけ逆向きにするには、管理者のコメントと、ゲストのコメントのクラス名を変える必要があります。

まずは、functions.phpに、以下のソースコードを記述します。

//コメント出力用
function mytheme_comment($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment; ?>
   <li class="comment clearfix <?php
    if ($comment->comment_author_email == get_the_author_meta('email')) {
        echo 'admin-comment';
    } else {
        echo 'guest-comment';
    }
    ?>" id="li-comment-<?php comment_ID() ?>">
     <div id="comment-<?php comment_ID(); ?>">
          <?php printf(__('<cite class="fn">%s</cite>'), get_comment_author_link()) ?>
          <div class="comment-author vcard">
             <?php echo get_avatar($comment,$size='48' ); ?>
             <?php comment_text() ?>
             <?php if ($comment->comment_approved == '0') : ?>
                 <em><?php _e('Your comment is awaiting moderation.') ?></em>
                 <br />
             <?php endif; ?>
              <div class="comment-meta commentmetadata"><?php printf(__('%1$s'), get_comment_date()) ?><?php edit_comment_link(__('編集'),'  ','') ?> $depth, 'max_depth' => $args['max_depth']))) ?></div>
          </div>
     </div>
<?php
        }

1個分のコメントをli要素で囲むようになっています。このli要素に、if文で分岐を書き、管理者の場合は、「admin-comment」、ゲストの場合は「guest-comment」というクラス名が付くようにしています。これで、管理者とゲストのコメントの向きをCSSで変えることができます。
ちなみに、「class=” “」のところを、「<?php comment_class(); ?>」にすると、「class=”comment-author-(ユーザー名)”」となってしまいます。

その下のコードは、下記の参考サイト様の記事を参考にし、要素の順番を入れ替えています。
要素を追加したり、好きなクラス名も付けることができます。

【参考サイト】
WP コメント表示のカスタマイズ
WordPressのコメント欄で管理者コメントだけ背景色を変更する方法
ユーザ名が地味にバレるWordPressのcomment authorを変更する

吹き出し部分は、画像ではなくCSSで書いています。
吹き出しのCSSは、「現場のプロが教える WEBデザイン 新・スタンダードテクニック37」という本を参考にしました。
この部分は、後日、別記事で書きたいと思います。

4、アバター等の設定

アバター等の設定は、「管理画面 > 設定 > ディスカッション」から行います。
まず、「新しい投稿へのコメントを許可する」にはチェックを入れます。
あとは、このブログの場合、必須項目は名前とコメント内容だけなので、「名前とメールアドレスの入力を必須にする」はチェックを外します。
「コメントを□階層までのスレッド (入れ子) 形式にする」にはチェックを入れ、「2」階層にしておきました。

下の方に、アバターの設定があります。
「アバターを表示する」にチェックを入れます。このブログの場合は、「デフォルトアバター」は、「ミステリーパーソン」を選択しています。
これで、ゲストにはミステリーパーソンのアバターが表示されるようになります。

次に、管理者(自分)のアバターを設定します。
「Gravatar」というサービスを使ってアバターを作成・設定する方法と、「Simple Local Avatars」というプラグインを使う方法があることがわかりましたが、私は後者の「Simple Local Avatars」というプラグインを使うことにしました。
理由は、「Gravatar」はアカウントの作成とかが面倒くさそうだったからです。w
あと、プラグインの方は、アバターを変えたくなった時に、古いコメントにも一括反映されるというのも魅力的でした。

ちなみに、「Gravatar」でアバター設定する場合は、下記のサイト様の記事が参考になりそうです。
【参考サイト】
Gravatarを利用した独自アバターの設定

さて、「Simple Local Avatars」というプラグインを使った設定ですが、まず、プラグインをインストールします。
そして、「管理画面 > ユーザー > あなたのプロフィール」の下の方に、「Avatar」という項目ができているので、「ファイルを選択」から好きな画像を選択して、「プロフィールを更新」ボタンを押します。


これで、管理者のアバターが、設定した画像に差し変わります!

【参考サイト】
Simple Local Avatars – WordPressのアバターに任意の画像を利用できるプラグイン

スポンサーリンク

内容をご確認の上、「送信」ボタンを押してください。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください