当サイト、Codex 日本語版は今後積極的な更新は行わない予定です。後継となる新ユーザーマニュアルは、https://ja.wordpress.org/support/ にあります。
万が一、当サイトで重大な問題を発見した際などは、フォーラムWordSlack #docs チャンネルでお知らせください。</p>

「Next and Previous Links」の版間の差分

提供: WordPress Codex 日本語版
移動先: 案内検索
(原文をコピー)
 
(翻訳済み)
1行目: 1行目:
{{NeedTrans}}
+
{{CheckTrans}}
 
__FORCETOC__
 
__FORCETOC__
  
The '''Next''' and '''Previous''' post links guide your visitor through your WordPress site.  When it comes to creating [[Good_Navigation_Links|strong site-wide navigation]], some of the most powerful tools for moving your visitor around are these link tags.
+
'''''' '''''' の投稿へのリンクは、WordPress のサイトの訪問者へのガイドとなるでしょう。[[:en:Good_Navigation_Links|strong site-wide navigation]] に関して、 これらのリンクタグは、訪問者が動き回るのにもっとも有効なツールの1つです。
  
There are two sets of tags that move the visitor through your WordPress site: <tt>posts_nav_link()</tt>, which displays both the '''Previous''' and '''Next''' links, and the combination pair of <tt>previous_post()</tt> and <tt>next_post()</tt>, which each display one of the '''Previous''' or '''Next''' links.  This article will look at how these two tag sets work.
+
WordPress のサイトの訪問者が移動するタグは、2通りあります。'''前''' と '''次''' の両方を表示する <tt>posts_nav_link()</tt> と、それぞれが'''''' '''''' を表示する <tt>previous_post()</tt> <tt>next_post()</tt> の組です。ここでは、これらの2通りのタグについて説明します。
  
Note: "Previous" and "Next" in this case refer to posts in the order that they are in, not to any particular direction in time. This often confuses many people, as WordPress, by default, displays posts starting from the newest and proceeding backwards in time. Using this default ordering, "Next" would be moving backwards in time, because the "next" page after page 1 would be page 2, and that would move to older posts. If the post ordering is changed (like via a manual usage of [[Template_Tags/query_posts|query_posts]] in a template), then the links will point in different directions. This codex article uses both methods without explanation, because it is example code only. So it is important to keep in mind that the function is referring to an order that is independent of chronological time.
+
メモ: この場合の "" "" は投稿の順序であって、時系列の特定の方向を示しません。多くの人がしばしば混乱しています。WordPress ではデフォルトでは、投稿は新しいものから始まり、古いものへと進みます。デフォルトの順序を使用していると、"" は時系列で逆行します。1ページめの "" のページは2ページで、古い投稿へ移動します。(テンプレートで[[テンプレートタグ/query_posts|query_posts]] を使用する等して)投稿順序を変更すると、リンクは異なる方向になります。この codex 記事では、両方のメソッドを説明無く用いていますが、これはサンプルコードのみだからです。そのため、この関数は時系列とは独立した順序を示すことを覚えておいてください。
  
= The posts_nav_link =
+
<div id="The_posts_nav_link">
The first set of these site navigation links is featured only on the non-single/non-permalink web pages, such as categories, archives, searches, and the index page.  It is the template tag [[Template_Tags/posts_nav_link|posts_nav_link()]].  This tag creates two links at the bottom of the page within the [[The_Loop|WordPress Loop]] to display the '''next''' and '''previous''' pages in chronological order.
+
= posts_nav_link =
 +
</div>
 +
このサイトナビゲーションリンクの最初の組は、単一ではない/パーマリンクでないウェブページ、つまりカテゴリー、アーカイブ、検索結果、および index ページで機能します。テンプレートタグ [[テンプレートタグ/posts_nav_link|posts_nav_link()]] です。このタグは、ページの[[ループ|WordPress Loop]]/[[:en:The_Loop|en]] 内部の下部に、時系列順に '''''' '''''' のページを表示する2つのリンクを作成します。
  
