お元気ですか。Hodaです。

当ブログはついにコメント欄を実装しました。やったね!

画面向こうのあなたも、知らなきゃ損!損!

この記事ではプラグインを使わずに、コメント欄を用意する方法をまとめます。

コメントフォームを出力する

WordPressで用意されている↓のテンプレートタグを使います。

<?php comment_form(); ?><!-- これを適当な場所に挿入する -->

単一記事(single.php)や固定ページ(page.php)ファイルの適当な場所に記述します。

すると、このようにコメントフォームが出力されます。

コメントフォームの出力結果

コメントフォームの見出しタイトルを変える場合

例えば、↓のように記述します。

<?php $comments_args = array(
  'format'=>'html5',// HTML5のマークアップで出力
  'title_reply'=>'Leave a coments',// コメント欄の見出しタイトルを変更
); ?>
<?php comment_form( $comments_args ); ?><!-- コメントフォームを出力 -->

配列変数を指定して、その変数をテンプレートタグ()内に入れてあげます。

デフォルトの見出し「コメントを残す」から、「Leave a Coments」に変わりました。

コメントフォームの見出しタイトルを設定

 

各部品の名前を変更する場合

すごく長いですが……。

<?php $comments_args = array(
  'format'=>'html5',// HTML5のマークアップで出力
  'title_reply'=>'Leave a coments',// コメント欄の見出しタイトルを変更
  'comment_field' =>  '<p class="comment-form-comment"><label for="comment">' . __( 'コメントを残してくれてもいいんだぜっ', 'noun' ) .
     '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true">' .
     '</textarea></p>',// コメントフォームのタイトルを「コメントを残してくれてもいいんだぜっ」に変更

  'fields' => apply_filters( 'comment_form_default_fields', array(

    'author' =>
      '<p class="comment-form-author">' .
      '<label for="author">' . __( 'あなたの名前はHogeHogeですか?', 'domainreference' ) . '</label> ' .
      ( $req ? '<span class="required">*</span>' : '' ) .
      '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) .
      '" size="30"' . $aria_req . ' /></p>',// 名前入力欄のタイトルを「あなたの名前はHogeHogeですか?」に変更

    'email' =>
      '<p class="comment-form-email"><label for="email">' . __( 'Hogemail', 'domainreference' ) . '</label> ' .
      ( $req ? '<span class="required">*</span>' : '' ) .
      '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) .
      '" size="30"' . $aria_req . ' /></p>',// メールアドレス入力欄のタイトルをHogemailに変更

    'url' =>
      '<p class="comment-form-url"><label for="url">' .
      __( '秘密のurl', 'domainreference' ) . '</label>' .
      '<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) .
      '" size="30" /></p>'// ウェブサイトURL入力欄のタイトルを「秘密のurl」に変更
    )
  ),
); ?>
<?php comment_form( $comments_args ); ?><!-- コメントフォームを出力するタグ -->

 

前の項と同様に配列を使い、変更したい項目の値を書き換えています。

もう少しスマートなやり方があればいいのですが、今の私ではこれが精いっぱいでした。

出力結果は↓のようになります。

コメントフォーム各部品の名前を設定

コメントフォームをCSSでスタイリングする

お見せした画像はCSSで整形したものを載せています。

フォームはid=”respond”のdivの中に内包され、各部品はpタグの中にclass名が付いた状態で設置されているので、スタイルシートで自由にカスタマイズできます。

コメントフォームの構造

 

コメント欄を出力する

これもワードプレス標準のテンプレタグを使います。

<?php wp_list_comments(); ?>

コメントフォームのときと同様、単一記事(single.php)や固定ページ(page.php)ファイルの適当な場所に記述します。

 

当ブログに実装したコードはピンバックやトラックバックを含まず、コメントのみを表示するようにしました。

<?php if( have_comments() ): ?>
  <h3>Comments</h3>
  <ul>
    <?php
      $args = array(
        'type'=>'comment',// コメントのみを表示(ピンバックやトラックバックを含まない)
        'avatar_size'=>0,// アバターを非表示
        'max_depth'=>1,// 返信欄を非表示
        'format'=>'html5',// HTML5でマークアップ
    ); ?>
    <?php wp_list_comments( $args ); ?>
  </ul>
<?php endif; ?>

 

最後にCSSで整形して完成です。

コメント欄の出力結果

まとめ

WordPressのテンプレートタグを用いて、ブログにコメント投稿フォームと表示欄を追加しました。

あまり使われないかもしれませんが、少ない機会を取りこぼすことがないよう、早めに実装できて良かったです。

それではまた、ごきげんよう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*