understandard

2012-07-03

前後の記事へのナビゲーションカスタマイズメモ

2013年9月12日 全体的に「新しい」と「古い」がめちゃくちゃだったので、修正しました。

WordPress で前後の記事へのナビゲーションは、previous_post_link()next_post_link() を使えば表示できます。

previous_post_link()next_post_link() の詳細は WordPress Codex を参照してください。

Function Reference/next post link « WordPress Codex
Function Reference/previous post link « WordPress Codex

表示の条件追加

最初に書いたコードでもナビゲーションは機能しますが、前後に記事があるかどうかをチェックして、記事がある場合のみナビゲーションを表示するようにします。
前後の記事の情報は、get_next_post() および get_previous_post() で取得します。

Function Reference/get next post « WordPress Codex
Function Reference/get previous post « WordPress Codex

<?php
    $prev_post = get_previous_post();
    $next_post = get_next_post();
    if( $next_post || $prev_post ) :
?>
<?php if( $prev_post) : ?> <?php endif; ?> <?php if( $next_post ) : ?> <?php endif; ?>
<?php endif; ?>

なかなか無い状況かもしれないですが、前後ともに記事がない場合にはナビゲーション部分も表示しないように、if( $next_post || $prev_post ) で前後どちらかの記事がある場合に限定しています。

表示中の記事が最新の場合には、新しい記事へのリンクは存在しません。
代わりに「この記事が最新です」のような文章を出力したい場合には、if 文に else を追加します。

<?php if( $next_post  ) : ?>
    
<?php else : ?>
    
<?php endif; ?>

たいていこんな感じで通常の記事間のナビゲーションは問題ないかと。

前後の記事のアイキャッチ画像をナビゲーションに使う

アイキャッチ画像を表示したい場合には get_next_post()get_previous_post で取得した記事 ID を get_post_thumbnail(); に入れて、アイキャッチ画像を取得。
また、過去の記事や設定忘れなど、アイキャッチ画像が未設定の記事のためにデフォルト画像を設定。デフォルト画像のパスは適宜変更してください。

Function Reference/get the post thumbnail « WordPress Codex

追記(2012年7月5日): タイトルにタグなどが入っていた場合に実体参照に置き換えるために esc_attr()、文字数を制限したい場合用に mb_substr()を追加しました。
Function Reference/esc attr « WordPress Codex
PHP: mb_substr – Manual

<?php
    $next_post = get_previous_post();
    $prev_post = get_next_post();   
    if( $next_post || $prev_post ) :
?>
<?php if( $prev_post ) : ?> <?php endif; ?> <?php if( $next_post ) : ?> <?php endif; ?>
<?php endif; ?>

ただ、これだと記事のタイトルがすぐに分からないので、画像の alttitle は空にして、テキストを別に表示したほうが良さそう。好みの問題かもですが。

<?php
    $next_post = get_previous_post();
    $prev_post = get_next_post();   
    if( $next_post || $prev_post ) :
?>
<?php if( $prev_post ) : ?> <?php endif; ?> <?php if( $next_post ) : ?> <?php endif; ?>
<?php endif; ?>

というわけで、前後の記事へのナビゲーションカスタマイズメモでした。

response

  1. 【WordPress】前後の記事のカテゴリ名を取得・表示させる方法 | orange plus music
    2015-05-08 22:40:15reply

    […] 記事が出てくるので、簡単にリンクを記載します。   参考:前後の記事へのナビゲーションカスタマイズメモ // understandard    【WordPress】前の記事・次の記事リンクにサムネイルを […]

  2. WordPress自作テーマを作る時に参考にしたサイト一覧 | plain
    2015-09-14 20:22:02reply

    […] 前後の記事へのナビゲーションカスタマイズメモ // understandard […]

leave a reply

your email address will not be published.

you may use these HTML tags and attributes: <a href="" title=""> <em> <i> <strong> <blockquote cite=""> <q cite=""> <cite> <pre> <code> <del datetime=""> <ins datetime="">