投稿記事全体の表示

webサイト制作
2021.03.01

index.phpを元に作成

記事一覧から個別の記事を選択して、記事全体を表示できるようにします。

個別の記事の表示は single.php というファイルで表示します。

作成したindex.phpをコピーして修正します。

記事の抜粋を記事の本文に置き換え

「<div class="post-content"> … </div>」の中身は、抜粋ではなくコンテンツそのものを表示するので、「<?php the_excerpt(); ?>」を「<?php the_content(); ?>」とします。

表示に合わせてスタイルも修正しておきます。

ナビゲーション部分も少し修正

ナビゲーション部分は、「previous_posts_link()」「next_posts_link()」をそれぞれ「previous_post_link()」「next_post_link()」に修正して、今度はループの中に入れます。

single.php

<?php get_header(); ?>
<div id="main" class="container">
<div id="posts">

<?php
if (have_posts()) :
  while (have_posts()) :
    the_post();
?>

  <div class="post">
    <div class="post-header">
      <h2>
        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
      </h2>
      <div class="post-meta">
        <?php echo get_the_date(); ?> 【<?php the_category(', '); ?>】
      </div>
    </div>
    <div class="post-content">
      <div class="post-detail">
        <?php the_content(); ?>
      </div>
    </div>
  </div><!-- /post -->

  <div class="navigation">
    <div class="prev"><?php previous_post_link(); ?></div>
    <div class="next"><?php next_post_link(); ?></div>
  </div>

<?php
  endwhile;
else:
?>

<p>記事はありません！</p>

<?php
endif;
?>

</div><!-- /posts -->
<?php get_sidebar(); ?>
</div><!-- /main -->
<?php get_footer(); ?>
</body>
</html>

以上で投稿ページの完成です。

タイトルとURLをコピーしました