今回はWordPressオリジナルテーマの「個別記事ページ」の制作手順を解説します。
これまでに以下の作業を行いました。
個別記事ページとは、WordPressオリジナルテーマ制作手順⑥-記事一覧ページ-で制作した記事一覧ページにある記事をクリックして遷移したページのことです。
Webサイトの回遊率向上も見込めるので、この記事を参考にして個別記事ページもしっかり制作しましょう。
個別記事ページはsingle.phpファイルを使う
個別記事ページを表示させるテンプレートは以下の4つがあります。
- single-投稿タイプ名.php
- single.php
- singular.php
- index.php
個別記事ページは「single.php」というファイル名にして作成します。
WordPressの命名規則に則って記事個別ページを表示すると自動的にこのファイルが呼び出されます。
今回作成する個別記事ページの構成は、基本的にindex.phpと変わりません。
補足として、WordPressの命名規則を以下にまとめました。
気になる方は参考にしてもらえればと思います。
| 優先順位 | ファイル名 | 概要 |
|---|---|---|
| 1 | single-{post-type}.php | カスタム投稿タイプ※投稿タイプがnewsの場合はsingle-news.php |
| 2 | single.php | – |
| 3 | index.php | – |
基本的にpage.php作成時と同じ手順で作成できます。
single.phpファイルの作成
以下のようなファイルを作成します。
<?php
/*
single page
*/
get_header(); ?>
<section class=”module”>
<div class=”container”>
<section class=”prime”>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<article>
<div class=”article_info”>
<?php if (!is_category() && has_category()): $category = get_the_category(); ?>
<span class=”prime_block_info_tag”>
<a href=”<?php get_category_link( $category[0]->cat_ID); ?>”>
<?php
echo $category[0]->cat_name;
?>
</a>
</span>
<?php endif; ?>
<time><?php the_time(‘Y年m月d日’); ?>作成</time>
</div>
<h2 class=”article_ttl”><?php the_title(); ?></h2>
<figure class=”article_fig”>
<?php
if( has_post_thumbnail() ):
the_post_thumbnail(‘full’);
else :
// no thumbnails
endif;
?>
</figure>
<div class=”article_desc”>
<?php the_content(); ?>
</div>
<?php endwhile; endif; ?>
</article>
</section>
<?php get_sidebar(); ?>
</div>
</section>
<?php get_footer(); ?>これらはトップページの制作手順と同じです。
中身の種類はブログカードとほぼ同じで、以下の記述もブログカード同様です。
- タイトル
- カテゴリー
- アイキャッチ(画像)
- 投稿日
運営しているWebサイトのデザインによって記述順番が異なる場合や記述の必要がない項目もあるかと思います。
そのあたりはWebサイトの目的や環境に合わせてもらえれば問題ありません。
ここからは、それぞれのコードについて解説します
WordPressループ
9行目と36行目に「WordPressループ」と呼ばれるコードを記述しています。
コードの間にタイトルや本文などを表示する処理を記述します。
カテゴリー表示
12行目〜20行目で記事がカテゴリーに属しているかチェックを行います。
チェックの結果記事がカテゴリーに属している場合のみ、該当するカテゴリー一覧ページヘのリンクが作成されます。
タイトル表示
23行目の「the_title();」でタイトル表示を行います。
アイキャッチ画像表示
25行目から31行目が該当します。
ここでは「アイキャッチ画像が設定されているか」のチェックを行い、アイキャッチ画像が設定されている場合のみ表示します。
本文表示
34行目の「the_content();」で本文表示を行います。
ページネーションを制作
ここでは「ページネーション」の制作手順を解説します。
ページネーションとは、「WordPressオリジナルテーマの作り方⑥記事一覧ページ」でも制作しましたが、「次の記事へ」「前の記事へ」の表示を指しています。
ただ、前回の記事一覧のページネーションは「1ページ」「2ページ」などページ数が表示されるタイプでしたが、個別記事ページでは「前の記事へ」「次の記事へ」など前後ボタンでの表示となります。
ここでは、個別記事と記事一覧の記述コードを見比べています。
個別記事（singular.php）
<?php the_post_navigation( array(
‘prev_text’ => ‘前のページへ’,
‘next_text’ => ‘次のページへ’
) );
?>記事一覧（home.php）
<?php the_posts_pagination( array(
‘prev_text’ => ‘前のページへ’,
‘next_text’ => ‘次のページへ’
) );
?>比べて見える違い
これらは以下の違いがあります。
- 個別記事ページ⇒<?php the_post_navigation(); ?>
- 記事一覧ページ⇒<?php the_posts_pagination(); ?>
navigationとpagination以外には、postとpostsとの違いもあるので注意が必要です。
ちなみに、このコードは「</main>」の上部あたりに記述すれば問題ありません。
まとめ
今回はWordPressオリジナルテーマの個別記事ページの制作手順を解説しました。
個別記事ページはWebサイトにとって利便性が高まる機能です。
Webサイト訪問者のストレスを軽減させ回遊率を向上する意味でも、個別記事ページの制作を検討してはいかがでしょうか。
次回は、Wordpressオリジナルテーマの「個別記事ページ」の制作手順を解説します。