ITTI STAFF
BLOG

イッティWEBスタッフの制作ブログ

WordPress:「前の記事」「次の記事」7つのカスタマイズ方法

WordPressで、前の記事、次の記事のリンクを設置して、カスタマイズする7つの方法をご紹介します

WordPressの記事ページ(single.php)に「前の記事」と「次の記事」のナビゲーションを追加する7つのカスタマイズ方法です。

ユーザーの回遊率アップのほか、GoogleにインデックスされやすくなるのでSEOの効果もあります。ページがGoogleにインデックスされない場合は試してみてください。

最もカンタンな方法

簡単で手早く設置するコードになります。
リンクのテキストには「記事のタイトル」と矢印が自動的に表示されます。

wp-p-n01

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

下記でも同じように表示されます。

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

リンクのテキストを変更したい

リンクのテキストを任意のテキストに変更します。
1つ目の引数に記載された「%link」が「a href」タグが入る命令になります。
2つ目の引数に任意のテキストを記載します。

wp-p-n02

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

タグを直接記載して、矢印をアイコンにする

直接タグを書くこともできます。Webフォントの矢印アイコンなどを使う場合などに応用できます。

wp-p-n03

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"/>次の記事へ'); ?>

同じカテゴリーで前の記事、次の記事

同じカテゴリーで「前の記事」「次の記事」へリンクさせることができます。

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

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

除外する記事を設定する

リンクで除外したい記事がある場合は、4つ目の引数に記事のIDを記入します。
複数ある場合はカンマで区切ります。

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

前後に記事が無い時に非表示にする

分岐コードで、前後の記事が存在しない時には非表示にします。

wp-p-n04

PHP
<?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; ?>

前の記事、次の記事に画像(サムネイル)を表示させる

前の記事のサムネイル、次の記事のサムネイルを表示させることもできます。

wp-p-n05

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の前の記事、次の記事のリンクを設定する方法でした。

新しい記事

新宿のWEB制作会社イッティ

新宿のWEB制作会社イッティ