前後記事へのリンクを表示させる方法
それでは、前後記事へのリンクを表示させる方法をご紹介します。
基本的にコピペでOKです。
前後記事へのリンクを表示させるときは、以下のテンプレートタグを使用します。
<?php previous_post_link(); ?>
<?php next_post_link(); ?>
上段が「前の記事へのリンク」を表示させるタグ。
下段が「次の記事へのリンク」を表示させるタグ。
上記のタグを前後記事へのリンクを表示させたい箇所に貼り付けましょう。
貼り付けると、前後記事のタイトルをアンカーテキストにしたリンクが表示されます。
あとは、リンクをリストタグで囲むなど自由に装飾して完成です。
よくあるカスタマイズ
前後記事へのリンクを表示させるとき、よくあるカスタマイズをご紹介します。
カスタマイズは色々とあるのですが、今回は3つのカスタマイズをピックアップしました。
アンカーテキストを記事タイトル以外にする。
先ほどご紹介したタグを設置すると、アンカーテキストは自動的に記事タイトルになります。
アンカーテキストを変更する場合は、タグを以下の様に編集してみましょう。
<?php previous_post_link('%link', '前の記事へ'); ?>
<?php next_post_link('%link', '次の記事へ'); ?>
【前の記事へ】【次の記事へ】を、アンカーテキストにしたいテキストに変更するだけです。
リンクをマークアップする。
表示させるリンクの前後にマークを表示させたいという意見もよく聞きます。
例えば、リンクの前に矢印を表示さる場合は、タグを以下の様に編集します。
<?php previous_post_link('←%link', '前の記事へ'); ?>
<?php next_post_link('%link→', '次の記事へ'); ?>
リンクの前後をマークアップする時は【%link】の前後にタグを設置しましょう。
上記の場合は、HTMLの特殊文字を記述して【←前の記事へ】【次の記事へ→】と表示させるようにしています。
同一カテゴリーの前後記事へリンクさせる。
最初にご紹介したデフォルトのタグは、全ての記事を対象にリンクを表示させています。
しかし、同一カテゴリーの【次の記事へリンク】を表示させたいというのもよく聞く意見です。
同一カテゴリー内の前後記事へのリンクを表示させる場合は、以下の様にタグを編集します。
<?php previous_post_link('%link', '前の記事へ', TRUE); ?>
<?php next_post_link('%link', '次の記事へ', TRUE); ?>
【TRUE】という記述が増えていますが、これが「同一カテゴリー」と定義している部分です。
この時、注意が必要なのは【TRUE】を定義する時は、【%link】と【前の記事へ】の部分を合わせて記述しなければいけないところです。
アンカーテキストを変更しない場合でも、以下の様な記述をしなければいけません。
<?php previous_post_link('%link', '%title', TRUE); ?>
<?php next_post_link('%link', '%title', TRUE); ?>
加えてもう1点だけ注意しておきます。
この同一カテゴリー内の前後記事へのリンク表示は、【Intuitive Custom Post Order】というプラグインと相性が悪いようです。【Intuitive Custom Post Order】を有効化した状態では、同一カテゴリー内の前後記事へのリンクは正常に表示できませんでした。
【Intuitive Custom Post Order】をご利用中の方は注意してください。
まとめ
WordPressサイトに前後記事へのリンクを表示させる方法をご紹介しました。
既存のWordPressテーマには、そのほとんどに実装されていると思います。
オリジナルテーマを作成する時や、独自にカスタマイズしたい時、参考にしてください。
今回のコンテンツが誰かの役に立つとうれしいですね。
コメントを残す