WordPressオリジナルテーマの作り方⑧（個別記事ページ編）

今回はWordPressオリジナルテーマの作り方【第8回】個別記事ページ編となります。

前回までに以下の事をやってきました。

今回は個別記事ページについて書いていきたいと思います。

これはWordPressオリジナルテーマの作り方⑥で作成した記事一覧ページから記事をクリックした先のページの事です。

それではまずファイルを作成していきます。

効率よくWordPress制作したい人はこちら

WordPressオリジナルテーマ：個別記事ページの作り方

個別記事ページはWordPressオリジナルテーマの作り方①（ファイルの準備編）で解説していますが、single.phpというテンプレートを使います。

あとはこれまでやってきた事と似ているので、第7回まで見てきた方ならスムーズに進められるかと思います。

single.phpを作成

それではテンプレートを作成していきます。

まずはお決まりのheader.phpやfooter.phpを読み込むテンプレートタグを書きます。

<?php get_header(); ?>
<main>
  <div>
    <img src="画像パス" class="class名" alt="チワワ" /> // アイキャッチ
  </div>
  <div>
    <div>
      チワワ // カテゴリー
    </div>
    <p>
      <time datetime="2021-01-01">2021年1月1日</time> // 投稿日
    </p>
    <h1>
      愛犬撮影会（チワワ） // タイトル
    </h1>
    <div>
      舌がチョロッと出ているチワワちゃん。飼い主さんも思わず触ってしまいます。// 本文
    </div>
  </div>
</main>
<?php get_footer(); ?>

トップページの作り方と同じですね。

そして中身の種類はブログカードとほぼ同じで、

この4つの書き方はブログカードと同じです（詳しくはWordPressオリジナルテーマの作り方⑤をご参照ください）

もちろんデザインによって書く順番が違ったり必要のない項目もあると思うので、その辺はご自身の環境に合わせて下さい。

それではブログカードと違うのはどこかというと、本文を表示させる部分です。

ブログカードでは本文を抜粋するテンプレートタグである<?php the_excerpt(); ?>を使いました。

ただし個別記事ページでは全文表示させたいので、投稿の本文を出力する<?php the_content(); ?>というテンプレートタグを使います（<?php the_excerpt(); ?>は本文の抜粋になります）

先ほどの例で言えばこうなります。

<?php get_header(); ?>
<main>
  <?php if(have_posts()): while(have_posts()): the_post(); ?>
  <div>
    <img src="<?php the_post_thumbnail('post-thumbnail', array('alt' => the_title_attribute('echo=0'))); ?>" /> // アイキャッチ
  </div>
  <div>
    <div>
      <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?> // カテゴリー
    </div>
    <p>
      <time datetime="<?php the_time('Y-m-d'); ?>">
        <?php the_time('Y年m月d日'); ?> // 投稿日
      </time>
    </p>
    <h1>
      <?php the_title(); ?> // タイトル
    </h1>
    <div>
      <?php the_content(); ?> // 本文全文
    </div>
  </div>
  <?php endwhile; endif; ?>
</main>
<?php get_footer(); ?>

ブログカードと中身の書き方で違うのは本文の所だけです。

あとは記事へのリンクもありません、このページがその記事なので。

3行目と21行目のループ処理ですが、なくても大丈夫な場合もありますがWordPressの公式で推奨しているので書いておきましょう（これがないと起きる問題もあります）

ページネーションを作成

ページネーションはWordPressオリジナルテーマの作り方⑥の記事一覧ページでも作りましたが、「次の記事へ」や「前の記事へ」というやつです。

ただし前回の記事一覧のページネーションは1ページ、2ページというページ数が表示されるタイプで、個別記事ページは前の記事へ、次の記事へと前後のボタンを表示します。

記事一覧（home.php）

<?php the_posts_pagination( array(
  'prev_text' => '前のページへ',
  'next_text' => '次のページへ'
  ) );
?>

個別記事（singular.php）

<?php the_post_navigation( array(
  'prev_text' => '前のページへ',
  'next_text' => '次のページへ'
  ) );
?>

違いは以下の通りです。

となります。

pagination と navigation の違い以外に、posts と post の違いもあるのでご注意ください。

このコードは</main>の上あたりに書いておけばOKです。

以上です。

まとめとおまけ

今回の内容ですが、以下のような設定も可能です。

これらの設定方法は以下のコーディング&WordPressメモまとめ集にコピペ出来るように掲載しています。

Brainランキング1位獲得 ＆ 3日で500部突破

クチコミ約300件
（平均スコア）

今だけ！5つの無料特典あり🎁

👇画像をクリック