• 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細

このWikiはいつでも誰でも編集できます

Next and Previous Links

提供: WordPress Codex 日本語版
移動先: 案内検索

ページ名検討中: このページ名「Next and Previous Links」について改名が提案されています。ご意見をお寄せください。


の投稿へのリンクは、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 の表示は、以下のとおりです。

« Previous PageNext Page »

以下のように、段落コードや区分が入ることがあります。

<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('&#8734;','Go 
Forward In Time','Go Back in Time'); ?></p></div>

これは以下のように表示します。

Go Forward in TimeGo Back in Time

これで終わりではありません。さらに character entities を追加して訪問者の注意を引きつけ、このページで見ている以上のものがある、ということを知ってもらいましょう。

<div class="navigation"><p><?php posts_nav_link('&#8734;','&laquo;&laquo; Go Forward 
In Time','Go Back in Time &raquo;&raquo;'); ?></p></div>

これは以下のように表示します。

«« Go Forward in TimeGo Back in Time »»

一部を解説したに過ぎませんが、想像力とウェブデザインスキルを働かせることで、これらを好きなように作成し、枠線や背景画像やスタイル化されたテキスト等を追加できます。

The Next and Previous Posts

サイト内移動をコントロールする助けとなるもう1つの組は、next postprevious post リンクです。典型的には、サイトで公開した個別投稿や記事等の、個別投稿/パーマリンク投稿の下部で見つかります。これらのリンクにより、訪問者は時系列順に次または前に移動します。

テンプレートタグは previous_post()next_post() です。

警告 : バージョン 2.0.4 では動作しません。別のリンクprevious_post_linknext_post_link を使用ししてください。

Remark : previous_post と next_post は WP2.3 では動作するようです。

これらのタグのデフォルトの使い方は以下のとおりです。

<?php previous_post(); ?>    <?php next_post(); ?>

これは以下のように表示します。

previous post: A Story for One and All    next post: A Story for Only One

これらのタグのパラメータは以下のとおりです。

format 
'%' と併用するテキストは、投稿のパーマリンクを示します。デフォルトはパーマリンクです。
text 
パーマリンクの前に表示されるテキストです。デフォルトは "次の投稿へ" と "前の投稿へ" です。
title 
投稿タイトルをリンクテキストとして使用するかを "on" か "off" で指定します。デフォルトは "yes" です。"no" に設定すると、text パラメータと format で設定したテキストのみが表示されます。

試してみましょう。

以下の例は、次/前の投稿タイトルと訪問者が選ぶ方向を強調する 矢印 を表示します。text パラメータを設定していない場合は、空白になることに気づくでしょう。

<?php previous_post('&laquo; &laquo; %', '', 'yes'); ?>
| <?php next_post('% &raquo; &raquo; ', '', 'yes'); ?>
« « A Story for One and All    |    A Story for One » »

これら2つのタグを CSS で括ると、さらに多くのことができます。

<div class="navigation">
<div class="alignleft">
<?php previous_post('&laquo; &laquo; %',
 'Toward The Past: ', 'yes'); ?>
</div>
<div class="alignright">
<?php next_post('% &raquo; &raquo; ',
 'Toward The Future: ', 'yes'); ?>
</div>
</div> <!-- end navigation -->

これは以下のように表示します。

« « Toward the Past: A Story for One and All       Toward the Future: A Story for One » »

"Better Adjacent Post Links" という便利なプラグインを使用すると、前/次の投稿のタイトルを切り取って、好きな長さにすることができます。サイトのデザインに影響するような長いタイトルを使っているときに便利です。

これは、これらのタグを使用し、楽しむ方法のイントロに過ぎません。枠線や背景画像、面白いフォントや色を追加することができます。これは貴方しだいです。楽しんでください。

The Next and Previous Pages

previous_post_linknext_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(get_the_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 » Next_and_Previous_Links最新版との差分

この記事は翻訳時に編集が必要であるとマークされていました。その為Codex原文が大きく編集されている可能性があります。内容を確認される際は原文を参照していただき、可能であれば本項目へ反映させてください。よりよいCodexを作成するためのお手伝いをお願いします。