WordPressでプラグインなしの「関連記事」を作る

WordPressの関連記事

WordPressで「関連記事」をプラグインなしでページの下部に設置します。
方法はget_the_category()でページのカテゴリーidを取得し、get_the_ID()でページidを取得し、WP_Queryで表示されているページ以外で、同じカテゴリーの記事を取得します。
このサイトで実際設置している「関連記事」の設定方法を解説します。
関連記事を設置する事はSEOにも重要な役割を果たしています。

ページidとカテゴリーidを取得

現在表示されているページidとカテゴリーidを取得します。

ページidとカテゴリーidを取得するコード

<?php 
    $PostId = get_the_ID();
    $GetCat=get_the_category(); 
    $PostCat=$GetCat[0];
?>

ページidとカテゴリーidを取得するコードの解説

$PostId = get_the_ID()
get_the_ID()はWordPressのタグで現在表示されている投稿ページのidを取得します。
$PostIdは変数で任意の名前です。
$PostId = get_the_ID()は現在表示されている投稿のIDが変数$PostIdに格納されているという事です。

$GetCat=get_the_category();
は変数$GetCatget_the_category()を格納しているという事です。
$GetCatは変数で任意の名前です。
get_the_category()はWordPressのテンプレートタグでオブジェクトつまり現在表示されている投稿ページのカテゴリー情報(id、名前、スラッグ、説明文、属する記事数等)の配列を返します。

$PostCat=$GetCat[0]
は変数$PostCat$GetCat[0]を格納しているという事です。
$GetCat[0]は$GetCatにget_the_category()が、つまり表示されている投稿ページのカテゴリー情報が格納されていて、[0]はカテゴリー情報の配列の最初のものを出力するという事です。

WP_Queryで関連記事を取得

WP_Queryでサイト内の全投稿ページ内から、現在表示されているページと同じカテゴリーの投稿ページを取得しています。

WP_Queryで関連記事を取得するコード

<?php 
$qqposts = new WP_Query( 
	array(

			'cat'=>$PostCat->cat_ID,
			'post__not_in' => array($PostId),
			'posts_per_page' => 5

	));
if ( $qqposts->have_posts() ) :
	while ( $qqposts->have_posts() ) : $qqposts->the_post();
?>
 
<div class="kanren">
	<div class="kanren-title">
		<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
	</div>
	<div class="kanren-content">
		<?php the_content(''); ?>
	</div>
	<div class="kanren-sub">
		<span class="kanren-date">
			<?php echo get_the_date(); ?>
		</span>
		<span class="kanren-cat">
			<?php the_category(' '); ?>
		</span>
		<span class="kanren-tuzuki">
			<a href="<?php the_permalink(); ?>">続きを読む→</a>
		</span>
	</div>
</div>
 
<?php endwhile;
	wp_reset_postdata();
else :?>
現在関連情報はありません。
<?php endif;
?>

WP_Queryで関連記事を取得するコードの解説

‘cat’=>$PostCat->cat_ID
catはWP_Queryの取得する投稿ページのカテゴリーidを指定するパラメーターです。
$PostCat->cat_IDは変数$PostCatに格納されている情報の中からcat_IDつまりカテゴリーidを取得するという事です。
$PostCatには現在表示されている投稿ページのカテゴリー情報が格納されているので、その中のカテゴリーidを取得するという事です。
つまり‘cat’=>現在表示されている投稿ページのカテゴリーidという事です。

‘post__not_in’ => array($PostId)
post__not_inはWP_Queryのパラメーターで指定した投稿IDのページは除外します。
array($PostId)の$PostIdには「現在表示されている投稿ページのid」が格納されています。
つまり現在表示されている投稿IDを除外するという事です。

残りのコードについては
WordPressのクラスWP_Queryの詳しい解説
をご覧ください。

注意
2018年9月4日まで上記の様に
‘orderby’=>date,’order’=>DESC,
と記載していました。
しかしこれがサーバーのPHP72でエラー予告表示されます。
‘orderby’=>date,’order’=>DESC,」この二つを削除するとエラー警告は消えます。
詳しくは

サイト内リンク:サーバーのPHP72でWp-Queryのエラー | HaradaWeb(ハラダウェブ)

に記載しています。

テンプレートファイルに設置

ページidとカテゴリーidを取得するコード」と「WP_Queryで関連記事を取得するコード」を、独自の「kanren-kiji.php」ファイルを作って記述します。
kanren-kiji.phpファイルをテーマフォルダ内に保存します。

この記事を作った時点でこのサイトでは「Twenty Seventeen」を親テーマとした子テーマを設定してカスタマイズしているので、親テーマTwenty Seventeenの「template-parts/post」フォルダからcontent.phpファイルをコピーして子テーマに保存します。

子テーマの設置方法は後日記事で公開します。

コピーしたcontent.phpの保存場所は親テーマTwenty Seventeenと同様に「template-parts/post」フォルダを作って同じ階層での位置に保存します。

そしてcontent.php内の下部の「</div><!– .entry-content –>」のすぐ上に関連記事となる「kanren-kiji.php」ファイルを呼び出す「」を設置します。

</div><!– .entry-content –>」のすぐ上に設置するのはSEOの関係でentry-content内に設置した方が良いと考えられているからです。

<?php get_template_part( ‘kanren’,’kiji’ ); ?>」は独自のphpファイルをテンプレートファイル内で表示させる時に使うインクルードタグです。

詳しくは
phpファイル内でphpファイルを呼び出すget_template_part
をご覧ください。

具体的な設置位置はこちら。

ここより上はタグ量が多くなるので表記しません。
	<div class="entry-content">
		<?php
			/* translators: %s: Name of current post */
			the_content( sprintf(
				__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),
				get_the_title()
			) );

			wp_link_pages( array(
				'before'      => '<div class="page-links">' . __( 'Pages:', 'twentyseventeen' ),
				'after'       => '</div>',
				'link_before' => '<span class="page-number">',
				'link_after'  => '</span>',
			) );
		?>
		
		<?php get_template_part( 'kanren','kiji' ); ?>
		
	</div><!-- .entry-content -->

	<?php if ( is_single() ) : ?>
		<?php twentyseventeen_entry_footer(); ?>
	<?php endif; ?>

</article><!-- #post-## -->

このcontent.phpをftpソフトでアップロードしたら完成です。
投稿ページの「.entry-content」下の方に関連記事ができていると思います。

アーカイブページで関連記事を消去

アーカイブページで投稿内容の抜粋の下に関連記事が出ていたりするので、その場合は関連記事全体のコードをdiv要素で囲って.archiveでdisplay: none;
を設定すれば解決します。

参考URL

テンプレートタグ/get the category – WordPress Codex 日本語版
関数リファレンス/get the ID

コメントを残す

TOP