ブログを運営する場合、回遊性を向上させるために記事内にその他の記事を掲載するのはブログ運営の基本です。今回は投稿ページテンプレート(single.php)をカスタマイズして、表示されている記事と同じカテゴリーに属する記事のリンクを表示させる方法について解説します。
ソースコード
結論だけ知りたい方のためにまずsingle.php(投稿ページテンプレート)の全体のソースコードを紹介します。最低限のコメントも記述しているので、コードをみていただくと何をしているかは理解できます。<!– 同じカテゴリーに属するその他の記事 –>以下が該当します。
<?php get_header(); ?>
<!-- 投稿ページのコンテンツここから -->
<main>
<div class="post-layout">
<!-- アイキャッチ画像をメインビジュアルとして表示させる -->
<?php if( has_post_thumbnail() ) : ?>
<div class="mv">
<div class="mv-image" style="background-image: url(<?php the_post_thumbnail_url('full'); ?>)">
<div class="inner">
<div class="mv-page-title">
<h2><?php the_title(); ?></h2>
</div>
</div>
</div>
</div>
<?php endif; ?>
<!-- 本文 -->
<div class="inner">
<div class="post-content">
<!-- パンくずリスト -->
<?php breadcrumb(); ?>
<!-- 投稿本文 -->
<?php
if( have_posts() ){
while( have_posts() ){
the_post();
the_content();
}
} ?>
</div>
<!-- 同じカテゴリーに属するその他の記事 -->
<?php if( has_category() ) : ?>
<?php
$cats = get_the_category();
$cat_id = $cats[0]->cat_ID;
$post_id = get_the_ID();
$args = array(
'post_type' => 'post',
'post__not_in' => array( $post_id ),
'category__in' => $catkwds,
'orderby' => 'rand'
);
$query = new WP_Query( $args );
?>
<div class="other-post">
<h3 class="other-post-title">その他のコンテンツ</h3>
<ol>
<?php while( $query->have_posts() ) : $query->the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</li>
<?php endwhile; ?>
</ol>
<?php wp_reset_postdata(); ?>
<?php dynamic_sidebar('sidebar'); ?>
</div>
<?php endif; ?>
</div>
<!-- 本文ここまで -->
</div>
</main>
<!-- 投稿ページのコンテンツここまで -->
<?php get_footer(); ?>解説
投稿ページテンプレート(single.php)全体の構成を解説していきます。まずこのテンプレートでコンテンツを作成した際にどのような見た目になるのかを下記の画像で確認してください。
今回解説するのは、メインビジュアル・コンテンツ本文・その他のコンテンツになります。
メインビジュアルを作成
<!-- アイキャッチ画像をメインビジュアルとして表示させる -->
<?php if( has_post_thumbnail() ) : ?>
<div class="mv">
<div class="mv-image" style="background-image: url(<?php the_post_thumbnail_url('full'); ?>)">
<div class="inner">
<div class="mv-page-title">
<h2><?php the_title(); ?></h2>
</div>
</div>
</div>
</div>
<?php endif; ?>the_post_thumbnail_url()はアイキャッチ画像のsrcをダイレクトで取得できる便利なメソッドです。src値のみ扱いたい場合など使用してください。
the_title()で投稿のタイトルを取得しています。
コンテンツ本文を表示させる
<!-- 本文 -->
<div class="inner">
<div class="post-content">
<!-- パンくずリスト -->
<?php breadcrumb(); ?>
<!-- 投稿本文 -->
<?php
if( have_posts() ){
while( have_posts() ){
the_post();
the_content();
}
} ?>
</div>こちらは決まり文句なので、特に解説事項はありません。固定ページでも同じ処理になります。
その他のコンテンツを表示させる
<!-- 同じカテゴリーに属するその他の記事 -->
<?php if( has_category() ) : ?>
<?php
$cats = get_the_category();
$cat_id = $cats[0]->cat_ID;
$post_id = get_the_ID();
$args = array(
'post_type' => 'post',
'post__not_in' => array( $post_id ),
'category__in' => $catkwds,
'orderby' => 'rand'
);
$query = new WP_Query( $args );
?>
<div class="other-post">
<h3 class="other-post-title">その他のコンテンツ</h3>
<ol>
<?php while( $query->have_posts() ) : $query->the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</li>
<?php endwhile; ?>
</ol>
<?php wp_reset_postdata(); ?>
<?php dynamic_sidebar('sidebar'); ?>
</div>
<?php endif; ?>条件分岐や関数がいくつか登場しますが、やっていることはシンプルです。以下の6ステップで完結です。
1. 投稿がカテゴリーに属しているかをチェックする
2. カテゴリーに属している場合は、カテゴリーの詳細情報を取得する
3. カテゴリーIDを変数に格納する
4. 現在表示されている投稿IDを変数に格納する
5. カテゴリーIDに紐付く投稿データを取得する
6. 取得した投稿データをループ処理で表示させる
それぞれのステップで使用されているメソッドも解説していきます。
1. 投稿がカテゴリーに属しているかをチェックする
has_category()は投稿が指定されたカテゴリーを持っているかチェックする関数です。
2. カテゴリーに属している場合は、カテゴリーの詳細情報を取得する
get_the_category()でカテゴリーの詳細情報を取得します。
3. カテゴリーIDを変数に格納する
$cat[0]->term_idでカテゴリーIDを取得しています。
4. 現在表示されている投稿IDを変数に格納する
get_the_ID()で現在表示されている投稿IDを取得することができます。
5. カテゴリーIDに紐付く投稿データを取得する
投稿データの取得にはnew WP_Query( $args )を使用します。引数の$argsに取得する際のオプションを定義します。
post_typeは’post’を指定して投稿機能で作成されたページということを伝えます。
post__not_inに現在の投稿IDを指定することで、その他のコンテンツから除外します。
