シンプルなコメントループ

  1. // Get only the approved comments
  2. $args = array(
  3.     'status' => 'approve',
  4. );
  6. // The comment Query
  7. $comments_query = new WP_Comment_Query();
  8. $comments       = $comments_query->query( $args );
  10. // Comment Loop
  11. if ( $comments ) {
  12.     foreach ( $comments as $comment ) {
  13.         echo '<p>' . $comment->comment_content . '</p>';
  14.     }
  15. } else {
  16.     echo 'No comments found.';
  17. }

comments.php テンプレートには、データベースからコメントを取得し、テーマに表示するために必要なすべてのロジックが含まれています。

テンプレートファイルを探る前に、single.php のような適切なページで部分テンプレートファイルを取り込む方法を知っておく必要があります。コメント テンプレートタグ を条件文でラップし、意味がある場合にのみ comments.php を取り込むようにします。 

  1. // If comments are open or we have at least one comment, load up the comment template.
  2. if ( comments_open() || get_comments_number() ) :
  3.     comments_template();
  4. endif;

functionality-comments-01

別の comments.php の例

こちらは、Twenty Thirteen テーマに含まれる comments.php テンプレートの例です: 

  1. <?php
  2. /**
  3.  * The template for displaying Comments.
  4.  *
  5.  * The area of the page that contains comments and the comment form.
  6.  *
  7.  * @package WordPress
  8.  * @subpackage Twenty_Thirteen
  9.  * @since Twenty Thirteen 1.0
  10.  */
  12. /*
  13.  * If the current post is protected by a password and the visitor has not yet
  14.  * entered the password we will return early without loading the comments.
  15.  */
  16. if ( post_password_required() ) {
  17.     return;
  18. }
  19. ?>
  21. <div id="comments" class="comments-area">
  23.     <?php if ( have_comments() ) : ?>
  24.         <h2 class="comments-title">
  25.             <?php
  26.             printf(
  27.             _nx(
  28.             'One thought on "%2$s"',
  29.             '%1$s thoughts on "%2$s"',
  30.             get_comments_number(),
  31.             'comments title',
  32.             'twentythirteen'
  33.             ),
  34.             number_format_i18n( get_comments_number() ),
  35.             '<span>' . get_the_title() . '</span>'
  36.             );
  37.             ?>
  38.         </h2>
  40.         <ol class="comment-list">
  41.             <?php
  42.             wp_list_comments( array(
  43.             'style'       => 'ol',
  44.             'short_ping'  => true,
  45.             'avatar_size' => 74,
  46.             ) );
  47.             ?>
  48.         </ol><!-- .comment-list -->
  50.         <?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
  51.             <nav class="navigation comment-navigation" role="navigation">
  53.             <h1 class="screen-reader-text section-heading"><?php _e( 'Comment navigation', 'twentythirteen' ); ?></h1>
  54.             <div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', 'twentythirteen' ) ); ?></div>
  55.             <div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', 'twentythirteen' ) ); ?></div>
  56.             </nav><!-- .comment-navigation -->
  57.         <?php endif; // Check for comment navigation ?>
  59.         <?php if ( ! comments_open() && get_comments_number() ) : ?>
  60.             <p class="no-comments"><?php _e( 'Comments are closed.', 'twentythirteen' ); ?></p>
  61.         <?php endif; ?>
  63.     <?php endif; // have_comments() ?>
  65.     <?php comment_form(); ?>
  67. </div><!-- #comments -->

comments.php の分解

上記の comments.php は、より良い理解のために以下の部分に分解できます。

テンプレートヘッダー

このテンプレートは、テンプレートを特定することから始まります。 

  1. <?php
  2. /**
  3.  * The template for displaying Comments.
  4.  *
  5.  * The area of the page that contains comments and the comment form.
  6.  *
  7.  * @package WordPress
  8.  * @subpackage Twenty_Thirteen
  9.  * @since Twenty Thirteen 1.0
  10.  */

次に、投稿がパスワード保護されているかどうかを確認し、そうであればテンプレートの処理を停止します。 

  1. /*
  2.  * If the current post is protected by a password and the visitor has not yet
  3.  * entered the password we will return early without loading the comments.
  4.  */
  5. if ( post_password_required() )
  6.  return;
  7. ?>

