ワードプレス comments.phpを作成してみる

コメント部分をつけるかつけないかはお好みですが、新規でcomments.phpを作成してみます。

comments.phpもheader.php footer.php同様、切り出して表示する形になります

サンプル comments.php

<?php
if ( post_password_required() ) {
return;
}
?>

<?php if ( have_comments() ) : ?>
<div class=”box-generic”>
<div class=”box-content box-comment-display”>
<h2>コメントとトラックバック</h2>
<ul class=”comment-list”>
<?php
wp_list_comments( array(
‘avatar_size’ => 130,
) );
?>
</ul>
</div>
</div>
<?php endif; ?>

<?php if ( comments_open() ) : ?>
<div class=”box-generic”>
<div class=”box-content box-comment-input”>
<?php comment_form(); ?>
</div>
</div>
<?php endif;

実際に読み込むことになるとかなり複雑なコードになりますが、ここではかなりシンプルに仕上げています。

single.phpにコメントを読み込みます。

サンプル　single.php

<?php if ( comments_open() || get_comments_number() ) :
comments_template();
endif; ?>

こちらは<div class=”main-column”></div>

“main-column”の</div>直前に記述します。

サンプル single.php

<div class=”main-column”>
<div class=”box-ge”main-column”neric”>
<h1 class=”box-heading box-heading-article”><?php the_title(); ?></h1>
<div class=”box-content”>

<article class=”entry”>
<?php the_content(); ?>
</article>

<div class=”meta-data”>
<time class=”meta meta-entry-date” datetime=”<?php echo get_the_date( DATE_W3C ); ?>”><?php echo get_the_date(); ?></time>
<p class=”meta meta-author”><?php the_author_posts_link(); ?></p>
<p class=”meta meta-cat”><?php the_category( ‘, ‘ ); ?></p>
<p class=”meta meta-tag”><?php the_tags(); ?></p>
</div>

<?php the_post_navigation( array(
‘prev_text’ => ‘前の記事：%title’,
‘next_text’ => ‘次の記事：%title’,
) ); ?>
</div>
</div>

<?php if ( comments_open() || get_comments_number() ) :
comments_template();
endif; ?>

</div>

コメント一覧表示について

<?php
wp_list_comments( array(
‘avatar_size’ => 130,
) );
?>

コメント表示については

wp_list_comments();

を使用します。

array(
‘avatar_size’ => 130,
)

は投稿者のアバターのサイズになります。

130pxでアバターが表示されます。

そしてここでまた「if文」が出てきます。

<?php if ( have_comments() ) : ?>
<?php endif; ?>

コメントがない場合は出力されない設定です。

<div class=”box-generic”>
<div class=”box-content box-comment-display”>
<h2>コメントとトラックバック</h2>
<ul class=”comment-list”>
<?php
wp_list_comments( array(
‘avatar_size’ => 130,
) );
?>
</ul>
</div>
</div>

コメントフォームの出力

<?php comment_form(); ?>の関数がコメントフォームの出力です。

<?php if ( comments_open() ) : ?>
<div class=”box-generic”>
<div class=”box-content box-comment-input”>
<?php comment_form(); ?>
</div>
</div>
<?php endif;

<?php if ( comments_open() ) : ?>
でコメントが許可されている場合のみ出力します。

コメントパスワード制御

<?php
if ( post_password_required() ) {
return;
}
?>

このコードが閲覧制限のパスワード制御になります。

パスワード保護された状態ではコメントは非表示になり、解除した場合のみコメントが表示されます。

最後に「functions.php」の「samplewp_setup() {」に以下のコードを記します。

サンプル　functions.php

add_theme_support( ‘html5’, array(
‘comment-form’,
‘comment-list’,
) );

これでHTML対応したマークアップがコメント部分に出力されます。

実際にコメント投稿してみましょう。

動作に問題がなければ、後はCSSをあててスタイリングします。