コメントテンプレート
2020.04.03
2020.04.03
TOPICS
翻訳元記事はこちらです。
WordPress は、WordPress テーマ内の comments.php ファイルの設定とコードに基づいて、テーマ内にコメントを表示します。
シンプルなコメントのループ
//Get only the approved comments
$args = array(
'status' => 'approve'
);
// The comment Query
$comments_query = new WP_Comment_Query;
$comments = $comments_query->query( $args );
// Comment Loop
if ( $comments ) {
foreach ( $comments as $comment ) {
echo '<p>' . $comment->comment_content . '</p>';
}
} else {
echo 'No comments found.';
}comments.phpテンプレートには、データベースからコメントを引き出してテーマに表示するために必要なすべてのロジックが含まれています。
テンプレートファイルを調べる前に、single.phpのような適切なページに部分テンプレートファイルを取り込む方法を知っておきましょう。
コメントテンプレートタグを条件文でラップすることで、comments.phpが意味のある場合にのみ読み込まれるようにします。
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;Comments.phpのその他の例
以下はTwenty Thirteenテーマのcomments.phpの例です。
<?php
/**
* The template for displaying Comments.
*
* The area of the page that contains comments and the comment form.
*
* @package WordPress
* @subpackage Twenty_Thirteen
* @since Twenty Thirteen 1.0
*/
/*
* If the current post is protected by a password and the visitor has not yet
* entered the password we will return early without loading the comments.
*/
if ( post_password_required() )
return;
?>
<div id="comments" class="comments-area">
<?php if ( have_comments() ) : ?>
<h2 class="comments-title">
<?php
printf( _nx( 'One thought on "%2$s"', '%1$s thoughts on "%2$s"', get_comments_number(), 'comments title', 'twentythirteen' ),
number_format_i18n( get_comments_number() ), '<span>' . get_the_title() . '</span>' );
?>
</h2>
<ol class="comment-list">
<?php
wp_list_comments( array(
'style' => 'ol',
'short_ping' => true,
'avatar_size' => 74,
) );
?>
</ol><!-- .comment-list -->
<?php
// Are there comments to navigate through?
if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) :
?>
<nav class="navigation comment-navigation" role="navigation">
<h1 class="screen-reader-text section-heading"><?php _e( 'Comment navigation', 'twentythirteen' ); ?></h1>
<div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', 'twentythirteen' ) ); ?></div>
<div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', 'twentythirteen' ) ); ?></div>
</nav><!-- .comment-navigation -->
<?php endif; // Check for comment navigation ?>
<?php if ( ! comments_open() && get_comments_number() ) : ?>
<p class="no-comments"><?php _e( 'Comments are closed.' , 'twentythirteen' ); ?></p>
<?php endif; ?>
<?php endif; // have_comments() ?>
<?php comment_form(); ?>
</div><!-- #comments -->comments.phpの解説
上記のcomments.phpを理解するために、噛み砕いて解説します。
テンプレートヘッダー
このテンプレートは、テンプレートを識別することから始まります。
<?php
/**
* The template for displaying Comments.
*
* The area of the page that contains comments and the comment form.
*
* @package WordPress
* @subpackage Twenty_Thirteen
* @since Twenty Thirteen 1.0
*/次に、投稿がパスワードで保護されているかどうか判定して、保護されている場合はテンプレートの処理を停止します。
/*
* If the current post is protected by a password and the visitor has not yet
* entered the password we will return early without loading the comments.
*/
if ( post_password_required() )
return;
?>最後に、この投稿に関連するコメントがあるかどうかを判定します。
<div id="comments" class="comments-area">
<?php if ( have_comments() ) : ?>コメントのタイトル
コメントの上に表示されるタイトルを表示します。
_nx() 翻訳関数を使用して、他の開発者が代替言語の翻訳を提供できるようにします。
<h2 class="comments-title">
<?php
printf( _nx( 'One thought on "%2$s"', '%1$s thoughts on "%2$s"', get_comments_number(), 'comments title', 'twentythirteen' ),
number_format_i18n( get_comments_number() ), '<span>' . get_the_title() . '</span>' );
?>
</h2>コメントのリスト表示
wp_list_comments() 関数を使用してコメントの順序付きリストを作成します。
<ol class="comment-list">
<?php
wp_list_comments( array(
'style' => 'ol',
'short_ping' => true,
'avatar_size' => 74,
) );
?>
</ol><!-- .comment-list -->コメントのナビゲーション
コメントナビゲーションを追加するのに十分なコメントがあるかどうかをチェックし、ある場合はコメントナビゲーションを作成します。
<?php
// Are there comments to navigate through?
if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) :
?>
<nav class="navigation comment-navigation" role="navigation">
<h3 class="screen-reader-text section-heading"><?php _e( 'Comment navigation', 'twentythirteen' ); ?></h3>
<div class="nav-previous"><?php previous_comments_link( __( '← Older Comments', 'twentythirteen' ) ); ?></div>
<div class="nav-next"><?php next_comments_link( __( 'Newer Comments →', 'twentythirteen' ) ); ?></div>
</nav><!-- .comment-navigation -->
<?php endif; // Check for comment navigation ?>コメントが閉じている場合のメッセージ
コメントが閉じられている場合は、その旨のメッセージを表示します。
<?php if ( ! comments_open() && get_comments_number() ) : ?>
<p class="no-comments"><?php _e( 'Comments are closed.' , 'twentythirteen' ); ?></p>
<?php endif; ?>終わり
このセクションでは、コメントループを終了し、コメントフォームを読み込み、コメントラッパーを閉じます。
<?php endif; // have_comments() ?>
<?php comment_form(); ?>
</div><!-- #comments -->コメントのページネーション
コメントの数が多い（ページが長くなる）場合は、コメントをページ分割することで多くのメリットが得られます。ページ分割は、特にモバイルデバイスでのページの読み込み速度を向上させるのに役立ちます。
コメントのページネーションを有効にするには、2つのステップがあります。
- WordPress でページ化されたコメントを有効にするには、「設定」→「ディスカッション」で、「コメントをページに分割する」にチェックを入れます。ページごとのコメント数には、任意の数字を入力することができます。
- comments.phpテンプレートファイルを開き、コメントのページ分割を表示させたい場所に以下のコードを追加します。
<div class="pagination">
<?php paginate_comments_links(); ?>
</div>代替コメントテンプレート
場合によっては、テーマ内でコメントを別の形で表示したいこともあるでしょう。そのためには、別のファイル（例：short-comments.php）を作成し、以下のように呼び出します。
<?php comments_template( '/short-comments.php' ); ?> 代替コメントテンプレートに使用されるファイルへのパスは、現在のテーマのルートディレクトリからの相対パスで、サブフォルダも含めてください。
そのため、カスタムコメントテンプレートがテーマ内のフォルダにある場合、以下のように呼び出します。
<?php comments_template( '/custom-templates/alternative-comments.php' ); ?>関数リファレンス
- wp_list_comments()：管理画面で設定されたものを含む様々なパラメータに基づいて、投稿やページのすべてのコメントを表示します。
- comment_form()：このタグは、テンプレート内で使用するためのコメントフォームを出力します。
- comments_template()：第1引数で指定したコメントテンプレートを読み込みます。
- paginate_comments_links()：現在の投稿のコメントのページネーションリンクを作成します。
- get_comments()：引数を指定して、コメントのリストを取得します。
- get_approved_comments()：対象の投稿IDの承認済みコメントを取得します。