WordPress:Styling Page-Links

来自站长百科
跳转至: 导航、​ 搜索



Did you know you could split a single post up into different web pages? Using the Next-Page Quicktag from the Write Post Panel, you can break a single post up into different web pages. Called the Page-link tag, place your cursor in the spot where you want a page break to appear in your post and click the Next-Page Quicktag. You can use it throughout a long post to make two, three, four, or more pages out of the single post. In your Post Editing textarea, it will looks like:

你知道你可以将一篇文章分成几个不同的网页吗?使用编写文章面板中的下一个网页Quicktag,你可以将一篇文章分成几个不同的网页。调用网页链接标签,将你的鼠标指针放到你想要分割文章的位置,并且点击下一个网页 Quicktag。你可以在一篇很长的文章中使用这种方法,并且将一篇文章分成两个,三个,四个,或者更多的网页。在你的文章编辑文本区,这看起来像:

<!--nextpage-->

<!--nextpage-->

When you view your post on your site, the multi-page links appear as links at the bottom of the generated post and usually look like:

当你在站点上访问文章的时候,多个网页链接在产生的文章的底部以链接的形式出现,通常看起来像:

Page 1, 2, 3
Page 1, 2, 3

Did you know you could customize these page links? 你知道你可以自定义这些网页链接吗?

Examining the Page-Links Tag[ ]

查看网页链接标签[ ]

The default look for the page-links is shown above. The web page you are on isn't highlighted as a link but shown as a solid number. If you do only a few multi-page posts, this might be all you need to have the reader continue reading the pages in sequence.

网页链接的默认外观在上面显示了。你所在的网页没有作为链接,而是作为solid number显示。如果你只有几篇拥有多个网页的文章,你可能需要这个,使得读者继续按顺序阅读网页。

There are two template tags that may be used to style your page-links tag. The link_pages() and wp_link_pages() template tags. The link_pages() tag uses strings in quotes as parameters and the wp_link_pages() uses boolean phrases as parameters. Both do basically the same thing.

有两个模板标签,可以用来设计网页链接标签。link_pages()wp_link_pages()模板标签。link_pages()标签在引用中使用字符串作为参数而且wp_link_pages()使用boolean phrases作为参数。两个基本上是相同的。

The default usage, shown above, for the wp_link_pages() tag is:

wp_link_pages()标签的默认用法,如上显示,是:

<?php wp_link_pages(); ?>
<?php wp_link_pages(); ?>

The parameters we'll be working with for the template tag are:

我们处理模板标签的参数是:

  • before: Text to put before all the links. Defaults to <p>Pages:.
  • after: Text to put after all the links. Defaults to </p>.
  • next_or_number: Indicates whether page numbers should be used. Valid values are number (Default) and next
  • nextpagelink: Text for link to next page. Defaults to Next page.
  • previouspagelink: (string) Text for link to previous page. Defaults to Previous page.
  • pagelink: Format string for page numbers. The  % in the parameter string will be replaced with the page number, so Page % generates "Page 1", "Page 2", etc. Defaults to %, just the page number.

You've seen the default look. Let's play with some other possibilities.



  • before: 放置在所有链接之前的文本。默认为<p>Pages:.
  • after: 放置在所有链接之后的文本。默认为</p>.
  • next_or_number: 暗示是否应该使用网页页码。有效的参数值是number (默认) 和 next
  • nextpagelink: 链接到下一个网页的链接文本。默认为Next page.
  • previouspagelink: (string) 链接到上一个网页的链接文本。默认为Previous page.
  • pagelink: 网页页码的格式字符串。参数字符串中的  % 会由网页页码所取代,因此 Page % 产生 "Page 1", "Page 2", 等等。默认为%,只是网页页码。

你已经看到了默认外观。让我们处理一些其它外观内容。

Changing the Look of Page-Links[ ]

更改网页链接的外观[ ]

By default, the page-links are in an HTML paragraph tag. Add a WordPress:CSS class to the DIV section surrounding the paragraph tag and you have even more control over the look of the page-link tag.

默认情况下,网页链接是在HTML段落标签中。向包围段落标签的DIV部分添加CSS class,你更能够控制网页链接标签的外观。

The following use of the tag adds a DIV tag before and after the page-links, shows the word "Page" next to each page number, and when you are in the middle of the page order you will see the page number instead of the word "next", and lists the pages as shown below.

使用下面的标签在网页链接的前后分别添加一个DIV标签,在每个网页页面旁边显示单词"网页",而且当你在很多网页的中间次序的时候,你会使用网页页码,而不是单词"下一个",而且如下所示,列出网页。

<div class="pagelink"><?php wp_link_pages('pagelink=Page %'); ?></div>
<div class="pagelink"><?php wp_link_pages('pagelink=Page %'); ?></div>

Let's give our style class "pagelink" a green color and italics: 让我们将样式类别"pagelink"设置为绿色斜体:

Page 1 Page 2 Page 3
Page 1 Page 2 Page 3

Want to have more fun? Let's design these so they do more than just tell the reader "page 1".

想要更有趣?我们设计这些,这样就不止会通知用户"网页 1"

<?php link_pages('To read this story, ', '. ', 
'next', ' or you can read on to the next page', 
'you can go back to the previous page'); ?> 
<?php link_pages('阅读这个故事, ', '. ', 
'next', '或者你可以继续阅读下一个网页', 
'你可以返回到上一页'); ?> 

If you were on page three of four pages, it might look like this: 如果你在四个网页中的第三页上,可能看起来像:

To read this story, [[WordPress:#Changing the Look of Page-Links|you can go back to the previous page]] [[WordPress:#Changing the Look of Page-Links|or you can read on to the next page]].


阅读这个故事,[[WordPress:#Changing the Look of Page-Links|你可以返回到上一页]] [[WordPress:#Changing the Look of Page-Links|或者你可以继续阅读下一页]]。


Using the link_pages() you can add a extended character or character entity to replace the next and previous for an interesting look. Let's add the double right arrow » and double left arrow«.

使用link_pages(),你可以添加扩展的字符或者字符实体,来替换下一个上一个,产生有趣的外观。让我们添加两个右箭头»和两个左箭头«。

<?php link_pages('<p>Pages: ', '</p>', 'next', ' &raquo;', '&laquo; '); ?>
<?php link_pages('<p>Pages: ', '</p>', 'next', ' &raquo;', '&laquo; '); ?>

And it might look like: 可能看起来像:

Pages: «  »
Pages: «  »
Note: You can only use extended characters or HTML character entities with link_pages() because the ampersand required to create the entity is seen by wp_link_pages() as the boolean "and" and the tag will not work. Try using the direct character instead of an entity.
注: 你只可以将扩展的字符或者HTML字符实体link_pages() 一起使用,因为需要的&符号创建的实体, wp_link_pages() 看做是boolean "和" 而且标签也不能够运行。试着使用直接的字符而不是实体。


These are just a few samples and you can use your imagination to create a wide range of different styles and looks for your page links on your site or theme.

有一些样本,你只要发挥你的想象力,为站点或者主题上的网页创建不同的样式和外观。