- サイトデザイン工事中です。ご意見をお寄せください。
- 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。（詳細）
Next and Previous Links
この項目「Next and Previous Links」は、翻訳チェック待ちの項目です。加筆、訂正などを通して、Codex ドキュメンテーションにご協力下さい。
次 と 前 の投稿へのリンクは、WordPress のサイトの訪問者へのガイドとなるでしょう。strong site-wide navigation に関して、 これらのリンクタグは、訪問者が動き回るのにもっとも有効なツールの1つです。
WordPress のサイトの訪問者が移動するタグは、2通りあります。前 と 次 の両方を表示する posts_nav_link() と、それぞれが前 と 次 を表示する previous_post() と next_post() の組です。ここでは、これらの2通りのタグについて説明します。
メモ: この場合の "前" と "次" は投稿の順序であって、時系列の特定の方向を示しません。多くの人がしばしば混乱しています。WordPress ではデフォルトでは、投稿は新しいものから始まり、古いものへと進みます。デフォルトの順序を使用していると、"次" は時系列で逆行します。1ページめの "次" のページは2ページで、古い投稿へ移動します。(テンプレートでquery_posts を使用する等して)投稿順序を変更すると、リンクは異なる方向になります。この codex 記事では、両方のメソッドを説明無く用いていますが、これはサンプルコードのみだからです。そのため、この関数は時系列とは独立した順序を示すことを覚えておいてください。
このサイトナビゲーションリンクの最初の組は、単一ではない／パーマリンクでないウェブページ、つまりカテゴリー、アーカイブ、検索結果、および index ページで機能します。テンプレートタグ posts_nav_link() です。このタグは、ページのWordPress Loop/en 内部の下部に、時系列順に 次 と 前 のページを表示する2つのリンクを作成します。
デフォルトでは、posts_nav_link の表示は、以下のとおりです。
以下のように、段落コードや区分が入ることがあります。
<div class="navigation"><p><?php posts_nav_link(); ?></p></div>
このタグのパラメータは、以下のとおりです。
<?php posts_nav_link('separator','prelabel','nextlabel'); ?>
これらのパラメータの各々は、文字列 あるいは任意のテキストあるいは HTML あるいは CSS タグを生成することができます。これらのナビゲーションリンクをおもしろくする方法を紹介します。
簡単なケースでは、CSSを使うことで見栄えを変えることができます。さらに進んで、タグパラメータの内部を変更してみましょう。
次に、テキストを太字にし、見た目を面白くするために font-variant: small-caps を使用し、セパレータ を infinity symbol にし、ラベルにいくつかの単語を追加します。
<div class="navigation"><p><?php posts_nav_link('∞','Go
Forward In Time','Go Back in Time'); ?></p></div>
これは以下のように表示します。
これで終わりではありません。さらに character entities を追加して訪問者の注意を引きつけ、このページで見ている以上のものがある、ということを知ってもらいましょう。
<div class="navigation"><p><?php posts_nav_link('∞','«« Go Forward
In Time','Go Back in Time »»'); ?></p></div>
これは以下のように表示します。
一部を解説したに過ぎませんが、想像力とウェブデザインスキルを働かせることで、これらを好きなように作成し、枠線や背景画像やスタイル化されたテキスト等を追加できます。
The Next and Previous Posts
サイト内移動をコントロールする助けとなるもう1つの組は、next post と previous post リンクです。典型的には、サイトで公開した個別投稿や記事等の、個別投稿／パーマリンク投稿の下部で見つかります。これらのリンクにより、訪問者は時系列順に次または前に移動します。
テンプレートタグは previous_post() と next_post() です。
警告 : バージョン 2.0.4 では動作しません。別のリンクprevious_post_link と next_post_link を使用ししてください。
Remark : previous_post と next_post は WP2.3 では動作するようです。
これらのタグのデフォルトの使い方は以下のとおりです。
<?php previous_post(); ?> <?php next_post(); ?>
これは以下のように表示します。
これらのタグのパラメータは以下のとおりです。
- format
- '%' と併用するテキストは、投稿のパーマリンクを示します。デフォルトはパーマリンクです。
- text
- パーマリンクの前に表示されるテキストです。デフォルトは "次の投稿へ" と "前の投稿へ" です。
- title
- 投稿タイトルをリンクテキストとして使用するかを "on" か "off" で指定します。デフォルトは "yes" です。"no" に設定すると、text パラメータと format で設定したテキストのみが表示されます。
試してみましょう。
以下の例は、次／前の投稿タイトルと訪問者が選ぶ方向を強調する 矢印 を表示します。text パラメータを設定していない場合は、空白になることに気づくでしょう。
<?php previous_post('« « %', '', 'yes'); ?>
| <?php next_post('% » » ', '', 'yes'); ?>
これら2つのタグを CSS で括ると、さらに多くのことができます。
<div class="navigation">
<div class="alignleft">
<?php previous_post('« « %',
'Toward The Past: ', 'yes'); ?>
</div>
<div class="alignright">
<?php next_post('% » » ',
'Toward The Future: ', 'yes'); ?>
</div>
</div> <!-- end navigation -->
これは以下のように表示します。
"Better Adjacent Post Links" という便利なプラグインを使用すると、前／次の投稿のタイトルを切り取って、好きな長さにすることができます。サイトのデザインに影響するような長いタイトルを使っているときに便利です。
これは、これらのタグを使用し、楽しむ方法のイントロに過ぎません。枠線や背景画像、面白いフォントや色を追加することができます。これは貴方しだいです。楽しんでください。
The Next and Previous Pages
previous_post_link と next_post_link 関数はページでは動作しません。この問題については、Next Page plugin が解決します。
テーマのページテンプレートにコードを追加したい場合は、以下のようにします。
<?php
$pagelist = get_pages('sort_column=menu_order&sort_order=asc');
$pages = array();
foreach ($pagelist as $page) {
$pages[] += $page->ID;
}
$current = array_search($post->ID, $pages);
$prevID = $pages[$current-1];
$nextID = $pages[$current+1];
?>
<div class="navigation">
<?php if (!empty($prevID)) { ?>
<div class="alignleft">
<a href="<?php echo get_permalink($prevID); ?>"
title="<?php echo get_the_title($prevID); ?>">Previous</a>
</div>
<?php }
if (!empty($nextID)) { ?>
<div class="alignright">
<a href="<?php echo get_permalink($nextID); ?>"
title="<?php echo get_the_title($nextID); ?>">Next</a>
</div>
<?php } ?>
</div><!-- .navigation -->
外部資料
最新英語版： WordPress Codex » http://codex.wordpress.org/Next_and_Previous_Links （最新版との差分）
テンプレート:Copyedit