最後に、この投稿に関連するコメントがあるかどうかを確認します。 

  1. <div id="comments" class="comments-area">
  2.     <?php if ( have_comments() ) : ?>

コメントタイトル

コメントの上に表示されるヘッダーを出力します。

他の開発者が代替言語翻訳を提供できるように、_nx() 翻訳関数を使用します。 

  1. <h2 class="comments-title">
  2.     <?php
  3.     printf(
  4.         _nx(
  5.             'One thought on "%2$s"',
  6.             '%1$s thoughts on "%2$s"',
  7.             get_comments_number(),
  8.             'comments title',
  9.             'twentythirteen'
  10.         ),
  11.         number_format_i18n( get_comments_number() ),
  12.         '<span>' . get_the_title() . '</span>'
  13.     );
  14.     ?>
  15. </h2>

コメントリスト

以下のスニペットは、wp_list_comments() 関数を使用してコメントの順序付きリストを作成します。 

  1. <ol class="comment-list">
  2.     <?php
  3.     wp_list_comments( array(
  4.         'style'       => 'ol',
  5.         'short_ping'  => true,
  6.         'avatar_size' => 74,
  7.     ) );
  8.     ?>
  9. </ol><!-- .comment-list -->

コメントページネーション

コメントナビゲーションを追加するのに十分なコメントがあるかどうかを確認し、そうであればコメントナビゲーションを作成します。 

  1. <?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
  3.     <nav class="navigation comment-navigation" role="navigation">
  5.         <h3 class="screen-reader-text section-heading"><?php _e( 'Comment navigation', 'twentythirteen' ); ?></h3>
  6.         <div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', 'twentythirteen' ) ); ?></div>
  7.         <div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', 'twentythirteen' ) ); ?></div>
  9.     </nav><!-- .comment-navigation -->
  11. <?php endif; // Check for comment navigation ?>

コメントが閉じられているメッセージ。

コメントが開いていない場合、閉じられていることを示す行を表示します。 

  1. <?php if ( ! comments_open() && get_comments_number() ) : ?>
  2.     <p class="no-comments"><?php _e( 'Comments are closed.', 'twentythirteen' ); ?></p>
  3. <?php endif; ?>

終了

このセクションはコメントループを終了し、コメントフォームを含め、コメントラッパーを閉じます。 

  1. <?php endif; // have_comments() ?>
  3.     <?php comment_form(); ?>
  5. </div><!-- #comments -->

コメントのページネーション

コメントが多い場合（ページが長くなる）、コメントをページネーションすることにはいくつかの潜在的な利点があります。ページネーションは、特にモバイルデバイスでのページ読み込み速度を改善するのに役立ちます。

コメントのページネーションを有効にするには、2つのステップを実行します。

  • 1. WordPress 内でコメントをページ分けするには、設定 > 議論 に移動し、「コメントをページに分ける」ボックスをチェックします。「ページごとのトップレベルコメント数」に任意の数を入力できます。
  • 2. comments.php テンプレートファイルを開き、コメントページネーションを表示したい場所に次の行を追加します。
  1. <div class="pagination">
  2.     <?php paginate_comments_links(); ?>
  3. </div>

代替コメントテンプレート

場合によっては、テーマ内でコメントを異なる方法で表示したいことがあります。そのためには、代替ファイル（例：short-comments.php）を作成し、次のように呼び出します: 

  1. <?php comments_template( '/short-comments.php' );

代替コメントテンプレートに使用されるファイルのパスは、現在のテーマのルートディレクトリに対して相対的であり、サブフォルダを含む必要があります。カスタムコメントテンプレートがテーマ内のフォルダにある場合、呼び出すと次のようになります: 

  1. <?php comments_template( '/custom-templates/alternative-comments.php' );

関数リファレンス

  • wp_list_comments() : 管理エリアで設定されたさまざまなパラメータに基づいて、投稿またはページのすべてのコメントを表示します。
  • comment_form() : このタグは、テンプレート内で使用するための完全なコメントフォームを出力します。
  • comments_template() : 最初の引数で指定されたコメントテンプレートを読み込みます。
  • paginate_comments_links() : 現在の投稿のコメントのためのページネーションリンクを作成します。
  • get_comments() : 引数を使用してコメントを取得します。
  • get_approved_comments() : 提供された投稿 ID の承認されたコメントを取得します。

コメントメタを取得するための関数リファレンス