By default, the <tt>posts_nav_link</tt> looks like this:
+
デフォルトでは、<tt>posts_nav_link</tt> の表示は、以下のとおりです。
  
 
<div style="border:1px solid blue; width:50%; margin:20px; padding:20px">[[#The posts_nav_link|&laquo; Previous Page]]  &#8212; [[#The posts_nav_link|Next Page &raquo;]]</div>
 
<div style="border:1px solid blue; width:50%; margin:20px; padding:20px">[[#The posts_nav_link|&laquo; Previous Page]]  &#8212; [[#The posts_nav_link|Next Page &raquo;]]</div>
  
It is often found in a paragraph code or a division like this:
+
以下のように、段落コードや区分が入ることがあります。
  
 
<pre><div class="navigation"><p><?php posts_nav_link(); ?></p></div></pre>
 
<pre><div class="navigation"><p><?php posts_nav_link(); ?></p></div></pre>
  
The parameters of the tag are as follows:
+
このタグのパラメータは、以下のとおりです。
  
 
<pre><?php posts_nav_link('separator','prelabel','nextlabel'); ?></pre>
 
<pre><?php posts_nav_link('separator','prelabel','nextlabel'); ?></pre>
  
Each of these parameters can be used to generate a ''string'' or any text or HTML or CSS tags.  Let's see what we can do to make these post navigation links more interesting.
+
これらのパラメータの各々は、''文字列'' あるいは任意のテキストあるいは HTML あるいは CSS タグを生成することができます。これらのナビゲーションリンクをおもしろくする方法を紹介します。
  
Keeping things simple, we could just change the look of the tag results [[Blog_Design_and_Layout|using CSS]].  Let's go farther and also change the content within the tag's parameters.
+
簡単なケースでは、[[WordPress_サイトデザイン_リファレンス|CSSを使う]]ことで見栄えを変えることができます。さらに進んで、タグパラメータの内部を変更してみましょう。
  
Next, make the text bold and use the <tt>font-variant: small-caps</tt> to make it look interesting, and then make the ''separator'' the [[Fun_Character_Entities|infinity symbol]] and add some words to the labels.
+
次に、テキストを太字にし、見た目を面白くするために <tt>font-variant: small-caps</tt> を使用し、''セパレータ'' [[:en:Fun_Character_Entities|infinity symbol]] にし、ラベルにいくつかの単語を追加します。
  
 
<pre><div class="navigation"><p><?php posts_nav_link('&amp;#8734;','Go  
 
<pre><div class="navigation"><p><?php posts_nav_link('&amp;#8734;','Go  
 
Forward In Time','Go Back in Time'); ?></p></div></pre>
 
Forward In Time','Go Back in Time'); ?></p></div></pre>
  
And it might look like this:
+
これは以下のように表示します。
  
 
<div style="border:1px solid blue; width:50%; margin:20px; padding:20px; font-size:120%; font-variant:small-caps; font-weight: bold">[[#The posts_nav_link|Go Forward in Time]]  &#8734; [[#The posts_nav_link|Go Back in Time]]</div>
 
<div style="border:1px solid blue; width:50%; margin:20px; padding:20px; font-size:120%; font-variant:small-caps; font-weight: bold">[[#The posts_nav_link|Go Forward in Time]]  &#8734; [[#The posts_nav_link|Go Back in Time]]</div>
  
Let's not stop there, let's add more [[Fun_Character_Entities|character entities]] to really get the visitor's attention so they understand that there is more to your site than what they see on this page.
+
これで終わりではありません。さらに [[:en:Fun_Character_Entities|character entities]] を追加して訪問者の注意を引きつけ、このページで見ている以上のものがある、ということを知ってもらいましょう。
  
 
<pre><div class="navigation"><p><?php posts_nav_link('&amp;#8734;','&amp;laquo;&amp;laquo; Go Forward  
 
<pre><div class="navigation"><p><?php posts_nav_link('&amp;#8734;','&amp;laquo;&amp;laquo; Go Forward  
 
In Time','Go Back in Time &amp;raquo;&amp;raquo;'); ?></p></div></pre>
 
In Time','Go Back in Time &amp;raquo;&amp;raquo;'); ?></p></div></pre>
  
And it might look like this:
+
これは以下のように表示します。
  
 
<div style="border:1px solid blue; width:50%; margin:20px; padding:20px; font-size:120%; font-variant:small-caps; font-weight: bold">[[#The posts_nav_link|&laquo;&laquo; Go Forward in Time]]  &#8734; [[#The posts_nav_link|Go Back in Time &raquo;&raquo;]]</div>
 
<div style="border:1px solid blue; width:50%; margin:20px; padding:20px; font-size:120%; font-variant:small-caps; font-weight: bold">[[#The posts_nav_link|&laquo;&laquo; Go Forward in Time]]  &#8734; [[#The posts_nav_link|Go Back in Time &raquo;&raquo;]]</div>
  
We have just uncovered the surface, but you can let your imagination and web page design skills create these any way you like, adding borders, background images, stylized text, and more.
+
一部を解説したに過ぎませんが、想像力とウェブデザインスキルを働かせることで、これらを好きなように作成し、枠線や背景画像やスタイル化されたテキスト等を追加できます。
  
 +
<div id="The_Next and Previous Posts">
 
=The Next and Previous Posts=
 
=The Next and Previous Posts=
The other set of navigational aids for moving through your site control the '''next post''' and '''previous post''' links typically found at the bottom of your single/permalink post, such as any single post or article you have published on your site. These direct the user to move to the next or previous post in chronological order.
+
</div>
 +
サイト内移動をコントロールする助けとなるもう1つの組は、'''next post''' '''previous post''' リンクです。典型的には、サイトで公開した個別投稿や記事等の、個別投稿/パーマリンク投稿の下部で見つかります。これらのリンクにより、訪問者は時系列順に次または前に移動します。
  
The template tags are [[Template_Tags/previous_post|previous_post()]] and [[Template_Tags/next_post|next_post()]]
+
テンプレートタグは [[テンプレートタグ/previous_post|previous_post()]] [[テンプレートタグ/next_post|next_post()]] です。
  
 
<div style="border:1px solid red; padding:10px;">
 
<div style="border:1px solid red; padding:10px;">
'''Warning : Does not work on 2.0.4. Use the alternative links --> [http://codex.wordpress.org/Template_Tags/previous_post_link previous_post_link] and [http://codex.wordpress.org/Template_Tags/next_post_link next_post_link].'''
+
'''警告 : バージョン 2.0.4 では動作しません。別のリンク[http://codex.wordpress.org/Template_Tags/previous_post_link previous_post_link] [http://codex.wordpress.org/Template_Tags/next_post_link next_post_link] を使用ししてください。 '''
  
Remark : previous_post and next_post seem to be working on WP2.3.
+
Remark : previous_post next_post WP2.3 では動作するようです。
 
</div>
 
</div>
  
 
+
これらのタグのデフォルトの使い方は以下のとおりです。
The default usage of these tags are:
+
  
 
  <?php previous_post(); ?>    <?php next_post(); ?>
 
  <?php previous_post(); ?>    <?php next_post(); ?>
  
And it looks like this:
+
これは以下のように表示します。
  
 
<div style="border:1px solid blue; width:80%; padding:10px">[[#The Next and Previous Posts|previous post: A Story for One and All]]&nbsp;&nbsp;&nbsp;&nbsp;[[#The Next and Previous Posts|next post: A Story for Only One]]</div>
 
<div style="border:1px solid blue; width:80%; padding:10px">[[#The Next and Previous Posts|previous post: A Story for One and All]]&nbsp;&nbsp;&nbsp;&nbsp;[[#The Next and Previous Posts|next post: A Story for Only One]]</div>
  
The parameters for both of these tags are:
+
これらのタグのパラメータは以下のとおりです。
  
;format : Text used in combination with the '%' to represent the permalink to the post. The default is the permalink.
+
;format : '%' と併用するテキストは、投稿のパーマリンクを示します。デフォルトはパーマリンクです。
;text : Text displayed before the permalink.  The default is "next post" and "previous post".
+
;text : パーマリンクの前に表示されるテキストです。デフォルトは "次の投稿へ" "前の投稿へ" です。
;title : This turns "on" and "off" the use of the post title to be used as the link text. By default, is it "yes".  If set to "no", then only the text set in the ''text'' parameter and ''format'' would show.
+
;title : 投稿タイトルをリンクテキストとして使用するかを "on" "off" で指定します。デフォルトは "yes" です。"no" に設定すると、''text'' パラメータと ''format'' で設定したテキストのみが表示されます。
 +
試してみましょう。
  
Let's put these into action.
+
以下の例は、次/前の投稿タイトルと訪問者が選ぶ方向を強調する [[:en:Fun_Character_Entities|矢印]] を表示します。''text'' パラメータを設定していない場合は、空白になることに気づくでしょう。
 
+
The following example displays the next and previous post titles with [[Fun_Character_Entities|arrows]] to emphasis the direction the user may choose. You will notice that we have not set the ''text'' parameter, so it will be blank.
+
  
 
<pre><?php previous_post('&amp;laquo; &amp;laquo; %', '', 'yes'); ?>
 
<pre><?php previous_post('&amp;laquo; &amp;laquo; %', '', 'yes'); ?>
82行目: 84行目:
 
<div style="border:1px solid blue; width:80%; margin:20px; padding:20px">[[#The Next and Previous Posts|&laquo; &laquo; A Story for One and All]]&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;[[#The Next and Previous Posts|A Story for One &raquo; &raquo;]]</div>
 
<div style="border:1px solid blue; width:80%; margin:20px; padding:20px">[[#The Next and Previous Posts|&laquo; &laquo; A Story for One and All]]&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;[[#The Next and Previous Posts|A Story for One &raquo; &raquo;]]</div>
  
Wrap these two tags with CSS and you can do even more with these tags:
+
これら2つのタグを CSS で括ると、さらに多くのことができます。
  
 
<pre><div class="navigation">
 
<pre><div class="navigation">
95行目: 97行目:
 
</div> <!-- end navigation --></pre>
 
</div> <!-- end navigation --></pre>
  
And it might look like this:
+
これは以下のように表示します。
  
 
<div style="border:1px solid blue; width:90%; margin:20px; padding:20px; font-size:120%; font-variant:small-caps; font-weight: bold">[[#The Next and Previous Posts|&laquo; &laquo; Toward the Past: A Story for One and All]]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[[#The Next and Previous Posts|Toward the Future: A Story for One &raquo; &raquo;]]</div>
 
<div style="border:1px solid blue; width:90%; margin:20px; padding:20px; font-size:120%; font-variant:small-caps; font-weight: bold">[[#The Next and Previous Posts|&laquo; &laquo; Toward the Past: A Story for One and All]]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[[#The Next and Previous Posts|Toward the Future: A Story for One &raquo; &raquo;]]</div>
  
A useful plugin called "[http://wordpress.org/extend/plugins/better-nearby-posts-links/ Better Adjacent Post Links]" allows you to trim the title of the previous and next posts to any length you see fit. This is useful when you have longer titles that break the site's design.
+
"[http://wordpress.org/extend/plugins/better-nearby-posts-links/ Better Adjacent Post Links]" という便利なプラグインを使用すると、前/次の投稿のタイトルを切り取って、好きな長さにすることができます。サイトのデザインに影響するような長いタイトルを使っているときに便利です。
  
This is just an introduction on how to use these tags and do fun things with them, but you can do so much more by adding borders, background images, interesting fonts and colors - it's up to you!  Have fun!
+
これは、これらのタグを使用し、楽しむ方法のイントロに過ぎません。枠線や背景画像、面白いフォントや色を追加することができます。これは貴方しだいです。楽しんでください。
  
 +
<div id="The_Next_and_Previous_Pages">
 
=The Next and Previous Pages=
 
=The Next and Previous Pages=
 +
</div>
  
The [http://codex.wordpress.org/Template_Tags/previous_post_link previous_post_link] and [http://codex.wordpress.org/Template_Tags/next_post_link next_post_link] functions don't work on pages. The [http://wordpress.org/extend/plugins/next-page/ Next Page plugin] works around this problem.
+
[http://codex.wordpress.org/Template_Tags/previous_post_link previous_post_link] [http://codex.wordpress.org/Template_Tags/next_post_link next_post_link] 関数はページでは動作しません。この問題については、[http://wordpress.org/extend/plugins/next-page/ Next Page plugin] が解決します。
  
If you would prefer to add the code to your theme's page template instead:
+
テーマのページテンプレートにコードを追加したい場合は、以下のようにします。
  
 
<pre><?php
 
<pre><?php
136行目: 140行目:
 
</div><!-- .navigation --></pre>
 
</div><!-- .navigation --></pre>
  
== Resources ==
+
<div id="Resources">
 +
== 外部資料 ==
 +
</div>
 
* [http://www.ericmmartin.com/conditional-pagepost-navigation-links-in-wordpress-redux/ Conditional page/post navigation links]
 
* [http://www.ericmmartin.com/conditional-pagepost-navigation-links-in-wordpress-redux/ Conditional page/post navigation links]
  

2009年12月20日 (日) 14:12時点における版

この項目「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 の表示は、以下のとおりです。

« 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($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最新版との差分

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