今回はWordPressオリジナルテーマの作り方【第8回】個別記事ページ編となります。
前回までに以下の事をやってきました。
今回は個別記事ページについて書いていきたいと思います。
これはWordPressオリジナルテーマの作り方⑥で作成した記事一覧ページから記事をクリックした先のページの事です。
それではまずファイルを作成していきます。
single.phpを作成
個別記事ページに使うテンプレートは single.php になります。
まずはお決まりのheader.phpやfooter.phpを読み込むテンプレートタグを書きます。
<?php get_header(); ?>
<main>
<div>
<img src="img/blog1.jpg" class="blog-img" alt="チワワ" /> // アイキャッチ
</div>
<div>
<div>
チワワ // カテゴリー
</div>
<time datetime="2021-01-01">2021年1月1日</time> // 投稿日
<h3>
愛犬撮影会（チワワ） // タイトル
</h3>
<div>舌がチョロッと出ているチワワちゃん。飼い主さんも思わず触ってしまいます。</div> // 本文
</div>
</main>
<?php get_footer(); ?>トップページの作り方と同じですね。
そして中身の種類としてはブログカードとほぼ同じで、
- アイキャッチ（画像）
- カテゴリー
- 投稿日
- タイトル
この4つの書き方はブログカードと同じです（詳しくはWordPressオリジナルテーマの作り方⑤をご参照ください）
もちろんデザインによって書く順番が違ったり必要のない項目もあると思うので、その辺はご自身の環境に合わせて下さい。
それではブログカードと違うのはどこかというと、本文を表示させる部分です。
ブログカードでは本文を抜粋するテンプレートタグである<?php the_excerpt(); ?>を使いました。
ただし個別記事ページでは全文表示させたいので、投稿の本文を出力する<?php the_content(); ?>というテンプレートタグを使います。
先ほどの例で言えばこうなります。
<?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>
<time datetime="<?php the_time('Y-m-d'); ?>">
<?php the_time('Y年m月d日'); ?> // 投稿日
</time>
<h3>
<?php the_title(); ?> // タイトル
</h3>
<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' => '次のページへ'
) );
?>ページネーションの書き方の違いは、
- 記事一覧ページ → <?php the_posts_pagination(); ?>
- 個別記事ページ → <?php the_post_navigation(); ?>
となります。
pagination と navigation の違い以外に、posts と post の違いもあるのでご注意ください。
このコードは</main>の上あたりに書いておけばOKです。
以上です。