站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
▼
建站程序
开发
服务器
办公软件
开发教程
▼
服务器教程
软件使用教程
运营教程
热门电子书
▼
CSS教程
WordPress教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
热点词条
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
WordPress:Next and Previous Links
”
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
Xxf3325
(
讨论
|
贡献
)
2008年4月10日 (四) 09:25的版本
(新页面: __FORCETOC__ The '''Next''' and '''Previous''' post links guide your visitor through your WordPress site. When it comes to creating [[WordPress:Good_Navigation_Links|strong site-wide na...)
(差异) ←上一版本 |
最后版本
(
差异
) |
下一版本→
(
差异
)
跳转至:
导航
、
搜索
警告:您正在编辑的是本页面的旧版本。
如果您发布该更改,该版本后的所有更改都会丢失。
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
__FORCETOC__ The '''Next''' and '''Previous''' post links guide your visitor through your WordPress site. When it comes to creating [[WordPress:Good_Navigation_Links|strong site-wide navigation]], some of the most powerful tools for moving your visitor around are these link tags. 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. = 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 [[WordPress:Template_Tags/posts_nav_link|posts_nav_link()]]. This tag creates two links at the bottom of the page within the [[WordPress:The_Loop|WordPress Loop]] to display the '''next''' and '''previous''' pages in chronological order. By default, the <tt>posts_nav_link</tt> looks like this: <div style="border:1px solid blue; width:50%; margin:20px; padding:20px">[[WordPress:#The posts_nav_link|« Previous Page]] — [[WordPress:#The posts_nav_link|Next Page »]]</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> The parameters of the tag are as follows: <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. Keeping things simple, we could just change the look of the tag results [[WordPress:Blog_Design_and_Layout|using CSS]]. Let's go farther and also change the content within the tag's parameters. 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 [[WordPress:Fun_Character_Entities|infinity symbol]] and add some words to the labels. <pre><div class="navigation"><p><?php posts_nav_link('&#8734;','Go Back In Time','Go Forward 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">[[WordPress:#The posts_nav_link|Go Back in Time]] ∞ [[WordPress:#The posts_nav_link|Go Forward in Time]]</div> Let's not stop there, let's add more [[WordPress: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. <pre><div class="navigation"><p><?php posts_nav_link('&#8734;','&laquo; &laquo; Go Back In Time','Go Forward in Time &raquo; &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">[[WordPress:#The posts_nav_link|« « Go Back in Time]] ∞ [[WordPress:#The posts_nav_link|Go Forward in Time » »]]</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. =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 template tags are [[WordPress:Template_Tags/previous_post|previous_post()]] and [[WordPress:Template_Tags/next_post|next_post()]]. <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].''' Remark : previous_post and next_post seem to be working on WP2.3. </div> The default usage of these tags are: <?php previous_post(); ?> <?php next_post(); ?> And it looks like this: <div style="border:1px solid blue; width:80%; padding:10px">[[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]]</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. ;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. The following example displays the next and previous post titles with [[WordPress: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('&laquo; &laquo; %', '', 'yes'); ?> | <?php next_post('% &raquo; &raquo; ', '', 'yes'); ?></pre> <div style="border:1px solid blue; width:80%; margin:20px; padding:20px">[[WordPress:#The Next and Previous Posts|« « A Story for One and All]] | [[WordPress:#The Next and Previous Posts|A Story for One » »]]</div> Wrap these two tags with CSS and you can do even more with these tags: <pre><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 --></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">[[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 » »]]</div> A useful plugin called "[http://www.italyisfalling.com/wordpress-plugins-better-nearby-posts-links/ 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. 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! {{Copyedit}}
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)
本页使用的模板:
模板:Copyedit
(
编辑
)