ホームページ制作のガヤワークス

GAYALOG

ガヤログ

アーカイブ

2022/03/14 (Mon)

WordPress

【WordPress】カスタム投稿の記事ページで次の記事・前の記事リンクを設置する

ワードプレスの記事ページ(カスタム投稿)で「次のページ」「前のページ」のリンクを設置する方法を紹介します。
ワードプレスの記事ページ下に「次の記事へ」や「前の記事へ」を入れるブログカスタマイズ方法です。

コピペでできる方法

まずはコピペだけで表示できる方法です。

<?php previous_post_link(); ?>
<?php next_post_link(); ?>

または

<?php previous_post_link('&laquo; %link', '%title'); ?>
<?php next_post_link('%link &raquo;', '%title'); ?>

好きなテキストにする場合

さっきのは指定されたテキストが表示されます。
次のは好きなテキストで表示させることができます。

<?php previous_post_link('&amp;laquo; %link', '前の記事へ'); ?>
<?php next_post_link('%link &amp;raquo;', '次の記事へ'); ?>

imgタグなどで好きな矢印を表示する

phpタグの中にimgタグなどを入れデザインを綺麗にする方法。

<?php previous_post_link('%link', '<img src="'. get_template_directory_uri().'画像のパス"/>/img/icon.svg(前の記事へ)'); ?>
<?php next_post_link('%link', '<img src="'. get_template_directory_uri().'/img/icon.svg(画像のパス)"/>次の記事へ'); ?>

同じカテゴリーページで表示する場合

今までは記事ページ内全ての説明をしました。
今回は、同じカテゴリーページで「前の記事へ」「次の記事へ」とリンクさせることができます。

引数に「ture」を追加することで、記事と同じカテゴリーページ内で前の記事、次の記事へのリンクとなります。

<?php previous_post_link('%link', '前の記事へ', ture); ?>
<?php next_post_link('%link', '次の記事へ', ture); ?>

除外する記事を設定する場合

ページ送りの中に入れたくないページを指定することができます。
4つ目の引数にコンマをつけて記事IDをつけていきます。

<?php previous_post_link('%link', '前の記事へ', ture, '13,15'); ?>
<?php next_post_link('%link', '次の記事へ', ture, '13,15'); ?>

最後のページで記事がない場合

現在見ているページの前後にページがない場合に非表示にする方法です。
phpでもおなじみのIFを使った方法です。

<?php if (get_previous_post()):?>
<?php previous_post_link('&laquo; %link', '前の記事へ'); ?>
<?php endif; ?>
<?php if (get_next_post()):?>
<?php next_post_link('%link &raquo;', '次の記事へ'); ?>
<?php endif; ?>

その記事のサムネイルの表示させる場合

次の記事のサムネイルや前の記事のサムネイルを表示させることができます。
次見る記事のイメージが付きサイト離脱がへりSEOにも効果的です。

<?php
$prevpost = get_adjacent_post(true, '', true); //前の記事
$nextpost = get_adjacent_post(true, '', false); //次の記事
if( $prevpost or $nextpost ){ //前の記事、次の記事いずれか存在しているとき
?>
<ul>
<?php
if ( $prevpost ) { //前の記事が存在しているとき
echo '<li><div>' . get_the_post_thumbnail($prevpost->ID, 'thumbnail') . '</div><a href="' . get_permalink($prevpost->ID) . '">' . get_the_title($prevpost->ID) . '</a></li>';
} else { //前の記事が存在しないとき
echo '<div><a href="' . network_site_url('/') . '">一覧に戻る</a></div>';
}
if ( $nextpost ) { //次の記事が存在しているとき
echo '<li><div>' . get_the_post_thumbnail($nextpost->ID, 'thumbnail') . '</div><a href="' . get_permalink($nextpost->ID) . '">' . get_the_title($nextpost->ID) . '</a></li>';

} else { //次の記事が存在しないとき
echo '<div><a href="' . network_site_url('/') . '">一覧に戻る</a></div>';
}
?>
</ul>
<?php } ?>

関連の記事だよ

アーカイブ