静的サイトをWordPress化する手順説⑥（投稿ページの作成）

今回は管理画面で投稿された記事の個別記事ページを作成していきます。早速やっていきましょう。

single-post.phpの編集

以前作ったファイルで個別記事ページに優先的に適用されるファイルはsingle-post.phpですね。

前回は記事一覧ページを作りましたが、基本はそこまで変わりません。

　一件分の投稿を取得

記事一覧ページではループで複数回取得していた投稿を、今回の場合は一件分取得して、表示するだけです。

以下がサンプルコードです。適宜HTMLのタグで囲っているのは、CSSを適用させるためです。

<?php get_header();?>
<main>
<section class="page-ttl">
  <div class="inner">
    <h2>NEWS</h2>
  </div>
</section>
<section class="news-show">
  <div class="inner">
    <?php 
    while( have_posts()):
      the_post();
      ?>
      <?php
      $cats = get_the_category(); 
      $catId = $cats[0]->cat_ID; 
      $catName = $cats[0]->name; 
      $catSlug = $cats[0]->category_nicename;
      $link = get_category_link($catId); 
      ?>
    <h1 class="article-ttl"><?php the_title(); ?></h1>
    <time><?php the_time( "Y年n月j日" ); ?></time>
    <a href="<?php echo $link ?>" class="category">
      <?php echo $catName; ?>
    </a>
    <?php if (has_post_thumbnail()) : ?>
    <?php the_post_thumbnail(); ?>
    <?php else : ?>
    <img src="<?php echo get_theme_file_uri('/img/noimage.png'); ?>" alt="no-image" />
    <?php endif ; ?>
    <?php the_content(); ?>
    <?php 
    endwhile;
    ?>
  </div>
</section>
<?php get_template_part('contact');?>
</main>
<?php get_footer();?>

一つづつ解説していきますが、前回のhome.phpと同じ部分は省略します。

①

<?php $cats = get_the_category();  $catId = $cats[0]->cat_ID; 
$catName = $cats[0]->name; 
$catSlug = $cats[0]->category_nicename;
$link = get_category_link($catId); 
?>

ここでは$cats = get_the_category();で取得した投稿が属するカテゴリーを配列形式で変数$catsに代入しています。

その後の4行でカテゴリの各種情報をわかりやすい名前をつけた変数に代入しています。

②

<a href="<?php echo $link ?>" class="category"><?php echo $catName; ?></a>

記事一覧ページではリンクなしカテゴリを出力していましたが、このコードでは①で代入した情報を使って、リンク付きカテゴリを出力しています。

③

<?php the_content(); ?>

<?php the_content(); ?>ではWordPressの管理画面で投稿の内容として入力した情報を出力しています。

文章を装飾したい場合は管理画面側で行うことでしっかりと反映されます。

ページネーションの設置

個別記事ページにも「次の記事へ」のようなページネーションを設置しましょう。

個別記事ページでページネーションを設置するには、<?php the_post_navigation(); ?>を使います。

<?php the_post_navigation(); ?>も引数でテキストを設定できます。こんな感じです。

 <?php      the_post_navigation( array(       'prev_text'           => '前の記事へ',
      'next_text'           => '次の記事へ',
    ) );

この関数は以下のようなHTMLコードを自動生成します。

<nav class="navigation post-navigation" role="navigation">
  <h2 class="screen-reader-text">投稿ナビゲーション</h2>
  <div class="nav-links">
    <div class="nav-previous">
      <a href="http://localhost/minimalist/snowy-day/" rel="prev">前の記事へ</a>
    </div>
    <div class="nav-next">
      <a href="http://localhost/minimalist/sunny-day-in-tokyo/" rel="next">次の記事へ</a>
    </div>
  </div>
</nav>

こちらもデフォルトであたっているクラスを利用して、装飾が可能です。

single-post.phpは最終的に以下のようになりました。

<?php get_header();?>
<main>
<section class="page-ttl">
  <div class="inner">
    <h2>NEWS</h2>
  </div>
</section>
<section class="news-show">
  <div class="inner">
    <?php 
    while( have_posts()):
      the_post();
      ?>
      <?php
      $cats = get_the_category(); 
      $catId = $cats[0]->cat_ID; 
      $catName = $cats[0]->name; 
      $catSlug = $cats[0]->category_nicename;
      $link = get_category_link($catId); 
      ?>
    <h1 class="article-ttl"><?php the_title(); ?></h1>
    <time><?php the_time( "Y年n月j日" ); ?></time>
    <a href="<?php echo $link ?>" class="category">
      <?php echo $catName; ?>
    </a>
    <?php if (has_post_thumbnail()) : ?>
    <?php the_post_thumbnail(); ?>
    <?php else : ?>
    <img src="<?php echo get_theme_file_uri('/img/noimage.png'); ?>" alt="no-image" />
    <?php endif ; ?>
    <?php the_content(); ?>
    <?php 
    the_post_navigation( array(
      'prev_text'           => '前の記事へ',
      'next_text'           => '次の記事へ',
    ) ); 
    ?>
    <?php 
    endwhile;
    ?>
  </div>
</section>
<?php get_template_part('contact');?>
</main>
<?php get_footer();?>

single.phpの編集

今回想定するサイトでは個別記事ページにsingle-post.phpが最優先で適用されるため、現時点ではsingle.phpが適用される場面はありません。

しかし、あとからページの種類を増やしていく可能性を考えると、single.phpもあったほうがいいですね。

※画像は日本語版WordPressCodexより
https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4

第一回で作成したsingle.phpを編集していきましょう。

single.phpは現段階では適用されないのでかなりシンプルな構成でいいです。

現段階では、ヘッダー、フッター（+自分で設定した共通部分）と投稿情報の表示だけで十分ですね。

以下がサンプルコードです。

<?php get_header(); ?>
 <main>
 <?php if (have_posts()) : the_post(); ?>
  <?php the_content(); ?>
 <?php endif; ?>
  <?php get_template_part('contact');?>
 </main>
<?php get_footer(); ?>

今回はここまでにします。次回は残りのテンプレートファイルを編集していきます。