WordPressページで「前へ・次へ」(Prev/Next）リンクを実現する

plug-in,WordPress

WordPressページで「前へ・次へ」(Prev/Next）のナビゲーションリンクを表示するプラグインを見つけたので、使い方も含めてメモっておきます。

そもそもWordPressの「投稿(post)」では、get_next_post関数やget_previous_post関数が用意されていて、簡単に「前へ・次へ」を表示できるのよ。だけど「ページ」に関しては、ナゼか前後を取得する方法が用意されていません。

でも「前へ・次へ」のナビゲーションリンクを用意してあげないと、複数ページを続け読みするのはとっても不便。そんなわけで頑張って前後へのリンクを自動生成する方法を模索したワケです。

「前へ・次へ」の取得

「前へ・次へ」のリンク取得は、earthman100氏作「Next-Previous Page」(Version:0.6)で実現できました。このプラグインは『オノケンノート ≫ 同じ親ページを持つ子ページ間でnext-page等のナビゲーションを表示するプラグイン[WORDPRESS]』経由の『WordPress : Support ≫ Prev/Next Page plugin? (wordpress Pages, not Posts)』で見つけました。

せっかくのGPLライセンスだし、ウチのサイトにも置いときます。

ダウンロード：NextPreviousPage.zip [1.47KB]

zipを展開して出てきたNextPreviousPage.phpをプラグインフォルダに入れ、プラグインを有効化することにより「next_page関数」と「previous_page関数」が使えるようになります。

ただし、おいらはプラグインとして使っておらず、該当関数をfunctions.phpに書き写して使ってます。深い理由はないんだけど、デザインに係わる機能なのでテンプレート側に記述した方が良いかな～とかそんな感じ。普通はプラグインで良いと思うよ。

Next-Previous Pageプラグインの使い方

/*使い方*/
< ?php next_page('orderby', 'link', 'before', 'after', 'title_attr', 'parent_id'); ?>
< ?php previous_page('orderby', 'link', 'before', 'after', 'title_attr', 'parent_id'); ?>

/*初期値*/
$orderby = 'post_date', $link='Previous/Next Page: %',
$before='', $after='', $title_attr='Previous/Next Page: %',
$parent_id = 0

/*実際の使用例*/
<div id="prev_next_links">
< ?php
$parentid = $post->post_parent;
previous_page('menu_order', '&lsaquo;&lsaquo; %', '<span class="prev_link">', '</span>', '%', $parentid);
next_page('menu_order', '% &rsaquo;&rsaquo;', '<span class="next_link">', '</span>', '%', $parentid);
?>
</div>

簡単なオプション解説。

  • orderby:ソート方法。‘post_date’ か ‘menu_order’ で日付順かメニュー順(ページ順)を選択。
  • link:リンク用文字列。%はページタイトルを表す。
  • before:リンクの前に付ける文字列。
  • after:リンクの後に付ける文字列。
  • title_attr:リンクタイトル。マウスオーバー時のツールチップ表示文字列だと思いねぇ。
  • parent_id:探索する親ページのID。「隣の隣」とか「親の親」を取得するときに活用するんだと思う。

「前へ・次へ」表示で一工夫

前述のプラグインを使用することにより、「前へ・次へ」が表示できようになりました。しかしウチのブログではulリストのli要素に「前へ・次へ」を割当てており、前後共にリンクのないページでli要素が消滅、HTML validにならない問題が発生しました。

これを解決するため、以下のようなコードを記述しました。

< ?php
    $parentid = $post->post_parent;
    $children = wp_list_pages('title_li=&child_of='.$post->ID.'&echo=0');
    if ($parentid | $children) {  ?>
        <ul>
        < ?php
            previous_page(~hoge~);
            next_page(~fuge~);
        ?>
        </ul>
< ?php } ; ?>

簡単に説明すると親IDか、子のページリスト、いずれかが取得できた場合にのみUL,LIのリスト表示を行います。これにより階層構造を持つページ群のみ、「前へ・次へ」が表示されるはずです。

実際の表示例

実際の表示例は『NTSCについて – Hinemosu』や『カタンの戦略 – Hinemosu』をご覧ください。

ページ右上、もしくは本文下にページナビゲーションを示すリンクが生成されていることが確認できると思います。