WordPress:Next and Previous Links

来自站长百科
Seadragon530讨论 | 贡献2008年4月14日 (一) 14:36的版本
跳转至: 导航、​ 搜索


The Next and Previous post links guide your visitor through your WordPress site. When it comes to creating strong site-wide navigation, some of the most powerful tools for moving your visitor around are these link tags.

下一个上一个文章连接可以指导访问者浏览整个WordPress站点。当开始建立全站导航的时候,一些可以引导访问者浏览全站的强有力的工具就是连接标签。

There are two sets of tags that move the visitor through your WordPress site: posts_nav_link(), which displays both the Previous and Next links, and the combination pair of previous_post() and next_post(), which each display one of the Previous or Next links. This article will look at how these two tag sets work.

有两组标签可以引导访问者浏览WordPress站点:posts_nav_link(),可以显示下一个上一个的连接,还有上一篇()下一篇()的组合,每个显示的是下一个上一个连接的其中一个。本文就是关于这两组标签如何工作的。

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 posts_nav_link(). This tag creates two links at the bottom of the page within the WordPress Loop to display the next and previous pages in chronological order.

文章导航连接

这些站点导航连接中的第一组被设置成只能在non-single/non-permalink的网页上使用,如分类、文档、搜索和索引。它是模板标签文章导航连接()。这种标签在页面底部的WordPress 循环中创建了两个连接,按时间顺序显示下一个上一个页面。

By default, the posts_nav_link looks like this:

[[WordPress:#The posts_nav_link|« Previous Page]] — [[WordPress:#The posts_nav_link|Next Page »]]

默认情况下,posts_nav_link是这样的:

[[WordPress:#The posts_nav_link|« Previous Page]] — [[WordPress:#The posts_nav_link|Next Page »]]

It is often found in a paragraph code or a division like this:

<div class="navigation"><p><?php posts_nav_link(); ?></p></div>

通常可以在这样一段代码或者层中找到:

<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'); ?>

标签的参数如下

<?php posts_nav_link('separator','prelabel','nextlabel'); ?>

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 using CSS. Let's go farther and also change the content within the tag's parameters.

我们可以只使用CSS改变标签结果的外观,来让问题简单化。让我们更深入一些,同时改变标签参数的内容吧。

Next, make the text bold and use the font-variant: small-caps to make it look interesting, and then make the separator the infinity symbol and add some words to the labels.

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

接下来,使用font-variant: small-caps把文本变成黑体,这样看起来生动一些,

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


And it might look like this:

[[WordPress:#The posts_nav_link|Go Back in Time]] ∞ [[WordPress:#The posts_nav_link|Go Forward in Time]]

显示结果如下:

[[WordPress:#The posts_nav_link|Go Back in Time]] ∞ [[WordPress:#The posts_nav_link|Go Forward in Time]]

Let's not stop there, let's add more 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.

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

不要停下,让我们再加入更多的文字实体来真正的抓住访问者的注意力,这样他们就会了解到你的站点上有比看到的东西更多的内容。

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

And it might look like this:

[[WordPress:#The posts_nav_link|« « Go Back in Time]] ∞ [[WordPress:#The posts_nav_link|Go Forward in Time » »]]

显示结果如下:

[[WordPress:#The posts_nav_link|« « Go Back in Time]] ∞ [[WordPress:#The posts_nav_link|Go Forward in Time » »]]

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.

我们才刚刚接触到表面,你可以使用你的想象力和网页设计技能创造任何你想要的效果,加入边线、背景图片、各种样式的文本等等

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.

The 上一个和下一个文章

另外一组浏览整个站点的导航控制了上一篇下一篇连接,尤其是可以在你的single/permalink文章底部找到,如你在站点上发布的单一的文章或者文档。这些可以按照时间顺序指导使用者跳转到上一或下一篇文章。

The template tags are previous_post() and next_post().

Warning : Does not work on 2.0.4. Use the alternative links --> previous_post_link and next_post_link.

Remark : previous_post and next_post seem to be working on WP2.3.

模板标签是previous_post()next_post()

警告 : 在2.0.4版本中无法使用. 使用替代连接--> previous_post_link and next_post_link.

注意 : previous_post 和 next_post 可能可以在 WP2.3版本中使用.

The default usage of these tags are:

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

And it looks like this:

[[WordPress:#The Next and Previous Posts|previous post: A Story for One and All]]    [[WordPress:#The Next and Previous Posts|next post: A Story for Only One]]

默认的标签是:

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

显示结果如下:

[[WordPress:#The Next and Previous Posts|上一页: A Story for One and All]]    [[WordPress:#The Next and Previous Posts|下一页: A Story for Only One]]

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.
text
Text displayed before the permalink. The default is "next post" and "previous post".
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.

Let's put these into action.

这些标签的参数如下:

format
使用的文本按照'%'组合,以保证permalink能在文章上显示出来。默认的是permalink。
text
在permalink前显示的文本. 默认的是"下一篇" 和 "上一篇".
title
这个可以改变为"on"或者是"off",文章的标题文本可以用于连接。默认情况下, 是"yes". 如果设置成"no", 则只有在textformat 参数中设置的文本才会被显示。

让我们开始看实例。

The following example displays the next and previous post titles with 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.

<?php previous_post('&laquo; &laquo; %', '', 'yes'); ?>
| <?php next_post('% &raquo; &raquo; ', '', 'yes'); ?>
[[WordPress:#The Next and Previous Posts|« « A Story for One and All]]    |    [[WordPress:#The Next and Previous Posts|A Story for One » »]]

下面的例子显示出带有 箭头的下一个和上一个文章题目,来强调使用者可以选择的方向。有会发现我们没有设置text参数,所以它显示为空白。

<?php previous_post('&laquo; &laquo; %', '', 'yes'); ?>
| <?php next_post('% &raquo; &raquo; ', '', 'yes'); ?>
[[WordPress:#The Next and Previous Posts|« « A Story for One and All]]    |    [[WordPress:#The Next and Previous Posts|A Story for One » »]]

Wrap these two tags with CSS and you can do even more with these tags:

<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 -->

使用如下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 -->

And it might look like this:

[[WordPress:#The Next and Previous Posts|« « Toward the Past: A Story for One and All]]       [[WordPress:#The Next and Previous Posts|Toward the Future: A Story for One » »]]

显示结果如下:

[[WordPress:#The Next and Previous Posts|« « Toward the Past: A Story for One and All]]       [[WordPress:#The Next and Previous Posts|Toward the Future: A Story for One » »]]

A useful plugin called "Better Nearby Posts 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.

一个有用的插件叫做"Better Nearby Posts 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!

这只是一个关于如何使用这些标签,如何使用它们做些有趣的事,当然你可以做更多的事,通过添加边线、背景图片、有趣的字体和颜色-这都取决于你,玩的开心!

This article is [[WordPress::Category:Copyedits|marked]] as in need of editing. You can help Codex by editing it.