WordPress：「前の記事」「次の記事」7つのカスタマイズ方法
WordPressで、前の記事、次の記事のリンクを設置して、カスタマイズする7つの方法をご紹介します
WordPressの記事ページ（single.php）に「前の記事」と「次の記事」のナビゲーションを追加する7つのカスタマイズ方法です。
ユーザーの回遊率アップのほか、GoogleにインデックスされやすくなるのでSEOの効果もあります。ページがGoogleにインデックスされない場合は試してみてください。
最もカンタンな方法
簡単で手早く設置するコードになります。
リンクのテキストには「記事のタイトル」と矢印が自動的に表示されます。
PHP
<?php previous_post_link(); ?><?php next_post_link(); ?>下記でも同じように表示されます。
PHP
<?php previous_post_link('« %link', '%title'); ?><?php next_post_link('%link »', '%title'); ?>リンクのテキストを変更したい
リンクのテキストを任意のテキストに変更します。
１つ目の引数に記載された「%link」が「a href」タグが入る命令になります。
２つ目の引数に任意のテキストを記載します。
PHP
<?php previous_post_link('&laquo; %link', '前の記事へ'); ?><?php next_post_link('%link &raquo;', '次の記事へ'); ?>タグを直接記載して、矢印をアイコンにする
直接タグを書くこともできます。Webフォントの矢印アイコンなどを使う場合などに応用できます。
PHP
<?php previous_post_link('%link', '<img src="'. get_template_directory_uri().'/img/icon-prev.svg" alt="前のニュースへ" width="7"/>前の記事へ'); ?><?php next_post_link('%link', '<img src="'. get_template_directory_uri().'/img/icon-next.svg" alt="次のニュースへ" width="7"/>次の記事へ'); ?>同じカテゴリーで前の記事、次の記事
同じカテゴリーで「前の記事」「次の記事」へリンクさせることができます。
３つ目の引数に「true」を追加することで、記事と同じカテゴリー内で前の記事、次の記事へのリンクとなります。
PHP
<?php previous_post_link('%link', '前の記事へ', true); ?><?php next_post_link('%link', '次の記事へ', true); ?>除外する記事を設定する
リンクで除外したい記事がある場合は、４つ目の引数に記事のIDを記入します。
複数ある場合はカンマで区切ります。
PHP
<?php previous_post_link('%link', '前の記事へ', true, '13,15'); ?><?php next_post_link('%link', '次の記事へ', true, '13,15'); ?>前後に記事が無い時に非表示にする
分岐コードで、前後の記事が存在しない時には非表示にします。
PHP
<?php if (get_previous_post()):?><?php previous_post_link('« %link', '前の記事へ'); ?><?php endif; ?>
<?php if (get_next_post()):?><?php next_post_link('%link »', '次の記事へ'); ?><?php endif; ?>前の記事、次の記事に画像（サムネイル）を表示させる
前の記事のサムネイル、次の記事のサムネイルを表示させることもできます。
PHP
<?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('/') . '">TOPへ戻る</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('/') . '">TOPへ戻る</a></div>';
}
?>
</ul>
<?php } ?>
出力されるHTMLは下記になりますので、CSSでレイアウトします。
出力されたHTML
<ul><li><div><img src="hogehoge.jpg"></div><a href=" ">記事タイトル</a></li><li><div><img src="hogehoge.jpg"></div><a href=" ">記事タイトル</a></li></ul>以上、WordPressの前の記事、次の記事のリンクを設定する方法でした。
